Effet d'affichage latéral coulissant du panneau implémenté par jQuery slidereveal_jquery

Nous utilisons un plug-in jQuery : slidereveal.js, qui peut être utilisé pour contrôler les effets de glissement et de masquage gauche et droit du panneau. Adresse du projet : https://github.com/nnattawat/. slideRévéler.

Comment utiliser

Chargez d'abord le fichier de la bibliothèque jquery et le plug-in slidereveal.js dans la page.

Copier le code Le code est le suivant :

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

Placez ensuite un élément de panneau tel que div#slider dans le corps, avec un contenu personnalisé, et placez un élément qui déclenche l'appel du panneau, tel qu'un bouton ou un élément.

Copier le code Le code est le suivant :

<div id="slider" class="slider"> Helloweba vous souhaite la bienvenue !

</div> <button id="trigger" class="trigger">Développer à gauche</button>


Enfin, appelez directement le plug-in slidereveal.js, le code est le suivant :

Copier le code

Le code est le suivant : $('#slider').slideReveal({ déclencheur : $("#trigger") });

Paramètres des options

Par défaut, le panneau glisse depuis la gauche et « pousse » le contenu de la page principale vers la droite, et le panneau peut être fermé à l'aide de la touche « ESC » du clavier.

Propriétés	Description	Valeur par défaut
largeur	Type entier, largeur du panneau.	250
appuyer	Booléen, défini sur true, le panneau « poussera » le contenu principal de la page d'un côté une fois développé. Lorsqu'il est défini sur false, le panneau s'étendra au-dessus du contenu principal de la page.	vrai
poste	Chaîne, définissez la direction d'expansion et de glissement du panneau, qui peut être réglée sur "gauche" ou "droite"	"gauche"
vitesse	Entier, vitesse d'expansion du panneau, unité : millisecondes.	300
déclencheur	Sélecteur DOM jQuery, définissez les éléments de page qui peuvent déclencher l'affichage et le masquage du panneau, tels que $("#element")	Indéfini
évasion automatique	Type booléen, définit s'il faut autoriser l'utilisation de la touche ESC du clavier pour masquer le panneau développé.	vrai
haut	Entier, définit la distance entre le panneau et la partie supérieure de la fenêtre.	0
afficher	Fonction de rappel, appelée lorsque le panneau est développé.	-
montré	Fonction de rappel, appelée lorsque le panneau est développé.	-
cacher	Fonction de rappel, appelée lorsque le panneau est masqué.	-
afficher	Fonction de rappel, appelée lorsque le panneau est masqué.	-

Le plug-in slidereveal.js fournit également des appels de méthodes d'expansion et de masquage. Le code est le suivant :

Copier le code Le code est le suivant :

//Agrandir le panneau
$('#slider').slideReveal("show");
//Masquer le panneau
$('#slider').slideReveal("masquer");

Ce qui précède est tout le contenu partagé avec vous dans cet article. Les amis dans le besoin peuvent venir s'y référer. J'espère qu'il sera utile à tout le monde de se familiariser avec jQuery.