Próbuję napisać wtyczkę jQuery, która zapewni dodatkowe funkcje / metody do obiektu, który ją wywołuje. Wszystkie samouczki, które czytam online (przeglądałem przez ostatnie 2 godziny) obejmują co najwyżej, jak dodawać opcje, ale nie dodatkowe funkcje.
Oto, co chcę zrobić:
// formatuj div, aby był kontenerem wiadomości, wywołując wtyczkę dla tego diva
$("#mydiv").messagePlugin();
$("#mydiv").messagePlugin().saySomething("hello");
lub coś podobnego. Oto, do czego sprowadza się: wywołuję wtyczkę, a następnie wywołuję funkcję związaną z tą wtyczką. Nie mogę znaleźć sposobu, aby to zrobić i widziałem już wiele wtyczek, które robią to wcześniej.
Oto, co mam do tej pory dla wtyczki:
jQuery.fn.messagePlugin = function() {
return this.each(function(){
alert(this);
});
//i tried to do this, but it does not seem to work
jQuery.fn.messagePlugin.saySomething = function(message){
$(this).html(message);
}
};
Jak mogę osiągnąć coś takiego?
Dziękuję Ci!
Aktualizacja 18 listopada 2013: Zmieniłem poprawną odpowiedź na odpowiedź na następujące komentarze i opinie Hari.
źródło
this.data('tooltip', $.extend(true, {}, $.fn.tooltip.defaults, methodOrOptions));
więc teraz mogę uzyskać dostęp do opcji w dowolnym momencie po inicjalizacji.init
.Oto wzorzec, którego użyłem do tworzenia wtyczek za pomocą dodatkowych metod. Użyłbyś tego w następujący sposób:
lub, aby wywołać metodę bezpośrednio,
Przykład:
źródło
;
pierwszego wiersza? proszę wyjaśnij mi :)Co z tym podejściem:
Wybrane obiekty są przechowywane w komunikacie Zamknięcie wtyczki, a ta funkcja zwraca obiekt zawierający funkcje związane z wtyczką, w każdej funkcji możesz wykonać pożądane działania na aktualnie wybranych obiektach.
Możesz przetestować i bawić się kodem tutaj .
Edycja: Zaktualizowano kod, aby zachować moc łańcuchowości jQuery.
źródło
$('p').messagePlugin()
dopóki nie wywołasz jednej z dwóch funkcji, które zwraca.Problem z aktualnie wybraną odpowiedzią polega na tym, że tak naprawdę nie tworzysz nowej instancji niestandardowej wtyczki dla każdego elementu w selektorze, tak jak myślisz, że robisz ... w rzeczywistości tworzysz tylko jedną instancję i przekazujesz sam selektor jako zakres.
Zobacz to skrzypce, aby uzyskać głębsze wyjaśnienie.
Zamiast tego musisz zapętlić selektor za pomocą jQuery.each i utworzyć nową instancję niestandardowej wtyczki dla każdego elementu w selektorze.
Oto jak:
I działające skrzypce .
Zauważysz, jak w pierwszym skrzypce wszystkie divy są zawsze przesuwane w prawo dokładnie taką samą liczbę pikseli. Jest tak, ponieważ istnieje tylko jeden obiekt opcji dla wszystkich elementów w selektorze.
Stosując powyższą technikę, zauważysz, że w drugim skrzypce każdy div nie jest wyrównany i jest losowo przenoszony (z wyłączeniem pierwszego div, ponieważ jego randomizator jest zawsze ustawiony na 1 w linii 89). Wynika to z tego, że teraz właściwie tworzymy nową instancję niestandardowej wtyczki dla każdego elementu w selektorze. Każdy element ma swój własny obiekt opcji i nie jest zapisywany w selektorze, ale w samej niestandardowej wtyczce.
Oznacza to, że będziesz mógł uzyskać dostęp do metod niestandardowej wtyczki utworzonej na określonym elemencie DOM z nowych selektorów jQuery i nie będziesz zmuszony do buforowania ich, jak w pierwszym skrzypce.
Na przykład, zwróciłoby to tablicę wszystkich obiektów opcji przy użyciu techniki z drugiego skrzypce. Wróciłby niezdefiniowany w pierwszym.
W ten sposób będziesz musiał uzyskać dostęp do obiektu opcji w pierwszym skrzypcach i zwróciłby tylko jeden obiekt, a nie ich tablicę:
Sugeruję użycie powyższej techniki, a nie tej z obecnie wybranej odpowiedzi.
źródło
$('.my-elements').find('.first-input').customPlugin('update', 'first value').end().find('.second-input').customPlugin('update', 'second value'); returns Cannot read property 'end' of undefined
. jsfiddle.net/h8v1k2pLjQuery znacznie ułatwił to dzięki wprowadzeniu fabryki widżetów .
Przykład:
Inicjalizacja:
Wywołanie metody:
(Tak budowana jest biblioteka interfejsu użytkownika jQuery .)
źródło
Prostszym podejściem jest użycie funkcji zagnieżdżonych. Następnie możesz je połączyć w sposób obiektowy. Przykład:
A oto jak to nazwać:
Bądź jednak ostrożny. Nie można wywołać funkcji zagnieżdżonej, dopóki nie zostanie ona utworzona. Więc nie możesz tego zrobić:
Funkcja DoEvenMore nawet nie istnieje, ponieważ funkcja DoSomething nie została jeszcze uruchomiona, co jest wymagane do utworzenia funkcji DoEvenMore. W przypadku większości wtyczek jQuery naprawdę będziesz mieć tylko jeden poziom zagnieżdżonych funkcji, a nie dwa, jak pokazałem tutaj.
Upewnij się tylko, że podczas tworzenia funkcji zagnieżdżonych definiujesz te funkcje na początku ich funkcji nadrzędnej, zanim zostanie wykonany inny kod w funkcji nadrzędnej.
Na koniec zauważ, że element „ten” jest przechowywany w zmiennej o nazwie „_this”. W przypadku funkcji zagnieżdżonych powinieneś zwrócić „_this”, jeśli potrzebujesz odwołania do instancji w wywołującym kliencie. Nie można po prostu zwrócić „this” w zagnieżdżonej funkcji, ponieważ zwróci to odwołanie do funkcji, a nie do instancji jQuery. Zwrócenie referencji jQuery umożliwia połączenie wewnętrznych metod jQuery po powrocie.
źródło
Mam go od jQuery Plugin Boilerplate
Opisano również w jQuery Plugin Boilerplate, reprise
źródło
$('.first-input').data('pluginName').publicMethod('new value').css('color', red);
zwracaCannot read property 'css' of undefined
jsfiddle.net/h8v1k2pL/1return $element
więc w tym przykładzie zmieniłbyś go naplugin.foo_public_method = function() {/* Your Code */ return $element;}
@Salim dzięki za pomoc ... github.com/AndreaLombardo/BootSideMenu/pull/34Za późno, ale może kiedyś komuś pomoże.
Byłem w takiej samej sytuacji, jak tworzenie wtyczki jQuery za pomocą niektórych metod, a po przeczytaniu niektórych artykułów i niektórych opon tworzę szablon kafelka wtyczki jQuery ( https://github.com/acanimal/jQuery-Plugin-Boilerplate ).
Ponadto opracowuję z nim wtyczkę do zarządzania tagami ( https://github.com/acanimal/tagger.js ) i napisałem dwa posty na blogu wyjaśniające krok po kroku tworzenie wtyczki jQuery ( http: // acuriousanimal. com / blog / 2013/01/15 / Things-i-Learn-Creating-a-jquery-plugin-part-i / ).
źródło
Możesz to zrobić:
W ten sposób twój obiekt wtyczek jest przechowywany jako wartość danych w twoim elemencie.
źródło
Co z używaniem wyzwalaczy? Czy ktoś zna jakąś wadę korzystania z nich? Korzyścią jest to, że wszystkie zmienne wewnętrzne są dostępne za pośrednictwem wyzwalaczy, a kod jest bardzo prosty.
Zobacz na jsfiddle .
Przykładowe użycie
Podłącz
źródło
Tutaj chcę zasugerować kroki tworzenia prostej wtyczki z argumentami.
Tutaj dodaliśmy domyślny obiekt o nazwie
params
i ustawiliśmy domyślne wartości opcji za pomocąextend
funkcji. Stąd, jeśli przekażemy pusty argument, to ustawi wartości domyślne zamiast tego ustawi.Czytaj więcej: Jak utworzyć wtyczkę JQuery
źródło
Spróbuj tego:
źródło
Oto moja wersja tego produktu. Podobnie do tych opublikowanych wcześniej, możesz zadzwonić:
- lub uzyskaj bezpośredni dostęp do instancji @
plugin_MessagePlugin
MessagePlugin.js
źródło
Poniższy wtyczki struktura wykorzystuje jQuery-
data()
-method zapewnienie interfejsu publicznego do wewnętrznych wtyczki-metod / -Settings (przy zachowaniu jQuery chainability)Teraz możesz wywoływać wewnętrzne metody wtyczek w celu uzyskania dostępu lub modyfikacji danych wtyczki lub odpowiedniego elementu za pomocą tej składni:
Tak długo, jak
myPublicPluginMethod()
zwrócisz bieżący element (this) od wewnątrz, twoja implementacja jQuery-chainability będzie zachowana - więc następujące działania:Oto kilka przykładów (szczegóły - sprawdź to skrzypce ):
źródło
Można to zrobić tak, aby działało w „przyjemny” sposób
defineProperty
. Gdzie „miły” oznacza bez konieczności()
uzyskiwania przestrzeni nazw wtyczek ani przekazywania nazwy funkcji ciągiem.Zgodność nit:
defineProperty
nie działa w starożytnych przeglądarkach, takich jak IE8 i starsze. Uwaga:$.fn.color.blue.apply(foo, args)
nie działa, musisz użyćfoo.color.blue.apply(foo, args)
.Łącze JSFiddle
źródło
Zgodnie ze standardem jquery możesz utworzyć wtyczkę w następujący sposób:
Jak wywołać tę wtyczkę?
Odniesienie: link
źródło
Myślę, że to może ci pomóc ...
W powyższym przykładzie stworzyłem prostą wtyczkę podświetlającą jquery. Udostępniłem artykuł, w którym dyskutowałem o tym, jak stworzyć własną wtyczkę jQuery od Basic do Advance. Myślę, że powinieneś to sprawdzić ... http://mycodingtricks.com/jquery/how-to-create-your-own-jquery-plugin/
źródło
Poniżej znajduje się mała wtyczka, która ma metodę ostrzegania w celu debugowania. Zachowaj ten kod w pliku jquery.debug.js: JS:
HTML:
źródło
Oto jak to robię:
źródło
To, co zrobiłeś, to zasadniczo rozszerzenie obiektu jQuery.fn.messagePlugin o nową metodę. Co jest przydatne, ale nie w twoim przypadku.
Musisz zrobić, używając tej techniki
Ale możesz osiągnąć to, co chcesz. Mam na myśli, że jest sposób na zrobienie $ („# mydiv”). MessagePlugin (). SaySomething („hello”); Mój przyjaciel zaczął pisać o luginach i jak rozszerzyć je o łańcuch funkcjonalności tutaj jest link do jego bloga
źródło