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插件jquery倒计时插件分享
Dec 27 Javascript
JavaSript中变量的作用域闭包的深入理解
May 12 Javascript
使用jquery.form.js实现图片上传的方法
May 05 Javascript
jQuery实现左侧导航模块的显示与隐藏效果
Jul 04 Javascript
探究Vue.js 2.0新增的虚拟DOM
Oct 20 Javascript
模板视图和AngularJS之间冲突的解决方法
Nov 22 Javascript
JavaScript实现的冒泡排序法及统计相邻数交换次数示例
Apr 26 Javascript
Webpack中publicPath路径问题详解
May 03 Javascript
15个顶级开源JavaScript框架和库
Oct 10 Javascript
如何封装了一个vue移动端下拉加载下一页数据的组件
Jan 06 Javascript
Vue使用预渲染代替SSR的方法
Jul 02 Javascript
基于vue+echarts数据可视化大屏展示的实现
Dec 25 Vue.js
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
海贼王:最美的悬赏令!
2020/03/02 日漫
PHP中路径问题的解决方案
2006/10/09 PHP
php 定义404页面的实现代码
2012/11/19 PHP
PHP截断标题且兼容utf8和gb2312编码
2013/09/22 PHP
PHP解析目录路径的3个函数总结
2014/11/18 PHP
JavaScript的面向对象(二)
2006/11/09 Javascript
IE php关于强制下载文件的代码
2008/08/23 Javascript
jQuery.getScript加载同域JS的代码
2012/02/13 Javascript
图解JavaScript中的this关键字
2020/05/28 Javascript
关于动态生成dom绑定事件失效的原因及解决方法
2016/08/06 Javascript
基于JS实现移动端向左滑动出现删除按钮功能
2017/02/22 Javascript
JSONP跨域请求
2017/03/02 Javascript
Angularjs修改密码的实例代码
2017/05/26 Javascript
Node.js简单入门前传
2017/08/21 Javascript
解决jquery appaend元素中id绑定事件失效的问题
2017/09/12 jQuery
webpack4简单入门实例
2018/09/06 Javascript
让webpack+vue-cil项目不再自动打开浏览器的方法
2018/09/27 Javascript
关于NodeJS中的循环引用详解
2019/07/23 NodeJs
微信小程序image图片加载完成监听
2019/08/31 Javascript
node.js实现简单的压缩/解压缩功能示例
2019/11/05 Javascript
jQuery实现鼠标拖拽登录框移动效果
2020/09/13 jQuery
python基于pygame实现响应游戏中事件的方法(附源码)
2015/11/11 Python
python中logging库的使用总结
2017/10/18 Python
对pandas读取中文unicode的csv和添加行标题的方法详解
2018/12/12 Python
Python Matplotlib 基于networkx画关系网络图
2019/07/10 Python
python集合的创建、添加及删除操作示例
2019/10/08 Python
Python中如何将一个类方法变为多个方法
2019/12/30 Python
Python如何优雅删除字符列表空字符及None元素
2020/06/25 Python
C#面试问题
2016/07/29 面试题
行政总经理岗位职责
2013/12/05 职场文书
团日活动策划书
2014/02/01 职场文书
暑期培训班策划方案
2014/08/26 职场文书
商务司机岗位职责
2015/04/10 职场文书
论文致谢词范文
2015/05/14 职场文书
公司仓库管理制度
2015/08/04 职场文书
2016年国陪研修感言
2015/11/18 职场文书