JQuery-Benutzeroberfläche - Registerkarten und Akkordeons

Es gibt viele Möglichkeiten, Tabs und Akkordeons zu machen, aber definitiv jQuery und Ihr Bibliothekspaket jQuery-Benutzeroberfläche bieten uns den schnellsten und effizientesten Weg, diese Elemente zu implementieren.
Wimpern
Die Registerkarten ermöglichen es uns, die Informationen auf unserer Website nach Themen zu gruppieren, sodass Benutzer schnell und einfach relevante Informationen erhalten, indem sie einfach die gewünschte Registerkarte auswählen.
Die tabs()-Methode
Die Methode Registerkarten(Optionen) deklariert, dass ein Element des HTML und dessen Inhalt in Tabs angezeigt werden müssen, die Parameter der Optionen sind ein Objekt, das das Aussehen und Verhalten der Tabs festlegt.
Die Methode Registerkarten () kann auf zwei Arten verwendet werden:
• $ (Selektor, Kontext) .tabs (Optionen)
• $ (Selektor, Kontext) .tabs ("Aktion", Parameter)
Sehen wir uns ein Beispiel für die Implementierung an:
  • Wir binden die notwendigen Dateien, die Bibliotheken von jQuery und das CSS:




  • Wir erstellen unsere Instanz der Methode Registerkarten () und wir verknüpfen es mit einem Selektor:

  • Schließlich erstellen wir in unserem HTML-Code den Inhalt, der in unseren Registerkarten formatiert wird. Es ist wichtig zu erwähnen, dass er der Tag-Struktur entsprechen mussdann die etiketten
      und schließlich etikettenfür die Methode, um jede Registerkarte zu identifizieren.
  • Sehen wir uns an, wie dieses Beispiel in unserem Browser aussieht:

    Hier ist der vollständige Code, damit Sie ihn testen können:



    jQuery-UI-Registerkarten - Standardfunktionalität









  • Nunc tincidunt

  • Bauchschmerzen

  • Änäische Lacinie



  • Tab-Test 1.




    Morbi tincidunt, dui sit amet facilisis feugiat, ich hasse metus gravida vorher, ut pharetra massa metus id nunc. Duis scelerisque ärgert Turpis. Durst fringilla, massa eget luctus malesuada, metus eros Beschwerden lectus, ut tempus eros massa ut schmerz. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Präsent in eros vestibulum mi adipiscing adipiscing. Morbi-Erleichterung. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellenteske Convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.




    Tab-Test 3.






    Akkordeon
    Wie die Registerkarten organisiert das Akkordeon die Informationen mit der Besonderheit, dass dies in Blöcken geschieht, in denen nur die Informationen des ausgewählten Blocks angezeigt werden, während die anderen verborgen bleiben.
    Die Akkordeon () Methode
    Die Methode Akkordeon (Optionen) gibt an, dass ein HTML-Element und sein Inhalt als Akkordeon-Menüs verwaltet werden. Wie bei der Tabs-Methode legen die Optionen ihr Verhalten und Aussehen fest.
    Die Methode Akkordeon () kann auf zwei Arten verwendet werden:
    • $ (Selektor, Kontext) .accordion (Optionen)
    • $ (Selektor, Kontext) .accordion ("Aktion", Parameter)
    Sehen wir uns ein Beispiel für die Implementierung an:
    • Wir binden die notwendigen Dateien, die Bibliotheken von jQuery und das CSS:
    • Wir erstellen unsere Instanz der Methode Akkordeon () und wir verknüpfen es mit einem Selektor:


    • Schließlich erstellen wir unseren HTML-Code unter Berücksichtigung der Struktur eines Tagsallgemein gefolgt von anderen Tagsdie dazu dienen, jeden Block zu identifizieren.

    Unser Beispiel sieht im Browser so aus:

    Hat dir dieses Tutorial gefallen und geholfen?Sie können den Autor belohnen, indem Sie diesen Knopf drücken, um ihm einen positiven Punkt zu geben

    Hat Ihnen dieses Tutorial geholfen?

    Wenn nicht

    HILFE, DIESES TUTORIAL ZU VERBESSERN!

    Glauben Sie, dass Sie dieses Tutorial korrigieren oder verbessern können? Sie können Ihre Edition mit den Änderungen senden, die Sie für sinnvoll erachten.
    0 Benutzer haben dieses Tutorial bearbeitet. Bearbeiten Sie und werden Sie ein anerkannter Experte!
    Bearbeiten Sie dieses Tutorial

    ÄHNLICHE TUTORIALS


    So ziehen und greifen Sie Bilder mit der JQuery-BenutzeroberflächeSo erstellen Sie ein Spinner- oder Ladesymbol mit JQueryJQuery-Plugins und -Bibliotheken für die WebentwicklungDynamisches Flexigrid-Grid mit JQuery und PHPReguläre Ausdrücke mit JqueryPivot-Tabellen mit dem Jquery Datatables-Plugin verwaltenAJAX mit jQuery verstehenFilter in Selektoren mit Jquery und CSS3 II

    Keine Kommentare, seien Sie der Erste!

    Warten Sie nicht länger und geben Sie Solvetic einHinterlassen Sie Ihre Kommentare und nutzen Sie das Benutzerkonto Machen Sie mit!
    • Benutzerkonto erstellenMelden Sie sich KOSTENLOS an, um Ihr Solvetic-Konto zu habenEinen Account registrieren
    • IdentifizierenHaben Sie bereits ein Konto? Hier anmeldenIdentifizieren Sie mich in meinem Konto

      Information

      • Veröffentlicht 12. August 2013 00:54
      • Besuche 3,7K
      • NiveauFachmann

      Neueste JavaScript-Tutorials
      • So aktualisieren Sie NPM mit PowerShell in Windows 10
      • So ziehen und greifen Sie Bilder mit der JQuery-Benutzeroberfläche
      • So erstellen Sie ein Spinner- oder Ladesymbol mit JQuery
      • Wie man eine Website in mehrere Sprachen übersetzen lässt
      Sehen Sie mehr von JavaScript

    Sie werden die Entwicklung der Website helfen, die Seite mit Ihren Freunden teilen

    wave wave wave wave wave