Friday 24 November 2017

Opcje jquery ui fx


.animate () Ciąg znaków wskazujący, która funkcja krzywej dynamiki ma zostać użyta do przejścia. Wartość logiczna wskazująca, czy umieścić animację w kolejce efektów. W przypadku wartości false animacja rozpocznie się natychmiast. Od wersji jQuery 1.7. opcja kolejki może również zaakceptować ciąg znaków, w którym to przypadku animacja zostanie dodana do kolejki reprezentowanej przez ten ciąg. Gdy używana jest niestandardowa nazwa kolejki, animacja nie uruchamia się automatycznie, należy ją wywołać. dequeue (quotqueuenamequot), aby ją uruchomić. Obiekt zawierający jedną lub więcej właściwości CSS zdefiniowanych przez argument właściwości i odpowiadające im funkcje wygładzania. (wersja dodana: 1.4) Funkcja, która ma zostać wywołana dla każdej animowanej właściwości każdego animowanego elementu. Ta funkcja umożliwia modyfikowanie obiektu Tween w celu zmiany wartości właściwości przed jej ustawieniem. Funkcja, która ma zostać wywołana po każdym kroku animacji, tylko raz na animowany element, niezależnie od liczby animowanych właściwości. (wersja dodana: 1.8) Funkcja, która jest wywoływana po zakończeniu animacji elementu. Funkcja do wywołania, gdy rozpoczyna się animacja elementu. (wersja dodana: 1.8) Funkcja, która ma zostać wywołana po zakończeniu animacji elementu (jego obiekt Obietnica został rozwiązany). (wersja dodana: 1.8) Funkcja, która ma zostać wywołana, gdy animacja elementu nie zostanie ukończona (jego obiekt Obietnica zostanie odrzucony). (wersja dodana: 1.8) Funkcja, która ma zostać wywołana, gdy animacja na elemencie kończy się lub kończy bez wypełnienia (jego obiekt Obietnicy jest rozwiązany lub odrzucony). (wersja dodana: 1.8) Metoda. animate () pozwala nam tworzyć efekty animacji na dowolnej numerycznej właściwości CSS. Jedynym wymaganym parametrem jest zwykły obiekt właściwości CSS. Ten obiekt jest podobny do tego, który można wysłać do metody. css (), ale zakres właściwości jest bardziej restrykcyjny. Właściwości animacji i wartości Wszystkie animowane właściwości powinny być animowane do pojedynczej wartości numerycznej. z wyjątkiem tego, jak zaznaczono poniżej, większość właściwości, które nie są numeryczne, nie może być animowana przy użyciu podstawowej funkcjonalności jQuery (na przykład, szerokość. wysokość lub lewa może być animowana, ale kolor tła nie może być, chyba że użyto wtyczki jQuery. Color). Wartości właściwości są traktowane jako liczba pikseli, chyba że określono inaczej. Jednostki em i mogą być określone w stosownych przypadkach. Oprócz właściwości stylu, niektóre nietypowe właściwości, takie jak scrollTop i scrollLeft. jak również właściwości niestandardowe, mogą być animowane. Skrócone właściwości CSS (np. Czcionka, tło, ramka) nie są w pełni obsługiwane. Na przykład, jeśli chcesz animować renderowaną szerokość obramowania, musisz wcześniej ustawić przynajmniej styl obramowania i szerokość obramowania inną niż quotautoquot. Lub, jeśli chcesz animować rozmiar czcionki, użyłbyś fontSize lub odpowiednika CSS aposfont-sizeapos zamiast po prostu aposfontapos. Oprócz wartości numerycznych, każda właściwość może przyjmować ciągi aposshowapos. aposhideapos. i apostoggleapos. Skróty te umożliwiają niestandardowe ukrywanie i wyświetlanie animacji uwzględniających typ wyświetlania elementu. Aby korzystać z wbudowanego śledzenia przełączania jQueryaposs, słowo kluczowe apostoggleapos musi być konsekwentnie podawane jako wartość animowanej właściwości. Animowane właściwości mogą być również względne. Jeśli wartość jest dostarczana z wiodącą lub - sekwencją znaków, to wartość docelowa jest obliczana przez dodanie lub odjęcie podanej liczby od bieżącej wartości właściwości. Uwaga: W przeciwieństwie do metod skróconej animacji, takich jak. slideDown () i. fadeIn (). metoda. animate () nie powoduje, że ukryte elementy są widoczne jako część efektu. Na przykład, podane (quotsomeElementquot).hide (). Animate (, 500). animacja zostanie uruchomiona, ale element pozostanie ukryty. Czas trwania podawany jest w milisekundach wyższe wartości oznaczają wolniejsze animacje, a nie szybsze. Domyślny czas trwania wynosi 400 milisekund. Można podać łańcuchy aposfastapos i aposslowapos, aby wskazać czasy trwania odpowiednio 200 i 600 milisekund. Funkcje oddzwaniania Jeśli dostarczono, start. krok. postęp. kompletny. Gotowe. zawieść. i zawsze wywołania zwrotne są wywoływane w odniesieniu do każdego elementu, jest to ustawione na animowany element DOM. Jeśli w zestawie nie ma żadnych elementów, wywołania zwrotne nie są wywoływane. Jeśli wiele elementów jest animowanych, wywołanie zwrotne jest wykonywane raz na dopasowany element, a nie raz dla animacji jako całości. Użyj metody. promise (), aby uzyskać obietnicę, do której możesz dołączyć wywołania zwrotne, które będą uruchamiane raz dla animowanego zestawu o dowolnym rozmiarze, w tym zero elementów. Podstawowe użycie Aby animować dowolny element, taki jak prosty obraz: Rysunek 1 - Ilustracja określonego efektu animacji Zwróć uwagę, że docelową wartością właściwości height jest apostoggleapos. Ponieważ obraz był wcześniej widoczny, animacja zmniejsza wysokość do 0, aby ją ukryć. Drugie kliknięcie odwraca to przejście: Rysunek 2 - Ilustracja określonego efektu animacji Nieprzezroczystość obrazu ma już wartość docelową, więc ta właściwość nie jest animowana przez drugie kliknięcie. Ponieważ docelowa wartość dla lewej jest wartością względną, obraz porusza się jeszcze dalej w prawo podczas tej drugiej animacji. Właściwości kierunkowe (u góry po prawej, u dołu, po lewej) nie mają dostrzegalnego wpływu na elementy, jeśli ich własność stylu pozycji jest statyczna. który jest domyślnie. Uwaga: Projekt interfejsu jQuery rozszerza metodę. animate (), umożliwiając animowanie niektórych stylów nieliczbowych, takich jak kolory. Projekt zawiera także mechanizmy określania animacji za pomocą klas CSS, a nie poszczególnych atrybutów. Uwaga: jeśli próbujesz animować element o wysokości lub szerokości 0 pikseli, gdzie zawartość elementu jest widoczna z powodu przepełnienia, jQuery może zablokować to przepełnienie podczas animacji. Ustalając wymiary ukrytego pierwotnego elementu, można jednak zapewnić płynną animację. Można użyć funkcji clearfix, aby automatycznie naprawić wymiary głównego elementu bez potrzeby ręcznego ustawiania tego. Funkcja kroku Druga wersja. animate () udostępnia opcję kroku x2017 wywołującą funkcję wywołania, która jest uruchamiana na każdym etapie animacji. Ta funkcja jest przydatna do włączania niestandardowych typów animacji lub do modyfikowania animacji w takiej postaci, w jakiej występuje. Przyjmuje dwa argumenty (teraz i fx), i jest ustawiony na animowany element DOM. teraz. wartość numeryczna animowanej właściwości w każdym kroku fx. odniesienie do obiektu prototypowego jQuery. fx, który zawiera szereg właściwości, takich jak elem dla animowanego elementu, odpowiednio początek i koniec dla pierwszej i ostatniej wartości animowanej właściwości oraz prop dla animowanej właściwości. Zwróć uwagę, że funkcja kroku jest wywoływana dla każdej animowanej właściwości w każdym animowanym elemencie. Na przykład, biorąc pod uwagę dwa elementy listy, funkcja kroku uruchamia się cztery razy na każdym etapie animacji: Tabulatory Widget Interakcja z klawiaturą Gdy fokus znajduje się na karcie, dostępne są następujące polecenia klawiszowe: UP LEFT. Przenieś fokus do poprzedniej karty. Jeśli na pierwszej karcie, przenosi fokus na ostatnią kartę. Aktywuj aktywną kartę po krótkim opóźnieniu. PRAWO W DÓŁ. Przenieś fokus do następnej karty. Jeśli na ostatniej karcie, przenosi fokus na pierwszą kartę. 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 focused musi być aktywowana ręcznie. CTRL DOWN PRAWO. Przenieś fokus do następnej karty. Jeśli na ostatniej karcie, przenosi fokus na pierwszą kartę. Zakładka focused musi być aktywowana ręcznie. 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 focused musi być aktywowana ręcznie. CTRL END. Przenieś fokus na ostatnią kartę. Zakładka focused musi być aktywowana ręcznie. 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ś fokus do poprzedniej karty i natychmiast aktywuj. 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ś fokus do poprzedniej karty i natychmiast aktywuj. ALT OPTION PAGE DOWN. Przenieś fokus do następnej karty i natychmiast aktywuj. 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. Ten element będzie miał dodatkowo klasę ui-tabs-collapsible po ustawieniu opcji zwijania. ui-tabs-nav. Lista kart. ui-tabs-tab. Jedna z pozycji na liście zakładek. 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. Kotwy używane do przełączania paneli. ui-tabs-panel. Panele powiązane z zakładkami. 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ą: jQuery SVG Wtyczka jQuery umożliwiająca interakcję z płótnem SVG. Obecna wersja to 1.5.0 i jest dostępna na licencji MIT. Aby uzyskać więcej informacji, zobacz stronę z dokumentacją lub graficzne referencje lub kreślarskie strony odniesienia. Lub zobacz minimalną stronę, którą możesz wykorzystać jako podstawę do własnych poszukiwań. SVG (Scalable Vector Graphics) jest modularnym językiem do opisywania wektorów dwuwymiarowych i mieszanych grafik wektorowych w XML. Jest to rekomendacja W3C aktualnie w wersji 1.1. SVG to język służący do opisywania dwuwymiarowej grafiki w języku XML. SVG pozwala na trzy typy obiektów graficznych: kształty wektorowe (np. Ścieżki składające się z prostych i krzywych), obrazy i tekst. Obiekty graficzne można grupować, stylizować, przekształcać i składać w uprzednio renderowane obiekty. Zestaw funkcji obejmuje transformacje zagnieżdżone, ścieżki wycinania, maski alfa, efekty filtrów i obiekty szablonów. SVG jest implementowany natywnie w Firefoksie od wersji 1.5, Opera od wersji 8.5, Safari od wersji 3.0 oraz w IE od wersji 9.0. Nie każda konstrukcja SVG jest obsługiwana przez te implementacje. Ta wtyczka pozwala manipulować SVG z JavaScript. Więcej szczegółowych informacji znajduje się w dokumentacji referencyjnej. lub graficzne odniesienia lub kreślarskie strony odniesienia. Pobierz i włącz jQuery SVG CSS i JavaScript w sekcji head strony. Alternatywnie możesz użyć minified wersji kodu: jquery. svg. min. js (18.7K vs 56.6K, 5.7K gdy skompresowany). Dołącz płótno SVG do pliku ltdivgt. Następnie odpowiedz na zakończenie ładowania i zacznij z nim pracować. Możesz usunąć funkcję SVG, jeśli już jej nie potrzebujesz. Usuń dla IE przed wersją 9, potrzebujesz jednej z wtyczek przeglądarki SVG do renderowania dokumentów (takich jak przeglądarka Adobe SVG lub odtwarzacz Renesis). Należy również użyć starszej wersji tej wtyczki (przed wersją 1.5.0) i dostarczyć pusty dokument SVG, który jest początkowo załadowany, aby zarejestrować się z wtyczką i umożliwia dostęp do jego wewnętrznej struktury. To jest dokument blank. svg. Z powodu tego wymagania należy poczekać na załadowanie dokumentu przed uzyskaniem dostępu do instancji SVG i jej użyciem. Użyj ustawienia onLoad, aby otrzymywać powiadomienia po zakończeniu ładowania. Wywołanie zwrotne nie jest konieczne w przypadku innych przeglądarek, ale jego użycie zapewnia spójny wzorzec dostępu dla nich wszystkich. Przerobione podziały są oznaczone klasą hasSVG i nie są ponownie przetwarzane, jeśli są kierowane po raz drugi. Oprócz podstawowej funkcjonalności SVG, wtyczka pozwala na rozszerzenie swoich umiejętności poprzez dodatkowe pakiety. W ten sposób możesz uniknąć ładowania kodu, którego nie będziesz używał. Większość rozszerzeń dodaje obiekt punktu wejścia do obiektu menedżera SVG, zwrócony przez (selector).svg (get). z którego można uzyskać dostęp do jego funkcji. Obecnie dostępne są następujące rozszerzenia: Obsługa funkcji drukowania za pomocą SVG. Od wersji 1.3.0. Aby skorzystać z tych rozszerzeń, po prostu wczytaj je po głównym kodzie JavaScript jQuery SVG w sekcji head strony. Każde rozszerzenie rejestruje się w strukturze SVG, jak pokazano, wskazując nazwę punktu wejścia i klasę (funkcję), która obejmuje jej funkcjonalność: dołącz płótno SVG i pobierz instancję SVG jak poprzednio. Następnie uzyskaj dostęp do nowej funkcji poprzez punkt wejścia: Te przykłady zostały zaczerpnięte ze specyfikacji SVG 1.1, aby pokazać, w jaki sposób można je zaimplementować przy użyciu tego pakietu. Wybierz jeden z przykładów zaczerpniętych ze specyfikacji SVG, który demonstruje, w jaki sposób można uzyskać funkcjonalność za pomocą tego pakietu. Zarówno oryginalny dokument SVG, jak i kod SVG jQuery przedstawiono poniżej. Dokument źródłowy SVG SVG jQuery Code Komponent SVG może być aktualizowany za pomocą wbudowanych elementów SVG, usuwany z zawartości lub ładowany z zewnętrznymi dokumentami SVG. W tym ostatnim przypadku możesz przekazać dodatkowe ustawienia, aby dodać do istniejącej treści (addTo: true) lub automatycznie wyczyścić ją (addTo: false - domyślnie). Można również określić funkcję wywołania zwrotnego (onLoad: loadDone), która ma być powiadamiana o zakończeniu zewnętrznego dokumentu (załadowanego asynchronicznie). Funkcja otrzymuje aktualny obiekt opakowania SVG jako parametr, a także dodatkowy parametr komunikatu, jeśli wystąpił błąd. Ten obiekt to podział kontenerów SVG. Dodaj wbudowany fragment Wyczyść To pochodzi od wstawianego fragmentu SVG Animacje atrybutu SVG Dodając rozszerzenie jquery. svganim. js do strony, możesz z łatwością animować kilka atrybutów różnych elementów SVG przy użyciu standardowej funkcji animacji jQuery. Wszystkie atrybuty muszą być poprzedzone prefiksem svg, aby zidentyfikować je jako ustawienia SVG i zapisane w camelCase, np. svgStrokeWidth. Wiele wartości można wyrazić jako dokładne piksele lub jako wartości procentowe. Możesz także użyć przedrostków lub - dla wartości względnych. lub kombinacja efektów Przejdź Atrybuty, które można animować, podsumowano poniżej. Więcej informacji znajduje się na stronie animacji referencji dokumentacji Dodano referencje pluginspage dla tagu osadzania IE Dodano funkcję clipPath Dodano funkcję isSVGElem do menedżera SVG Dodano parametr węzła do skonfigurowania funkcji Dodano ustawienia rodzica do załadowania funkcji Dodano funkcję klonowania Dodano obsługę animacji dla grubości czcionki. odstępy między literami. odstępy między wyrazami. stroke-dasharray. i stroke-dashoffset Skorygowana początkowa szerokość wysokość głównego elementu svg Poprawione dodanie atrybutów xlink Poprawione wyodrębnianie atrybutów xiy Poprawione określenie koloru animacji Poprawiona animacja transformacji macierzy Zaktualizowana do pracy z jQuery 1.5 i 1.6 Umożliwienie zawijania liniowej SVG Pozwól rodzicowi na wiele wywołuje bycie obiektem jQuery Klarowny atrybut stylu podczas animacji Poprawione pobieranie atrybutu transformacji Poprawiona obsługa atrybutów stylu Wykres i status wydruku nie muszą być funkcjami globalnymi Dodano opcję koloru do tytułu wykresu i etykiet osi wykresu oraz funkcji tytułu Zezwól opcję wybicia dla wykresy kołowe jako jedna liczba Dodano opcję koloru do wydruku tytułu i formatu osi wykresu oraz tytułów Dodano obsługę selektora jQuery dla SVG DOM Dodano obsługę zdarzeń jQuery dla SVG DOM Przestarzałe funkcje ścieżki moveTo. lineTo. horizTo. vertTo. curveCTo. smoothCTo. curveQTo. smoothQTo. i arcTo na korzyść ruchu. linia. poziomo. zielony. curveC. smoothC. curveQ. smoothQ. atrybuty SVG zawierające myślniki (-) powinny teraz być określone w przypadku wielbłąda, np. strokeWidth zamiast atrybutów SVG o szerokości obrysu, które są słowami zastrzeżonymi JavaScript, powinny mieć następujący znak podkreślenia (), np. klasa zamiast klasy Dopuszczalne uproszczone załączniki z funkcją onLoad Dopuszczalne uproszczone ładowanie z funkcją onLoad Dozwolone ładowanie z tekstu Naprawiono inicjowanie animacji Rozdzielona zgodność jQuerySVG DOM z rozszerzeniem Dodano kompatybilność atrybutów jQuery: attr i removeAttr Zwiększono obciążenie dokumentu (z wyjątkiem IE) Obsługiwana matryca transformacje w animacjach svg-transform Poprawiony błąd animacji przekształcenia skali Przywrócona kompatybilność Renesis Dopuszczalne wykresy i wykresy dla określonego kontenera, dzięki czemu można je łączyć z innymi elementami SVG Zmienione wykresy i wykresy kontenerów z grupy na elementy svg Wymienione identyfikatory na wykresie i narysuj elementy z klasami Dodano parametr węzła do funkcji toSVG Dodano funkcję zmiany Poprawiono niestandardowy rysunek etykiety dla wykresów Dodano zgodność Google Chrome dla wykresów i działek Poprawiono rozpoznawanie umiejętności SVG Dodano zastępczy dla sekcji CDATA w załadowanych dokumentach Dodano funkcję drukowania wykresów SVG Przestarzałe funkcje wykresu chartArea. chartFormat. chartOptions. i chartType na rzecz obszaru. format. opcje. i wpisz Dodano indeks do funkcji serii wykresów, aby kierować poszczególne serie Dodano funkcje końcowe do serii wykresów, osi i legendy Dodano animację svg-viewBox Dodano obsługę węzłów SVG z jQuery addClass. removeClass. toggleClass. i rodzic hasClass może zostać pominięty, jeśli null we wszystkich wywołaniach funkcji Naprawiono dodanie elementów skryptu Naprawiono dodawanie elementów stylu w Opera Zmiany wewnętrzne dla wartości instancji Zmieniono SVGRoot na SVGWrapper Dodano ustawienie initPath dla początkowego załadowania SVG w IE Dodano funkcję root dla zapewnienia dostępu do element główny SVG Zaktualizowany do działania w Safari 3.1.1 Naprawiono błąd w dokumencie zewnętrznym obciążenia w IE Zwiększone obciążenie z changeSize i dodaniem ustawień onLoad. załadować. usunąć. i jasne funkcje teraz zwracają odwołanie do obiektu głównego SVG Zaktualizowany interfejs, aby był zgodny ze standardami jQuery UI Dodano polecenie zniszczenia Dodano opcjonalne zaokrąglenie atrybutów do funkcji rect i usunięto funkcję roundrect Zmieniono obsługę ustawień za pomocą - w SVG lub słowach zastrzeżonych w JavaScript Poprawiony błąd w inna funkcja Inne drobne poprawki Obsługa odtwarzacza Renesis w IE Dodano animacje atrybutu SVG Wtyczka Dodano wtyczkę kompatybilności 1.0.1 Zaktualizowano do pracy w FF 3

No comments:

Post a Comment