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 相关文章推荐
tagName的使用,留一笔
Jun 26 Javascript
javascript 学习笔记(八)javascript对象
Apr 12 Javascript
{}与function(){}选用空对象{}来存放keyValue
May 23 Javascript
jquery实现上传文件大小类型的验证例子(推荐)
Jun 25 Javascript
正则表达式,替换所有HTML标签的简单实例
Nov 28 Javascript
js实现本地图片文件拖拽效果
Jul 18 Javascript
vue实现的组件兄弟间通信功能示例
Dec 04 Javascript
JS数组求和的常用方法实例小结
Jan 07 Javascript
浅谈Vue SSR中的Bundle的具有使用
Nov 21 Javascript
vue 使用v-for进行循环的实例代码详解
Feb 19 Javascript
jQuery实现的移动端图片缩放功能组件示例
May 01 jQuery
JS代码实现页面切换效果
Jan 10 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
Mysql的Root密码忘记,查看或修改的解决方法(图文介绍)
2013/06/14 PHP
ThinkPHP表单自动验证实例
2014/10/13 PHP
Thinkphp结合AJAX长轮询实现PC与APP推送详解
2017/07/31 PHP
Jquery升级新版本后选择器的语法问题
2010/06/02 Javascript
jQuery对象[0]是什么含义?
2010/07/31 Javascript
7款吸引人眼球的jQuery/CSS3特效实例分享
2013/04/25 Javascript
js打开新窗口方法整理
2014/02/17 Javascript
js实现最短的XML格式化工具实例
2015/03/12 Javascript
jquery SweetAlert插件实现响应式提示框
2015/08/18 Javascript
js图片轮播特效代码分享
2015/09/07 Javascript
微信小程序 简单DEMO布局,逻辑,样式的练习
2016/11/30 Javascript
JS字符串按逗号和回车分隔的方法
2017/04/25 Javascript
angular4自定义组件非input元素实现ngModel双向数据绑定的方法
2018/12/28 Javascript
从0到1构建vueSSR项目之路由的构建
2019/03/07 Javascript
详解Node.js异步处理的各种写法
2019/06/09 Javascript
Vue中跨域及打包部署到nginx跨域设置方法
2019/08/26 Javascript
js实现简单掷骰子效果
2019/10/24 Javascript
[50:15]VP vs Mineski 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
python实现在遍历列表时,直接对dict元素增加字段的方法
2019/01/15 Python
梅尔频率倒谱系数(mfcc)及Python实现
2019/06/18 Python
django url到views参数传递的实例
2019/07/19 Python
Python中调用其他程序的方式详解
2019/08/06 Python
python中从for循环延申到推导式的具体使用
2019/11/29 Python
python图片剪裁代码(图片按四个点坐标剪裁)
2020/03/10 Python
python中turtle库的简单使用教程
2020/11/11 Python
米兰网婚纱礼服法国网上商店:Milanoo法国
2016/08/20 全球购物
英国儿童鞋和靴子:Start-Rite
2019/05/06 全球购物
美国智能家居专家:tink
2019/06/04 全球购物
美国最大和最受信任的二手轮胎商店:Bestusedtires.com
2020/06/02 全球购物
报关专员求职信范文
2014/02/22 职场文书
省级优秀班集体申报材料
2014/05/25 职场文书
诚实守信道德模范事迹材料
2014/08/15 职场文书
社区公民道德宣传日活动总结
2015/03/23 职场文书
离婚被告答辩状
2015/05/22 职场文书
2016年第二十届“母亲节暨幸福工程救助贫困母亲活动日”活动总结
2016/04/06 职场文书
mybatis使用oracle进行添加数据的方法
2021/04/27 Oracle