Przyjazny interfejs dzięki JavaScript
Tworzenie dynamicznych elementów interfejsu z pomocą frameworka MooTools
06 Wrzesień 2010
Autor: Mikołaj Gnaciński / Weeby.pl
Wykorzystanie jednego z popularnych frameworków JS znacznie usprawnia dostęp i modyfikację drzewa DOM strony, a także czyni bardzo prostym korzystanie z technologii AJAX czy animacji. W artykule ukazane zostaną przykłady wykorzystania biblioteki MooTools – do obsługi głosowania w sondzie, stworzenia wysuwanego menu oraz wdrożenia na stronie techniki „przeciągnij i upuść” (ang. drag & drop).
Wyświetlanie wyników ankiety bez przeładowania strony
Online Demo | Wersja do ściągnięcia
Przykład ankiety
Często bywa tak, że użytkownik w takcie przeglądania strony internetowej zechce oddać swój głos w wyświetlającej się obok ankiecie. Po oddaniu głosu uciążliwym faktem byłoby przeładowanie strony i wyświetlenie wyników ankiety, gdyż użytkownik musiałby kolejny raz przeładować stronę, aby przejść do wcześniej przeglądanej treści. Z drugiej strony osoba oddająca głos zapewne zechciałaby wiedzieć jak rozkładają się wyniki ankiety, na którą oddał głos.
Dzięki zastosowaniu technologii Ajax możliwe jest w bardzo prosty sposób przedstawienie wyników ankiety w miejscu głosowania bez konieczności przeładowywania witryny.
Poniższy kod HTML obrazuje budowę pojedynczego pola ankiety
Skrypt js będzie dopisywał do tagu <label> procentowe wartości ilości odpowiedzi.
<DIV id=”bar_bck1″ class=”bar_bck”> stanowi tło paska ilości odpowiedzi, którym jest <DIV id=”bar1″ class=”bar”>
Przystępując do kodu js pierwszym elementem jakim trzeba wykonać jest zatrzymanie akcji wysyłania formularza (w tym przypadku formularz ma id = poll) po wciśnięciu przycisku submit.
$('poll').addEvent('submit', function(e)
{
e.stop();
Następnie należy ustawić co i na jakich elementach będzie się działo po poprawnym przesłaniu formularza
this.set('send', {onComplete: function(response)
{
$$('.answers').each(function(el)
{
W tym przypadku po poprawnym przesłaniu formularza zostanie wywołana funkcja, która dla każdej odpowiedzi ankiety (mającej ustawioną klasę „answers”) wyświetli wartości oraz pasek prezentujący procentową ilość oddanych głosów.
Wyżej wymieniona funkcja przechowuje zaktualizowane dane w zmiennej „response”. W opisywanym przykładzie wartości zwracane przez skrypt php są w postaci ciągu:
id_danej_odpowiedzi;wartość_procentowa;id_danej_odpowiedzi;wartość_procentowa...
Za odbiór wartości procentowej dla kolejnych odpowiedzi odpowiedzialna jest linijka:
var percentageValue = response.match(el.value + ';([0-9\.]+)');
Teraz można przystąpić do umieszczenia tych wartości do każdej odpowiedzi. Należy najpierw pobrać aktualną odpowiedź z tagu <label>, a następnie dopisać do niej wartość procentową.
var answer = $('label'+el.value).get('html');
$('label'+el.value).set('html', answer + ' (' + percentageValue[1] + '%)');
Oraz zdefiniować długość pasków:
$('bar'+el.value).setStyle('width', percentageValue[1] + '%');
Dla ciekawszego efektu można dodać linijki odpowiadające za płynne pojawienie się pasków w ankiecie
$('bar_bck'+el.value).tween('height', [0, 8]);
$('bar'+el.value).tween('height', [0, 8]);
Jeżeli taki efekt nie jest pożądany, należy w pliku stylu określić wysokość pasków „bar_bck” oraz „bar”.
Teraz można już wysłać formularz metodą send.
}); }}); this.send
I na koniec oczyścić go ze zbędnych elementów, jakimi są radiobuttony i przycisk wysyłający formularz.
$$('.answers').each(function(el){
el.setStyle('display', 'none');
});
this.getElementById('submit').fade('out');
});
Wysuwane menu podręczne
Online Demo | Wersja do ściągnięcia
Wysuwane menu
W niektórych sytuacjach natłok możliwości oferowanych przez serwis może przytłoczyć użytkownika. Wykorzystując JavaScript można niektóre fragmenty ukryć i pokazywać je dopiero po kliknięciu w odpowiedni element/przycisk. Zastosowań dla wysuwanego fragmentu strony może być wiele, lecz na szczególną uwagę zasługuje wykorzystanie go jako podręczne menu użytkownika, gdzie mógłby się znajdować formularz logowania, a po zalogowaniu dane konta, czy też elementy filtrujące i dostosowujące treść wyświetlaną na stronie.
Przykład bazuje na metodzie slide() (mootools.net/docs/more/Fx/Fx.Slide), która wymaga dodatkowych komponentów frameworka MooTools (mootools.net/more).
Wspomniany efekt można bardzo łatwo uzyskać, jednakże potrzebna jest odpowiednia budowa kodu HTML
Aby uzyskać efekt menu najeżdżającego na treść należy stworzyć dla niego kontener (<div id=”menu”>), który ma ustawione pozycjonowanie absolutne. Z racji tego, że metoda slide() nie działa w przypadku obiektów pozycjonowanych absolutnie potrzebne jest stworzenie obiektu pozycjonowanego relatywnie wewnątrz kontenera (<div id=”div”>). W nim znajduje się cała zawartość menu oraz, na samym końcu, <div id=”margin”> będący „korkiem” nie pozwalającym na wypływanie elementów menu poza jego ramy.
Po wczytaniu strony menu będzie domyślnie schowane, dzieje się tak dzięki temu fragmentu kodu:
$('div').slide('hide');
Całe „serce” ukrywanego menu tkwi w funkcji, która jest dodana jako zdarzenie elementu go wywołującego.
Skrypt wie jaki jest aktualny stan menu dzięki zmiennej „status”, która jest ustawiana na 1 w przypadku menu otwartego i 0 w przypadku menu schowanego.
$('button').addEvent('click', function(e)
{
e.stop();
if (status == 0) {
$('div').slide('in');
status = 1;
$('button').set('html', 'Zwiń opcje');
}
else if (status == 1) {
$('div').slide('out');
status = 0;
$('button').set('html', 'Rozwiń opcje');
}
});
W zależności od stanu menu jest ono albo chowane, albo pokazywane dzięki metodzie slide(). Zmieniany jest także napis znajdujący się na przycisku odpowiedzialnym za wywołanie menu.
Drag & Drop
Online Demo | Wersja do ściągnięcia
Przykład drag & drop
Technika ta pozwala na przenoszenie wybranych elementów strony w określone miejsca. Po przeniesieniu danego elementu może odbyć się dowolna akcja, np. zaktualizowanie wyników w bazie. Każdy z nas zna i docenia możliwość przenoszenia elementów chociażby z codziennej pracy na komputerze. O ile łatwiej i przejrzyściej jest przenieść dany plik do kosza, czy też do innego folderu niż rozwijając ogromne menu z wyborem miejsca przeznaczenia. Skoro technika ta doskonale sprawdza się w systemach operacyjnych, to dlaczego by nie wykorzystać jej także na stronie internetowej? O ile łatwiejsze będzie np. zarządzanie nowymi wpisami przenosząc je do odpowiednich miejsc, czy też sortowanie wyników bez konieczności klikania w ogrom przycisków i przeładowywania strony.
Do przenoszenia elementów na witrynie wykorzystuje się metodę Drag.Move(), o której warto więcej poczytać pod adresem: mootools.net/docs/more/Drag/Drag.Move. Metoda ta także wymaga dodatkowych elementów frameworka MooTools (mootools.net/more).
Pozwala ona między innymi na określenie:
- elementów, które mogą być podnoszone,
- elementów gdzie mogą być opuszczane (droppables:),
- uchwytu, za pomocą którego obiekty będą przenoszone (handle:),
- obszaru, w jakim obiekty mogą być przenaszone (container:).
W tym przykładzie zostanie przedstawione wykorzystanie tej techniki obrazujące przenoszenie nowych zgłoszeń do poszczególnych kategorii. Zgłoszenia w rzeczywistym przypadku będą pobierane z bazy danych, w przykładzie zostały one wpisane na sztywno.
$$('.records').each(function(drag)
{
new Drag.Move(drag,
{
droppables: '.drop',
handle: drag.getChildren('.handle'),
Powyższa funkcja dla każdego elementu posiadającego klasę „records” ustawia klasę umożliwiającą wprawienie tych elementów w ruch (Drag.Move() ) oraz określa, że jedynymi elementami, na które można opuścić wprawione w ruch obiekty są te z klasą „drop”. W przypadku braku ustawionego uchwytu, staje się nim cały przenoszony obiekt.
Klasa Drag.Move() obsługuje trzy rodzaje zdarzeń:
- drop – funkcja wywoływana w momencie opuszczenia elementu. Zwraca elementy, na których odbywało się przenoszenie i opuszczenie,
- leave – funkcja wywoływana w momencie opuszczenia elementu wchodzącego w skład „droppables:”,
- enter – funkcja wywoływana w momencie wejścia do elementu wchodzącego w skład „droppables:”.
Dodatkowo klasa obsługuje też wszystkie opcje i zdarzenia klasy Drag() (mootools.net/docs/more/Drag/Drag).
Aby statyczny obiekt mógł się poruszać potrzebne jest ustawienie jego pozycjonowana na relatywne (pozycjonowanie absolutne również zadziała, nie mniej jednak zaleca się pozycjonowanie relatywne). Ustawiane jest to w zdarzeniu onStart:
onStart: function(el)
{
drag.setStyles({'position' : 'relative'});
},
Kolejnym istotnym elementem jest ustalenie zdarzenia „drop”, które zachowa się odpowiednio w zależności od tego, czy obiekt zostanie opuszczony na dozwolony element, czy też nie.
onDrop: function(el,droppable)
{
if (!droppable)
{
drag.setStyles({'position' : 'static', 'top' : 0, 'left' : 0});
}
else
{
var display = function() { el.setStyle('display', 'none'); };
el.fade('out');
display.delay('500');
Funkcja zwraca dwa elementy:
- el – będący elementem, który był przenoszony
- droppable – będący elementem, na który „el” został opuszczony w przypadku gdy droppable znajdował się na liście dozwolonych do opuszczenia obiektów, lub NULL w innym przypadku
W momencie gdy „droppable” jest pusty element ponownie przyjmuje pozycjonowanie statyczne, co pozwoli wrócić mu na swoje dawne miejsce. W przeciwnym wypadku obiekt ten najpierw zanika dzięki metodzie fade(), a następnie zostaje wyłączony poprzez funkcję „display”.
W dalszym etapie wykonywane jest zapytanie json wysyłające informacje do skryptu PHP o elemencie, który został opuszczony i elemencie, na który został opuszczony. Skrypt PHP aktualizuje bazę oraz zwraca nowe wartości będące w tym przypadku ilością elementów (zamówień) w poszczególnych działach. Po otrzymaniu tych informacji skrypt js poprzez zdarzenie onSucces aktualizuje wyniki na stronie bez jej przeładowania.
var request = new Request.JSON(
{
url: "results.php",
onSuccess: function(records)
{
$('count1').set('html', records.action1);
$('count2').set('html', records.action2);
$('count3').set('html', records.action3);
$('count4').set('html', records.action4);
}
}).post({'record': el.id, 'drop': droppable.id});
}
},
Z racji tego, że klasa Drag.Move() ustawia domyślnie pozycjonowanie elementów przenoszonych na absolutne, co wprowadza trochę chaosu, warto po jej zakończeniu ponownie ustawić pozycjonowanie statyczne na tych elementach
});
drag.setStyles({'position' : 'static', 'top' : 0, 'left' : 0});
});
framefork MooTools
MooTools to kompaktowy, modułowy, zorientowany obiektowo framework JavaScript przeznaczony dla średniozaawansowanych i zaawansowanych programistów JavaScript.
Pozwala pisać wydajne, elastyczne i obsługiwane przez wszystkie przeglądarki skrypty z eleganckim, dobrze udokumentowanym i spójnym API. Framework MooTools można pobrać ze strony: www.mootools.net.
Faktem wartym zauważenia jest możliwość testowania online własnych skryptów z poziomu przeglądarki. Informacje na ten temat dostępne są pod adresem: mootools.net/shell
[...] wiadomości z tego serwisu Follow us on Twitter 71 śledzących RSS Feed 389 czytelników Ciekawe przykłady wykorzystania Mootools 1 głosuj! Wykorzystanie biblioteki MooTools do obsługi głosowania w sondzie, stworzenia [...]