สปอยเลอร์เป็นเครื่องมือที่สะดวกสำหรับไซต์ มีการใช้กันอย่างแพร่หลายในฟอรัมและบล็อกต่างๆ ทำให้ผู้ใช้สามารถซ่อนองค์ประกอบเฉพาะในขณะที่กดปุ่มได้ นอกจากนี้ สปอยเลอร์ยังดูดีบนเว็บไซต์และช่วยซ่อนส่วนต่างๆ ที่โหลดหน้าเว็บมากเกินไปโดยไม่จำเป็น
มันจำเป็น
ห้องสมุด Jquery
คำแนะนำ
ขั้นตอนที่ 1
สปอยเลอร์สามารถใช้งานได้โดยใช้ไลบรารีปลั๊กอิน jquery ยอดนิยมที่เขียนในภาษาการเขียนโปรแกรม Java Script มันถูกใช้เพื่อใช้งานการโต้ตอบเต็มรูปแบบของภาษาการเขียนโปรแกรมด้วยโค้ดมาร์กอัป HTML ของหน้า การเชื่อมต่อ jquery ทำได้โดยใช้ HTML โดยใช้แท็ก คุณต้องระบุตำแหน่งที่สคริปต์ตั้งอยู่และตั้งค่าประเภท: $ (เอกสาร).ready (ฟังก์ชัน ()
ขั้นตอนที่ 2
ส่วนของข้อความที่ระบุภายในย่อหน้าหนึ่งจะต้องอยู่ในชั้นที่แยกต่างหาก - div ด้วยความช่วยเหลือซึ่งตัวสปอยเลอร์จะถูกควบคุม: Sasha เดินไปตามทางหลวงและดูดแห้ง
ขั้นตอนที่ 3
ถัดไป คุณต้องสร้างหน้า div ทั้งหมดที่มีชื่อเสียปุ่มที่เกี่ยวข้องซึ่งจะยุบและขยายข้อความ ก่อนอื่น สปอยเลอร์จะถูกซ่อนโดยใช้ฟังก์ชัน "hide ()" มาตรฐาน: $ (“div [name = 'spoil']”) ซ่อน (); ถัดไป คุณต้องสร้างข้อความและรูปภาพสำหรับสปอยเลอร์ทั้งหมด ซึ่งจะใช้เป็นพื้นหลังของปุ่ม: $ (“P [name = 'spoilbutton']”). Html (“แสดงข้อความ”);
ขั้นตอนที่ 4
ค้นหาปุ่มทั้งหมดบนหน้าและตรวจสอบส่วนหัวระดับแรกที่ด้านหน้าปุ่ม ในการดำเนินการนี้ ให้สร้างเงื่อนไขที่จะค้นหาแท็ก h1 ตามชื่อ ข้อความชื่อที่ระบุครอบคลุมใน div เอง: $ (“p [name = 'spoilbutton']”) แต่ละ (ฟังก์ชัน () {If ($ (นี้).prev (นี้).get (0).tagName == “H1”) {Var NewSpoilButton =“”+ $ (นี้).prev (นี้).html () +” แสดงข้อความ”; $ (นี้).prev (นี้).replaceWith (“”); $ (นี้).replaceWith (NewSpoilButton);}})
ขั้นตอนที่ 5
ถัดไป คุณต้องจัดการการคลิกปุ่มเมาส์ด้วยการคลิก หากตรวจพบการคลิก จะสามารถแสดงผลได้: $ (“div [name = 'spoilbutton']”) คลิก (ฟังก์ชัน () {If ($ (นี้).next (นี้).css (“display”) = =” บล็อก”) {
ขั้นตอนที่ 6
แล้วเขียนมรดก ภายใน div ข้อความอยู่ในย่อหน้า p ซึ่งมีเนื้อหาอยู่ในแท็ก span: $ (this).children (“p”) Children (“span”) Html (“แสดงข้อความ”) ยุบ เปิดสปอยล์. ถ้ายังไม่เปิด ให้ขยายข้อความ ขั้นตอนนี้ขึ้นอยู่กับกฎการสืบทอด: $ (นี้).next (นี้).slideUp (“ปกติ”)} else {$ (นี้).children (“p”) Children (“span”) Html (“ซ่อนข้อความ”); $ (นี้).next (นี้).slideDown (“ปกติ”);} คืนค่าเท็จ; })
ขั้นตอนที่ 7
จากนั้นการคลิกเมาส์บนปุ่มจะถูกบันทึกโดยที่สคริปต์จะซ่อนและเปิดเผยสปอยเลอร์ $ (“P [ชื่อ = 'spoilbutton']”) คลิก (ฟังก์ชัน () {หาก ($ (นี้).next (นี้).css ("แสดง") =”block”) {$ (นี้).next (นี้).slideUp (“ปกติ”) $ (นี้).html (“ซ่อน”)} return false;}); พร้อมสปอยเลอร์ จะปรากฏขึ้นเมื่อพบบล็อก DIV ที่ตรงกัน