تنزيل SuperSlide.js - تنزيل رمز المصدر SuperSlide.js

SuperSlide.js

بيانات الموقع

1.0.0

تنزيل

superslide.js

قائمة انزلاق خفيفة الوزن قابلة للتكوين ل PWA التالي مع الوعود. فقط 2K Gzipped!

تهدف هذه المكتبة إلى توفير قائمة انزلاق قابلة للتكوين وجاهزة للاستخدام لتطبيق الويب التالي الخاص بك ، مع تقديم أداء الرسوم المتحركة الشبيهة بالمواد. تم إنشاؤها بواسطة Technologies 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 خيارات الرسوم المتحركة المتاحة:

Slideleft	انقطاع	Slidebottom	Slidetop

يحتوي Pro Prose على العديد من الرسوم المتحركة القائمة (تحقق من ذلك @ 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. استخدم مع خيار السماح.
openThreshold ( integer ): عندما تكون القائمة في الموضع المفتوح ، يجب سحب عدد البكسلات قبل فتحه تلقائيًا ؛ مثال: 30. استخدم مع خيار ALTERDRAG.
closeThreshold ( integer ): عندما تكون القائمة في الموضع المغلق ، يجب أن يتم سحب عدد البكسلات قبل إغلاقه تلقائيًا ؛ مثال: 20. استخدم مع خيار ALTERDRAG.
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() تدمير القائمة. سيغلق هذا القائمة إذا كانت مفتوحة قبل التدمير. يعود فارغة