โฮมเพจ » ออกแบบเว็บไซต์ » Overhang.js - ปลั๊กอิน jQuery สำหรับข้อความแจ้งเตือนแบบเลื่อนลง

    Overhang.js - ปลั๊กอิน jQuery สำหรับข้อความแจ้งเตือนแบบเลื่อนลง

    น่ารำคาญแค่ไหน กล่องการแจ้งเตือน JS เริ่มต้น? พวกเขารู้สึกเหมือนเป็นที่ระลึกจากยุคอดีตดั้งเดิมของการพัฒนาเว็บ.

    ทุกวันนี้เราสามารถทำ ข้อความแจ้งเตือนไม่สร้างความรำคาญ ที่แบ่งปันข้อมูลเดียวกัน แต่ อย่ารบกวนประสบการณ์ของผู้ใช้. และนั่นคือสิ่งที่คุณสามารถทำได้ overhang.js.

    ปลั๊กอิน jQuery ฟรีนี้สามารถ เพิ่มแถบการแจ้งเตือนที่กำหนดเอง หล่นลงมาจากด้านบนของหน้าจอ พวกเขากำลัง วางตำแหน่งผ่าน CSS และ เคลื่อนไหวด้วย JavaScript, เพื่อให้พวกเขาสามารถเลื่อนลงจากจุดคงที่ที่ด้านบน โดยไม่คำนึงถึงความยาวหน้า.

    คุณสามารถสร้างข้อความได้ ปิดอัตโนมัติหลังจากระยะเวลาหนึ่ง, หรือคนอื่น ๆ ที่ ต้องการอินพุตของผู้ใช้.

    ข้อความสามารถ ความสำเร็จของรีเลย์ความล้มเหลวข้อผิดพลาดหรือการแจ้งเตือนแบบง่าย ด้วยข้อมูลเกี่ยวกับผู้ใช้หรือหน้า ข้อความยังสามารถ มีปุ่มใช่ / ไม่ใช่ของตัวเอง เพื่อถามคำถามผู้ใช้เช่นแจ้งเตือน JavaScript.

    มีแม้กระทั่งตัวเลือกในการสร้างการแจ้งเตือนว่า ดร็อปดาวน์ด้วยฟิลด์อินพุต. สิ่งนี้จะสมบูรณ์แบบสำหรับการเลือกใช้อีเมล.

    Overhang.js รองรับเบราว์เซอร์หลักทั้งหมดที่สนับสนุนโดย jQuery และมันก็เป็นเช่นนั้น ขับเคลื่อนโดย jQuery UI สำหรับคุณสมบัติภาพเคลื่อนไหว.

    นอกเหนือจากไลบรารี jQuery & jQuery UI แล้วคุณยังต้อง รวมไฟล์ CSS ที่กำหนดเอง ด้วยปลั๊กอิน คุณสามารถ ผสานสิ่งนี้เข้ากับสไตล์ชีทของเว็บไซต์ของคุณ เพื่อลดคำขอ HTTP.

    ทุกการโทร ที่แขวน () วิธีการสามารถ ใช้พารามิเตอร์จำนวนเท่าใดก็ได้. เหล่านี้คือ เรียกว่า “ตัวเลือก” และพวกเขาให้คุณควบคุมกล่องแจ้งเตือนแต่ละกล่องได้อย่างสมบูรณ์.

    คุณสามารถเปลี่ยน ความเร็วในการเคลื่อนไหว, ระยะเวลา, การทำให้สบาย, และ ขนาดกล่อง / สี, พร้อมกับคุณสมบัติการออกแบบอื่น ๆ.

    นี่คือ ตัวอย่างโค้ด สาธิตวิธีการ สร้างกล่องยืนยัน:

     // คำยืนยันบางอย่าง $ ("body"). overhang (type: "confirm", yesMessage: "ใช่ได้โปรด!", noMessage: "ไม่ขอบคุณ"); 

    คุณสามารถเห็นสิ่งนี้คือ ค่อนข้างเรียบง่าย และมัน ไม่ต้องการรหัส jQuery มาก.

    ไปยัง ดาวน์โหลดสำเนา ของปลั๊กอินคุณสามารถเยี่ยมชม repo บน GitHub ซึ่งคุณสามารถเรียกดูไฟล์ต้นฉบับได้โดยตรง หรือถ้าคุณต้องการ ดูตัวอย่างสดเพิ่มเติม ตรงไปที่เว็บไซต์ Overhang.js.