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:

– Resizable

– jQuery Datepicker

– jQuery Progressbar

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.

Dominik Wlazłowski

Programista WWW i aplikacji mobilnych z wieloletnim doświadczeniem. Bloger 🙂 Anty-lewak 🙂 Pasjonat programowania, nowych technologii, a także sportu i motoryzacji.

     

Podaj dalej: 10001