Pushbar.js 介绍
Pushbar.js是一个小巧的JavaScript插件,它可以用于在Web应用程序中创建滑动侧边栏效果,还提供模糊效果,就像开关抽屉的效果。你可以完全定制效果,它不依赖任何第三方库,你可以使用它作为侧栏菜单或者操作选项滑出效果。
1.引入文件
在页面中引入pushbar.js和pushbar.css文件。
<link href="dist/css/pushbar.css" rel="stylesheet">
<script src="js/pushbar.js"></script>
2.html结构
将要滑出的侧边栏部分.pushbar和主体部分.pushbar_main_content分开。
<div data-pushbar-id="mypushbar1" class="pushbar from_left">
Push bar content 1
<button data-pushbar-close>Close</button>
</div>
<div data-pushbar-id="mypushbar2" class="pushbar from_bottom">
Push bar content 2
<button data-pushbar-close>Close</button>
</div>
<div class="pushbar_main_content">
Main content of the page
<button data-pushbar-target="mypushbar1">
Open my pushbar 1
</button>
<button data-pushbar-target="mypushbar2">
Open my pushbar 2
</button>
</div>
Pushbar.js提供四个方向的滑出效果,左侧(from_left)、右侧(from_right)、头部(from_top)、底部(from_bottom),只需修改侧边栏部分的样式就可。
初始化插件
在页面DOM元素加载完毕之后,通过下面的方法来初始化pushbar.js插件。
var pushbar = new Pushbar({
blur:true,
overlay:true,
});
配置参数
Pushbar.js提供两个主要的选项配置,简单实用。
blur:是否在打开侧边栏时主页面带模糊效果。
overlay:是否在打开侧边栏时主页面带遮罩层。
网站地址:https://oncebot.github.io/pushbar.js/
GitHub:https://github.com/oncebot/pushbar.js
网站描述:一个用于在Web应用中创建滑动抽屉的微型javascript插件
Pushbar.js
官方网站:https://oncebot.github.io/pushbar.js/
小编说
以上是编程之家为你收集整理的Pushbar.js全部内容。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。