รหัส JavaScript มีดังนี้:
$ (เอกสาร) .ready (function () {$ (". message_list .message_body: gt (0)"). ซ่อน (); $ (". message_list li: gt (4)"). ซ่อน (); $ (". message_head") คลิก ข้อความ $ (". collpase_all_message") คลิก (function () {$ (". message_body") Slideup (500) ส่งคืน false;}); Li: gt (4) "). slidown () return false;}); // แสดงเฉพาะข้อความล่าสุด $ (". show_recent_only ") คลิก (ฟังก์ชั่น () {$ (นี้) .hide () $ (". show_all_message ");ส่วนหนึ่งของรหัสของ CSS มีดังนี้:
* {มาร์จิ้น: 0; Padding: 0; } ร่างกาย {มาร์จิ้น: 10px auto; ความกว้าง: 570px; แบบอักษร: 75%/120% Arial, Helvetica, Sans-Serif; } p {padding: 0 0 1EM; } .message_list {list-style: none; มาร์จิ้น: 0; Padding: 0; ความกว้าง: 383px; } .message_list li {padding: 0; มาร์จิ้น: 0; ความเป็นมา: URL (รูปภาพ/message-bar.gif) ไม่มีการทำซ้ำ; } .message_head {padding: 5px 10px; เคอร์เซอร์: ตัวชี้; ตำแหน่ง: ญาติ; } .message_head .timestamp {color: #666666; ขนาดฟอนต์: 95%; ตำแหน่ง: สัมบูรณ์; ขวา: 10px; ด้านบน: 5px; } .message_head อ้างอิง {ตัวอักษรขนาด: 100%; Font-Weight: ตัวหนา; สไตล์ฟอนต์: ปกติ; } .message_body {padding: 5px 10px 15px; } .collapse_buttons {text-allign: ขวา; Border-Top: Solid 1px #e4e4e4; Padding: 5px 0; ความกว้าง: 383px; } .collapse_buttons a {margin-left: 15px; ลอย: ขวา; } .SHOW_ALL_MESSAGE {พื้นหลัง: URL (รูปภาพ/สูงลง-ลง arrow.gif) ศูนย์ขวาที่ไม่ทำซ้ำ; Padding-Right: 12px; } .show_recent_only {display: none; ความเป็นมา: URL (รูปภาพ/tall-up-arrow.gif) ศูนย์กลางที่ไม่ทำซ้ำ Padding-Right: 12px; } .CollPase_ALL_MESSAGE {พื้นหลัง: URL (รูปภาพ/การล่มสลาย-all.gif) ศูนย์ขวาที่ไม่ทำซ้ำ Padding-Right: 12px; สี: #666666;}เพิ่มรหัสลงใน HTML ดังนี้:
<ol> <li> <p> <cite> Zhang San: </cite> <span> 1 นาทีที่ผ่านมา </span> </p> <div> <p> สวัสดี <br/> <br/> นี่คือข้อความสุดท้าย </p> </div> </li> <li> <p> <cite> li si: </cite> </div> </li> <li> <p> <cite> wang wu: </cite> <span> 1 วันที่ผ่านมา </span> </p> <div> <p> ครั้งแรก </p> </li> <li> <p> <cit> li si: </cite> <pan> <pan> <p> <cite> wang wu: </cite> </cite> </cite> </li> <li> <p> <cite> wang wu: </cite> </cite> </cite> </li> <li> <p> <cite> ที่ผ่านมา </span> </p> <div> <p> รองรับ </p> </div> </li> <li> <p> <cite> li si: </cite> <span> 5 วันที่ผ่านมา </pan> </p> <div> <p> สวัสดีทุกคน </p> <div> <p> สวัสดีทุกคน </p> </div> </li> <li> <p> <cite> li si: </cite> <span> 7 วันที่ผ่านมา </pan> </p> <div> <p> นี่เป็นสิ่งที่ดี </p> </div> </li> <li> <p> <p> <cite> Place </p> </div> </li> </ol> <p> <a href = "#"> แสดงข้อความทั้งหมด (9) </a> <a href = "#"> แสดงข้อความเพียงห้าข้อความ </a> <a href = "#"> ยุบข้อความทั้งหมด </a> </p>
ดาวน์โหลดเคส