Innehållsförteckning
Det finns många sätt att göra flikar och dragspel men definitivt jQuery och ditt bibliotekspaket jQuery UI ge oss det snabbaste och mest effektiva sättet att implementera dessa element.Ögonfransar
Flikarna tillåter oss att gruppera informationen på vår webbplats efter ämne, vilket gör att användare snabbt och enkelt kan få relevant information genom att välja den flik de vill ha.
Tabs () -metoden
Metoden flikar(optioner) deklarerar att ett element i HTML -koden och dess innehåll måste visas på flikar, parametrarna för alternativen är ett objekt som anger flikarnas utseende och beteende.
Metoden flikar () kan användas på två sätt:
• $ (väljare, sammanhang) .flikar (alternativ)
• $ (väljare, sammanhang) .tabs ("action", params)
Låt oss se ett exempel på dess genomförande:
- Vi inkluderar de nödvändiga filerna, biblioteken för jQuery och den CSS:
- Vi skapar vår instans av metoden flikar () och vi kopplar det till en väljare:
- Slutligen i vår HTML skapar vi innehållet som kommer att formateras i våra flikar, det är viktigt att nämna att det måste följa taggstrukturensedan etiketterna
- och slutligen etiketterför metoden att identifiera varje flik.
- Nunc tincidunt
- Proin smärta
- Aenean lacinia
- Vi inkluderar de nödvändiga filerna, biblioteken för jQuery och den CSS:
- Vi skapar vår instans av metoden dragspel () och vi kopplar det till en väljare:
- Slutligen skapar vi vår HTML som respekterar strukturen för en tagggeneral följt av andra taggarsom kommer att tjäna till att identifiera varje block.
- Skapa kontoRegistrera dig GRATIS för att få ditt Solvetic -kontoRegistrera ett konto
- IdentifieraHar du redan ett konto? Logga in härIdentifiera mig på mitt konto
- Publicerad 12 aug 2013 00:54
- Besök 3,7K
- NivåProfessionell
- Hur man uppdaterar NPM med PowerShell i Windows 10
- Hur man drar och tar bilder med JQuery UI
- Hur man gör en Spinner- eller laddningsikon med JQuery
- Hur man får en webbplats översatt till flera språk
Låt oss se hur det här exemplet ser ut i vår webbläsare:
jQuery UI -flikar - Standardfunktion
Fliktest 1.
Morbi tincidunt, dui sit amet facilisis feugiat, I hate metus gravida before, ut pharetra massa metus id nunc. Duis scelerisque irriterar turpis. Törstfringilla, massa eget luctus malesuada, metus eros discomfort lectus, ut tempus eros massa ut pain. Aenean aliquet fringilla sem. Suspendisse sed ligula i ligula suscipit aliquam. Presenteras i eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare följt av 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.
Fliktest 3.
Dragspel
Precis som flikarna organiserar dragspelet informationen med den särart att det gör det genom block där endast informationen om det valda blocket kommer att visas medan de andra förblir dolda.
Dragspelsmetoden ()
Metoden dragspel (alternativ) anger att ett element i HTML-koden och dess innehåll kommer att hanteras som dragspel-menyer. Precis som flikmetoden kommer alternativen att ange dess beteende och utseende.
Metoden dragspel () kan användas på två sätt:
• $ (väljare, sammanhang). Dragspel (alternativ)
• $ (väljare, sammanhang). Dragspel ("handling", params)
Låt oss se ett exempel på dess genomförande:
Vårt exempel kommer att se ut så här i webbläsaren:
Hjälpte denna handledning dig?
Om inteHJÄLP FÖRBÄTTRA DENNA HANDBOK!
Tror du att du kan korrigera eller förbättra den här självstudien? Du kan skicka din utgåva med de ändringar som du anser vara användbara.0 användare har redigerat den här självstudien. Redigera och bli en erkänd expert!
Redigera denna handledning
Liknande handledning
Hur man drar och tar bilder med JQuery UIHur man gör en Spinner- eller laddningsikon med JQueryJQuery -plugins och bibliotek för webbutvecklingFlexigrid dynamiskt rutnät med JQuery och PHPRegelbundna uttryck med JqueryHantera pivottabeller med pluginet Jquery DatatablesFörstå AJAX med jQueryFilter i väljare med Jquery och CSS3 II
Inga kommentarer, var den första!
Vänta inte längre och gå in på SolveticLämna dina kommentarer och dra nytta av användarkontot Gå med oss!Information
Senaste JavaScript -självstudier
