Plugin

Wykład 8
jQuery: Pluginy
Literatura:
D. Sawyer McFarland. JavaScript i jQuery. Nieoficjalny podręcznik.
Rozwijane menu (cz. 1)
Plugin: Mega Drop Down Menu - menu poziome rozwijane do dołu
Przykłady: http://www.designchemical.com/lab/jquery-mega-drop-down-menuplugin/examples/
Pobranie:
http://www.designchemical.com
Pozycja menu: JQUERY i dalej Mega Drop Down Menu Plugin
Pozycja menu: Download
W pobranej paczce będzie m.in. plik index.html gdzie jest przykład użycia
Jak skorzystać z pluginu:
1. dołączyć arkusz stylów, który stylizuje menu
2. dołączyć bibliotekę jQuery
3. dołączyć skrypt pluginu
4. napisać skrypt uruchamiający menu
5. kod html menu: lista punktowana
a) dla listy nadać atrybut "id" o dowolnej wartości. Nadaną wartość należy użyć w selekcji w
p. 4. Ponadto nadać dla listy atrybut "class" o wartości "megamenu"
b) listę umieścić w elemencię div. Atrybut class tego div-a decyduje o kolorze menu. Jeśli
nadamy "red" należy dodać arkusz red.css
Przykład użycia: menu.html (Uwaga: ścieżki są ustawione, tak że ten plik należy umieścić w
tym samym katalogu, w którym jest katalog megamenu z wypakowanym pluginem
Rozwijane menu (cz. 2)
Inne menu:
• menu pionowe wysuwane do dołu: Vertical Accordion Menu Plugin
• menu pionowe wysuwane w bok: Vertical Mega Menu Plugin
Sposób pobrania i uruchomienia menu analogicznie jak pluginu Mega Drop Down Menu z
poprzedniego slajdu
Pobranie:
http://www.designchemical.com
Pozycja menu: JQUERY i dalej albo Vertical Accordion Menu Plugin albo Vertical Mega Menu
Plugin
a tam Pozycja menu: Download
Galeria zdjęć
Plugin: FancyBox: http://fancybox.net/
Przykłady do obejrzenia: http://fancyapps.com/fancybox/ i dalej link "Examples"
Pobranie: link "license & download". Po rozpakowaniu w katalogu demo/index.html
przykładowe galerie
Jak skorzystać z pluginu:
1. dołączyć arkusz stylów, który stylizuje galerię
2. dołączyć bibliotekę jQuery
3. dołączyć skrypt pluginu
4. napisać skrypt uruchamiający galerię
5. kod html galerii:
a) linki do obrazków umieścić w div, któremu nadać dowolną wartość atrybutu id
b) opisem linku jest obrazek-miniatura
c) do każdego linku dodać atrybut "rel" o tej samej wartości (utworzenie grupy obrazków do
wyświetlenia)
Przykład użycia: galeria.html (Uwaga: ścieżki są ustawione, tak że ten plik należy umieścić w
tym samym katalogu, w którym jest katalog fancybox z wypakowanym pluginem
Inny plugin: Lightbox2: http://lokeshdhakar.com/
Slider
Plugin: AnythingSlider
Przykłady do obejrzenia: http://css-tricks.github.io/AnythingSlider/
W formie slajdów może być wyświetlana dowolna zawartość HTML nie tylko zdjęcia
Pobranie: http://css-tricks.github.io/AnythingSlider/ i link "Download"
Jak skorzystać z pluginu: Należy wykonać analogiczne kroki jak w pluginach z poprzednich
slajdów. Po wypakowaniu pluginu jest tam m.in. plik simple.html na którym można się
wzorować.
Przykład użycia: galeriaslider.html (Uwaga: ścieżki są ustawione, tak że ten plik należy
umieścić w tym samym katalogu, w którym jest katalog anythingslider z wypakowanym
pluginem
Sprawdzanie poprawności formularzy
plugin jQuery Validation. Pobranie : http://jqueryvalidation.org/ link "Download"
Przykłady do obejrzenia: po wypakowaniu pluginu: demo/index.html
Jak skorzystać z pluginu: analogicznie jak w przypadku poprzednich pluginów
Aby było sprawdzane dane pole formularza należy dodać atrybut class z odpowiednią
wartością. Np.:
• aby pole tekstowe było niepuste: <input type="text" class="required">
• poprawny adres email: <input type="text" class="email">
• tylko wartość liczbowa: <input type="text" class="digits">
Własne informację o błędach tworzymy poprzez atrybut title. Np.:
<input type="text" class="email" title="Podałeś niepoprawny adres email">
Przykład użycia: formularz.html (Uwaga: ścieżki są ustawione, tak że ten plik należy umieścić
w tym samym katalogu, w którym jest katalog validation z wypakowanym pluginem)
Więcej możliwości sprawdzania: patrz http://jqueryvalidation.org link "Documentation"
Wygodny wybór daty w formularzu
Plugin jQuery UI Datepicker
Pobranie: http://jqueryui.com/download/ Wystarczy wybrać tylko komponent (widget)
DatePicker, pozostałe odznaczyć. Na dole strony: Theme Base i dalej link "Download"
Jak skorzystać z pluginu: analogicznie jak w przypadku poprzednich pluginów
Przykład użycia: data.html (Uwaga: ścieżki są ustawione, tak że plik ten należy umieścić w
tym samym katalogu, w którym jest katalog data z wypakowanym pluginem)
Więcej o Datepicker: http://api.jqueryui.com/datepicker/ tam m.in. o ustawieniach, np. w
jakim formacie zostanie wprowadzona data