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 ）：菜单关闭后立即执行