Innholdsfortegnelse
Det er mange måter å lage faner og trekkspill, men definitivt jQuery og bibliotekspakken din jQuery UI gi oss den raskeste og mest effektive måten å implementere disse elementene på.Øyevipper
Fanene lar oss gruppere informasjonen på nettstedet vårt etter emne, slik at brukerne kan få relevant informasjon raskt og enkelt bare ved å velge fanen de vil ha.
Tabs () -metoden
Metoden faner(alternativer) erklærer at et element i HTML -koden og innholdet i den må vises i faner. Parametrene til alternativene er et objekt som spesifiserer utseendet og oppførselen til fanene.
Metoden faner () kan brukes på to måter:
• $ (velger, kontekst) .faner (alternativer)
• $ (velger, kontekst) .tabs ("handling", params)
La oss se et eksempel på implementeringen:
- Vi inkluderer de nødvendige filene, bibliotekene til jQuery og CSS:
- Vi lager vår forekomst av metoden faner () og vi knytter det til en velger:
- Til slutt i HTML -koden vår lager vi innholdet som skal formateres i fanene våre. Det er viktig å nevne at det må overholde taggestrukturenderetter etikettene
- og til slutt etiketterfor metoden for å identifisere hver fane.
- Nunc tincidunt
- Proin smerte
- Aenean lacinia
- Vi inkluderer de nødvendige filene, bibliotekene til jQuery og CSS:
- Vi lager vår forekomst av metoden trekkspill () og vi knytter det til en velger:
- Til slutt lager vi vår HTML som respekterer strukturen til en taggeneral etterfulgt av andre taggersom vil tjene til å identifisere hver blokk.
- Opprett kontoRegistrer deg GRATIS for å ha din Solvetic -kontoRegistrer en konto
- IdentifisereHar du allerede en konto? Logg deg på herIdentifiser meg på kontoen min
- Publisert 12.august 2013 00:54
- Besøk 3,7K
- NivåProfesjonell
- Slik oppdaterer du NPM med PowerShell i Windows 10
- Hvordan dra og ta bilder med JQuery UI
- Hvordan lage et spinner- eller lastingikon med JQuery
- Hvordan få et nettsted oversatt til flere språk
La oss se hvordan dette eksemplet ser ut i nettleseren vår:
jQuery UI -faner - Standardfunksjonalitet
Tab -test 1.
Morbi tincidunt, dui sit amet facilisis feugiat, I hate metus gravida before, ut pharetra massa metus id nunc. Duis scelerisque irriterer turpis. Thirst fringilla, massa eget luctus malesuada, metus eros discomfort lectus, ut tempus eros massa ut pain. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Preses in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequun nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque 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.
Trekkspill
I likhet med fanene, organiserer trekkspillet informasjonen med den særegenheten at den gjør det ved blokker der bare informasjonen til blokken som er valgt vil bli vist mens den andre forblir skjult.
Trekkspillmetoden ()
Metoden trekkspill (alternativer) spesifiserer at et element i HTML-en og innholdet i det vil bli administrert som trekkspill-menyer. I likhet med fanemetoden, vil alternativene spesifisere dens oppførsel og utseende.
Metoden trekkspill () kan brukes på to måter:
• $ (velger, kontekst). Trekkspill (alternativer)
• $ (velger, kontekst). Trekkspill ("handling", params)
La oss se et eksempel på implementeringen:
Vårt eksempel vil se slik ut i nettleseren:
Hjalp denne opplæringen deg?
Hvis ikkeHJELP FORBEDR DENNE VEILEDNINGEN!
Tror du at du kan korrigere eller forbedre denne opplæringen? Du kan sende utgaven din med endringene du anser som nyttige.0 brukere har redigert denne opplæringen. Rediger og bli en anerkjent ekspert!
Rediger denne opplæringen
LIKNE VEILEDNINGER
Hvordan dra og ta bilder med JQuery UIHvordan lage et spinner- eller lastingikon med JQueryJQuery -plugins og biblioteker for webutviklingFlexigrid dynamisk rutenett med JQuery og PHPVanlige uttrykk med JqueryAdministrere pivottabeller med Jquery Datatables -pluginetForstå AJAX med jQueryFiltre i selektorer med Jquery og CSS3 II
Ingen kommentarer, vær den første!
Ikke vent lenger og gå inn på SolveticLegg igjen kommentarene dine og dra nytte av brukerkontoen Bli med!Informasjon
Siste opplæringsprogrammer for JavaScript
