Co to jest interfejs użytkownika jquery. Instalowanie biblioteki interfejsu użytkownika jQuery

Biblioteka jQuery UI (interfejs użytkownika) to zestaw elementów szablonu do tworzenia interfejsu użytkownika i jest częścią biblioteki jQuery. Interfejs użytkownika odnosi się do interakcji pomiędzy użytkownikiem a stroną internetową.

Głównym celem biblioteki jQuery UI jest ułatwienie życia twórcom stron internetowych, aby nie tracili czasu na wykonywanie tego samego typu zadań. Najczęściej spotykane skrypty JavaScript na stronach internetowych zostały zebrane w jednej bibliotece, a programiści muszą jedynie pobrać i zastosować niezbędne parametry i metody. Tworzenie interfejsów użytkownika stało się znacznie szybsze.

Kalendarze, slidery i pop-upy stosowane na stronach internetowych stały się już atrybutem obowiązkowym. Dlaczego więc programista musi za każdym razem pisać kod od zera? Kiedy będzie mógł dostosować gotowy szablon i wykorzystać go na swojej stronie internetowej.

Podłączanie interfejsu użytkownika jQuery

Oficjalna strona internetowa: https://jqueryui.com/

Bibliotekę jQuery UI można pobrać na swój komputer lub połączyć za pomocą łącza CDN.

Połączenie przez CDN

Istnieją dwie możliwości pobrania biblioteki.

Pobieranie niestandardowe

Zdecydowanie nie musisz pobierać całej biblioteki, jeśli zamierzasz używać tylko niektórych pojedynczych komponentów. Na stronie Kreatora pobierania usuń zaznaczenie wszystkich pól z wyjątkiem potrzebnych komponentów. Przykładowo, jeśli potrzebujesz tylko widżetu akordeonowego, to zaznacz pole wyboru obok niego, a strona poinformuje Cię, jakie elementy będą potrzebne do pracy. Pola wyboru zostaną umieszczone automatycznie tam, gdzie to konieczne, a Ty nie pobierzesz niepotrzebnych plików, co pozytywnie wpłynie na szybkość ładowania witryny.

Przed kliknięciem przycisku pobierania wybierz odpowiedni motyw, aby uzyskać piękny wygląd komponentów. Projekt wizualny gotowych motywów możesz obejrzeć w dziale Motywy/Galeria.

Aby osadzić komponenty już w stylizowanej witrynie internetowej, bardziej odpowiedni będzie dla Ciebie projektant motywów - ThemeRoller, przejdź do sekcji Motyw. Kiedy zmienisz wygląd panelu sterowania, od razu zobaczysz, jak wyglądają wszystkie widżety. Po zakończeniu tworzenia wyglądu elementu kliknij przycisk pobierania i pobierz tylko wybrane elementy i motyw, co jest bardzo wygodne.

Pełne pobieranie — szybkie pobieranie

Sytuacja, w której potrzebujesz całej biblioteki, jest mało prawdopodobna, chyba że spojrzysz na kod źródłowy. Aby pobrać pełną najnowszą wersję, kliknij przycisk: Stabilna.

Pobraną bibliotekę łączy się w taki sam sposób, jak przez CDN, z tą tylko różnicą, że adresy URL linków będą prowadzić do folderu, w którym umieszczasz te pliki na swoim hostingu.

W sekcji Dema wyraźnie widać, jakie zadania (przykłady demonstracyjne) na stronie można rozwiązać za pomocą biblioteki.

Spójrzmy na przykład widżetu - Tooltip. Celem tego widżetu jest piękne otwarcie podpowiedzi określonej w atrybucie tytułu.

Strukturę HTML tworzymy jak zwykle. W akapicie p umieszczamy pole do wpisania Twojego wieku. W polu tekstowym podajemy atrybut tytułu z tekstem „Proszę podać swój wiek”. Zastosujemy widget podpowiedzi do tego elementu.

Twój wiek:

Po załadowaniu drzewa DOM, na obiekcie dokumentu wywołamy metodę podpowiedzi. Mamy dostęp do całej strony (dokumentu) od razu, dzięki czemu tę metodę można zastosować do innych elementów strony. Po wywołaniu metody podpowiedzi, w podpowiedzi zostaną wyświetlone wartości atrybutów tytułu.

