
Biblioteka script.aculo.us
Zagłębiając się we Frameworki JavaScript, chcielibyśmy przedstawić esencję biblioteki script.aculo.us.
Jak już wspomnieliśmy pisząc wstęp do Frameworków JS, biblioteki Prototype JS i script.aculo.us są często widziane razem.
Biblioteka, o której dziś mowa, jest jakby rozszerzeniem Prototype JS o efekty graficzne, animacje, Drag and Drop, tworzenie widget’ów, narzędzia pracy z DOM, czy też kontrolki Ajax. Funkcje tej biblioteki są łatwe w użyciu, i oczywiście są cross-browser.
Praca biblioteką script.aculo.us
Na początek dołączamy biblioteki Prototype JS i script.aculo.us do dokumentu.
Zacznijmy od kilku słów na temat tego, jak tworzyć dynamicznie elementy.
Komponentem wspomagającym tworzenie elementów struktury DOM jest obiekt Builder, spełniający funkcję wzorca.
Przykład – użycie komponentu Builder:
var tabela = Builder.node("tabela", { border: 0, width: 200 }, [ Builder.node( "tr", [ Builder.node("td", {width: 100}, "kolumna 1" ), Builder.node("td", {width: 100}, "kolumna 2" ), Builder.node("td", {width: 100}, "kolumna 3" ) ]) ]); $('divek').appendChild(table);
Przykład 2:
var element = Builder.node('div', { id: 'ghosttrain' }, [ Builder.node('div', { className: 'controls', style: 'font-size:11px;' }, [ Builder.node('h1', 'Ghost Train'), 'testtext', 2, 3, 4, Builder.node('ul', [ Builder.node('li', { className: 'active', onclick: 'test()' }, 'Record') ]), ]), ]);
Obsługa Drag&drop
Script.aculo.us pozwala szybko implementować Drag and Drop, i dodawać efektowne animacje.
Biblioteka udostępnia do tego celu klasy:
– Draggable – definiuje obiekt, który będziemy przeciągać
– Droppables – umożliwia zaprojektowanie odpowiedniej reakcji na upuszczenie elementu
Klasa Draggable
Czyli elementy, które będą mogły być przeciągane (drag).
Przykład – użycie klasy Draggeble:
var test = Builder.build("<span>Przesuwanie</span>"); document.getElementsByTagName("body")[0].appendChild(test); new Draggable(test); new Draggable('id_of_element', [options]);
Więcej szczegółów tutaj.
Przykład 2 – ustawienia Draggable:
new Draggable('divek', { constraint: 'horizontal', handle: 'handle' }); var mydrag = new Draggable('dv1', { revert: true }); mydrag.destroy(); // cofnij przypisanie // new Draggable('dd1', { revert: true }); new Draggable('dd1', { revert: true, snap: [40, 40] }); new Draggable('dd2', { scroll: window });
Klasa Droppables
Czyli elementy, które będą mogły być upuszczane (drop).
Przykład – użycie Droppables:
Droppables.add('id_of_element',[options]); Droppables.add('shopping_cart', { accept: 'products', onDrop: function(element) { $('shopping_cart_text'). update('Dropped the ' + element.alt + ' on me.'); } }); Droppables.remove(element); // usuwanie
Przykład – wszystkie elementy listy jako Draggable:
$$('container li').each( function(li) { new Draggable(li); });
I już możemy przeciągać elementy danej listy.
Przykład – implementacja drag&drop:
Struktura HTML
<ul id="container"> <li id="item_1"><span>@</span> Lorem</li> <li id="item_2"><span>@</span> Ipsum</li> <li id="item_3"><span>@</span> Dolor</li> </ul>
Style CSS
#container .handle { background-color: #090; color: #fff; font-weight: bold; padding: 3px; cursor: move; }
Kod JavaScript:
$('container').select('li').each( function(li) { new Draggable(li, { handle: 'handle' }); });
Kolejny przykład to użycie Droppables (elementów „upuszczanych”).
Przykład – Droppables
HTML:
<ul id="drop_zone"></ul>
CSS:
#container, #drop_zone { width: 200px; height: 300px; list-style-type: none; margin-left: 0; margin-right: 20px; float: left; padding: 0; border: 2px dashed #999; }
JavaScript:
document.observe("dom:loaded", function() { $('container').select('li').each( function(li) { new Draggable(li); }); Droppables.add('drop_zone'); });
Zanim przejdziemy dalej, do omawiania komponentów, małe wspomnienie o efektach i kontroli elementów.
Przykład – kontrola elementów:
<div onclick="$(this).switchOff()">Kliknij, by schować</div> <!-- lub z efektem: --> <div onclick="$(this).blindUp({ duration: 1 })">Kliknij</div>
Metody takie jak blindUp() wykonują zadanie w sposób, któremu towarzyszą efekty (animacje). Zajmiemy się tym w części 2. kursu.
Komponent Autocompleter (Ajax)
Implementacja rozwiązania typu Ajax suggest, czyli automatycznego uzupełniania pola tekstowego sugestiami.
Wywołanie wygląda następująco:
new Ajax.Autocompleter(id_of_text_field, id_of_div_to_populate,
url, options);
Przykład – użycie Ajax.Autocompleter:
W strukturze HTML tworzymy pole tekstowe o ID = „autocomplete”, oraz element (np. DIV) o ID = „autocomplete_choices”.
Następnie dodajemy kod JS:
new Ajax.Autocompleter("autocomplete", "autocomplete_choices", "/url/on/serv/bar.php", { paramName: "value", minChars: 2, indicator: 'indicator1' });
Plik bar.php po stronie serwera zwraca wyniki w postaci listy – najprostszy przykład poniżej:
echo "<ul><li>Data1</li><li>Data2</li></ul>";
Alternatywą jest kolejny z elementów biblioteki script.aculo.us.
Autocompleter.Local – przechowujący dane lokalnie, np. w tablicy, bez potrzeby odwołań server-side.
Użycie Autocompleter.Local wygląda następująco:
new Autocompleter.Local('id_text_field', 'id_div_to_populate', 'array_of_strings', options);
Przykładowo:
var array_of_strings = [ 'AB', 'CD', 'EF', // ... itd ]; // podajemy input_id - ID pola tekstowego, // uwaga: ustawiamy autocomplete="off" dla tego pola new Autocompleter.Local('input_id', 'divek', bandsList, { });
Na koniec omówię InPlace Editor – mój ulubiony element tej biblioteki, swego czasu („boom Web 2.0”) używany niemal na okrągło w projektach, nad którymi ówcześnie pracowałem.
InPlace Editor
Pozwala na implementację edycji elementu w miejscu, zmiany wartości bez przeładowania strony. To przydatna funkcjonalność w wielu aplikacjach WWW bazujących na Ajax.
Konstruktor:
new Ajax.InPlaceEditor(element, url, { options });
Przykład – użycie InPlaceEditor:
<p id="editme">Kliknij mnie!</p>
new Ajax.InPlaceEditor('editme', '/demoajax.php');
Uzyskujemy jakoby edytowalny paragraf ‚Kliknij mnie!’, po kliknięciu przechodzi w tryb edycji. Dane mogą być wysłane do skryptu PHP, a tam wykonane dowolne operacje. Po zakończeniu edycji zostanie także zmieniona od razu wartość, którą wyświetla paragraf.
Jest tu sporo detali, które w pełni opisane są w dokumentacjach InPlace Editor oraz InPlaceCollection Editor.
Podsumowanie
To wszystko w 1. części podstawowego kursu script.aculo.us, zapraszam do kolejnej, w której zajmiemy się efektami wizualnymi.