Spisie treści
Istnieje wiele sposobów na tworzenie tabulacji i akordeonów, ale zdecydowanie jQuery i twój pakiet biblioteczny jQuery UI zapewnić nam najszybszy i najskuteczniejszy sposób realizacji tych elementów.Rzęsy
Zakładki pozwalają nam grupować informacje na naszej stronie według tematów, co pozwala użytkownikom szybko i łatwo uzyskać odpowiednie informacje, po prostu wybierając żądaną zakładkę.
Metoda zakładek ()
Metoda zakładki(options) deklaruje, że element HTML i jego zawartość muszą być wyświetlane w zakładkach, parametrami opcji jest obiekt określający wygląd i zachowanie zakładek.
Metoda zakładki () można używać na dwa sposoby:
• $ (selektor, kontekst) .tabs (opcje)
• $ (selektor, kontekst) .tabs ("akcja", parametry)
Zobaczmy przykład jego realizacji:
- Dołączamy niezbędne pliki, biblioteki jQuery i CSS:
- Tworzymy naszą instancję metody zakładki () i kojarzymy go z selektorem:
- Na koniec w naszym HTML tworzymy treść, która będzie sformatowana w naszych zakładkach, należy wspomnieć, że musi być ona zgodna ze strukturą tagówpotem etykiety
- i wreszcie etykietydla metody identyfikacji każdej zakładki.
- Nunc tincidunt
- Ból mięśniowy
- lacinia enejska
- Dołączamy niezbędne pliki, biblioteki jQuery i CSS:
- Tworzymy naszą instancję metody akordeon () i kojarzymy go z selektorem:
- Na koniec tworzymy nasz kod HTML z poszanowaniem struktury taguogólne, a następnie inne tagiktóre posłużą do identyfikacji każdego bloku.
- Utwórz kontoZarejestruj się ZA DARMO, aby mieć swoje konto SolveticZarejestruj konto
- ZidentyfikowaćMasz już konto? Podpisz tutajZidentyfikuj mnie na moim koncie
- Opublikowany 12 sierpnia 2013 00:54
- Odwiedziny 3,7 tys
- PoziomProfesjonalny
- Jak zaktualizować NPM za pomocą PowerShell w systemie Windows 10?
- Jak przeciągać i pobierać obrazy za pomocą interfejsu użytkownika JQuery
- Jak zrobić ikonę Spinnera lub ładowania za pomocą JQuery
- Jak przetłumaczyć stronę internetową na kilka języków?
Zobaczmy, jak ten przykład wygląda w naszej przeglądarce:
jQuery UI Tabs - domyślna funkcjonalność
Test kart 1.
Morbi tincidunt, dui sit amet facilisis feugiat, wcześniej nienawidzę metus gravida, ut pharetra massa metus id nunc. Duis scelerisque denerwuje turpis. Pragnienie fringilla, massa eget luctus malesuada, metus eros dyskomfort lectus, ut tempus eros massa ut pain. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Facyliza Morbiego. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Convallis Pellentesque. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.
Test zakładkowy 3.
Akordeon
Podobnie jak karty, akordeon organizuje informacje ze szczególnym uwzględnieniem bloków, w których wyświetlane będą tylko informacje z wybranego bloku, podczas gdy inne pozostają ukryte.
Metoda akordeonu ()
Metoda akordeon (opcje) określa, że element HTML i jego zawartość będą zarządzane jako menu typu akordeon. Podobnie jak w przypadku metody tabulacji, opcje określają jej zachowanie i wygląd.
Metoda akordeon () można używać na dwa sposoby:
• $ (selektor, kontekst) .akordeon (opcje)
• $ (selektor, kontekst) .accordion („akcja”, parametry)
Zobaczmy przykład jego realizacji:
Nasz przykład będzie wyglądał w przeglądarce tak:
Czy ten samouczek ci pomógł?
Jeśli niePomóż ulepszyć ten samouczek!
Czy uważasz, że możesz poprawić lub ulepszyć ten samouczek? Możesz wysłać swoje wydanie ze zmianami, które uznasz za przydatne.0 użytkowników edytowało ten samouczek. Edytuj i zostań uznanym ekspertem!
Edytuj ten samouczek
PODOBNE ĆWICZENIA
Jak przeciągać i pobierać obrazy za pomocą interfejsu użytkownika JQueryJak zrobić ikonę Spinnera lub ładowania za pomocą JQueryWtyczki i biblioteki JQuery do tworzenia stron internetowychDynamiczna siatka Flexgrid z JQuery i PHPWyrażenia regularne z JqueryZarządzanie tabelami przestawnymi za pomocą wtyczki Jquery DatatablesZrozumienie AJAX z jQueryFiltry w selektorach z Jquery i CSS3 II
Brak komentarzy, bądź pierwszy!
Nie czekaj dłużej i wejdź do SolveticZostaw swój komentarz i skorzystaj z konta użytkownika Dołącz do nas!Informacja
Najnowsze samouczki JavaScript
