JQuery UI - Onglets et accordéons

Table des matières
Il existe de nombreuses façons de faire des tablatures et des accordéons, mais certainement jQuery et votre forfait bibliothèque Interface utilisateur jQuery nous fournir le moyen le plus rapide et le plus efficace de mettre en œuvre ces éléments.
Cils
Les onglets nous permettent de regrouper les informations sur notre site Web par sujet, ce qui permet aux utilisateurs d'obtenir des informations pertinentes rapidement et facilement en sélectionnant simplement l'onglet qu'ils souhaitent.
La méthode tabs()
La méthode onglets(options) déclare qu'un élément du HTML et son contenu doivent être affichés dans des onglets, les paramètres des options sont un objet qui spécifie l'apparence et le comportement des onglets.
La méthode onglets () peut être utilisé de deux manières :
• $ (sélecteur, contexte) .tabs (options)
• $ (sélecteur, contexte) .tabs ("action", paramètres)
Voyons un exemple de sa mise en œuvre :
  • Nous incluons les fichiers nécessaires, les bibliothèques de jQuery et les CSS:




  • Nous créons notre instance de la méthode onglets () et on l'associe à un sélecteur :

  • Enfin dans notre HTML nous créons le contenu qui sera mis en forme dans nos onglets, il est important de mentionner qu'il doit respecter la structure des balisespuis les étiquettes
      et enfin les étiquettespour la méthode d'identification de chaque onglet.
  • Voyons à quoi ressemble cet exemple dans notre navigateur :

    Voici le code complet pour que vous puissiez le tester :



    Onglets jQuery UI - Fonctionnalité par défaut









  • Nunc tincide

  • Douleur profonde

  • Lacinie Énée



  • Test de tabulation 1.




    Morbi tincidunt, dui sit amet facilisis feugiat, je déteste metus gravida avant, ut pharetra massa metus id nunc. Duis scelerisque agace turpis. Soif fringilla, massa eget luctus malesuada, metus eros inconfort lectus, ut tempus eros massa ut douleur. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilité. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Convallis pellentesque. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.




    Test de tabulation 3.






    Accordéon
    Comme les onglets, l'accordéon organise les informations avec la particularité qu'il le fait par blocs dans lesquels seules les informations du bloc qui a été sélectionné seront affichées tandis que les autres restent cachées.
    La méthode accordéon ()
    La méthode accordéon (options) précise qu'un élément du HTML et son contenu seront gérés comme des menus de type accordéon. Comme la méthode tabs, les options spécifieront son comportement et son apparence.
    La méthode accordéon () peut être utilisé de deux manières :
    • $ (sélecteur, contexte) .accordion (options)
    • $ (sélecteur, contexte) .accordion ("action", paramètres)
    Voyons un exemple de sa mise en œuvre :
    • Nous incluons les fichiers nécessaires, les bibliothèques de jQuery et les CSS:
    • Nous créons notre instance de la méthode accordéon () et on l'associe à un sélecteur :


    • Enfin nous créons notre HTML en respectant la structure d'une balisegénéral suivi d'autres balisesqui servira à identifier chaque bloc.

    Notre exemple ressemblera à ceci dans le navigateur :

    Avez-vous aimé et aidé ce tutoriel ?Vous pouvez récompenser l'auteur en appuyant sur ce bouton pour lui donner un point positif

    Ce tutoriel vous a-t-il aidé ?

    Sinon

    AIDEZ A AMÉLIORER CE TUTORIEL !

    Pensez-vous pouvoir corriger ou améliorer ce tutoriel ? Vous pouvez envoyer votre édition avec les modifications que vous jugez utiles.
    0 utilisateurs ont modifié ce tutoriel. Editez et devenez un expert reconnu !
    Modifier ce tutoriel

    TUTORIELS SIMILAIRES


    Comment faire glisser et saisir des images avec JQuery UIComment faire un Spinner ou une icône de chargement avec JQueryPlugins et bibliothèques JQuery pour le développement WebGrille dynamique Flexigrid avec JQuery et PHPExpressions régulières avec JqueryGestion des tableaux croisés dynamiques avec le plugin Jquery DatatablesComprendre AJAX avec jQueryFiltres dans les sélecteurs avec Jquery et CSS3 II

    Sans commentaires, soyez le premier!

    N'attendez plus et entrez dans SolveticLaissez vos commentaires et profitez du compte utilisateur Rejoignez-nous !
    • Créer un compteInscrivez-vous GRATUITEMENT pour avoir votre compte SolveticEnregistrez un compte
    • IdentifierAvez-vous déjà un compte? Se connecter iciIdentifiez-moi dans mon compte

      Information

      • Publié 12 août 2013 00:54
      • Visites 3.7K
      • NiveauProfessionnel

      Derniers tutoriels JavaScript
      • Comment mettre à jour NPM avec PowerShell dans Windows 10
      • Comment faire glisser et saisir des images avec JQuery UI
      • Comment faire un Spinner ou une icône de chargement avec JQuery
      • Comment faire traduire un site web en plusieurs langues
      Voir plus de JavaScript

    Vous contribuerez au développement du site, partager la page avec vos amis

    wave wave wave wave wave