SuperSlide.js下載SuperSlide.js源代碼下載

SuperSlide.js

網站數據

1.0.0

下載

superslide.js

帶有承諾的下一個PWA的輕巧，可配置的滑動菜單。只有2k Gzz！

該庫旨在為您的下一個Web應用程序提供高度可配置的現成滑動菜單，同時提供類似於本機的動畫性能。它是由Osrec Technologies創建的，同時開發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	slidight	SlideBottom	slidetop

Pro版本包含更多菜單動畫（ @ 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。與AllowDrag選項一起使用。
closeThreshold （ integer ）：當菜單處於封閉位置時，必須在自動關閉之前將其拖動的像素數。示例：20。與允許選項一起使用。
beforeOpen （ callback ）：在菜單開始打開之前執行
onOpen （ callback ）：菜單打開後直接執行
beforeClose （ callback ）：在菜單開始關閉之前執行
onClose （ callback ）：菜單關閉後立即執行