WEB开发中有时需要在页面上设置一个控制面板,默认是不显示的,当用户有需要时可以通过按钮触发调用面板展示。常见的有页面侧边滑出面板效果。本文将使用jQuery插件并结合实例给大家介绍一下面板滑动展示效果。
我们借助一款jQuery插件:slidereveal.js,可以使用它控制面板左右侧滑出与隐藏等效果,项目地址:https://github.com/nnattawat/slideReveal。
如何使用
首先在页面中加载jquery库文件和slidereveal.js插件。
复制代码 代码如下:
<script src="https://www.jb51.net/jquery.js"></script>
<script src="https://www.jb51.net/jquery.slidereveal.min.js"></script>
然后在body里放置面板元素如div#slider,内容自定,并且放置触发调用面板的元素如button或者a元素。
复制代码 代码如下:
<div>
Helloweba欢迎您!
</div>
<button>展开左侧</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能够有所帮助。
您可能感兴趣的文章: