侧边滑出弹层插件mSlider.js
2016-08-17 | 9,247浏览 | 1评论 | 标签:mSlide.js
2018/07/16更新:
两年前写的插件,最近又用到类似功能,发现许多可改进的地方,所以重写了一版。主要优化了容器结构,添加了px宽度单位的支持、添加了回调功能,添加了遮罩关闭的判断等。因为没依赖jQuery,使用的querySelectorAll作为选择器,可能对pc端低版本浏览器不太友好,更适用于移动端。
侧边菜单相信大家都很熟悉,QQ滴滴都在用,而且用户体验也很好。正好最近项目上有类似需求,而且不仅仅是左侧滑出(如隐藏的菜单),还有底部滑出(像意见反馈之类的弹窗)。我把它作了简单的封装,基本实现了从四个方向的滑窗效果。
用法:
- 引入mSlider.js (注:无需引入jQuery库)
<script src="mSlider.js"></script>
- new一个实例:
var demo = new mSlider({dom: "#xxxx"})
- 绑定方法:
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
扫描二维码观看,
由于写得仓促,难免有bug,如你有兴趣请留言,请到github上跟进最新版本。[github地址]
(本篇完。有疑问欢迎留言探讨)
热门文章
- 微信小程序“拍照识图”上线(63,758)
- YouTube评论翻译插件《油管评论翻译机》上线了(60,288)
- 基金助手--chrome浏览器插件(45,193)
- 拍照识别彩票结果在线工具(31,943)
- vue+tabs动态组件方案漫谈(26,477)
- 《油管评论翻译机》使用说明书(25,337)
- 网页打印插件Print.js(23,978)
- 自用YouTube抓取评论+翻译工具(23,380)
- YouTube评论导出免费在线工具(18,054)
- px转rem/vw方法小结(17,565)
当内容超过屏幕时,希望能出现滚动条