jQuery w przykładach

Zaczynamy od instalacji dwóch rozszerzeń Firefoksa:

Biblioteka jQuery to jeden duży module pattern (D. Crockford):

var singleton = function () {
  var privateVariable;
  function privateFunction(x) {
      ...privateVariable...
  }
  return {
    firstMethod: function (a, b) {
         ...privateVariable...
    },
    secondMethod: function (c) {
         ...privateFunction()...
    }
  };
}();

Luźne uwagi o module pattern: Why I don't love JavaScript's Module Pattern, A JavaScript Module Pattern.

Podstawowe linki

Zebra effect

Pierwsze koty za płoty: ABBA.

Sortowanie kolumn tabeli

Dwie implementacje. Pierwsza korzysta z funkcji sort języka Javascript. Druga też, ale przed wywołaniem funkcji sort, pobiera z elementu td tekst, który będzie sortowany i zapamiętuje go, po zamianie na duże litery, w pseudoatrybucie elementu o nazwie sortKey. Ta technika nazywa się expando.

Sortowanie:

$('#alpha').each(function() {
  var $table = $(this);  // zapamiętaj
  $('thead td', $table).each(function(column) { // pobierz numer kolumny
    if ($(this).is('.sort-alpha')) {
      // alert("found column: " + column);
      $(this).addClass('clickable').hover(function() {
        $(this).addClass('hover');
      }, function() {
        $(this).removeClass('hover');
      }).click(function() {

        var rows = $table.find('tbody > tr').get();  // get DOM elements
        rows.sort(function(a, b) {
          var keyA = $(a).children('td').eq(column).text().toUpperCase();
          var keyB = $(b).children('td').eq(column).text().toUpperCase();
          if (keyA < keyB) return -1;
          if (keyA > keyB) return 1;
          return 0;
        });

        $.each(rows, function(index, row) {
          $table.children('tbody').append(row);
        });

      });
    }
  });
});

Przyspieszamy kod funkcji sortującej

Kod użyty w tabeli powyżej jest wolny, ponieważ przy każdym wywołaniu funkcja porównujaca, musi wyliczać:

var keyA = $(a).children('td').eq(column).text().toUpperCase();
var keyB = $(b).children('td').eq(column).text().toUpperCase();

co wygląda na kosztowną operację, na dodatek wykonywaną przy każdym porównaniu.

Kod powinien działać szybciej, jeśli wstępnie obliczymy wartości wszystkich kluczy key i zapamiętamy wynik w specjalnym atrybucie (tutaj sortKey):

$.each(rows, function(index, row) {
  row.sortKey = $(row).children('td').eq(column).text().toUpperCase();
});

Takie użycie specjalnego atrybutu nazywamy expando.

The Power of Plugins

Idealnym kandytatem na wtyczkę jest funkcja alternateRowColors. Przerobienie jej na wtyczkę jest trywialne. Oto kod wtyczki o nazwie alternateRowColors, eksportującej jedną funkcję o takiej samej nazwie jak nazwa wtyczki (taka konwencja się przyjęła w świecie jQuery):

(function($){
   $.fn.alternateRowColors = function() {
     $('tbody tr:even', this).removeClass('odd').addClass('even');
     $('tbody tr:odd', this).removeClass('even').addClass('odd');
     return this;
   };
})(jQuery);

Powyższy kod:

Z tej wtyczki korzystamy w taki sposób:

$table.alternateRowColors();

i zrobiliśmy z niej użytek w ostatnim przykładzie.

Uwaga: Kod $table.alternateRowColors() jest bardziej w stylu jQuery niż zapis alternateRowColors($table).

You Still Can’t Create a jQuery Plugin?

Jeffrey Way: „Never fear; I'm going to show you exactly how to build your own tooltip plugin, at the request of one of our loyal readers.”

Alen Grakalic: „The Easiest jQuery Plugin For Sliding Images and Content.”

Real Plugin: TableSorter

Na stronie jQuery jest link do podstrony z wtyczkami. Ale tutaj nie było wtyczki do sortowania kolumn tabel.

Szybkie guglanie dało link do tablesorter (strona z fajnym demo).

Więcej fajnych wtyczek:

Tabelki:

Kilka linków do wtyczek oraz do „Ajax Events Demo” jest na stronie Mike Alsup'a: