Dziudek's jogger

Plik element.event.js to kolejny z elementów frameworka mootools, który z pewnością można zaliczyć do bardzo przydatnych. Wraz z tą częścią kursu nauczymy się likwidować dwa ważne problemy związane ze zdarzeniami, poskromimy klawiaturę przy użyciu JavaScript oraz zajmiemy się dodawaniem, usuwaniem i klonowaniem zdarzeń elementów ;)

W pliku element.event.js mamy zawarte 4 metody dla klasy Event oraz kilkanaście właściwości dla obiektów typu event, do tego dochodzi 6 metod klasy Element oraz trzy nowe zdarzenia i jedna metoda rozszerzająca klasę Function.

Czytaj dalej...

Plik element.form.js zawiera dwie metody rozszerzające możliwości klasy Element w zakresie obsługi formularzy.

getValue

Metoda getValue zwraca nam wartość danego elementu formularza. W wypadku pól input, textarea czy select (jednokrotnego wyboru) zwracana jest sama wartość, natomiast w wypadku pola select wielokrotnego wyboru jest zwracana tablica wybranych wartości.

Składnia metody jest bardzo prosta:

element.getValue();

toQueryString

Metoda toQueryString służy do zamiany zawartości pól formularza na łańcuch postaci:

nazwa_pola=wartość_pola&nazwa_drugiego_pola=wartość_pola

znany dobrze wszystkim, którzy przesyłają dane metodą GET ;]

Składnia metody jest podobna do składni getValue:

element.toQueryString();

Z tą różnicą, że element musi być odwołaniem do formularza zatem zapis będzie wyglądał następująco:

$('id_formularza').toQueryString();

Jeszcze może dodam, że plik element.form.js zawiera trzecią metodę getFormElements, która zwraca wszystkie elementy danego formularza - a nuż komuś się przyda ;) Składnia:

$('id_formularza').getFormElements()

I to by było wszystko na temat najmniejszego w grupie Element pliku ;) Dla odmiany w następnej części kursu zajmiemy się najbardziej rozbudowanym plikiem w tej grupie - element.events.js , którego zawartość pewnie już w dużym stopniu znacie z opisu pliku event.js jeszcze z mootools 1.0, ale zmiany jakie się pojawił są dość ciekawe więc wypada napisać nowy wpis ;)

W pliku element.filters.js znajdziemy metody, które pozwolą nam na zwiększenie możliwości selekcji z danej kolekcji elementów (na przykład tej zwracanej za pomocą funkcji $$). Dzięki tym metodom możemy dokonać filtrowania zwracanych elementów według tagu, klasy, identyfikatora oraz atrybutu.

filterByTag

Metoda filterByTag pozwala wyselekcjonować nam z danej grupy elementów tylko te elementy, które są danego typu - na przykład linki, grafiki czy elementy listy. Gdybyśmy przykładowo chcieli wyselekcjonować z grupy wszystkich obrazków i linków danego dokumentu tylko linki to zapiszemy:

document.getElementsBySelector('a, img').filterByTag('a');

Jak widzimy składnia tej metody jest prosta:

kolekcja_elementów.filterByTag('typ_elementu');

filterByClass

Metoda filterByClass pozwala nam na wyselekcjonowanie z danej kolekcji elementów tych, które mają przypisaną daną klasę.

Składnia tej metody:

kolekcja_elementów.filterByClass('nazwa_klasy');

i przykład użycia - wyselekcjonowanie z danej grupy linków wszystkich elementów klasy 'link':

$$('.linki').filterByClass('link');

Ktoś się pewnie by powiedział, że te metody to to samo co poznane wcześniej metody z pliku element.selectors.js, ale różnica jest pomiędzy tymi metodami duża. Można powiedzieć, że poznane wcześniej metody służą do selekcji danej grupy elementów, a metody z pliku element.filters.js służą do filtrowania wyselekcjonowanej tymi metodami grupy elementów. Dlatego metod tych używamy w odniesieniu na przykład do grupy linków, a nie w odniesieniu do całego dokumentu by wyselekcjonować wszystkie linki...

filterById

Zasada działania tej metody jest podobna jak w wypadku dwóch poprzednich - z tą różnicą, że ta metoda zwróci tylko elementy posiadające dany identyfikator.

Składnia:

kolekcja_elementów.filterById('id_szukanych_elementow');

Na przykład wyselekcjonowanie linków posiadających id "ostatni" z grupy linków wygląda następująco:

$$('a').filterById('ostatni');

filterByAttribute

Metoda filterByAttribute to zdecydowanie najbardziej złożona metoda z wszystkich wymienionych - pozwala nam nie tylko wyszukiwać elementy posiadające dany atrybut, ale także za pomocą operatorów określić jaką zawartość powinien mieć ten atrybut.

Pełna składnia tej metody wygląda następująco:

kolekcja_elementów.filterByAttribute('atrybut','operator','wartość_atrybutu');

gdzie argument "wartość_atrybutu" jest uwzględniany tylko wtedy gdy podany jest argument "operator". Co do operatora to może on przyjąć jedną z 6 poniższych wartości :

• "=" - operator ten oznacza, że wyselekcjonowane zostaną tylko te elementy, które mają atrybut o dokładnie takiej wartości jak podana jako 3. argument metody.
• "!=" - operator ten oznacza, że wyselekcjonowane zostaną tylko te elementy, które mają atrybut różny od takiej wartości jak podana jako 3. argument metody.
• "^=" - ten operator służy do wyselekcjonowania elementów, których atrybut zaczyna się ciągiem znaków podanym jako 3. argument metody.
• "$=" - ten operator służy do wyselekcjonowania elementów, których atrybut kończy się ciągiem znaków podanym jako 3. argument metody.
• "*=" - użycie tego operatora oznacza selekcję tych elementów, które w atrybucie zawierają podany jako 3. argument metody ciąg znaków.

• "~=" - użycie tego operatora oznacza selekcję tych elementów, które w atrybucie zawierają podany jako 3. argument metody ciąg znaków, ale pod warunkiem, że jest on oddzielnym słowem:

  przy takich argumentach metody:

  ('name','~=','test')

  w wypadku takiego elementu:

  <element name="test"/>

  lub

  <element name="exam test"/>

  zostanie on zaakceptowany, natomiast element:

  <element name="examtest"/>

  zostanie odrzucony.

Na koniec przykład podsumowujący powyższe metody:

PRZYKŁAD

W następnej części kursu zajmiemy się plikiem element.form.js, służącym do obsługi formularzy (przy okazji dodam, że jest to najmniejszy plik w grupie Element).

Plik Element.Selectors.js oddaje nam do dyspozycji kilka metod i funkcji do selekcji elementów z drzewa dokumentu. Zawarte w nim metody i funkcje pozwalają na selekcję zarówno pojedynczych elementów jak i grup elementów. Zawartość tego pliku możemy podzielić na dwie części : samodzielne funkcje i metody klasy Element. Do pierwszej grupy zaliczamy funkcje:

• $E
• $ES

natomiast do drugiej grupy metody:

• getElements
• getElement
• getElementsBySelector
• getElementsByClassName
• getElementById

Czytaj dalej...

Tak sobie właśnie szperałem w jednym z katalogów zawierającym moją radosną twórczość i wygrzebałem z niego ten oto obrazek ;). Tworzony już dość dawno (oceńcie po edycji jak dawno ;) ), ale mi osobiście nadal się podoba ;] Gdyby ktoś się czepiał jakichś małych niedociągnięć to dodam, że tworzyłem obrazek w przypływie natchnienia gdy leżałem przeziębiony w łóżku i zasuwałem myszką optyczną po kołdrze ;]

Swoją drogą jestem ciekaw czy taka okładka skłoniłaby więcej uczniów do przeczytania tej dość ciężkiej lektury ;]