Indholdsfortegnelse
Der er mange måder at lave faner og harmonika på, men bestemt jQuery og din bibliotekspakke jQuery UI give os den hurtigste og mest effektive måde at implementere disse elementer på.Øjenvipper
Fanerne giver os mulighed for at gruppere oplysningerne på vores websted efter emne, hvilket giver brugerne mulighed for hurtigt og nemt at få relevant information ved blot at vælge den fane, de ønsker.
Tabs () -metoden
Metoden faner(optioner) erklærer, at et element i HTML og dets indhold skal vises i faner, parametrene for indstillingerne er et objekt, der angiver fanernes udseende og adfærd.
Metoden faner () kan bruges på to måder:
• $ (vælger, kontekst). Faner (valgmuligheder)
• $ (vælger, kontekst). Faner ("handling", params)
Lad os se et eksempel på dens implementering:
- Vi inkluderer de nødvendige filer, bibliotekerne af jQuery og CSS:
- Vi skaber vores eksempel på metoden faner () og vi forbinder det med en vælger:
- Endelig i vores HTML skaber vi det indhold, der vil blive formateret i vores faner, det er vigtigt at nævne, at det skal overholde tagsstrukturenderefter etiketterne
- og endelig etiketterfor metoden til at identificere hver fane.
- Nunc tincidunt
- Proin smerter
- Ænean lacinia
- Vi inkluderer de nødvendige filer, bibliotekerne af jQuery og CSS:
- Vi skaber vores eksempel på metoden harmonika () og vi forbinder det med en vælger:
- Endelig opretter vi vores HTML, der respekterer strukturen af et taggenerelt efterfulgt af andre mærkerder vil tjene til at identificere hver blok.
- Opret kontoTilmeld dig GRATIS for at få din Solvetic -kontoRegistrer en konto
- IdentificereHar du allerede en konto? Log ind herIdentificer mig på min konto
- Udgivet 12. aug 2013 00:54
- Besøg 3,7K
- NiveauProfessionel
- Sådan opdateres NPM med PowerShell i Windows 10
- Sådan trækker og tager du billeder med JQuery UI
- Sådan laver du et Spinner- eller indlæserikon med JQuery
- Sådan får du oversat et websted til flere sprog
Lad os se, hvordan dette eksempel ser ud i vores browser:
jQuery UI Tabs - Standardfunktionalitet
Fanetest 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. Ænisk aliquet fringilla sem. Suspendisse sed ligula i ligula suscipit aliquam. Præsenteres i eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare som følge af nunc. Ænæisk velmetus. 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.
Tabulatortest 3.
Harmonika
Ligesom fanerne organiserer harmonikaen informationen med det særlige, at den gør det ved blokke, hvor kun informationen om den valgte blok vises, mens de andre forbliver skjulte.
Harmonika () metoden
Metoden harmonika (valgmuligheder) angiver, at et element i HTML-koden og dets indhold vil blive administreret som menuer af harmonika-type. Ligesom fanebladsmetoden angiver indstillingerne dens adfærd og udseende.
Metoden harmonika () kan bruges på to måder:
• $ (vælger, kontekst). Harmonika (valgmuligheder)
• $ (vælger, kontekst). Accordion ("handling", params)
Lad os se et eksempel på dens implementering:
Vores eksempel vil se sådan ud i browseren:
Hjalp denne tutorial dig?
Hvis ikkeHJÆLP FORBEDR DENNE TUTORIAL!
Tror du, at du kan rette eller forbedre denne vejledning? Du kan sende din udgave med de ændringer, du anser for nyttige.0 brugere har redigeret denne vejledning. Rediger og bliv en anerkendt ekspert!
Rediger denne vejledning
LIGNENDE VEJLEDNINGER
Sådan trækkes og fanges billeder med JQuery UISådan laver du et Spinner- eller indlæserikon med JQueryJQuery -plugins og biblioteker til webudviklingFlexigrid dynamisk gitter med JQuery og PHPRegelmæssige udtryk med JqueryHåndtering af pivottabeller med pluginet Jquery DatatablesForståelse af AJAX med jQueryFiltre i selektorer med Jquery og CSS3 II
Ingen kommentarer, vær den første!
Vent ikke længere og indtast SolveticEfterlad dine kommentarer og udnyt brugerkontoen Tilmeld dig!Information
Seneste JavaScript -selvstudier
