Home  >  Article  >  Web Front-end  >  Panel sliding side display effect implemented by jQuery slidereveal_jquery

Panel sliding side display effect implemented by jQuery slidereveal_jquery

WBOY
WBOYOriginal
2016-05-16 16:09:371739browse

We use a jQuery plug-in: slidereveal.js, which can be used to control the left and right sliding out and hiding effects of the panel. Project address: https://github.com/nnattawat/slideReveal.

How to use

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

Copy code The code is as follows:



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

Copy code The code is as follows:


Helloweba welcomes you!


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

Copy code The code is as follows:

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

Option settings

By default, the panel slides out from the left and "pushes" the main page content to the right, and the panel can be closed using the keyboard's "ESC" key.

Properties Description Default value
width Integer type, panel width. 250
push Boolean, set to true, the panel will "push" the main content of the page to one side when expanded. When set to false, the panel will expand above the main content of the page. true
position String, set the direction of panel expansion and sliding, which can be set to "left" or "right" "left"
speed Integer, panel expansion speed, unit: milliseconds. 300
trigger jQuery DOM selector, set page elements that can trigger panel display and hiding, such as $("#element") Undefined
autoEscape Boolean type, sets whether to allow using the ESC key of the keyboard to hide the expanded panel. true
top Integer, sets 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 expansion and hiding method calls. The code is as follows:

Copy code The code is as follows:

//Expand panel
$('#slider').slideReveal("show");
//Hide panel
$('#slider').slideReveal("hide");

The above is all the content shared with you in this article. Friends in need can come and refer to it. I hope it will be helpful for everyone to become familiar with jQuery.

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn