JQuery. $('#pierwszy').css('color','red').hide('slow').show(3000); $(document).ready(function() { //... tutaj nasze skrypty jquery //...

Transkrypt

1 JQuery jquery (jquery.com) to jedna z najbardziej popularnych bibliotek/frameworków do javascript. Jej popularność oczywiście znikąd się nie bierze. Dzięki tej bibliotece jesteśmy w stanie o wiele szybciej i sprawniej pisać nasze skrypty, nie martwiąc się przy tym o kompatybilność z różnymi przeglądarkami. Główne zalety tej biblioteki: Mała objętość skryptów, prosta składnia Mała objętość samej biblioteki Bardzo dużo dodatkowych pluginów Aby zacząć używać jquery, będziemy musieli standardowo dołączyć jej plik do naszej strony. Możemy albo ściągnąć plik z biblioteką na dysk, albo odwołać się np do zewnętrznych zasobów, które udostępniają zawsze najnowszą wersję tego pliku: <script type="text/javascript" src="jquery.js"></script> //dla lokalnego pliku //lub <script src=" jquery ma bardzo zwięzłą konstrukcję skryptów, do której wykorzystuje składnię łańcuchową. Każdy taki łańcuch rozpoczyna się znakiem $, a poszczególne polecenia są łączone w łańcuchy za pomocą kropki. Poniższy przykład ilustruje zastosowanie jquery: $('#pierwszy').css('color','red').hide('slow').show(3000); Powyższe polecenie wystarczy podzielić względem kropek: 1. Pobieramy obiekt #pierwszy, po czym wykonujemy na nim kilka operacji: 1. Ustawiamy mu kolor na czerwony 2. Ukrywamy go (wolno) 3. Po czym z wolna pokazujemy (3 sekundy) Ileż kodu trzeba by było napisać w czystym JS żeby uzyskać podobne efekt. Dodatkowo trzeba by było obsłużyć kilka wersji przeglądarek... document ready Aby operować na elemetach strony powinniśmy je pobrać. Aby mieć pewność że takie elementy już istnieją (czyli, że dokument DOM został utworzony), skorzystamy z instrukcji $(document).ready, która wywoła wewnętrzny kod dopiero po załadowaniu całego dokumentu strony. $(document).ready(function() //... tutaj nasze skrypty jquery //... ) W praktyce 99% skryptów jquery wstawiane jest wewnątrz tej konstrukcji. Eventy w jquery Obługa zdarzeń w jquery jest dziecinnie prosta. Wystarczy przypiąć zdarzenie do pobranego obiektu bezpośrednio, lub skorzystać z metody bind(). $('input#guzik').click(function() ) //lub $('input#guzik').bind('click', function()

2 ) //lub w wersji > 1.4 $('input#guzik').bind( 'click' : function() ) Obsługa AJAX w jquery Metoda get $.get( "zapisz_do_bazy.php", imie: "Johny", nazwisko: "Bravo", function(dane) alert("dane otrzymane: " + dane); ); //ta sama metoda zapisana ale bardziej upakowana $.get("zapisz_do_bazy.php", imie: "Johny", nazwisko: "Bravo", function(dane) alert("dane otrzymane: " + dane) ); Przykładowy plik zapisz_do_bazy.php: <?php $serwer = 'localhost'; $uzytkownik = 'root'; $haslo = 'haslozmyphpadmina'; //ustanawiamy połączenie $polaczenie = mysql_connect($serwer, $uzytkownik, $haslo); if(!$polaczenie) die('błąd połączenia: '. mysql_error()); //wybieramy bazę mysql_select_db('baza', $polaczenie); //umieszczamy nowy wpis w tabeli $imie = mysql_real_escape_string($_post['imie']); $nazwisko = mysql_real_escape_string($_post['nazwisko']); mysql_query("insert INTO ludzie (Imie, Nazwisko) VALUES ($imie, $nazwisko)"); mysql_close($polaczenie);?> Metoda post $.post( "zapisz_do_bazy.php", imie: "Johny", nazwisko: "Bravo", function(dane) alert("dane otrzymane: " + dane); ); Powyższe metody mimo że bardzo proste w użyciu, nie dają nam pełnej kontroli nad połączniem. O wiele lepszym do tego celu jest metoda $.ajax: $.ajax( type : "POST", url : "zapisz_do_bazy.php", data : imie : 'Marcin', kraj : 'Polska'

3 );, success : function(msg) //ten fragment wykona się po POMYŚLNYM zakończeniu połączenia //msg zawiera dane zwrócone z serwera, complete : function(r) //ten fragment wykona się po ZAKONCZENIU połączenia //"r" to przykładowa nazwa zmiennej, która zawiera dane zwrócone z serwera, error: function(error) //ten fragment wykona się w przypadku BŁĘDU Przykład Dynamiczne selekty z wykorzystaniem JSON Problem 2 selektów, gdzie jeden z nich ustawia dynamicznie wartości w drugim. HTML: <select class="selekt_1"> <option value="-1">wybierz płeć</option> <option value="k">kobiety</option> <option value="m">mężczyźni</option> </select> <select class="selekt_2" disabled="disabled"> <option value="-1">---</option> </select> Mamy 2 selekty. Pierwszy z nich służy do wybrania płci, a drugi będzie służyć do wyboru imienia. Po wybraniu płci, sprawdzamy czy ma ona jakąś sensowną wartość (czyli jest różna od -1) i wysyłamy ją do serwera. Następnie aktywujemy drugi selekt i za pomocą pętli dynamicznie ustawiamy jego wartości. JQUERY $('.selekt_1').bind( 'change' : function() var wartosc = $(this).find('option:selected').val(); //pobieramy wartość wybranego selekta if (wartosc!=-1) //jeżeli jest inna niż -1 (czyli jeżeli został wybrany model) $.ajax( type: "POST", url: "test.php", datatype : 'json', data: gender : wartosc, success : function(json) var $selekt_2 = $('.selekt_2'); $selekt_2.attr('disabled',false); //aktywujemy 2 selekt $selekt_2.empty(); //czyscimy drugi selekt ze zdarzeń i optionów for(i=0; i<json.length; i++) //tworzymy optiony $selekt_2.append('<option value="'+json[i]['value']+'">'+json[i]['imie']+'</option>'); //ustawiamy jako wybrany pierwszy option w selekcie 2 $selekt_2.find('option').eq(0).attr('selected','selected');, error: function() alert('wystąpił błąd :)'); )

