[Guide]JS WIZ for ahmeng xledoo 6.1
สืบเนื่องจากกระทุ้นี้ : http://www.cazdesign.com/forums/thread-3088-1-1.htmlตัว discuzrequest เป็น gbk ทำให้เวลา import มาไม่สามารถใช้งาน js wiz ได้ ถึงแปลเป็น utf8 ก้อใช้ไม่ไ่ด้อยู่ดีต้องทำการ manual JS wiz ด้วยตนเอง
เดโมด้านล่าง
จะเริ่มจากทำตรง What new ก่อนนะครับ ดูโค้ดตามเลยแระกัน
{eval request('threads_digest3_left');}<div style="width:272px;height:170px;float:left;background:url(images/xledoo/bg_r1.gif) no-repeat; ">
<div style="width:258px;height:88px;margin:2px auto 6px auto;">
<a href="{link}"><img src="{imgattach}" alt="{subject_full}" width="258" height="88"></a>
</div>
<div style="margin:auto;padding-top:6px;width:250px;height:60px;"> <!--content-->
<div class="htopicex">
[{forum}] {subject}
</div>
<div class="hposter">Author : {author}</div>
<div style="font-size:11px;color:#858585;line-height:23px;">{message}</div>
</div>
</div>{eval request('threads_digest3_right');}<div style="width:272px;height:170px;float:right;background:url(images/xledoo/bg_r1.gif) no-repeat;">
<div style="width:258px;height:88px;margin:2px auto 6px auto; overflow:hidden">
<a href="{link}"><img src="{imgattach}" alt="{subject_full}" width="258" height="88"></a>
</div>
<div style="margin:auto;padding-top:6px;width:250px;height:60px;"> <!--content-->
<div class="htopicex">
[{forum}] {subject}
</div>
<div class="hposter">Author : {author}</div>
<div style="font-size:11px;color:#858585;line-height:23px;">{message}</div>
</div>
</div>{eval request('threads_digest1_left');}<div style="width:272px;height:75px;background:#F0F2F2 url(images/xledoo/bg_icon.gif) no-repeat 197px 1px; margin-bottom:10px;">
<div style="float:left;width:185px;height:65px;padding:4px 9px 0 7px;overflow:hidden;">
<div class="htopic">[{forum}] {subject}</div>
<div class="hposter">oster : {author}</div>
<div class="hdesc">{message}</div>
</div>
<div style="float:left;width:63px;height:63px;margin-top:6px;"><a href="{link}" title="{subjectall}"><img src="{imgattach}" alt="{subject_full}" width="63" height="63"></a></div>
</div>{eval request('threads_digest1_right');}<div style="width:272px;height:75px;background:#F0F2F2 url(images/xledoo/bg_icon.gif) no-repeat 197px 1px; margin-bottom:10px;">
<div style="float:left;width:185px;height:65px;padding:4px 9px 0 7px;overflow:hidden;">
<div class="htopic">[{forum}] {subject}</div>
<div class="hposter">oster : {author}</div>
<div class="hdesc">{message}</div>
</div>
<div style="float:left;width:63px;height:63px;margin-top:6px;"><a href="{link}" title="{subject_full}"><img src="{imgattach}" alt="{subject_full}" width="63" height="63"></a></div>
</div>ต่อไปตรงกระทู้ล่าสุด
ใช้โค้ดตัวเดียวกันทั้ง 4 เลยครับแตกต่างตรงผู้ตั้งกระทู้กับคนตอบกระทู้
CSS
<style type="text/css">
html {overflow:hidden;}
body {font-size:12px;color:#555;font-family:Tahoma, Arial, Verdana, serif;margin:0;padding:0;background-color:#FFF;}
img {border-width:0px;}
img.inline {vertical-align:middle;}
a:link, a:visited, a:active {text-decoration:none;color:#000;background-color:inherit;}
a:hover {text-decoration:none;color:#465584;background-color:inherit;}
.time {font-size:10px;color:#a0a0a0;background-color:inherit;}
#ptabcontentstyle {border-top:1px solid #84c7e4;width:545px;margin:0;padding:5px 0 0 10px;}
.tabcontent {display:none;}
.pshadetabs {padding:5px 0 3px 0;margin:2px 0 0 10px;color:#1E81B0;list-style-type:none;text-align:left;}
.pshadetabs li {display:inline;margin-right:6px; }
.pshadetabs li a {text-decoration:none;border:1px solid #84c7e4;color:#1E81B0;padding:4px 7px 3px 7px;}
.pshadetabs li a:visited {font-weight:bold;color:#1E81B0;}
.pshadetabs li a:hover {text-decoration:none;color:#1E81B0;}
.pshadetabs li.selected {position:relative;}
.pshadetabs li.selected a {border-bottom-color:#f6f5f0;color:#1E81B0;font-weight:bold;}
.pshadetabs li.selected a:hover {text-decoration:none;}
.replylist2 {width:550px;height:31px;line-height:30px;border-bottom:1px solid #d8e7ea;clear:both; }
.replyava {width:26px;height:31px;float:left;margin-left:10px;}
.imgc {width:25px;height:25px;margin:3px auto 0 auto;overflow:hidden;}
.avaimg {width:100%;height:100%; }
.replyc2 {width:350px;height:24px;overflow:hidden;float:left;}
.replyc2 a:link,.replyc2 a:visited,.replyc2 a:active{color:#566C75;background-color:inherit;}
.replyc2 a:hover {color:#465584;font-weight:bold;background-color:inherit;}
.replyu2 {float:left;overflow:hidden;width:65px;height:24px;text-align:center;margin-left:5px; }
.replyu2 a:link,.replyu a:visited {width:65px;height:24px;text-decoration:none;color:#858585;text-align:center; }
.replyd2 {width:92px;font-size:11px;color:#858585;background-color:inherit;float:left;line-height:30px;margin-left:30px; }
.replyt {width:225px;background-color:#666;color:#FFF;float:left; }
.replym {width:auto;height:21px;border-bottom:2px solid #c7e0ef;line-height:20px;background-color:inherit;clear:both; }
.replylist {width:550px;height:22px;line-height:24px;border-bottom:1px solid #d8e7ea;clear:both; }
.replyc {width:330px;height:26px;overflow:hidden;float:left;}
.replyc a:link,.replyc a:visited,.replyc a:active{color:#566C75;}
.replyc a:hover {color:#465584;font-weight:bold;}
.replyu {float:left;overflow:hidden;width:70px;height:24px;text-align:center;margin-left:10px; }
.replyu a:link,.replyu a:visited {width:70px;height:24px;text-decoration:none;color:#858585;text-align:center; }
.replyd {width:92px;font-size:11px;color:#858585;background-color:inherit;float:left;line-height:20px;margin-left:30px; }
.replyutext {width:50px;font-size:12px;color:#5392A3;background-color:inherit;float:left;line-height:23px;text-align:center; }
.replydtext {width:50px;font-size:12px;color:#5392A3;background-color:inherit;float:left;line-height:23px;text-align:center;margin-left:55px; }
.hreplyc {width:320px;height:24px;overflow:hidden;float:left;}
.hreplyc a:link, .hreplyc a:visited, .hreplyc a:active {color:#566C75;padding-left:25px;background:transparent url("{IMGDIR}/i_hotpost.gif") no-repeat 1px 0;}
.hreplyc a:hover {padding-left:8px;color:#465584;font-weight:bold;padding-left:25px;background:transparent url("{IMGDIR}/i_hotpost.gif") no-repeat 2px 1px;}
</style>
{eval request('threads_hothread');}
{eval request('threads_newreply');}
{eval request('threads_newthread');}
{eval request('threads_rule');}<tr>
<td>
<div class="replylist2">
<div class="replyc2">[{forum}]{subject}</div>
<div class="replyu2">{author}</div>
<div class="replyd2">{dateline}</div>
</div>
</td>
</tr>ต่อไปตรงแสดงสมาชิกดีเด่น
{eval request('memberrank_memberlist');}<ul class="imginfolist">
<li>{avatarsmall}<p>{member}</p></li>
</ul>
ต่อไปตรงกระทู้แนะนำด้านขวามือ
{eval request('threads_digest2');}<div class="activitys">
<div style="float:left;width:93px;">
<a href="{link}">
<img src="{imgattach}" style="border:0;margin:4px 0 0 5px;" alt="{subject_full}" width="82" height="82"></a>
</div>
<div style="float:left;width:165px;margin:5px 0 0 6px;">
<div class="actopic">[{forum}]{subject}</div>
<div class="time">{dateline}</div>
<div class="actdesc">{message}</div>
<div class="more" style="margin-top:5px;"><a href="{link}">Read more</a></div>
</div>
</div>
<div class="pbottom"></div>เป็นอันจบการทำ js wiz สำหรับสกินนี้
ปล.ผมไม่เอาตัวที่ทำแล้วมาให้โหลดนะครับเพราะมานต้องเข้าไปตั้งค่าเฉพาะของแต่ล่ะบอร์ด
ทิ้งท้าย ขอความกรุณาอย่านำสกินนี้ไปใช้เพื่อการค้าหรือแสวงหาผลกำไรนะครับคนทำเค้าตั้งใจทำมาให้ใช้กันฟรีๆ
บวกกับการนั่งแกะ js wiz ให้มานใช้งานได้ใกล้เคียงต้นฉบับไม่ง่ายนะครับ ขอความร่วมมือนิดนึงครับเปิดแชร์โค้ดเพื่อนักพัฒนาครับไม่ซ่อน
[ แก้ไขล่าสุด buachompoox เมื่อ 2008-6-30 11:40 ] อยากได้แบบนี้มานาน :lol ขอเรียนถามนิดหนึ่งครับว่า ต้องเอาไปวางที่ไหนเหรอครับ งง มากมาย
เช่น วางที่ postlist.htm, discuz.htm อะไรประมาณนี้นะครับ รบกวนด้วย:L :L
ตอบกลับโพสของ 3# pie1
ตัวเทมเพลทสกินจะใส่โค้ดดังกล่าวไว้แล้ว ขาดแค่ mod js wiz เท่านั้นครับตอบกลับโพสของ 4# buachompoox
ตรง CSS ต้องทำยังไงครับ ช่วยตอบด้วยคร้บตอบกลับโพสของ 5# CDC
CSS มีอยู่ในสกินอยู่แล้วครับ ผมยกมาให้ดูเป็นตัวอย่างน่ะครับเผื่อสกินอื่ยอยากนำไปใช้บ้างตอบกลับโพสของ 4# buachompoox
ขอบคุณครับ อีกคำถาม ไอ้ {eval request('threads_digest1_right');} right กับ left นี่มันแสดงผลเหมือนกันเหรอครับแล้วที่เป็นส่วน แสดง กระดานตอบล่าสุด กระทู้ล่าสุด กระทู้เด่น กระทู้ร้อน ทำไมมัน ไม่ขึ้นหัวข้างบนให้เลือกครับ ต้องเพิ่มอะไรหรือป่าวครับ
ตอบกลับโพสของ 6# buachompoox
Webboard จะให้โชว์ทำไงครับตอนนี้ ขึ้นแต่หัวข้อใหญ่ ห้วข้อย่อยไม่โชว์เลยตอบกลับโพสของ 8# CDC
มันไม่โชวหัวข้อย่อยครับ ต้อง mod ต่อกันเอานะเกี่ยวกับ JS ดูพื้นฐานได้ตามลิงค์ครับไม่ขอกล่าว
http://www.cazdesign.com/forums/viewthread.php?tid=874&extra=page%3D1%26amp%3Bfilter%3Dtype%26amp%3Btypeid%3D23
http://www.cazdesign.com/forums/thread-2940-1-1.html งง บอกได้คำเดียวว่างงครับผมม
หน้า:
[1]
2