Zakładki jQuery przewijane są na górę strony przy korzystaniu z opcji FX. To jest najbardziej irytujące, gdy użytkownicy tworzą efekty pokazu slajdów, ponieważ animacje powodują przeskok strony do góry i nie ma sposobu, aby temu zapobiec poprzez typowe środki zwracania fałszywości w celu pokazywania zdarzeń itp. Wygląda na to, że dzieje się to tylko. z opcją FX: tzn. Będzie działał dobrze, ale po nudzie: Po przyklejeniu nosa do kodu źródłowego kart, znalazłem tę linię: show. hide (). RemoveClass (ui-tabs-hide) unikaj migotania w ten sposób Wygląda na to, że wywołanie hide () jest powodując to z jakiegoś powodu. Usunięcie połączenia w celu ukrycia spowoduje zatrzymanie problemu, ale jak sugeruje komentarz, powoduje to migotanie animacji pokazu. (3) komentarz: 1 Zmieniono 7 lat temu przez MiiJaySung OK, po niektórych Googling, Ive natknął się na to: owinąć div, który zawiera zakładki w div o stałej wysokości. komentarz wydaje się działać, a ja myślałem na podobnej zasadzie, że wynikało to z ukrywania obu elementów. Biorąc to pod uwagę, pomocne byłoby udokumentowanie tej ułomności, aby użytkownicy byli świadomi i mogli poradzić sobie z sytuacją, ponieważ czują się najlepiej dla nich. comment: 2 Zmieniono 7 lat temu przez scalvert To nie tylko stało się przy korzystaniu z opcji fx. Im doświadczam tego używając następujących znaczników: selected: vars. userStateSelectedTab, spinner: false, select: function (event, ui) (tabs-loading).show () tabSelected true, load: function (event, ui) var parameters getParameters ) Tabulatory Widget Interakcja z klawiaturą Gdy fokus znajduje się na karcie, dostępne są następujące polecenia klawiszowe: UP LEFT. Przenieś ostrość na poprzednią kartę. Jeśli na pierwszej karcie, przenosi fokus na ostatnią kartę. Aktywuj aktywną kartę po krótkim opóźnieniu. PRAWO W DÓŁ. Przesuń kursor do następnej karty. Jeśli na ostatniej karcie, przenosi fokus do pierwszej karty. Aktywuj aktywną kartę po krótkim opóźnieniu. CTRL UP LEFT. Przenieś fokus do poprzedniej karty. Jeśli na pierwszej karcie, przenosi fokus na ostatnią kartę. Zakładka skoncentrowana musi być ręcznie aktywowana. CTRL DOWN PRAWO. Przenieś fokus do następnej karty. Jeśli na ostatniej karcie, przenosi fokus do pierwszej karty. Zakładka skoncentrowana musi być ręcznie aktywowana. DOM. Przenieś fokus na pierwszą kartę. Aktywuj aktywną kartę po krótkim opóźnieniu. KONIEC. Przenieś fokus na ostatnią kartę. Aktywuj aktywną kartę po krótkim opóźnieniu. CTRL HOME. Przenieś fokus na pierwszą kartę. Zakładka skoncentrowana musi być ręcznie aktywowana. CTRL END. Przenieś fokus na ostatnią kartę. Zakładka skoncentrowana musi być ręcznie aktywowana. PRZESTRZEŃ. Aktywuj panel powiązany z aktywną kartą. WCHODZIĆ. Aktywuj lub przełącz panel związany z zakładką focused. ALT OPCJA PAGE UP. Przenieś ostrość na poprzednią kartę i natychmiast uaktywnij. ALT OPTION PAGE DOWN. Przenieś fokus do następnej karty i natychmiast aktywuj. Gdy fokus znajduje się w panelu, dostępne są następujące kluczowe polecenia: CTRL UP. Przenieś fokus do powiązanej karty. ALT OPCJA PAGE UP. Przenieś ostrość na poprzednią kartę i natychmiast uaktywnij. ALT OPTION PAGE DOWN. Przesuń kursor do następnej karty i natychmiast uaktywnij. Widget zakładek wykorzystuje styl CSS jQuery UI do stylizowania wyglądu i stylu. Jeśli wymagana jest specyficzna stylistyka kart, następujące nazwy klas CSS mogą być używane do przesłonięć lub jako klucze do opcji klas: ui-tabs. Zewnętrzny pojemnik klapek. Element ten będzie dodatkowo miał klasę kart typu ui-składanych, gdy opcja składania jest ustawiona. ui-tabs-nav. Lista kart. ui-tabs-tab. Jedna z pozycji na liście kart. Aktywny element będzie miał klasę ui-tabs-active. Każdy element listy, którego powiązana zawartość ładuje się za pośrednictwem połączenia Ajax, będzie miał klasę ładowania ui-tabs. ui-tabs-anchor. Kotwice służące do przełączania paneli. panel ui-tabs. Panele związane z kartami. Tylko panel, którego odpowiednia zakładka jest aktywna, będzie widoczny. Zależności Dodatkowe uwagi: Ten widget wymaga pewnych funkcjonalnych arkuszy CSS, w przeciwnym razie praca wygrała. Jeśli tworzysz niestandardową kompozycję, użyj pliku CSS widgetaposs jako punktu wyjścia. activexA0 Który panel jest aktualnie otwarty. Obsługa wielu typów: Boolean. Ustawienie active na false spowoduje zwinięcie wszystkich paneli. Wymaga to, aby opcja zwijana była prawdziwa. Integer. Indeks aktywny panelu (otwarty) oparty na zera. Wartość ujemna wybiera panele przechodzące wstecz z ostatniego panelu. Przykłady kodu: Zainicjuj karty z wybraną aktywną opcją: Karty w jQuery UI 1.7 Widżet zakładek UI służy do przełączania widoczności między zestawami różnych elementów, każdy element zawierający zawartość, do której można uzyskać dostęp, klikając jej nagłówek, który pojawia się jako indywidualna karta. Zakładki są ustrukturyzowane tak, aby były usytuowane obok siebie, podczas gdy sekcje zawartości zostały ułożone jedna na drugiej, z widocznym tylko wierzchnią krawędzią. Kliknięcie zakładki spowoduje podświetlenie karty i przyniesienie powiązanego panelu zawartości na górę stosu. Tylko jeden panel treści może być otwarty na raz. Poniższy zrzut przedstawia różne składniki zestawu kart interfejsu użytkownika: podstawowa implementacja karty Struktura podstawowych elementów HTML, na której oparte są karty, jest sztywna, a widgety wymagają pewnej liczby elementów do pracy. Karty muszą zostać utworzone z elementu listy (uporządkowanego lub nieuporządkowanego), a każdy element listy musi zawierać element ltagt. Każdy link musi zawierać odpowiedni element o podanym identyfikatorze, który jest powiązany z atrybutem link href. Dokładnie wyjaśnimy dokładną strukturę tych elementów po naszym pierwszym przykładzie. W nowym pliku w edytorze tekstu utwórz następującą stronę: Zapisz kod jako tabs1.html w folderze roboczym jqueryui. Pozwala sprawdzić, co zostało użyte. Następujące skrypty i zasoby CSS są potrzebne do domyślnej instancji widgetu kart: Widżet karty składa się z kilku standardowych elementów HTML ułożonych w określony sposób (mogą one być albo zakodowane na stałe na stronie, albo dodane dynamicznie, albo mogą być mieszanką obu w zależności od wymagań twojej implementacji). Zewnętrzny element kontenera, w którym wywołana jest metoda tabulatorów Element listowy (ltulgt lub ltolgt) Element ltagt dla każdej karty Element dla zawartości każdej karty Pierwsze dwa elementy w kontenerze zewnętrznym tworzą klikalne nagłówki kart, które są używany do wyświetlania sekcji treści powiązanej z kartą. Każda karta powinna zawierać element listy zawierający link. Atrybut href linku powinien być ustawiony jako identyfikator fragmentu, z prefiksem. Powinien pasować do atrybutu id elementu, który tworzy sekcję treści, z którą jest powiązany. Sekcje zawartości każdej karty są tworzone przez elementy. Atrybut id jest wymagany i będzie kierowany przez odpowiadający mu element. W tym przykładzie użyliśmy elementów w postaci paneli zawartości każdej z kart, ale można również użyć innych elementów, takich jak elementy. Elementy omówione dotychczas, wraz z ich wymaganymi atrybutami, są minimum, które są wymagane od podstawowego znacznika. Połączamy się z kilkoma zasobami ltscriptgt z biblioteki na dole ltbodygt przed znacznikiem zamykającym. Ładowanie skryptów jest ostatnie, po arkuszach stylów i elementach strony jest sprawdzoną techniką poprawiania wydajności. Po łączeniu się najpierw z jQuery łączymy się z plikiem ui. core. js, który jest wymagany przez wszystkie składniki (z wyjątkiem efektów, które mają własny plik podstawowy). Następnie łączymy się z plikiem źródłowym komponentów, który w tym przypadku to ui. tabs. js. Po trzech wymaganych skryptach z biblioteki możemy przejść do naszego niestandardowego elementu lt scriptgt, w którym dodajemy kod, który tworzy karty. Po prostu używamy skrótu (function ()), aby wykonać nasz kod, gdy dokument jest gotowy. Następnie wywołujemy metodę widgetów tabs () na obiekcie jQuery, reprezentując nasz element kontenera tabulatora (ltulgt z identyfikatorem myTabs). Kiedy uruchomimy ten plik w przeglądarce, powinniśmy zobaczyć karty, które pojawiły się na pierwszym zrzucie ekranu tego artykułu (bez adnotacji oczywiście). Klasy ramek CSS Tabu Używając Firebug dla Firefoxa (lub innego generycznego eksploratora DOM) widzimy, że różne nazwy klas są dodawane do różnych podstawowych elementów HTML, z których tworzony jest widżet kart, jak pokazano na poniższym zrzucie ekranu: Lets review these krótko. Do zewnętrznego kontenera lt divt dodawane są następujące nazwy klas: Stosowane zaokrąglone narożniki do dolnych krawędzi paneli zawartości Wszystkie te klasy są automatycznie dodawane do podstawowych elementów przez bibliotekę, nie trzeba ich dodawać ręcznie podczas kodowania strony . Jak ilustrują te tabele, struktura CSS dostarcza kompletny zestaw zarówno strukturalnych stylów CSS, które sterują funkcjonowaniem kart i stylami specyficznymi dla kompozycji, które kontrolują sposób wyświetlania kart, ale nie sposób ich działania. Możemy łatwo sprawdzić, które selektory powinny wymagać zastąpienia, jeśli chcemy dostosować wygląd widgetu, co jest dobre w następnej sekcji. Stosowanie motywu niestandardowego do kart W następnym przykładzie możemy zobaczyć, jak zmienić podstawowy wygląd kart. Możemy zastąpić wszelkie reguły używane wyłącznie do celów wyświetlania dzięki własnym regułom stylu, co pozwala na szybkie i łatwe dostosowanie bez zmiany zasad związanych z funkcjonalnością lub strukturą karty. W nowym pliku w edytorze tekstu utwórz następujący bardzo mały arkusz stylów. To wszystko, czego potrzebujemy. Zapisz plik jako tabsTheme. css w folderze css. Jeśli porównaj nazwy klas z tabelami na poprzednich stronach, zobaczysz, że były nadrzędne style specyficzne dla motywu. Ponieważ nadrzędny plik motywu musimy spełnić lub przekroczyć specyfikę selektorów w motywie. css. Dlatego czasami celujemy w kilka selektorów. W tym przykładzie nadpisujemy niektóre reguły w pliku ui. tabs. css. Musimy użyć selektora ID naszego elementu kontenera wraz z selektorem z ui. theme. css (.ui-widget-content), aby pokonać selektor podwójnej klasy. ui-tabs. ui-tabs-panel. Nie zapomnij połączyć się z nowym arkuszem stylów z pliku headgt leżącego u podstawowego pliku HTML i upewnij się, że niestandardowy arkusz stylów, który właśnie utworzyliśmy, pojawia się po pliku ui. tabs. css: reguły, które próbujemy zastąpić, nie zostaną zastąpione przez nasz plik motywu, jeśli arkusze stylów nie są połączone w poprawnej kolejności. Zapisz zmieniony plik jako tabs2.html w folderze jqueryui i wyświetl go w przeglądarce. Powinien wyglądać następująco: Nasz nowy motyw nie różni się znacznie od domyślnej gładkości. Możemy jednak dostosować jego wygląd do własnych potrzeb i preferencji, dodając tylko kilka dodatkowych stylów. Konfigurowalne opcje Każdy z różnych składników w bibliotece ma szereg różnych opcji kontrolujących, które funkcje widgetu są domyślnie włączone. Litewnik obiektu może zostać przekazany do widgetu kartoteki, aby skonfigurować te opcje. Dostępne opcje konfigurowania niestandardowych zachowań podczas korzystania z widżetów kart są wyświetlane w następującej tabeli: Ciąg określający elementy używane podczas tworzenia nowych kart dynamicznie. Zauważ, że zarówno znacznik ltagt, jak i tag ltspangt są tworzone po dodaniu nowych kart przez widget. Elementy i części łańcucha są używane wewnętrznie przez widżet i są zastępowane przez wartości rzeczywiste przez widżet. Wybór karty Umożliwia sprawdzenie, w jaki sposób można wykorzystać te właściwości konfigurowalne. Na przykład, skonfiguruj widżet, aby wyświetlała się druga karta po załadowaniu strony. Usuń ltlinkgt dla tabsTheme. css w lt headgt i zmień ostatni element lt scriptgt, aby wyglądał następująco: Zapisz to jako tabs3.html. Różne karty i powiązane panele zawartości są reprezentowane przez indeks liczbowy zaczynający się od zera, podobnie jak standardowa tablica JavaScript. Określenie innej karty do otwarcia domyślnie jest tak proste, jak podanie numeru indeksu jako wartości dla wybranej właściwości. Po załadowaniu strony należy wybrać drugą kartę. Zmieniamy domyślny motyw gładkości, aby skupić się na działaniu właściwości. Wraz ze zmianą wybranej karty możemy również określić, że żadna z kart nie powinna być początkowo wybierana poprzez podanie wartości null dla tej właściwości. Spowoduje to pojawienie się widżetu w następujący sposób po wczytaniu strony: Wyłączanie karty Możesz chcieć wyłączyć określoną kartę, dopóki nie zostanie spełniony określony warunek. Można to łatwo osiągnąć, manipulując wyłączoną właściwością kart. Zmień obiekt konfiguracyjny w pliku tabs3.html na następujący: Zapisz to jako tabs4.html w folderze jqueryui. W tym przykładzie usuwamy wybraną właściwość i dodajemy indeks drugiej karty do wyłączonej tablicy. Możemy dodać indeksy innych kart do tej tablicy, rozdzielone przecinkami, aby domyślnie wyłączyć wiele kart. Kiedy strona jest ładowana w przeglądarce, druga zakładka ma przypisaną nazwę klasy, która jest wyłączona dla widgetu-ui, i odbierze wyłączone style z pliku ui. theme. css. Nie reaguje on na interakcje myszy w jakikolwiek sposób, jak pokazano na poniższym zrzucie ekranu: Efekty przejścia Możemy łatwo dodać atrakcyjne efekty przejścia przy użyciu właściwości fx. Są one wyświetlane, gdy karty są otwarte i zamknięte. Ta właściwość jest konfigurowana za pomocą innego obiektu literalnego (lub tablicy) wewnątrz naszego obiektu konfiguracyjnego, który włącza jeden lub więcej efektów. Umożliwia włączenie efektów blaknięcia przy użyciu następującego obiektu konfiguracyjnego: Zapisz ten plik jako plik tabs5.html w folderze jqueryui. Utworzony przez nas obiekt fx ma dwie właściwości. Pierwszą właściwością jest animacja. Aby użyć zanikania, określamy krycie, ponieważ jest to ustawione. Zamiast tego użylibyśmy wysokości jako nazwy właściwości do korzystania z animacji początkowych. Zmiana przezroczystości po prostu odwraca bieżące ustawienie. Jeśli jest on obecnie widoczny, staje się niewidoczny i odwrotnie. Druga właściwość, czas trwania. określa szybkość animacji. Wartości tej właściwości są powolne. normalnie (wartość domyślna) lub szybko. Możemy również podać liczbę całkowitą reprezentującą liczbę milisekund, na którą powinna działać animacja. Kiedy uruchamiamy plik, widzimy, że zawartość karty powoli zanika, gdy karta zamyka się i znika po otwarciu nowej karty. Obie animacje występują podczas interakcji z jedną kartą. Aby wyświetlać animację tylko raz, gdy karta zamyka się na przykład, musimy zagnieździć obiekt fx w tablicy. Zmień obiekt konfiguracji na tablice5.html, tak aby wyglądał następująco: Efekt zamykania aktualnie otwartego panelu zawartości znajduje się wewnątrz obiektu znajdującego się w pierwszym elemencie tablicy, a druga jest animacja otwarcia nowej karty. Poprzez określenie wartości null jako drugiego elementu w tablicy wyłączamy animacje otwarcia po wybraniu nowej karty. Możemy również określić różne animacje i prędkości otwierania i zamykania animacji, dodając kolejny obiekt jako drugi element tablicy zamiast wartości NULL. Zapisz to jako tabs6.html i wyświetl wyniki w przeglądarce. Zakładanie zakładek Domyślnie po kliknięciu aktualnie aktywnej karty nic się nie dzieje. Możemy to jednak zmienić, tak aby aktualnie otwarty panel zawartości został zamknięty, gdy wybrano jego nagłówek. Zmień obiekt konfiguracji na tablice6.html tak, aby wyglądał jak następuje: Zapisz tę wersję jako tabs7.html. Ta opcja pozwala zamknąć wszystkie panele treści, podobnie jak wtedy, gdy wcześniej wprowadziliśmy wartość null do wybranej właściwości. Kliknięcie dezaktywowanej karty spowoduje wybór karty i wyświetlenie powiązanego panelu treści. Ponowne kliknięcie tej samej karty spowoduje jej zamknięcie, zmniejszając widżet w dół, tak aby wyświetlany był tylko nagłówek i karty. W tym artykule omówiliśmy następujące tematy: Domyślna implementacja widgetu W jaki sposób struktura CSS kieruje się do widgetów karty Jak zastosować niestandardowe style do zestawu zakładek Konfigurowanie kart za pomocą ich opcji Wbudowane efekty przejścia dla zmian w panelu treści Jeśli przeczytałem ten artykuł, który może Cię zainteresować: przeczytałeś fragment: Nowe popularne posty Rozumiemy, że twój czas jest ważny. Wyjątkowo wśród głównych wydawców staramy się opracowywać i publikować najszerszą gamę produktów edukacyjnych i informacyjnych dotyczących każdej technologii. Każdy produkt Packt zapewnia konkretną ścieżkę uczenia, szeroko określoną przez typ serii. To strukturalne podejście pozwala wybrać ścieżkę, która najlepiej pasuje do poziomu wiedzy, stylu uczenia się i celów zadania. Jako nowy użytkownik, ci krok po kroku instrukcje samouczki zapewnią Ci wszystkie niezbędne umiejętności niezbędne do uzyskania kompetencji i skuteczności. Podręcznik dla początkujących Przyjazne, nieformalne samouczki, które zapewniają praktyczne wprowadzenie na podstawie przykładów, działań i wyzwań. Essentials Szybka, skoncentrowana prezentacja przedstawiająca najszybszy sposób na uruchomienie narzędzia w realnym świecie. Zbiór praktycznych, samodzielnych receptur, które użytkownicy tej technologii będą przydatni do budowania silniejszych i niezawodnych systemów. Plany Zapoznaj się z najczęściej spotykanymi typami projektów, dając Ci kompletne wskazówki dotyczące szybkiego i niezawodnego budowania konkretnego rozwiązania. Zdobądź umiejętności na wyższym poziomie dzięki zaawansowanym kursom, które zapewnią Ci pewność, że opanują narzędzia najskuteczniejsze funkcje. Dostępne dla czytelników przyjmujących temat, te tytuły ułatwią ci korzystanie z narzędzia lub technologii, dzięki czemu staniesz się efektywnym użytkownikiem. TABs w jQuery UI 1.7 Widżet zakładek UI służy do przełączania widoczności między zestawami różnych elementów, z których każdy zawiera treść do którego można uzyskać dostęp, klikając jego nagłówek, który pojawia się jako osobna karta. Zakładki są ustrukturyzowane tak, aby były usytuowane obok siebie, podczas gdy sekcje zawartości zostały ułożone jedna na drugiej, z widocznym tylko wierzchnią krawędzią. Kliknięcie karty spowoduje podświetlenie karty i przeniesienie powiązanego panelu zawartości na górę stosu. Tylko jeden panel treści może być otwarty na raz. Poniższy zrzut ekranu pokazuje różne elementy zestawu zakładek interfejsu: Podstawowa implementacja karty Struktura podstawowych elementów HTML, na których oparte są karty, jest sztywna, a widżety wymagają pewnej liczby elementów, aby mogły działać. Karty muszą zostać utworzone z elementu listy (uporządkowanego lub nieuporządkowanego), a każdy element listy musi zawierać element ltagt. Każdy link musi zawierać odpowiedni element o podanym identyfikatorze, który jest powiązany z atrybutem link href. Dokładnie wyjaśnimy dokładną strukturę tych elementów po naszym pierwszym przykładzie. W nowym pliku w edytorze tekstu utwórz następującą stronę: Zapisz kod jako tabs1.html w folderze roboczym jqueryui. Pozwala sprawdzić, co zostało użyte. Następujące skrypty i zasoby CSS są potrzebne do domyślnej instancji widgetu kart: Widżet karty składa się z kilku standardowych elementów HTML ułożonych w określony sposób (mogą one być albo zakodowane na stałe na stronie, albo dodane dynamicznie, albo mogą być mieszanką obu w zależności od wymagań wdrożenia). Zewnętrzny element kontenerowy, nazywany metodą tabulacji Element listy (ltulgt lub ltolgt) Element ltagt dla każdej karty Element dla zawartości każdej zakładki Pierwsze dwa elementy wewnątrz zewnętrznego pojemnika umożliwiają kliknięcie nagłówków kart, które są używany do wyświetlania sekcji treści powiązanej z kartą. Każda karta powinna zawierać element listy zawierający link. Atrybut href łącza powinien być ustawiony jako identyfikator fragmentu, poprzedzony prefiksem. Powinien pasować do atrybutu id elementu, który tworzy sekcję treści, z którą jest powiązany. Sekcje zawartości każdej karty są tworzone przez elementy. Atrybut id jest wymagany i będzie kierowany przez odpowiadający mu element. W tym przykładzie użyliśmy elementów w postaci paneli zawartości każdej z kart, ale można również użyć innych elementów, takich jak elementy. Elementy omówione dotychczas, wraz z ich wymaganymi atrybutami, są minimum, które są wymagane od podstawowego znacznika. Połączamy się z kilkoma zasobami ltscriptgt z biblioteki na dole ltbodygt przed znacznikiem zamykającym. Ładowanie skryptów jest ostatnie, po arkuszach stylów i elementach strony jest sprawdzoną techniką poprawiania wydajności. Po łączeniu się najpierw z jQuery łączymy się z plikiem ui. core. js, który jest wymagany przez wszystkie składniki (z wyjątkiem efektów, które mają własny plik podstawowy). Następnie łączymy się z plikiem źródłowym komponentów, który w tym przypadku to ui. tabs. js. Po trzech wymaganych skryptach z biblioteki możemy przejść do naszego niestandardowego elementu lt scriptgt, w którym dodajemy kod, który tworzy karty. Po prostu używamy skrótu (function ()) do wykonania naszego kodu, gdy dokument jest gotowy. Następnie wywołujemy metodę widgetów tabs () na obiekcie jQuery, reprezentując nasz element kontenera tabulatora (ltulgt z identyfikatorem myTabs). Kiedy uruchomimy ten plik w przeglądarce, powinniśmy zobaczyć karty, które pojawiły się na pierwszym zrzucie ekranu tego artykułu (bez adnotacji oczywiście). Klasy ramek CSS Tabu Używając Firebug dla Firefoxa (lub innego generycznego eksploratora DOM) widzimy, że różne nazwy klas są dodawane do różnych podstawowych elementów HTML, z których tworzony jest widżet kart, jak pokazano na poniższym zrzucie ekranu: Lets review these krótko. Do zewnętrznego kontenera lt divt dodawane są następujące nazwy klas: Stosowane zaokrąglone rogi do dolnych krawędzi paneli zawartości Wszystkie te klasy są automatycznie dodawane do podstawowych elementów przez bibliotekę, nie trzeba ich dodawać ręcznie podczas kodowania strony . Jak ilustrują te tabele, struktura CSS dostarcza kompletny zestaw zarówno strukturalnych stylów CSS, które sterują funkcjonowaniem kart i stylami specyficznymi dla kompozycji, które kontrolują sposób wyświetlania kart, ale nie sposób ich działania. Możemy łatwo sprawdzić, które selektory powinny wymagać zastąpienia, jeśli chcemy dostosować wygląd widgetu, co jest dobre w następnej sekcji. Stosowanie niestandardowego motywu do kart W następnym przykładzie widzimy, jak zmienić podstawowy wygląd kart. Możemy zastąpić wszelkie reguły używane wyłącznie do celów wyświetlania dzięki własnym regułom stylu, co pozwala na szybkie i łatwe dostosowanie bez zmiany zasad związanych z funkcjonalnością lub strukturą karty. W nowym pliku w edytorze tekstu utwórz następujący bardzo mały arkusz stylów. To wszystko, czego potrzebujemy. Zapisz plik jako tabsTheme. css w folderze css. Jeśli porównaj nazwy klas z tabelami na poprzednich stronach, zobaczysz, że były nadrzędne style specyficzne dla motywu. Ponieważ nadrzędny plik motywu musimy spełnić lub przekroczyć specyfikę selektorów w motywie. css. Dlatego czasami celujemy w kilka selektorów. W tym przykładzie zastępujemy niektóre reguły w pliku ui. tabs. css. Musimy użyć selektora ID naszego elementu kontenera wraz z selektorem z ui. theme. css (.ui-widget-content), aby pokonać selektor podwójnej klasy. ui-tabs. ui-tabs-panel. Nie zapomnij połączyć się z nowym arkuszem stylów z pliku headgt leżącego u podstawowego pliku HTML i upewnij się, że niestandardowy arkusz stylów, który właśnie utworzyliśmy, pojawia się po pliku ui. tabs. css: reguły, które próbujemy zastąpić, nie zostaną zastąpione przez nasz plik motywu, jeśli arkusze stylów nie są połączone w poprawnej kolejności. Zapisz zmieniony plik jako tabs2.html w folderze jqueryui i wyświetl go w przeglądarce. Powinien wyglądać następująco: Nasz nowy motyw nie różni się znacznie od domyślnej gładkości. Możemy jednak dostosować wygląd do własnych potrzeb i preferencji, dodając tylko kilka dodatkowych stylów. Konfigurowalne opcje Każdy z różnych składników w bibliotece ma szereg różnych opcji kontrolujących, które funkcje widgetu są domyślnie włączone. Litewnik obiektu może zostać przekazany do widgetu kartoteki, aby skonfigurować te opcje. Dostępne opcje konfigurowania niestandardowych zachowań podczas korzystania z widżetów kart są wyświetlane w następującej tabeli: Ciąg określający elementy używane podczas tworzenia nowych kart dynamicznie. Zauważ, że zarówno tag ltagt, jak i ltspangt są tworzone, gdy nowe widżety są dodawane do nowych kart. Elementy i części łańcucha są używane wewnętrznie przez widżet i są zastępowane przez wartości rzeczywiste przez widżet. Wybór karty Umożliwia sprawdzenie, w jaki sposób można wykorzystać te właściwości konfigurowalne. Na przykład pozwala skonfigurować widżet tak, aby druga karta była wyświetlana podczas ładowania strony. Usuń ltlinkgt dla tabsTheme. css w lt headgt i zmień ostatni element lt scriptgt, aby wyglądał następująco: Zapisz to jako tabs3.html. Różne karty i powiązane panele zawartości są reprezentowane przez indeks liczbowy zaczynający się od zera, podobnie jak standardowa tablica JavaScript. Określenie innej karty do otwarcia domyślnie jest tak proste, jak podanie numeru indeksu jako wartości dla wybranej właściwości. Po załadowaniu strony należy wybrać drugą kartę. Weve przełączyło się na domyślny temat wygładzania, dzięki czemu możemy skoncentrować się na tym, jak działają właściwości. Wraz ze zmianą wybranej karty możemy również określić, że żadna z kart nie powinna być początkowo wybierana poprzez podanie wartości null dla tej właściwości. Spowoduje to pojawienie się widżetu w następujący sposób po wczytaniu strony: Wyłączanie karty Możesz chcieć wyłączyć określoną kartę, dopóki nie zostanie spełniony określony warunek. Można to łatwo osiągnąć, manipulując wyłączoną właściwością kart. Zmień obiekt konfiguracyjny w pliku tabs3.html na następujący: Zapisz to jako tabs4.html w folderze jqueryui. W tym przykładzie usuń zaznaczoną właściwość i dodaj indeks drugiej tablicy do tablicy wyłączonej. Możemy dodać indeksy innych kart do tej tablicy, rozdzielone przecinkami, aby domyślnie wyłączyć wiele kart. Kiedy strona jest ładowana w przeglądarce, druga zakładka ma przypisaną nazwę klasy, która jest wyłączona dla widgetu-ui, i odbierze wyłączone style z pliku ui. theme. css. Nie reaguje on na interakcje myszy w jakikolwiek sposób, jak pokazano na poniższym zrzucie ekranu: Efekty przejścia Możemy łatwo dodać atrakcyjne efekty przejścia przy użyciu właściwości fx. Są one wyświetlane, gdy karty są otwarte i zamknięte. Ta właściwość jest skonfigurowana przy użyciu innego literału obiektu (lub tablicy) wewnątrz naszego obiektu konfiguracyjnego, co umożliwia jedną lub więcej efektów. Umożliwia włączanie efektów zanikania za pomocą następującego obiektu konfiguracyjnego: Zapisz ten plik jako tabs5.html w folderze jqueryui. Utworzony przez nas obiekt fx ma dwie właściwości. Pierwsza właściwość to animacja. Aby użyć zanikania, określamy krycie, ponieważ jest to ustawione. Zamiast tego użylibyśmy wysokości jako nazwy właściwości do korzystania z animacji początkowych. Zmiana przezroczystości po prostu odwraca bieżące ustawienie. Jeśli jest on obecnie widoczny, staje się niewidoczny i odwrotnie. Druga właściwość, czas trwania. określa szybkość, w jakiej występuje animacja. Wartości tej właściwości są powolne. normalnie (wartość domyślna) lub szybko. Możemy również podać liczbę całkowitą reprezentującą liczbę milisekund, na którą powinna działać animacja. Kiedy uruchamiamy plik, widzimy, że zawartość karty powoli zanika, gdy karta zamyka się i znika po otwarciu nowej karty. Oba animacje występują podczas interakcji z jedną kartą. Aby pokazać animację tylko raz, gdy na przykład tabela się zamyka, musimy zagnieżdżać obiekt fx w tablicy. Zmień obiekt konfiguracji na tablice5.html, tak aby wyglądał następująco: Efekt zamykania aktualnie otwartego panelu zawartości znajduje się wewnątrz obiektu znajdującego się w pierwszym elemencie tablicy, a druga jest animacja otwarcia nowej karty. Poprzez określenie wartości null jako drugiego elementu w tablicy wyłączamy animacje otwarcia po wybraniu nowej karty. Możemy również określić różne animacje i prędkości otwierania i zamykania animacji, dodając kolejny obiekt jako drugi element tablicy zamiast wartości NULL. Zapisz to jako tabs6.html i wyświetl wyniki w przeglądarce. Zakładanie zakładek Domyślnie po kliknięciu aktualnie aktywnej karty nic się nie dzieje. Możemy to jednak zmienić, tak aby aktualnie otwarty panel zawartości został zamknięty, gdy wybrano jego nagłówek. Zmień obiekt konfiguracji na tablice6.html tak, aby wyglądał jak następuje: Zapisz tę wersję jako tabs7.html. Ta opcja pozwala na zamknięcie wszystkich paneli zawartości, podobnie jak wtedy, gdy wcześniej wprowadziliśmy wartość null do wybranej właściwości. Kliknięcie dezaktywowanej karty spowoduje wybór karty i wyświetlenie powiązanego panelu treści. Ponowne kliknięcie tej samej karty spowoduje jej zamknięcie, zmniejszając widżet w dół, tak aby wyświetlany był tylko nagłówek i karty. W tym artykule omówiliśmy następujące tematy: Domyślna implementacja widgetu W jaki sposób struktura CSS kieruje się do widgetów karty Jak zastosować niestandardowe style do zestawu zakładek Konfigurowanie kart za pomocą ich opcji Wbudowane efekty przejścia dla zmian w panelu treści Jeśli przeczytałem ten artykuł, który może Cię zainteresować: przeczytałeś fragment: Nowe popularne posty Rozumiemy, że twój czas jest ważny. Wyjątkowo wśród głównych wydawców staramy się opracowywać i publikować najszerszą gamę produktów edukacyjnych i informacyjnych dotyczących każdej technologii. Każdy produkt Packt zapewnia określoną ścieżkę kształcenia, szeroko definiowaną przez typ serii. To strukturalne podejście pozwala wybrać ścieżkę, która najlepiej pasuje do poziomu wiedzy, stylu uczenia się i celów zadania. Jako nowy użytkownik, ci krok po kroku instrukcje samouczki zapewnią Ci wszystkie niezbędne umiejętności niezbędne do uzyskania kompetencji i skuteczności. Podręcznik dla początkujących Przyjazne, nieformalne samouczki, które zapewniają praktyczne wprowadzenie na podstawie przykładów, działań i wyzwań. Essentials Szybka, skoncentrowana prezentacja przedstawiająca najszybszy sposób na uruchomienie narzędzia w realnym świecie. Zbiór praktycznych, samodzielnych receptur, które użytkownicy tej technologii będą przydatni do budowania silniejszych i niezawodnych systemów. Plany Zapoznaj się z najczęściej spotykanymi typami projektów, dając Ci kompletne wskazówki dotyczące szybkiego i niezawodnego budowania konkretnego rozwiązania. Przenieś swoje umiejętności na wyższy poziom dzięki zaawansowanym samouczkom, które dadzą Ci pewność opanowania narzędzi o najsilniejszych funkcjach. Dostępne dla czytelników tematykę, te tytuły wprowadzają Cię w narzędzie lub technologię, dzięki czemu możesz stać się skutecznym użytkownikiem.
Comments
Post a Comment