JQuery + slidereveal: display the Sliding Side of the panel, jqueryslidereveal

JQuery + slidereveal: display the Sliding Side of the panel, jqueryslidereveal

With a jQuery plug-in: slidereveal. js, you can use it to control the sliding out and hiding effects on the left and right sides of the Panel. Project address: https://github.com/nnattawat/slidereveal.

How to Use

First, load the jquery library file and the slidereveal. js plug-in on the page.

Copy codeThe Code is as follows:
<Script src = "jquery. js"> </script>
<Script src = "jquery. slidereveal. min. js"> </script>

Then, place the Panel elements in the body, such as div # slider, with the content customized, and place the elements that trigger the call Panel, such as button or.

Copy codeThe Code is as follows:
<Div id = "slider" class = "slider">
Welcome to Helloweba!
</Div>
<Button id = "trigger" class = "trigger"> Expand on the left </button>

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

Copy codeThe Code is as follows:
$ ('# Slider'). slideReveal ({
Trigger: $ ("# trigger ")
});

Option settings

By default, the Panel slides out from the left and pushes the content of the home page to the right. You can also use the ESC key on the keyboard to close the panel.

Attribute	Description	Default Value
Width	Integer, panel width.	250
Push	Boolean, set to true. When the Panel is expanded, the page body content is pushed to one side. If it is set to false, the Panel is displayed on the page body content.	True
Position	String, set the direction of the Panel to expand and slide, can be set to "left" or "right"	"Left"
Speed	Integer. The display speed of the panel, in milliseconds.	300
Trigger	JQuery DOM selector, used to set page elements that can trigger panel display and hide, such as $ ("# element ")	Undefined
AutoEscape	Boolean: Specifies whether to use the ESC key of the keyboard to hide the expanded panel.	True
Top	Integer. Set the distance between the Panel and the upper part of the window.	0
Show	Callback Function, called when the Panel is expanded.	-
Shown	Callback Function, called when the Panel is expanded.	-
Hide	Callback Function, called when the Panel is hidden.	-
Show	Callback Function, called when the Panel is hidden.	-

The slidereveal. js plug-in also provides method calling for expansion and hiding. The Code is as follows:

Copy codeThe Code is as follows:
// Expand the Panel
$ ('# Slider'). slideReveal ("show ");
// Hide the Panel
$ ('# Slider'). slideReveal ("hide ");

The above is all the content shared in this article. If you need it, please refer to it. I hope you will be familiar with jQuery for some help.