To jest moja formuła na stworzenie prostego robota w Node.js. To jest główny powód, dla którego chcesz manipulować DOM po stronie serwera i prawdopodobnie jest to powód, dla którego tu jesteś.

Najpierw użyj żądania, aby załadować stronę do przeanalizowania. Po zakończeniu ładowania obsłuż go za pomocą cheerio i zacznij manipulować DOMem tak samo, jak w jQuery.

Przykład działania:

Var request = wymagaj("prośba"), cheerio = wymagaj("cheerio"); funkcja parse(url) ( żądanie(url, funkcja (błąd, odpowiedź, treść) ( var $ = cheerio.load(body); $(.question-summary .question-hyperlink").each(function () ( konsola .info($(this).text()); )) ) parse("http://stackoverflow.com/");

Ten przykład wyświetli w konsoli wszystkie najważniejsze pytania wyświetlane na stronie głównej SO. Dlatego kocham Node.js i jego społeczność. To nie mogło być prostsze :-)

Zainstaluj zależności:

npm żądanie instalacji cheerio

I uruchom (jeśli skrypt znajduje się powyżej w pliku crawler.js):

Kodowanie

Niektóre strony będą zawierać treść w języku innym niż angielski w określonym kodowaniu i konieczne będzie zdekodowanie jej do formatu UTF-8. Na przykład strona w języku portugalskim brazylijskim (lub innym języku pochodzenia łacińskiego) najprawdopodobniej będzie zakodowana w standardzie ISO-8859-1 (czyli „latin1”). Gdy wymagane jest dekodowanie, sugeruję, aby żądanie nie interpretowało w żaden sposób treści i zamiast tego użyło iconv-lite do wykonania zadania.

Przykład działania:

Var request = require("request"), iconv = require("iconv-lite"), cheerio = require("cheerio"); var PAGE_ENCODING = "utf-8"; // zmień, aby dopasować funkcję kodowania strony parse(url) ( request(( url: url, encoding: null // jeszcze nie interpretuj treści ), funkcja (błąd, odpowiedź, treść) ( var $ = cheerio.load(iconv. decode(treść, PAGE_ENCODING)); $(.podsumowanie pytania .hiperlink-pytania").each(funkcja () ( console.info($(this).text()); )) ) parse( "http: //stackoverflow.com/");

Przed rozpoczęciem zainstaluj zależności:

npm żądanie instalacji iconv-lite cheerio

I w końcu:

Następujące linki

Następnym krokiem jest podążanie za linkami. Załóżmy, że chcesz wyświetlić listę wszystkich plakatów z każdego najważniejszego pytania w SO. Powinieneś najpierw wypisać wszystkie najważniejsze pytania (przykład powyżej), a następnie wprowadzić każdy link, analizując każdą stronę z pytaniami, aby uzyskać listę zaangażowanych użytkowników.

Kiedy zaczniesz podążać za linkami, rozpocznie się piekło wywołania zwrotnego. Aby tego uniknąć, powinieneś użyć jakiegoś rodzaju obietnic, kontraktów futures lub czegoś innego. Zawsze przechowuję asynchronizację w moim zestawie narzędzi. Oto kompletny przykład robota korzystającego z asynchronii:

Var url = require("url"), request = require("request"), async = require("async"), cheerio = require("cheerio"); var baseUrl = "http://stackoverflow.com/"; // Pobiera stronę i zwraca wywołanie zwrotne z funkcją obiektu $ getPage(url, parseFn) ( request(( url: url ), funkcja (błąd, odpowiedź, treść) ( parseFn(cheerio.load(body)) )); ) getPage(baseUrl, funkcja ($) ( var pytania; // Uzyskaj listę pytań pytania = $(.question-summary .question-hyperlink").map(function () ( return ( title: $(this). tekst(), url: url.resolve(baseUrl, $(this).attr("href")) )).get().slice(0, 5); // ogranicz do 5 najważniejszych pytań // Dla każdego pytanie async.map(questions, funkcja (pytanie, pytanieWykonane) ( getPage(question.url, funkcja ($$) ( // Uzyskaj listę użytkowników question.users = $$(.post-signature .user-details a" ).map(funkcja () ( return $$(this).text(); )).get(); pytanieWykonane(null, pytanie) ), funkcja (err, pytaniaWithPosters) ( // Ta funkcja to wywoływane przez async po przeanalizowaniu wszystkich pytań pytaniaWithPosters.forEach(function (pytanie) ( // Drukuje każde pytanie wraz z listą użytkowników console.info(question.title); pytanie.users.forEach(funkcja (użytkownik) ( console.info("\t%s", użytkownik); )); )); )); ));

Pytanie: Nieprawidłowe połączenie jQuery w Wordpress

Po podłączeniu wtyczki w poście WordPress wtyczka nie widzi jquery, a konsola naturalnie odpowiada:

JQuery(...).rotator nie jest funkcją
W tym samym wpisie tuż przed podłączeniem wtyczki znajduje się:

JavaScript

1 2 3

< script>if (window.jQuery ) ( alert("ss" ) ; )

Co zwraca ss. Podłączyłem to wfunctions.php, błędnie w header.php, zainstalowałem wtyczkę do łączenia jquery na stronach - cholera, nie działa.

Z góry bardzo dziękuję wszystkim, którzy zwrócili uwagę.

Odpowiedź:

Komentarz moderatora

Ruslaner___, hmm, cross-posting na forum jest zabroniony
ostrzeżenie dla ciebie

Pytanie: Podłączanie interfejsu użytkownika JQuery

Próbuję połączyć interfejs użytkownika JQuery w następujący sposób. Pomiędzy tagami head dodaję biblioteki i plik css:

Kod HTML5

1 2 3

Kod HTML5

1 2 3 4 5 6 7 8 9 10 11 12

$("#slider").slider((zakres: "min", min: 1, max: 100, wartość: 37, slajd: funkcja(zdarzenie, ui) ( $("#kwota").val("$ " + wartość interfejsu użytkownika); ) )); $("#kwota").val("$" + $("#suwak").slider("wartość"));

A pomiędzy tagami treści próbuję wyświetlić ten sam suwak

W rezultacie nic nie jest wysyłane. Sprawdzałem za pomocą Firebuga, nie znalazł żadnych błędów. Co powinienem zrobić, żeby to działało?

Odpowiedź: pro1004ok,

Kod JavaScript

1 2 3 4 5

$(funkcja () ( // tutaj cały kod jQuery) ) ;

Pytanie: Podłączanie jQuery

Co za głupia rzecz, że jQuery nie działa.

HTML5

1 2 3 4 5 6 7 8 9 10 11 12

Strona internetowa< script type= "text/javascript" src= "js/jquery-ui-1.8.12.custom.min.js" >

To wszystko! Następnie możesz użyć funkcji interfejsu użytkownika jQuery na swojej stronie. Na przykład użycie jednego wiersza kodu JavaScript w celu umożliwienia przeciągania zwykłego elementu:

~lt~!DOCTYPE html~gt~ ~lt~html~gt~ ~lt~head~gt~ ~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" / ~gt~ ~lt~script src="http://code.jquery.com/jquery-1.8.3.js"~gt~~lt~/script~gt~ ~lt~script src="/ui/jqueryui .custom.js"~gt~~lt~/script~gt~ ~lt~link type="text/css" href="/ui/jqueryui.custom.css" rel="arkusz stylów" /~gt~ ~lt ~style~gt~ body(czcionka: 9pt Arial,bezszeryfowa;) p(kolor:#888; margines:8px 0 12px 0) #przeciągać(szerokość:125px; wysokość:125px; dopełnienie:0.5em; obramowanie:1px solidny #ddd; kolor tła:#eee) ~lt~/style~gt~ ~lt~/head~gt~ ~lt~body~gt~ ~lt~div id="przeciągany"~gt~ ~lt~p ~gt~Element przeciągalny~lt~/p~gt~ ~lt~/div~gt~ ~lt~script~gt~ $("#przeciągalny").draggable(); // ta linia kodu, która umożliwia przeciąganie elementu ~lt~/script~gt~ ~lt~/body~gt~ ~lt~/html~gt~

Praca z wtyczkami

Wszystkie wtyczki behawioralne i widgety działają w podobny sposób. Każda wtyczka jQuery UI jest reprezentowana przez jedną główną metodę, która jest wywoływana na wybranych elementach. Jego nazwa jest zawsze zgodna z nazwą wtyczki. Za pomocą tej metody możesz utworzyć instancję (zainstalować) wtyczkę na elementach, sprawdzić i zmienić właściwości wtyczki, zainstalować procedury obsługi zdarzeń, a także uruchamiać funkcje wtyczek, które zwykle nazywane są metodami (chociaż nie są to metody w zwykłym znaczeniu tego pojęcia ).

Instancja (instalacja)

Aby zainstalować dowolną wtyczkę na elementach strony, wystarczy zaznaczyć potrzebne elementy za pomocą jQuery, a następnie wywołać na nich metodę wtyczki (której nazwa zawsze odpowiada nazwie wtyczki):

Metody

Zazwyczaj metoda obiektu w JavaScript oznacza funkcję wywoływaną na tym obiekcie w następujący sposób:

obj.A(); // wywołanie metody A na obiekcie obj obj.B () ; // wywołaj metodę B na obiekcie obj

Jednak w ramach pracy z konkretnymi wtyczkami jQuery UI metody nazywane są tą formą nagrywania:

$("#someId" ) .plaginName ( "nazwa metody" , parametry metody) ;

Na przykład:

Nieruchomości

Każda wtyczka posiada szereg właściwości (ich opisy można znaleźć w dokumentacji odpowiednich wtyczek). Każdą właściwość można ustawić w momencie tworzenia wtyczki. Aby to zrobić, instalując wtyczkę na elemencie, należy przekazać obiekt z właściwościami w formacie (nazwa_właściwości_1:wartość_1, nazwa_właściwości_2:wartość_2, ...):

// utwórz okno dialogowe z elementu o id=someId za pomocą // wtyczki dialogowej i podaj tytuł okna $("#someId" ) .dialog (( title: "Wiadomość" ) ) ; // utwórz pierwszy element div na stronie jako kalendarz za pomocą // wtyczki datepicker i określ minimalną i maksymalną datę $("div:first") .datepicker (( minDate: new Date(2007, 1 - 1, 1) , maxDate: nowa Data(2013, 1 - 1, 1) ) ;

Ponadto wartość dowolnej właściwości można sprawdzić lub zmienić po utworzeniu wtyczki. Aby to zrobić, musisz użyć metody „opcji”:

// znajdź tytuł okna dialogowego var dialogTitle = $("#someId" ) .dialog ("opcja", "tytuł" ); // zmień tytuł dodając przedrostek "#1 " $("#someId" ) .dialog ("option" , "title" , "#1 " + dialogTitle) // zmień minimalną datę w kalendarzu // jest instalowany w pierwszym div na stronie $("div:first") .datepicker ("opcja", "minDate", new Date(2008 $("selector") .dialog (( zamknij: funkcja (event, ui) (...)));

Tworzenie własnych wtyczek

Oprócz organizowania wielu wygodnych i intuicyjnych wtyczek, jQuery UI zapewnia narzędzie, dzięki któremu możesz samodzielnie tworzyć podobne wtyczki - Fabrykę Widgetów UI. Jedną z jego dużych zalet jest to, że organizuje pewne możliwości OOP, które pozwalają modyfikować istniejące widżety i tworzyć własne hierarchie widżetów.

jQuery UI to zestaw widżetów i wtyczek opracowanych przez samych programistów jQuery. Moim zdaniem to narzędzie należy przestudiować tak bardzo, jak to konieczne, aby nie pisać własnych „rowerów”. Możesz pobrać i przeczytać o tym dodatku dla jQuery na stronie głównej projektu - http://jqueryui.com/.

Co powinniśmy wiedzieć o widżetach i wtyczkach? Po pierwsze, czym są, a po drugie, jak działają. Spróbuję skupić się na tych dwóch punktach.

Interaktywność

Zacznę od przydatnych wtyczek, które mogą ułatwić życie przy tworzeniu interaktywnych interfejsów:

Przeciąganie – ten komponent umożliwia przeciąganie dowolnego elementu DOM za pomocą myszy
Droppable jest logicznym rozszerzeniem komponentu Draggable; niezbędne do pracy z kontenerami, do których można przeciągać i upuszczać elementy
Resizable – jak sama nazwa wskazuje, pozwala na zmianę rozmiaru dowolnych elementów DOM
Wybieralne – pozwala uporządkować „wybór” elementów; wygodny w użyciu do organizowania zarządzania obrazami
Sortable – sortowanie elementów DOM

Widżety

Widżety są już kompleksowym rozwiązaniem zawierającym nie tylko kod JavaScript, ale także implementację HTML i CSS:

Wszystkie widżety i wtyczki są powiązane z rdzeniem jQuery UI, jednak istnieją także zależności pomiędzy samymi wtyczkami i warto o nich pamiętać. Ale nie martwcie się – budując pakiet jQuery UI, wszystkie zależności są sprawdzane automatycznie, tj. gdy potrzebujesz wcześniej niepodłączonego widgetu, lepiej pobrać zestaw ponownie.

Narzędzia

Nie mamy zbyt wielu narzędzi - tu jest przydatna wtyczka Position pozwalająca kontrolować położenie elementów DOM - http://jqueryui.com/position/, jest też fabryka do tworzenia widżetów, ale napiszę opowiem ci o tym trochę później.

Efekty

Wśród efektów, jakie zapewnia jQuery UI, wyróżniam cztery punkty:

Animacja kolorów
Animacja zmiany klasy
Zestaw efektów
Rozszerzanie możliwości łagodzenia

Za animację kolorów odpowiada komponent „Effects Core”, który umożliwia animację zmian kolorów za pomocą funkcji „.animate()”:

$("#my" ).animate(( kolor tła: "czarny" ), 1000 );

Tak, tak, podstawowy jQuery nie może tego zrobić, ale jQuery UI pozwala animować następujące parametry:

kolor tła
obramowanieDółKolor
obramowanieLewyKolor
obramowaniePrawyKolor
obramowanieTopKolor
kolor
zarysKolor

Kolejną funkcjonalnością zawartą w „Effects Core” jest animacja zmian w klasie elementu DOM, tj. kiedy przypiszesz nową klasę do elementu, zamiast zwykłego natychmiastowego zastosowania nowych właściwości CSS, zobaczysz animację tych właściwości od bieżących do tych określonych w przypisanej klasie. Do skorzystania z tej funkcjonalności potrzebni będą starzy znajomi - metody „.addClass()”, „.toggleClass()” i „.removeClass()”, z jedną tylko różnicą – przy wywołaniu metody należy określić prędkość animacji jako drugi parametr:

$("#my" ).addClass("aktywne" , 1000 ); $("#my" ).toggleClass("aktywne" , 1000 ); $("#my" ).removeClass("aktywne" , 1000 );

Jeśli z poprzedniego akapitu nie rozumiesz, co się dzieje, to ten kod jest dla Ciebie:

#my (rozmiar czcionki: 14px ; ) #my .active ( rozmiar czcionki :20px ; ) $(funkcja () ( $("#my" ).addClass("active" , 1000 ); // tutaj się to zmienia w ten sam sposób, następnie wywołaj $("#my" ).animate(("rozmiar czcionki" :"20px" ), 1000 ));

Istnieje również metoda „.switchClass()”, która zastępuje jedną klasę inną, ale nigdy nie okazała się przydatna.

Nie będę długo mówił o zestawie efektów, lepiej zobaczyć je w akcji na stronie http://jqueryui.com/effect/. Do pracy z efektami pojawia się metoda „.effect()”, ale lepiej nie używać jej samodzielnie, ponieważ interfejs użytkownika rozszerzył funkcjonalność wbudowanych metod „.show()”, „.hide( )” i „.toggle()”. Teraz, przekazując nazwę efektu jako parametr szybkości animacji, uzyskasz pożądany rezultat:

$("#mój" ).hide("puff" ); $("#mój" ).show("przelew" ); $("#my" ).toggle("eksploduj" );

Podam listę efektów, może ktoś zapamięta: oślepienie, odbicie, przycięcie, upuszczenie, eksplodowanie, złożenie, podświetlenie, zaciągnięcie, pulsacja, skalowanie, potrząśnięcie, rozmiar, przesunięcie, przeniesienie.

Jeśli w dowolnym momencie będziesz musiał dokonać zmian w motywie, otwórz plik „jquery-ui-#.#.##-custom.css” i znajdź linię zaczynającą się od tekstu „Aby wyświetlić i zmodyfikować ten motyw, odwiedź http:...” Kliknij podany link i użyj ThemeRoller, aby wprowadzić niezbędne zmiany.

Piszemy własny widget

Punktem wyjścia dla Ciebie przy pisaniu widgetu dla jQuery UI będzie oficjalna dokumentacja, jednak jako że nie każdy zna dobrze język angielski, postaram się przetłumaczyć i dostosować zawarte w niej informacje.

Pierwszą rzeczą, o której warto wspomnieć, jest to, że zasady pisania wtyczek do jQuery są zbyt narzucające, co nie wpływa na ich jakość. Tworząc jQuery UI zdecydowaliśmy się na standaryzację procesu pisania wtyczek i widżetów. Nie mogę powiedzieć, jak udany był ten pomysł, ale był zdecydowanie lepszy niż był. Zacznę od opisania frameworka dla Twojego widgetu:

$.widget("book.expose" , ( // opcje ustawień domyślnych: ( kolor: "czerwony" ), // inicjalizacja widgetu // dokonaj zmian w DOM i dołącz procedury obsługi _create: funkcja () ( this .element; / / przeszukany obiekt w opakowaniu jQuery to .name; // nazwa - ujawnij tę .namespace; // spacja - zarezerwuj ten .element.on("click." +this .eventNamespace, funkcja () ( console .log("kliknij " ); )); ), // metoda odpowiedzialna za zastosowanie ustawień _setOption: funkcja ( klucz, wartość ) ( // zastosuj zmiany w ustawieniach ._super("_setOption" , klucz, wartość); ), // metoda _destroy powinna być przeciwieństwem _create // powinna usunąć wszystkie zmiany dokonane w DOM i wszystkie procedury obsługi, jeśli takie istnieją, _destroy: funkcja () ( this .element.off("." +this .eventNamespace); ) ));

Wyjaśnię tym, którzy nie czytali komentarzy:

opcje – przechowywanie ustawień widżetu dla konkretnego elementu

Create() – odpowiada za inicjalizację widgetu – tutaj powinny nastąpić zmiany w DOM i należy „zawiesić” procedury obsługi zdarzeń

Destroy() jest antypodem dla „_create()” - powinno oczyścić wszystko, co zaśmieciliśmy

SetOption(key, value) – metoda zostanie wywołana przy próbie zmiany jakichkolwiek ustawień:

$("#my" ).ujawnij((klucz:wartość))

Uważne oko zauważy, że wszystkie wymienione metody zaczynają się od podkreślenia - w ten sposób można wyróżnić metody „prywatne”, których nie można wykonać. Jeśli spróbujemy uruchomić „$(”#my”).expose(”_destroy”), pojawi się błąd. Ale pamiętaj – to tylko umowa, zachowaj ją!

Aby ominąć umowę o ochronie prywatności, możesz skorzystać z metody „data()”:

$("#my" ).data("expose" )._destroy() // miejsce na buźkę "(zło)"

W tym przykładzie starałem się nadać dobry ton pisaniu widżetów - „zawiesiłem” procedury obsługi zdarzeń w przestrzeni nazw. Dzięki temu będziesz mieć możliwość kontrolowania tego, co będzie się działo w przyszłości, bez konieczności wchodzenia w kod widżetu. "Prawdziwa historia".

Kod opisany w metodzie „_destroy()” jest zbędny, ponieważ jest już wykonywany w publicznej funkcji „destroy()”. Przedstawiono tutaj dla przejrzystości.

A dla leniwych, aby nie zapisywać za każdym razem „eventNamespace” w procedurach obsługi zdarzeń, programiści dodali w wersji 1.9.0 dwie metody: „_on()” i „_off()”. Pierwszy z nich przyjmuje dwa parametry:

Element DOM, selektor lub obiekt jQuery
zestaw procedur obsługi zdarzeń jako obiekt

Wszystkie wymienione zdarzenia „zawieszą się” w przestrzeni „eventNamespace”, tj. wynik będzie prawdopodobnie taki sam:

this ._on(ten .element, ( najechanie myszą:funkcja (zdarzenie ) ( konsola .log("Witaj mysz"); ), myszout:funkcja (zdarzenie ) ( konsola .log("Żegnaj mysz" ); ) ));

Druga metoda, „_off()”, pozwala na selektywne wyłączanie procedur obsługi:

this ._off(this .element, "kliknięcie myszą" );

Cóż, rama to łódka, czas przejść do funkcjonalności. Dodajmy dowolną funkcję z dowolną funkcjonalnością:

CallMe:function () ( konsola .log("Hello?" ); )

Dostęp do tej funkcji możemy łatwo uzyskać zarówno z innych metod widgetów, jak i z zewnątrz:

// z wnętrza tej .callMe() // z zewnątrz $("#my" ).expose("callMe" )

Jeśli Twoja funkcja przyjmuje parametry, to są one przekazywane w następujący sposób:

$("#my" ).expose("zadzwoń do mnie", "Witam!")

Jeżeli chcesz dotrzeć do metody widgetu w procedurze obsługi zdarzeń to nie zapomnij o zasięgu zmiennej i wykonaj następujący manewr:

( _create: funkcja () ( var self = this ; // oto jest! this .element.on("click." +this .eventNamespace, funkcja () ( // użyj tutaj self, ponieważ to już wskazuje na // element na który klikamy self.callMe(); )) ) )

Dobra, chodźmy, teraz porozmawiajmy o wydarzeniach. W celu bardziej elastycznego tworzenia i wdrażania widżetów dostępna jest funkcjonalność tworzenia dowolnych zdarzeń i ich „odsłuchiwania”:

// wywołaj zdarzenie this ._trigger("incomingCall" ); // subskrybuj zdarzenie w momencie inicjalizacji widżetu $("#my" ).expose(( incommingCall: funkcja (ev ) ( konsola .log("din-don" ); ) )) // lub później, używając nazwa zdarzenia // nazwa widżetu + nazwa zdarzenia $("#my" ).on("exposeincomingCall" , funkcja () ( konsola .log("tru-lya-lya" ) ));

Materiału jest, rozumiem, sporo, ale dodam też opis kilku metod, które można wywołać z samego widżetu:

Delay() – funkcja ta działa podobnie jak „setTimeout()”, jedynie kontekst przekazywanej funkcji będzie wskazywał na sam widget (aby nie zawracać sobie głowy zakresem)

Hoverable() i _focusable() – do metod tych należy podać elementy, dla których należy nasłuchiwać zdarzeń „hover” i „focus”, aby automatycznie dodać „ui-state-hover” i „ui-state -focus” do nich, gdy takie wystąpią

Hide() i _show() – te dwie metody pojawiły się w wersji 1.9.0, powstały w celu ujednolicenia zachowania widżetów przy wykorzystaniu metod animacji; Ustawienia są zwykle ukryte w opcjach odpowiednio pod klawiszami „ukryj” i „pokaż”. Metody należy stosować w następujący sposób:

( opcje: ( hide: ( efekt: "slideDown" , // ustawienia odpowiadają czasowi trwania wywołania: 500 // .slideDown(500) ) ) ) // Wewnątrz widżetu powinny być używane wywołania _hide() i _show() this ._hide(this .element, this .options.hide, funkcja () ( // to jest nasza konsola funkcji wywołania zwrotnego .log("hidden" ); ));

Jest jeszcze kilka metod, które zostały wdrożone przed nami:

(włącz: funkcja () (zwróć to ._setOption("wyłączone" , fałsz); ), wyłącz: funkcję () (zwróć to ._setOption("wyłączone" , prawda); ) )

W rzeczywistości te funkcje tworzą synonim do wywołania:

$("#my" ).expose(( "wyłączone": prawda )) // lub fałsz

Naszym zadaniem jest po prostu wyśledzenie tej flagi w metodzie „_setOption()”.