jQuery+slidereveal implementation of the panel sliding side display effect

. We use 1 jQuery plug-in: slidereveal js, can use it to control panel about side effects, such as hidden, the address of the project: https: / / github com/nnattawat/slideReveal.

How to use

Start by loading the jquery library file and the slidereveal.js plug-in on the page.

<script src="jquery.js"></script> 

<script src="jquery.slidereveal.min.js"></script> 

Then place the panel element such as div#slider in body, content customization, and place the element that triggers the call to the panel such as button or a.

<div id="slider" class="slider"> 

    Helloweba Welcome you!  

</div> 

<button id="trigger" class="trigger"> On the left side of the </button> 

Finally, directly call the slidereveal.js plug-in. The code is as follows:

$('#slider').slideReveal({ 

  trigger: $("#trigger") 

}); 

Option is set

By default, the panel slides out from the left and "pushes" the main page content to the right, and you can close the panel using the "ESC" key on the keyboard.

属性	描述	默认值
width	整型，面板宽度。	250
push	布尔型，设置为true，面板展开时会将页面主体内容“推”向1侧，设置为false时，面板展开在页面主体内容之上。	true
position	字符串，设置面板展开滑动的方向，可以设置为"left"或"right"	"left"
speed	整型，面板展开速度，单位毫秒。	300
trigger	jQuery DOM选择器，设置可以触发面板展示和隐藏的页面元素，如$("#element")	未定义
autoEscape	布尔型，设置是否允许使用键盘的ESC键来隐藏已展开的面板。	true
top	整型，设置面板距离窗口上部的距离。	0
show	回调函数，当面板展开时调用。	-
shown	回调函数，当面板展开后调用。	-
hide	回调函数，当面板隐藏时调用。	-
show	回调函数，当面板隐藏后调用。	-

The slidereveal.js plug-in also provides expanded and hidden method calls as follows:

// A panel  

$('#slider').slideReveal("show"); 

// Hidden panel  

$('#slider').slideReveal("hide"); 

The above is the entire content of this article for everyone to share, if you need to come to the reference, I hope to help you get familiar with jQuery.