Inhoudsopgave
Er zijn veel manieren om tabbladen en accordeons te maken, maar zeker jQuery en je bibliotheekbundel jQuery-gebruikersinterface bieden ons de snelste en meest efficiënte manier om deze elementen te implementeren.Wimpers
Met de tabbladen kunnen we de informatie op onze website per onderwerp groeperen, zodat gebruikers snel en gemakkelijk relevante informatie kunnen krijgen door gewoon het gewenste tabblad te selecteren.
De tabs () methode
De methode tabbladen(opties) verklaart dat een element van de HTML en de inhoud ervan in tabbladen moet worden weergegeven, de parameters van de opties is een object dat het uiterlijk en het gedrag van de tabbladen specificeert.
De methode tabbladen () kan op twee manieren worden gebruikt:
• $ (kiezer, context) .tabs (opties)
• $ (kiezer, context) .tabs ("actie", parameters)
Laten we een voorbeeld van de implementatie ervan bekijken:
- We voegen de benodigde bestanden, de bibliotheken van jQuery en de CSS:
- We maken onze instantie van de methode tabbladen () en we koppelen het aan een selector:
- Ten slotte creëren we in onze HTML de inhoud die in onze tabbladen wordt opgemaakt, het is belangrijk om te vermelden dat deze moet voldoen aan de tags-structuurdan de labels
- en tot slot labelsvoor de methode om elk tabblad te identificeren.
- Nunc tincidunt
- proin pijn
- Aenean lacinia
- We voegen de benodigde bestanden, de bibliotheken van jQuery en de CSS:
- We maken onze instantie van de methode accordeon () en we koppelen het aan een selector:
- Ten slotte maken we onze HTML met respect voor de structuur van een tagalgemeen gevolgd door andere tagsdat zal dienen om elk blok te identificeren.
- Maak accountMeld u GRATIS aan om uw Solvetic-account te hebbenRegistreer een account
- IdentificerenHeeft u al een account? Meld je hier aanIdentificeer mij in mijn account
- gepubliceerd 12 aug. 2013 00:54
- bezoeken 3.7K
- NiveauProfessioneel
- NPM bijwerken met PowerShell in Windows 10
- Afbeeldingen slepen en pakken met JQuery UI
- Hoe maak je een Spinner of laadpictogram met JQuery
- Hoe een website in meerdere talen te laten vertalen
Laten we eens kijken hoe dit voorbeeld eruitziet in onze browser:
jQuery UI-tabbladen - Standaardfunctionaliteit
Tab-test 1.
Morbi tincidunt, dui sit amet facilisis feugiat, ik haat metus gravida voorheen, ut pharetra massa metus id nunc. Duis scelerisque ergeren turpi's. Dorst fringilla, massa eget luctus malesuada, metus eros ongemak lectus, ut tempus eros massa ut pijn. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilise. 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.
Accordeon
Net als de tabbladen ordent de accordeon de informatie met de bijzonderheid dat hij dit doet in blokken waarin alleen de informatie van het geselecteerde blok wordt weergegeven terwijl de andere verborgen blijven.
De accordeon () methode
De methode accordeon (opties) specificeert dat een element van de HTML en zijn inhoud zal worden beheerd als accordeonachtige menu's. Net als de tabs-methode, specificeren de opties het gedrag en uiterlijk.
De methode accordeon () kan op twee manieren worden gebruikt:
• $ (kiezer, context) .accordeon (opties)
• $ (kiezer, context) .accordeon ("actie", parameters)
Laten we een voorbeeld van de implementatie ervan bekijken:
Ons voorbeeld ziet er in de browser als volgt uit:
Heeft deze tutorial je geholpen?
Als nietHELP DEZE TUTORIAL TE VERBETEREN!
Denk je dat je deze tutorial kunt corrigeren of verbeteren? U kunt uw editie opsturen met de wijzigingen die u nuttig acht.0 gebruikers hebben deze tutorial bewerkt. Bewerk en word een erkende expert!
Deze zelfstudie bewerken
VERGELIJKBARE TUTORIALS
Afbeeldingen slepen en pakken met JQuery UIHoe maak je een Spinner- of laadpictogram met JQueryJQuery-plug-ins en bibliotheken voor webontwikkelingFlexigrid dynamisch raster met JQuery en PHPReguliere expressies met JQueryDraaitabellen beheren met de JQuery Datatables-plug-inAJAX begrijpen met jQueryFilters in selectors met JQuery en CSS3 II
Geen reacties, wees de eerste!
Wacht niet langer en ga naar SolveticLaat uw opmerkingen achter en profiteer van het gebruikersaccount Doe mee!Informatie
Laatste JavaScript-zelfstudies
