:: JustUsers.net ::

:: คนทำเว็บ :: => Simple Machines Forum [SMF] => Modification => ข้อความที่เริ่มโดย: LittleCat ที่ 26, ธันวาคม 2008, 07:30:19 PM

หัวข้อ: Spoiler Show & Hide
เริ่มหัวข้อโดย: LittleCat ที่ 26, ธันวาคม 2008, 07:30:19 PM
Spoiler Show & Hide (http://custom.simplemachines.org/mods/index.php?mod=1082)
ม็อดซ่อนข้อความ เหมาะสำหรับบอร์ดที่ต้องการเก็บข้อความเพื่อย่นกระทู้ หรือใส่โค้ดเพลงที่เล่นอัตโนมัติ ที่ ถ้าใครจะฟังก็ค่อยกดมาฟัง  :smiley:

เมื่อดาวน์โหลดไฟล์มาแล้ว ติดตั้งแล้ว ก็ใช้งานได้ทันที
หรือถ้าติดตั้งทางบอร์ดไม่ผ่าน ก็ใช้วิธีทำมือ Mannual

File Edits
./Themes/default/languages/Modifications.english.php
Find (at the end of the file):
โค๊ด: [Select]
?>Add Before:
อ้างถึง
/* Spoiler Show & Hide */
$txt['spoiler_posting'] = 'Spoiler - hide the content';
$txt['spoiler_show'] = 'Show hidden content (spoiler)';
$txt['spoiler_hide'] = 'Hide this content (spoiler)';
/* END Spoiler Show & Hide */

(ส่วนนี้ไปเพิ่มในไฟล์ภาษาไทย แก้ให้เป็นภาษาไทยเองได้)

./Sources/Subs.php
Find:
โค๊ด: [Select]
array(
'tag' => 'white',
'before' => '<span style="color: white;">',
'after' => '</span>',
),
Add After:
อ้างถึง
   /* Spoiler Show & Hide */
   array(
      'tag' => 'spoiler',
      'before' => '<div class="spoiler-wrapper"><div class="smallfont"><input type="button" value="' . $txt['spoiler_show'] . '" onclick="if (this.parentNode.parentNode.getElementsByTagName(\'div\')[1].getElementsByTagName(\'div\')[0].style.display != \'\') { this.parentNode.parentNode.getElementsByTagName(\'div\')[1].getElementsByTagName(\'div\')[0].style.display = \'\';this.innerText = \'\'; this.value = \'' . $txt['spoiler_hide'] . '\'; } else { this.parentNode.parentNode.getElementsByTagName(\'div\')[1].getElementsByTagName(\'div\')[0].style.display = \'none\'; this.innerText = \'\'; this.value = \'' . $txt['spoiler_show'] . '\'; }" /></div><div class="spoiler-content"><div style="display: none;">',
      'after' => '</div></div></div>',
      'block_level' => true,
   ),
   /* END Spoiler Show & Hide */


./Themes/default/Post.template.php
Find:
โค๊ด: [Select]
'hr' => array('code' => 'hr', 'before' => '[hr]', 'description' => $txt[531]),Add Before:
อ้างถึง
   /* Spoiler Show & Hide */
   'spoiler' => array('code' => 'spoiler', 'before' => '[spoiler]', 'after' => '[/spoiler]', 'description' => $txt['spoiler_posting']),
   /* END Spoiler Show & Hide */


และอัพไฟล์ที่อ้างถึง "spoiler.gif (http://www.chongter.com/forum/Themes/default/images/bbc/spoiler.gif)" ไว้ที่ "./Themes/default/images/bbc".

ก็จะได้เช่นนี้
ไอค่อนซ่อนข้อความ
(http://i230.photobucket.com/albums/ee70/chongter_group/Articles/computer/Board/158.jpg)

จะได้โค้ด
โค๊ด: [Select]
[spoiler][/spoiler]
ก่อนคลิ้กเพื่อดู
(http://i230.photobucket.com/albums/ee70/chongter_group/Articles/computer/Board/159.jpg)

หลังคลิ้กเพื่อดู
(http://i230.photobucket.com/albums/ee70/chongter_group/Articles/computer/Board/160.jpg)



เพิ่มการปรับแต่งสีกล่องซ่อนข้อความ

เพิ่มส่วนนี้ที่ไฟล์ style.css ของธีมที่ใช้
โค๊ด: [Select]
/*

BOTON SPOILER

*/
div.spoiler-wrapper {
border:solid 1px #ccc;
padding:4px;
margin:3px;
}
div.spoiler-wrapper input[type=button],div.spoiler-wrapper input[type=submit] {
padding:3px;
margin:3px;
background:#E7F2F8;
border-top:solid 1px #cccccc;
border-left:solid 1px #cccccc;
border-right:solid 1px #666666;
border-bottom:solid 1px #666666;
outline:none;
}
div.spoiler-wrapper input[type=button]:hover,div.spoiler-wrapper input[type=submit]:hover {
padding:3px;
margin:3px;
background:#CDDFE9;
border-top:solid 1px #666666;
border-left:solid 1px #666666;
border-right:solid 1px #cccccc;
border-bottom:solid 1px #cccccc;
}

จากนั้นก็ปรับแต่งสีได้ตามใจชอบ ให้เข้ากับธีมของบอร์ด

จากเดิม
(http://i230.photobucket.com/albums/ee70/chongter_group/Articles/computer/Board/161.jpg)

เพิ่มสคริปปรับสีแล้ว
(http://i230.photobucket.com/albums/ee70/chongter_group/Articles/computer/Board/162.jpg)

นอกเหนือจากนี้ก็สามารถปรับแต่งที่ input[type=button] ได้ ว่าจะเอากล่องซ่อนข้อความรูปแบบไหน



แต่สำหรับคนที่ต้องการซ่อนข้อความสำหรับบุคคลทั่วไป คงต้องลองม็อดตัวนี้ Hide Post (http://custom.simplemachines.org/mods/index.php?mod=228)

Posts can be hidden by the following options:
1. Login: It requires a user to login to see the post.
2. Reply: It requires a user to reply to the topic to see the post.
3. Karma: It requires a user to have a total karma greater than or equal to a specified value to see the post.
4. Posts: It requires a user to have a number of posts greater than or equal to a specified value to see the post.
5. Moderator: It requires a user to be a moderator, global moderator or administrator to see the post.
หัวข้อ: Re: Spoiler Show & Hide
เริ่มหัวข้อโดย: TOMXO ที่ 26, ธันวาคม 2008, 08:32:10 PM
ขอบพระคุณครับท่านเหมียวเล็ก   :adore: