jQuery+slidereveal实现的面板滑动侧边展出效果


Posted in Javascript onMarch 14, 2015

我们借助一款jQuery插件:slidereveal.js,可以使用它控制面板左右侧滑出与隐藏等效果,项目地址:https://github.com/nnattawat/slideReveal。

如何使用

首先在页面中加载jquery库文件和slidereveal.js插件。

<script src="jquery.js"></script> 

<script src="jquery.slidereveal.min.js"></script>

然后在body里放置面板元素如div#slider,内容自定,并且放置触发调用面板的元素如button或者a元素。

<div id="slider" class="slider"> 

    Helloweba欢迎您! 

</div> 

<button id="trigger" class="trigger">展开左侧</button>

最后直接调用slidereveal.js插件,代码如下:

$('#slider').slideReveal({ 

  trigger: $("#trigger") 

});

选项设置

默认情况下,面板是从左侧滑出,并且将主页面内容向右“推”,并且可以使用键盘的“ESC”键关闭面板。

属性 描述 默认值
width 整型,面板宽度。 250
push 布尔型,设置为true,面板展开时会将页面主体内容“推”向一侧,设置为false时,面板展开在页面主体内容之上。 true
position 字符串,设置面板展开滑动的方向,可以设置为"left"或"right" "left"
speed 整型,面板展开速度,单位毫秒。 300
trigger jQuery DOM选择器,设置可以触发面板展示和隐藏的页面元素,如$("#element") 未定义
autoEscape 布尔型,设置是否允许使用键盘的ESC键来隐藏已展开的面板。 true
top 整型,设置面板距离窗口上部的距离。 0
show 回调函数,当面板展开时调用。 -
shown 回调函数,当面板展开后调用。 -
hide 回调函数,当面板隐藏时调用。 -
show 回调函数,当面板隐藏后调用。 -

slidereveal.js插件还提供了展开与隐藏的方法调用,代码如下:

//展开面板 

$('#slider').slideReveal("show"); 

//隐藏面板 

$('#slider').slideReveal("hide");

以上就是本文给大家分享的全部内容了,有需要的小伙伴快来参考下吧,希望对大家熟悉jQuery能够有所帮助。

Javascript 相关文章推荐
跨域请求之jQuery的ajax jsonp的使用解惑
Oct 09 Javascript
DIV+CSS+JS不间断横向滚动实现代码
Mar 19 Javascript
jQuery aminate方法定位到页面具体位置
Dec 26 Javascript
js的正则test,match,exec详细解析
Jan 29 Javascript
node.js中的querystring.escape方法使用说明
Dec 10 Javascript
js实现同一页面可多次调用的图片幻灯切换效果
Feb 28 Javascript
深入了解JavaScript中的Symbol的使用方法
Jul 28 Javascript
javascript实现查找数组中最大值方法汇总
Feb 13 Javascript
jQuery基于ID调用指定iframe页面内的方法
Jul 06 Javascript
封装获取dom元素的简单实例
Jul 08 Javascript
Layui 导航默认展开和菜单栏选中高亮设置的方法
Sep 04 Javascript
vue 组件简介
Jul 31 Javascript
jQuery+jRange实现滑动选取数值范围特效
Mar 14 #Javascript
jQuery实现加入购物车飞入动画效果
Mar 14 #Javascript
jQuery插件实现大图全屏图片相册
Mar 14 #Javascript
jQuery实现精美的多级下拉菜单特效
Mar 14 #Javascript
jQuery实现菜单式图片滑动切换
Mar 14 #Javascript
jQuery.Highcharts.js绘制柱状图饼状图曲线图
Mar 14 #Javascript
jQuery实现跨域iframe接口方法调用
Mar 14 #Javascript
You might like
不要轻信 PHP_SELF的安全问题
2009/09/05 PHP
php in_array 函数使用说明与in_array需要注意的地方说明
2010/04/13 PHP
ThinkPHP5.1表单令牌Token失效问题的解决
2019/03/22 PHP
php函数式编程简单示例
2019/08/08 PHP
php抽象方法和普通方法的区别点总结
2019/10/13 PHP
js实现简单的星级选择器提交效果适用于评论等
2013/10/18 Javascript
js类定义函数时用prototype与不用的区别示例介绍
2014/06/10 Javascript
Javascript 运动中Offset的bug解决方案
2014/12/24 Javascript
javascript中setAttribute()函数使用方法及兼容性
2015/07/19 Javascript
Bootstrap每天必学之滚动监听
2016/03/16 Javascript
微信小程序 swiper组件详解及实例代码
2016/10/25 Javascript
8 行 Node.js 代码实现代理服务器
2016/12/05 Javascript
js中数组的常用方法小结
2016/12/30 Javascript
Javascript中构造函数要注意的一些坑
2017/01/23 Javascript
JavaScript拖动层Div代码
2017/03/01 Javascript
jQuery中 DOM节点操作方法大全
2017/10/12 jQuery
vue-cli中安装方法(图文详细步骤)
2018/12/12 Javascript
axios携带cookie配置详解(axios+koa)
2018/12/28 Javascript
js实现无限瀑布流实例方法
2019/09/16 Javascript
vue-以文件流-blob-的形式-下载-导出文件操作
2020/08/07 Javascript
vue封装自定义指令之动态显示title操作(溢出显示,不溢出不显示)
2020/11/12 Javascript
python连接sql server乱码的解决方法
2013/01/28 Python
Python实现的视频播放器功能完整示例
2018/02/01 Python
pandas dataframe的合并实现(append, merge, concat)
2019/06/24 Python
Python实现字符串中某个字母的替代功能
2019/10/21 Python
Html5游戏开发之乒乓Ping Pong游戏示例(一)
2013/01/21 HTML / CSS
客户经理岗位职责
2013/12/08 职场文书
学生出入校管理制度
2014/01/16 职场文书
女子职高个人自荐书
2014/02/01 职场文书
总会计师岗位职责
2014/02/19 职场文书
《可爱的动物》教学反思
2014/02/22 职场文书
暑假学习心得体会
2014/09/02 职场文书
Python3 多线程(连接池)操作MySQL插入数据
2021/06/09 Python
Python办公自动化之教你用Python批量识别发票并录入到Excel表格中
2021/06/26 Python
Vue.js中v-bind指令的用法介绍
2022/03/13 Vue.js
SpringBoot详解自定义Stater的应用
2022/07/15 Java/Android