Kurs (tutorial) JQueryUI: Ruchome (draggable) okno w JavaScript

JQuery oraz JQueryUI to napisane w języku JavaScript, niezwykle przyjazne programiście oraz wspomagające tworzenie stron internetowych biblioteki. JQueryUI służy do tworzenia zaawansowanych efektów graficznych z wykorzystaniem JavaScript i AJAX. W niniejszym tekście pokaże, jak przy pomocy kilku kliknięć stworzyć jeden z takich efektów, a mianowicie – przesuwane kursorem okienko.

Jeżeli chcemy zobaczyć, jak to ma wyglądać to tu: http://programowanie.opole.pl/_example/page.html

Najpierw cały kod, a później omówienie.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<html>
<head>
	<link href="css/ui-lightness/jquery-ui-1.8.12.custom.css" rel="stylesheet" type="text/css"/>
	<script src="js/jquery-1.5.1.min.js">alert('a')</script>
	<script src="js/jquery-ui-1.8.12.custom.min.js"></script>
 
	<style>
		div[name='win'] {
			width: 150px;
			height: 150px;
		}
	</style>
 
	<script>
		$(document).ready(function() {
			$( "div[name='win']" ).draggable();
		});
	</script>
</head>
<body>
	<div name="win" class="ui-widget-content">
		To jest okienko 1.
	</div>
	<div name="win" class="ui-widget-content">
		To jest okienko 2. 
	</div>
</body>
</html>

Biblioteka jest za darmo do ściągnięcia z oficjalnej strony: http://jqueryui.com/download. Bibliotek jest tam generowana ‘na rozmiar’, gdyż wybieramy jakie elementy mają się w niej znaleść, jaki ma być temat graficzny oraz wersję z jakiej chcemy korzystać.

Pierwsza linia (LINK) odpowiada za dołączenie tematu graficznego w postaci pliku CSS do naszej strony. Druga linia (SCRIPT) linkuje podstawową bibliotekę JQuery do naszej strony. Trzecia linia (SCRIPT) odpowiada za podłączenie modułu JQueryUI do naszej strony.

Dalej mamy napisany styl CSS, którym posłużymy się na naszej stronie. Oznacza on tyle, że DIVy z parametrem name będą miały rozmiar 150×150 px. Normalnie tego typu rzeczy zapisywane są w zewnętrznym pliku CSS.

Dalej mamy SCRIPT. Użyty jest tu operator $ (dolar), który jest opisany w bibliotece JQuery. Jest on bardzo rozwiniętym odpowiednikiem funkcji getElementById, która daje nam możliwość wyszukiwanie w DOMie z wykorzystaniem o wiele szerszego spektrum argumentów. W tym wypadku chodziło o element typu document, czyli korzeń naszego DOMu.

Metoda ready pozwala nam przypisać akcję do zdarzenia, które ma miesce po załadowaniu całej strony, ale przed załadowaniem wszystkich bajerów typu obrazy, animacje itp. No i do tego zdarzenia przypisujemy anonimową funkcję (bez nazwy), która znowu z wykorzystaniem operatora $ wyszukuje wszystkie DIVy, które mają parametr name ustawiony na win i wywołuje na nich metodę draggable(), która czyni je ruchomymi. Łatwo zauważyć, że jako argument operatora $ można dawać również selektory CSS.

Na koniec mamy stworzone DIVy z parametrem name ustawionym na win oraz parametrem class ustawionym na ui-widget-content, co daje ładny efekt gradientu naszym okienkom.