ดาวน์โหลด SuperSlide.js - SuperSlide.js ซอร์สโค้ดดาวน์โหลดดาวน์โหลด

SuperSlide.js

ข้อมูลเว็บไซต์

1.0.0

ดาวน์โหลด

superslide.js

เมนูเลื่อนที่มีน้ำหนักเบาและกำหนดค่าได้สำหรับ PWA ถัดไปของคุณพร้อมสัญญา เพียง 2k gzipped!

ไลบรารีนี้มีจุดมุ่งหมายเพื่อให้เมนูเลื่อนแบบเลื่อนที่สามารถกำหนดค่าได้สูงสำหรับเว็บแอปพลิเคชันต่อไปของคุณในขณะที่ส่งมอบภาพเคลื่อนไหวเหมือนดั้งเดิม มันถูกสร้างขึ้นโดยเทคโนโลยี OSREC ในขณะที่พัฒนา BX การออกใบแจ้งหนี้การติดตามเวลาและการจัดการโครงการ PWA ของเรา

การติดตั้ง

 npm install superslide.js

การใช้งาน

อ้างอิงไลบรารีในแท็กสคริปต์

 < script src =' superslide.js ' > </ script >

เพิ่มมาร์กอัป HTML พื้นฐาน

 < body >
  < div id =' content ' > Content </ div >
  < div id =' menu ' > Menu </ div >
</ body >

เพิ่มสไตล์ (เพื่อให้เราเห็นว่าเกิดอะไรขึ้น!)

 < style >
  body     { padding: 0px; margin: 0px; }
  #menu    { background: #ccc; }
  #content { min-height: 100vh; min-width: 100vw; }
</ style >

เริ่มต้นเมนู

 var myMenu = new OSREC . superslide
( {
    slider : document . getElementById ( 'menu' ) ,
    content : document . getElementById ( 'content' ) ,
    animation : 'slideLeft'
} ) ;

// Promise resolves once menu is open
var openPromise = myMenu . open ( ) ;

ลองสาธิตที่นี่

ภาพเคลื่อนไหว

เวอร์ชันมาตรฐานมีตัวเลือกภาพเคลื่อนไหว 4 ตัวเลือก:

การเลื่อน	การเลื่อน	การเลื่อน	สไลด์ท็อป

เวอร์ชันมืออาชีพมีแอนิเมชั่นเมนูเพิ่มเติมอีกมากมาย (ตรวจสอบ @ https://osrec.co.uk/products/superslidejs)

พารามิเตอร์

animation ( string ): ภาพเคลื่อนไหวใด ๆ ในไลบรารีแอนิเมชั่น ( slideLeft , slideRight , slideTop , slideBottom )
duration ( integer ): ระยะเวลาเป็นวินาทีสำหรับภาพเคลื่อนไหวสไลด์
allowDrag ( boolean ): อนุญาตให้เมนูถูกลากเข้าไปในตำแหน่งเปิดหรือปิดผ่านเหตุการณ์สัมผัส
slideContent ( boolean ): เลื่อนเนื้อหาพร้อมกับเมนู
allowContentInteraction ( boolean ): อนุญาตให้คลิกเนื้อหาหรือเลื่อนในขณะที่เมนูเปิดอยู่
closeOnBlur ( boolean ): ปิดเมนูเมื่อผู้ใช้คลิกหรือแตะทุกที่นอกเมนู
width ( string ): ความกว้างของเมนู (สำหรับเมนูที่นั่งตามขอบแนวตั้ง) ตัวอย่าง: '60VW' หรือ '300PX' หรือ '80%'
height ( string ): ความสูงของเมนู (สำหรับเมนูที่นั่งตามขอบแนวนอน) ตัวอย่าง: '50VH' หรือ '300PX' หรือ '80%'
dragThreshold ( integer ): จำนวนพิกเซลจากขอบที่ผู้ใช้สามารถเริ่มลากได้ ตัวอย่าง: 70. ใช้กับตัวเลือก AllowDrag
openThreshold ( integer ): เมื่อเมนูอยู่ในตำแหน่งเปิดจำนวนพิกเซลจะต้องถูกลากก่อนที่จะเปิดขึ้นโดยอัตโนมัติ ตัวอย่าง: 30. ใช้กับตัวเลือก AllowDrag
closeThreshold ( integer ): เมื่อเมนูอยู่ในตำแหน่งปิดจำนวนพิกเซลจะต้องถูกลากก่อนที่จะปิดโดยอัตโนมัติ ตัวอย่าง: 20. ใช้กับตัวเลือก AllowDrag
beforeOpen ( callback ): ดำเนินการก่อนที่เมนูจะเริ่มเปิด
onOpen ( callback ): ดำเนินการทันทีหลังจากเปิดเมนู
beforeClose ( callback ): ดำเนินการก่อนที่เมนูจะเริ่มปิด
onClose ( callback ): ดำเนินการทันทีที่เมนูปิด

วิธีการ

OSREC.superslide.open() เปิดเมนู ส่งคืนสัญญาที่แก้ไขได้เมื่อเมนูเปิดขึ้น (เช่นภาพเคลื่อนไหวเสร็จสมบูรณ์)
OSREC.superslide.close() ปิดเมนู ส่งคืนสัญญาที่แก้ไขได้เมื่อเมนูปิด (เช่นภาพเคลื่อนไหวเสร็จสมบูรณ์)
OSREC.superslide.toggle() สลับเมนู ส่งคืนสัญญาที่แก้ไขได้เมื่อเมนูถูกสลับ (เช่นภาพเคลื่อนไหวเสร็จสมบูรณ์)
OSREC.superslide.isOpen() จริงถ้าเมนูเปิดอยู่, เท็จถ้าปิด สถานะสุดท้ายหากกลางตะกรน ส่งคืนบูลีน
OSREC.superslide.ready() ตรวจสอบว่าเมนูนั้นเริ่มต้นอย่างสมบูรณ์หรือไม่ ส่งคืนสัญญาที่แก้ไขเมื่อเริ่มต้นอย่างสมบูรณ์
OSREC.superslide.destroy() ทำลายเมนู นี่จะปิดเมนูหากเปิดก่อนที่จะทำลาย ส่งคืน NULL