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 相关文章推荐
javascript 一个自定义长度的文本自动换行的函数
Aug 19 Javascript
jquery实现二级导航下拉菜单效果
Dec 18 Javascript
详解微信小程序开发之——wx.showToast(OBJECT)的使用
Jan 18 Javascript
JavaScript 数组去重并统计重复元素出现的次数实例
Dec 14 Javascript
解决bootstrap模态框数据缓存的问题方法
Aug 10 Javascript
关于vue的npm run dev和npm run build的区别介绍
Jan 14 Javascript
微信小程序动画组件使用解析,类似vue,且更强大
Aug 01 Javascript
微信小程序实现多行文字超出部分省略号显示功能
Oct 23 Javascript
浅谈Three.js截图并下载的大坑
Nov 01 Javascript
Vue 数组和对象更新,但是页面没有刷新的解决方式
Nov 09 Javascript
在 Vue 中使用 JSX 及使用它的原因浅析
Feb 10 Javascript
vue 解决uglifyjs-webpack-plugin打包出现报错的问题
Aug 04 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
hadoop常见错误以及处理方法详解
2013/06/19 PHP
Destoon旺旺无法正常显示,点击提示“会员名不存在”的解决办法
2014/06/21 PHP
php判断输入是否是纯数字,英文,汉字的方法
2015/03/05 PHP
php搜索文件程序分享
2015/10/30 PHP
VBScript版代码高亮
2006/06/26 Javascript
Autocomplete Textbox Example javascript实现自动完成成功
2007/08/17 Javascript
基于jquery的模态div层弹出效果
2010/08/21 Javascript
JS使用getComputedStyle()方法获取CSS属性值
2014/04/23 Javascript
让浏览器DOM元素最后加载的js方法
2014/07/29 Javascript
JavaScript中的变量作用域介绍
2014/12/31 Javascript
jquery通过load获取文件的内容并跳到锚点的方法
2015/01/29 Javascript
jquery 插件实现瀑布流图片展示实例
2015/04/03 Javascript
jqTransform美化表单
2015/10/10 Javascript
Bootstrap每天必学之按钮
2015/11/26 Javascript
基于jQuery实现点击列表加载更多效果
2016/05/31 Javascript
Bootstrap实现提示框和弹出框效果
2017/01/11 Javascript
js控制文本框禁止输入特殊字符详解
2017/04/07 Javascript
新版vue-cli模板下本地开发环境使用node服务器跨域的方法
2018/04/03 Javascript
浅谈Javascript常用正则表达式应用
2019/03/08 Javascript
Vue $mount实战之实现消息弹窗组件
2019/04/22 Javascript
vue实现的请求服务器端API接口示例
2019/05/25 Javascript
JS实现提示效果弹出及延迟隐藏的功能
2019/08/26 Javascript
深入了解Vue动态组件和异步组件
2021/01/26 Vue.js
从零学Python之hello world
2014/05/21 Python
Python pickle模块用法实例
2015/04/14 Python
Python实现中一次读取多个值的方法
2018/04/22 Python
Python 读取图片文件为矩阵和保存矩阵为图片的方法
2018/04/27 Python
python smtplib模块自动收发邮件功能(一)
2018/05/22 Python
Python文本文件的合并操作方法代码实例
2020/03/31 Python
使用Python实现批量ping操作方法
2020/05/06 Python
材料专业毕业生求职信
2014/02/26 职场文书
21岁生日感言
2014/02/27 职场文书
三八节标语
2014/06/27 职场文书
护理学院专科毕业生求职信
2014/06/28 职场文书
新闻学专业职业生涯规划范文:我的人生我做主
2014/09/12 职场文书
python解析照片拍摄时间进行图片整理
2022/07/23 Python