4 ); PHP test.php <?php $plec = $_POST['gender']; $imiona = Array(); $imiona['m'] = Array(); $imiona['m'][0] = Array('imie'=>'Arnold', 'value'=>'1'); $imiona['m'][1] = Array('imie'=>'Bartek', 'value'=>'2'); $imiona['m'][2] = Array('imie'=>'Darek', 'value'=>'3'); $imiona['m'][3] = Array('imie'=>'Kamil', 'value'=>'4'); $imiona['m'][4] = Array('imie'=>'Michał', 'value'=>'5');?> $imiona['k'] = Array(); $imiona['k'][0] = Array('imie'=>'Ania', 'value'=>'1'); $imiona['k'][1] = Array('imie'=>'Beata', 'value'=>'2'); $imiona['k'][2] = Array('imie'=>'Kamila', 'value'=>'3'); $imiona['k'][3] = Array('imie'=>'Patrycja', 'value'=>'4'); $imiona['k'][4] = Array('imie'=>'Zenona', 'value'=>'5'); echo json_encode($imiona[$plec]); Zakładki (taby) <ul class="tabs"> <li class="active"><a href="#tab-1" class="active">zakładka 1</a></li> <li><a href="#tab-2">zakładka 2</a></li> <li><a href="#tab-3">zakładka 3</a></li> </ul> <div id="tab-1" class="tab">...treść pierwszej zakładki <div id="tab-2" class="tab">...treść drugiej zakładki <div id="tab-3" class="tab">...treść trzeciej zakładki $(document).ready(function() //dla każdego miejsca z tabami $('.tabs').each(function() var $ul = $(this); var $li = $ul.children('li'); //przy wejsciu na strone ukrywamy tresc tabow i pokazujemy tylko aktywny... $li.each(function() //pętla po wszystkich tabach var $tresctaba = $($(this).children('a').attr('href')); //pobieramy blok o id pobranym z linka-taba if ($(this).hasclass('active')) //jeżeli ten tab ma klasę aktywną $tresctaba.show(); //to pobrany przed chwilą blok pokazujemy else $tresctaba.hide(); //jeżeli takiej klasy nie ma to blok ukrywamy ); /*mały trik - gdy klikamy na tab, wtedy wykonujemy zdarzenie dla linka, który się w nim znajduje (dzieki temu możemy kliknąć na cały tab, a nie tylko na linka)*/ $li.click(function() $(this).children('a').click()); //po kliknięciu na link... $li.children('a').click(function() //usuwamy z tabów klasę active $li.removeclass('active'); //ukrywamy wszystkie taby $li.each(function() $($(this).children('a').attr('href')).hide(); );

5 ); Zadanie ); ); //ustawiamy klikniętemu tabowi klasę aktywną $(this).parent().addclass('active'); $($(this).attr('href')).show(); //nie chcemy wykonać domyślnej akcji dla linka return false; Dodać przynajmniej jeden skrypt z wykorzystaniem biblioteki jquery do strony. Skrypt może na przykład służyć do: walidacji formularza, dynamicznej zmiany treści strony (bez przeładowania jej), zakładek, Ajax i przesyłanie danych do php, Animacji, przesuwania elementów, Obsługa zdarzeń na stronie.