
Dalsze zgłębianie możliwości jQuery
W tej części kursu jQuery, opiszemy krótko programowanie elementów Ajax, z użyciem tejże biblioteki.
Pokażemy także kilka ciekawych przykładów i tipsów jQuery, a na koniec wspomnimy o zagadnieniach jQuery UI.
Biblioteka jQuery daje nam wysoki poziom abstrakcji, oferując bogatą obsługę Ajax, a dla programisty ogranicza się to do pisania stosunkowo niewielkiej ilości kodu.
Przykład podstawowy – wczytanie pliku:
$(document).ready(function() { $('#content').load('lorem.html'); });
Obsługę Ajax w jQ dają nam główne metody: $.post(), $.get(), $.ajax().
Przykład – wysłanie danych do serwera metodą POST i prosty callback:
$.post('save.cgi', { text: 'my string', number: 23 }, function() { alert('Your data has been saved.'); });
Przykład – pobranie danych z użyciem $.get():
$('#letter-e a').click(function() { $.get('e.php', {'term': $(this).text()}, function(data) { $('#dictionary').html(data); }); return false; });
Użycie JSON
Umieścimy w pliku fragment JSON:
// plik.json [ { "term": "BACCHUS", "part": "n.", "definition": "A convenient deity invented by the...", "quote": [ "Is public worship, then, a sin,", "That for devotions paid to Bacchus", "The lictors dare to run us in,", "And resolutely thump and whack us?" ], "author": "Jorace" },
Pobranie wykonamy w następujący sposób:
$(document).ready(function() { $('#letter-b a').click(function() { $.getJSON('plik.json'); return false; }); });
Przykład – przetwarzanie danych z JSON:
$(document).ready(function() { $('#letter-b a').click(function() { $.getJSON('plik.json', function(data) { $('#dictionary').empty(); $.each(data, function(entryIndex, entry) { var html = '<div>'; html += '<h3>' + entry['term'] + '</h3>'; html += '<div>' + entry['part'] + '</div>'; html += '<div>'; html += entry['definition']; html += '</div>'; html += '</div>'; $('#dictionary').append(html); }); }); return false; }); });
Serializacja i wysyłanie danych formularza
Rozważmy prosty formularz:
<div id="letter-f"> <h3>Form sample</h3> <form action="plik.php"> <input type="text" name="term" value="" id="term" /> <input type="submit" name="search" value="search" id="search" /> </form> </div>
Używając metody serialize() uzyskamy szybki dostęp do wszystkich wartości pól formularza. Wysłanie jest równie proste dzięki metodzie submit().
Np.:
function doSubmit() { var str = $("form").serialize(); // alert(text(str)); $("form").submit(); }
Indicator (loader tudzież wskaźnik wczytywania) w jQuery
W prosty sposób możemy zaimplementować popularny element, pokazujący że wykonywane jest właśnie przetwarzanie Ajax.
Przykład – dynamiczne osadzenie wskaźnika:
$('<div id="loading">Loading...</div>') .insertBefore('#dictionary') .ajaxStart(function() { $(this).show(); }).ajaxStop(function() { $(this).hide(); });
Detale dotyczące programowania Ajax w jQuery znajdziemy w dokumentacji.
Dostępny jest także bogaty zbiór pluginów Ajax.
Teraz przejdziemy do przykładów, rozwiązań i tricków jQuery, mogących znacznie ułatwić codzienną pracę.
Tips and tricks – jQuery
Przykład – nadanie stylu wszystkim elementom label z atrybutem for:
$('label[@for]').css({'font-weight': 'bold'});
Przykład – obsługa elementów formularza typu checkbox:
$('input:checkbox').bind('click', function() { if ($(this).is(':checked')) { $(this).parent().css({'font-weight': 'bold'}); } else { $(this).parent().css({'font-weight': 'normal'}); } });
Przykład – implementacja tooltip’ów:
JavaScript
var $tooltip = $('<div id="tooltip"></div>').appendTo('body'); var positionTooltip = function(event) { var tPosX = event.pageX; var tPosY = event.pageY + 20; $tooltip.css({top: tPosY, left: tPosX}); }; var showTooltip = function(event) { var authorName = $(this).text(); $tooltip .text('Highlight articles of ' + authorName).show(); positionTooltip(event); };
CSS
#tooltip { position: absolute; z-index: 2; background: #efd; border: 1px solid #ccc; padding: 3px; }
Użycie w kodzie:
var hideTooltip = function() { $tooltip.hide(); }; foobar.hover(showTooltip, hideTooltip). mousemove(positionTooltip);
Przykład – implementacja komponentu suggest dzięki Ajax Autocompleter jQuery.
Najpierw kod PHP zwracający dane:
// kod po stronie serwera - autocomplete.php if (strlen($_REQUEST['search-text']) < 1) { print '[]'; exit; } $terms = array( 'access', 'action', // ... 'xaml', 'xoops', ); $possibilities = array(); foreach ($terms as $term) { if (strpos($term, strtolower($_REQUEST['search-text'])) === 0) { $possibilities[] = "'". str_replace( "'", "\\'", $term)."'"; } } print ('['. implode(', ', $possibilities) .']'); // note: równie dobrze możemy ograniczyć się do json_encode() // jako że współcześnie nie powinno być problemów z dostępnością // tych funkcji na serwerach ?>
Kod JavaScript odwołujący się do skryptu na serwerze, celem pobrania danych:
$(document).ready(function() { var $autocomplete = $('<ul></ul>') .hide() .insertAfter('#search-text'); $('#search-text').keyup(function() { $.ajax({ 'url': '../search/autocomplete.php', 'data': {'search-text': $('#search-text').val()}, 'dataType': 'json', 'type': 'GET', 'success': function(data) { if (data.length) { $autocomplete.empty(); $.each(data, function(index, term) { $('<li></li>').text(term). appendTo($autocomplete); }); $autocomplete.show(); } } }); }); });
Na zakończenie podstawowego kursu jQuery, pragniemy przedstawić nieco bliżej znakomite rozszerzenie, służące tworzeniu i obsłudze bogatych elementów interfejsu użytkownika. Mowa o jQuery UI.
Rozszerzenie to oferuje sporą ilość udogodnień, takich jak:
– interakcje: Drag & Drop, Resizable (skalowanie elementów), Sortable (sortowanie)
– widgety: Accordion, Autocomplete, Button, Datepicker, Dialog, Progress bar, Slider, Tabs
– utilities i mnóstwo dostępnych efektów wizualnych
Oto jak przykładowo wyglądają widget’y:
Do tego dochodzą wymienne – poprzez CSS – skiny (skórki) dla komponentów UI.
Podsumowanie
Tym samym kończymy podstawowy kurs framework’a jQuery. W 3 częściach przedstawiliśmy podstawy pozwalające używać jQuery w codziennej pracy.
Dobrze jest mieć te informacje pod ręką – czasami potrzeba sobie coś przypomnieć. Wiele przyszłych artykułów i tutoriali, które tu tworzymy, będzie opierać się o jQuery.