Jquery+slidereveal implementation of the panel sliding side display effect _jquery

We use a jquery plug-in: Slidereveal.js, can be used to control the panel left and right side slip out and hidden effects, project address: Https://github.com/nnattawat/slideReveal.

How to use

First load the jquery library file and the Slidereveal.js plug-in in the page.

Copy Code code as follows:

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

Then place the panel elements such as Div#slider in the body, customize the contents, and place elements such as button or a element that trigger the call panel.

Copy Code code as follows:

<div id= "Slider" class= "Slider" >
Helloweba welcome you!
</div>
<button id= "trigger" class= "trigger" > Expand left </button>

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

Copy Code code as follows:

$ (' #slider '). Slidereveal ({
Trigger: $ ("#trigger")
});

Option settings

By default, the panel slides from the left, and the main page content is pushed to the right, and you can close the panel using the keyboard's ESC key.

Property	Describe	Default value
Width	Integral type, panel width.	250
Push	Boolean, set to True, "push" the page body content to one side when the panel expands, and when set to False, the panel expands above the page body content.	True
Position	String, setting the orientation of the panel to expand the slide, which can be set to left or right	"Left"
Speed	Integral type, panel expansion speed, unit millisecond.	300
Trigger	JQuery Dom Selector, which sets the elements of the page that can trigger the panel to be displayed and hidden, such as $ ("#element")	Not defined
Autoescape	Boolean, setting whether to allow the ESC key of the keyboard to be used to hide the expanded panel.	True
Top	An integral type that sets the distance from the top of the window to the panel.	0
Show	callback function that is called when the panel is expanded.	-
Shown	callback function that is invoked when the panel is expanded.	-
Hide	callback function that is called when the panel is hidden.	-
Show	callback function, called when the panel is hidden.	-

The Slidereveal.js plug-in also provides a method call to expand and hide, with the following code:

Copy Code code as follows:

Expand panel
$ (' #slider '). Slidereveal ("show");
Hide Panel
$ (' #slider '). Slidereveal ("Hide");

The above is to share all the content of this article, the need for small partners to refer to the next bar, I hope to be familiar with the jquery can help.