侧边滑出弹层插件mSlider.js

2016-08-17 | 8,940浏览 | 1评论 | 标签:mSlide.js

mSlider

2018/07/16更新:

两年前写的插件,最近又用到类似功能,发现许多可改进的地方,所以重写了一版。主要优化了容器结构,添加了px宽度单位的支持、添加了回调功能,添加了遮罩关闭的判断等。因为没依赖jQuery,使用的querySelectorAll作为选择器,可能对pc端低版本浏览器不太友好,更适用于移动端。


侧边菜单相信大家都很熟悉,QQ滴滴都在用,而且用户体验也很好。正好最近项目上有类似需求,而且不仅仅是左侧滑出(如隐藏的菜单),还有底部滑出(像意见反馈之类的弹窗)。我把它作了简单的封装,基本实现了从四个方向的滑窗效果。

用法:

  1. 引入mSlider.js (注:无需引入jQuery库)
  <script src="mSlider.js"></script>
  1. new一个实例:
   var demo = new mSlider({dom: "#xxxx"})
  1. 绑定方法:
    demo.open()

属性:

属性 说明 举例
dom 容器节点(必填) 如:"#xxx" 、 ".xxx"
distance 弹层宽度(选填,默认"60%") 支持:px | % | auto
time 自动关闭时间(选填,默认不关闭) 单位毫秒,如"2000"
direction 弹出方向(选填,默认"left") 支持left、right、top、bottom
maskClose 点击遮罩关闭弹层(选填,默认true)
callback 关闭弹层时回调函数(选填)

方法:

方法名 说明 举例
.open() 打开弹窗 如:xxx.open()
.close() 关闭弹窗 如:xxx.close()

演示DEMO

http://denghao.me/demo/2016/mslider.html

扫描二维码观看,

mSlider_code

由于写得仓促,难免有bug,如你有兴趣请留言,请到github上跟进最新版本。[github地址]

(本篇完。有疑问欢迎留言探讨)

仅有一条评论

  1. inuex

    当内容超过屏幕时,希望能出现滚动条

留言:

*

* (方便回复通知)

打赏
编辑代码 运行结果
退出