未加星标

带模糊效果的隐藏滑动侧边栏插件-Pushbar.js

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二03 | 时间 2018 | 作者 红领巾 ] 0人收藏点击收藏
带模糊效果的隐藏滑动侧边栏插件-Pushbar.js

2018年08月12日 13:26 helloweba.net 作者:月光光 标签:javascript html5 CSS3

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),只需修改侧边栏部分 class="pushbar from_left" 的样式就可。

初始化插件

在页面DOM元素加载完毕之后,通过下面的方法来初始化pushbar.js插件。

var pushbar = new Pushbar({ blur:true, overlay:true, }); 配置参数

Pushbar.js提供两个主要的选项配置,简单实用。

blur :是否在打开侧边栏时主页面带模糊效果。

overlay :是否在打开侧边栏时主页面带遮罩层。

更多有关Pushbar.js的使用请参考Pushbar.js在github上的地址: https://github.com/oncebot/pushbar.js

声明: 本文为原创文章,helloweba.net和作者拥有版权,如需转载,请注明来源于helloweba.net并保留原文链接:https://www.helloweba.net/javascript/577.html

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

tags: pushbar,lt,gt,js,button,Pushbar,div,data,侧边,content,插件,net,class,helloweba
分页:12
转载请注明
本文标题:带模糊效果的隐藏滑动侧边栏插件-Pushbar.js
本站链接:https://www.codesec.net/view/586945.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(41)