jQuery UI Live

Make jQuery UI Widgets Attach Dynamically

jQuery poseduje odlične dodatke, ali su sve uvezane kontrolama samo u procesu postavljanja stranice. Sa nekim kratkim izmenama ovo se može raditi i sa dinamičkim kontrolama korišćenjem $.live().Live events je sjajna mogućnost dodata počev od jQuery 1.3.

Problem je postojao prilikom dinamičkog dodavanja novih kontrola, pri čemu je bilo potrebno uvezati ih na odgovarajući event.

Recimo slučaj date picker-a:

Tipični Date Picker

$(function() {
	$(':text[name*=date]').datepicker();
});

Ovim smo uvezali sva tekstualna polja koja sadrže “date” u svom nazivu na odgovarajući događej. Ovo funkcioniše dobro, međutim ukoliko ovu kontrolu dodamo dinamički (nakon učitavanja strane) nećemo imati odgovarajući događaj.

Novi Live Date Picker

Live events omogućava da se osluškuje svaki klik na dinamički ubačenu kontrolu. Ovo je primer kako se to radi (live events ne podržava onfocus događaje direktno):

$(':text[name*=date]').live('click', function() {
	$(this).datepicker({showOn: 'focus'}).focus();
});

Ovaj kod će činiti ono što i prethodni, ali će pratiti i dinamički dodate kontrole. Sa ubačenom metodom za fokus on će se ponašati baš kako treba.

U čemu je štos?

Klikom na kontrolu dobićete prvi widget, prvi put nakon dodavanja kontrole nećete biti u mogućnosti da je asocirate direktno tastaturom (tab). Svaki sledeći put možete koristiti i tastaturu za ovaj događaj. Ovo je mali problem, ali pretpostavljamo da će se na ove događaje pretežno kliktati.

Jedan od problema je i korišćenje [name*=date], ovaj selektor takođe uvezuje [name*=update]. Koristeći [name*=date]:not([name*=update]), ali onda [name*=update_date] neće raditi. Naknadnim podešavanjim možete rešiti konkretan problem po potrebi.

izvor:http://www.sitecrafting.com/blog/jquery-ui-live/

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.