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 相关文章推荐
IE event.srcElement和FF event.target 功能比较
Mar 01 Javascript
asp.net+jquery滚动滚动条加载数据的下拉控件
Jun 25 Javascript
js图片轮播特效代码分享
Sep 07 Javascript
jquery+ajax实现注册实时验证实例详解
Dec 08 Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
Dec 08 Javascript
详解用webpack2.0构建vue2.0超详细精简版
Apr 05 Javascript
用vue的双向绑定简单实现一个todo-list的示例代码
Aug 03 Javascript
彻底搞懂JavaScript中的apply和call方法(必看)
Sep 18 Javascript
JS使用canvas中的measureText方法测量字体宽度示例
Feb 02 Javascript
通过npm或yarn自动生成vue组件的方法示例
Feb 12 Javascript
React通过redux-persist持久化数据存储的方法示例
Feb 14 Javascript
javascript 对象 与 prototype 原型用法实例分析
Nov 11 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
仿dedecms下拉分页样式修改的thinkphp分页类实例
2014/10/30 PHP
php中的buffer缓冲区用法分析
2019/05/31 PHP
jQuery Div中加载其他页面的实现代码
2009/02/27 Javascript
jQuery 图像裁剪插件Jcrop的简单使用
2009/05/22 Javascript
ajax处理php返回json数据的实例代码
2013/01/24 Javascript
JS下拉缓冲菜单示例代码
2013/08/30 Javascript
判定是否原生方法的JS代码
2013/11/12 Javascript
JavaScript严格模式禁用With语句的原因
2014/10/20 Javascript
js实现iframe跨页面调用函数的方法
2014/12/13 Javascript
基于javascript、ajax、memcache和PHP实现的简易在线聊天室
2015/02/03 Javascript
JavaScript动态修改弹出窗口大小的方法
2015/04/06 Javascript
使用AngularJS制作一个简单的RSS阅读器的教程
2015/06/18 Javascript
超漂亮的jQuery图片轮播特效
2015/11/24 Javascript
使用PHP+JavaScript将HTML页面转换为图片的实例分享
2016/04/18 Javascript
canvas实现动态小球重叠效果
2017/02/06 Javascript
JS实现汉字与Unicode码相互转换的方法详解
2017/04/28 Javascript
JavaScript引用类型Object常见用法实例分析
2018/08/08 Javascript
Vue动态路由缓存不相互影响的解决办法
2019/02/19 Javascript
详谈Vue.js框架下main.js,App.vue,page/index.vue之间的区别
2020/08/12 Javascript
python类中super()和__init__()的区别
2016/10/18 Python
Django admin美化插件suit使用示例
2017/12/12 Python
Python中sort和sorted函数代码解析
2018/01/25 Python
pandas如何处理缺失值
2019/07/31 Python
python如何获得list或numpy数组中最大元素对应的索引
2020/11/16 Python
公司年会演讲稿范文
2014/01/11 职场文书
化学专业自荐信
2014/05/28 职场文书
改作风抓落实促发展心得体会
2014/09/10 职场文书
安全生产月宣传标语
2014/10/06 职场文书
工伤认定行政答辩状
2015/05/22 职场文书
百家讲坛观后感
2015/06/12 职场文书
2015年中秋晚会主持稿
2015/07/30 职场文书
从贫穷到富有,是知识技能和学习力的差别
2019/08/20 职场文书
Golang 编译成DLL文件的操作
2021/05/06 Golang
一文搞懂Python Sklearn库使用
2021/08/23 Python
vue实力踩坑之push当前页无效
2022/04/10 Vue.js
python turtle绘图
2022/05/04 Python