Knihovna jQuery

Javascriptová knihovna jQuery si mezi javascriptovými „frameworky“ vydobývá stále silnější pozici. I když její obliba stále roste, je ještě relativně mladá a tak zejména české zdroje o této knihovně jsou poněkud omezené. Kdo se zabýval vývojem internetové aplikace jistě již mnohokrát narazil na problém rozdílné implementace kódů v různých prohlížečích.
Hlavními myšlenkami knihovny jQuery jsou:

- Malá velikost knihovny(18kB komprimovaná) pro rychlé načítání internetové aplikace
- Sjednocené rozhraní pro všechny prohlížeče (počínaje IE6 až nejnovějšími FF konče). Vývojář si tak nemusí hlídat pro jaký prohlížeč píše funkcionalitu, knihovna to řeší za něj.
- Psát méně a „dělat více", což by mělo být něco jako zvýšení efektivity kódu

Samotnou knihovnu do své stránky zaimplemetujete velmi jednoduše. Stačí přidat následující řádek:

<script type="text/Javascript src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Stejným způsobem se přidávají do stránky i zásuvné moduly (liší se jen v adrese).

Selektory

Popisem selektorů začínají snad všechny manuály ke knihovně jQuery a nejinak začnu já. Selektory jsou důležitou součástí knihovny jQuery, protože pomocí nich vlastně definujeme objekt(y) ve webové stránce, nad kterými chceme provádět zamýšlenou operaci.

Použít můžeme vždy objekt nazvaný jQuery. Například: jQuery('div').addClass("mojeTrida");

Aniž bychom zatím přemýšleli, co příklad konkrétně dělá, heslem knihovny jQuery je psát méně a udělat více, je možné slovo jQuery nahradit znakem $ (dolar). Výsledek tedy můžeme zapsat i takto:

$('div').addClass("mojeTrida");

$() obsahuje specifikaci prvku(ů) nad kterými chceme provádět operaci. V našem příkladu jsme mu vložili řetězec div. Tím jsme vyselektovali všechny elementy DIV ve stránce. Přehled všech elementů najdete na následující stránce: default.asp. Dále jsme zapsali addClass("mojeTrida"); čímž říkáme přiřaď všem elementům DIV třídu (css) s názvem „mojeTrida". Ukázka ZDE.

Stejně tak můžeme zavolat jednu z následujících funkcí:

$('div').hide();    //schová všechny elementy DIV ve stránce
$('div').text("Nový HTML obsah");  //přidá všem elementům DIV nový HTML obsah (stačí napsat i text)
$('div').show(); //Zobrazí všechny elementy DIV (pokud jsou schované)

Selektoru $ lze samozřejmě předávat nejen přímo jedinečné ID prvku, ale také prvky zařazené do konkrétní třídy a všechny metody také můžeme donekonečna řetězit. To není zdaleka vše co lze s knihovnou jQuery provádět. Je to jen začátek, ale popořádku. Co to znamená si můžeme za chvilku ukázat.
Selektoru $ lze předávat přímo ID prvku s tím, že předchází znakem # (mřížka) např.

$('#identifikator').toogle();    //Zjistí viditelnost elementu s identifikátorem "identifikátor" a invertuje ji.

Selektoru $ lze předávat také přímo třídu elementu(ů), se kterými chceme pracovat, s tím, že název třídy předchází . (tečka) Např.:

$(".moje_odstavce").hide(3000); //skryje element(y), které mají přiřazenu třídu moje_odstavce za dobu 3000ms = 3 sekundy.

Selektoru $ lze také předávat skupinu elementů oddělenou čárkou:

$("p,a,div,.moje_odstavce").hide(3000); // Vybere všechny elementy p (odstavce), a (odkazy), a elementy s třídou moje_odstavce a skryje je za dobu 3s.

Řetězení metod

Představme si následující posloupnost příkazů:

$('div').hide();    //schová všechny elementy DIV ve stránce
$('div').text("Nový HTML obsah");  //přidá všem elementům DIV nový HTML obsah (stačí napsat i text)
$('div').show();

Uvedený kód v celku nejprve schová všechny elementy DIV, pak jim změní obsah na "Nový HTML obsah" a nakonec je opět zobrazí. Jak již bylo uvedeno heslem knihovny jQuery je pište méně, udělejte více a tak je možné všechny metody zřetězit do jediného příkazu:

$('div').hide().text("Nový HTML obsah").show();

jQuery umožňuje nekonečné řetězení funkcí a tak si můžete udělat libovolně dlouhý příkaz. Navazující článek v češtině si můžete přečíst na následujícím odkaze: http://citron.blueboard.cz/clanek-332-jquery-pro-z acatecniky-vyber-prvku.html

jQuery a události

Události tvoří v programovacích jazycích bohaté téma. Proto se podíváme pouze na uživatelské události. Uvedené principy se mohou analogicky užívat i u ostatních typů událostí.

Mějme např. element DIV s identifikátorem foo a chtějme mu přiřadit při kliknutí funkci, aby se objevil formulář metody alert:

$('#foo').bind('click', function(e) {
  alert('Kliknul jsi na "foo."');
});

Události se v jQuery nazývají stejně, jako jejich "starší" javascriptové protějšky, ale je vynecháno začáteční "on". K jejich zaregistrování slouží funkce bind. Stejného efektu můžeme dosáhnout ještě kratším zápisem:

$('#foo').click(function(e) { alert('Kliknul jsi na "foo."'); })

Kromě toho můžeme události přiřazovat "zároveň", např.:

$('#foo').bind('mouseenter mouseleave click', function(e) {
  $(this).toggleClass('entered');
});

Ukázka ZDE

Uvedeným zápisem přiřadíme elementu s identifikátorem foo reakci při najetí a odjetí myši a dále při kliknutí myši. Události jednoduše oddělujeme mezerou. Dále si povšimněme ukazatele this, který v tomto případě zastupuje objekt "sebe-sama" v selektoru.

Ještě si můžeme vyzkoušet odchycení pozice myši:

$('#foo').bind('click', function(event) {
  alert('Kurzor mysi je na: ('
    + event.pageX + ', ' + event.pageY + ')');
});

Uvedená ukázka způsobí, že kliknutí na element s identifikátorem foo vyvolá alert messagebox, kde se zobrazí souřadnice pozice myši v momentě kliknutí na element. Poznámka: kdybychom chtěli přiřadit tuto funkci celému HTML dokumentu, stačilo by '#foo' nahradit za document.body

Odregistrování událostí

Je jednoduché. Pokud chceme odebrat elementu všechny události zavoláme přetíženou funkci unbind bez parametrů, např.:

$('#foo').unbind();

Pokud chceme odebrat jen některé události předáme je funkci unbind, např.

$('#foo').unbind('click');

Vše o událostech si můžete přečíst přímo z dokumentace jQuery: events

jQuery a Ajax

Implementace Ajaxu není úplně jednoduchá záležitost, viz.:
307892-ajax-uvod
http://pc.poradna.net/a/view/307893-ajax-xmlhttpre quest

V jQuery však není práce s Ajaxem o nic složitější než předchozí příklady a to včetně napříč prohlížeči. Pokud chceme načíst data ze serveru na pozadí stránky, stačí si založit následující funkci:

function StahniData() {
  $.post("pozadavek.php", function(data) {
    alert("Data Loaded: " + data);
  });
}

V této ukázce se zavolá skript jménem pozadavek.php a data získáme z proměnné data. V tomto příkladě je zobrazí alert-message-box, ale pochopitelně by nebyl problém tato data přihrát kamkoliv do vhodného elementu. Např.

$('body').append(data);

Podobně můžeme data na server odeslat, podívejme se na následující funkci:

function odesli() {
  $.post("pozadavek.php", { name: "John", time: "2pm" },
    function(data) {
      alert("Data Loaded: " + data);
    });
}

Funkce odesli pošle dvě proměnné metodou post. V tomto příkladě je jejich hodnota nastavena na name=John a time=2pm .

Takže PHP skript, který vrátí přesně ta data, která obdržel vypadá následovně:

<?php
echo $_POST["name"];
echo $_POST["time"];
?>

Výsledkem volání funkce je tento message-box:

Upozornění: Kvůli bezpečnosti lze Ajaxem stahovat jen data ze stejné domény. Proto nemůže být zadán libovolný soubor na libovolném serveru!

jQuery pochopitelně nabízí mnohem flexibilnější práci s Ajaxem, než příklady, které jsem tady demonstroval. Cílem není přepsat sem celou dokumentaci jQuery, ale nastínit možnosti této knihovny. Proto mohu jen doporučit jedinou knihu, která vyšla v češtině, ze které jsem čerpal:

Závěrem bych poukázal možnosti zásuvných modulů. V internetových obchodech je stále oblíbenější "stromová" nabídka zboží. Jistě ji každý již několikrát viděl a zboží je v ní roztříděno následujícím způsobem:

V HTML dokumentu stačí vygenerovat následující strukturu značek UL a LI:

<ul id="example" class="filetree">
  <li><span class="folder">Složka1</span>
    <ul>
      <li><span class="file">Položka 1.1</span></li>
    </ul>
  </li>
  <li><span class="folder">Složka2</span>
    <ul>
      <li><span class="folder">PodSložka 2.1</span>
        <ul>
          <li><span class="file">File 2.1.1</span></li>
          <li><span class="file">File 2.1.2</span></li>
        </ul>
      </li>
      <li><span class="file">File 2.2</span></li>
    </ul>
  </li>
  <li class="closed"><span class="folder">Folder 3 (closed at start)</span>
    <ul>
      <li><span class="file">File 3.1</span></li>
    </ul>
  </li>
  <li><span class="folder">Složka další</span>
    <ul>
      <li><span class="folder">PodSložka 4.1</span>
        <ul>
          <li><span class="file">File 4.1.1</span></li>
          <li><span class="file">File 4.1.2</span></li>
        </ul>
      </li>
      <li><span class="file" onclick="alert('You are there...')">File 4.2</span></li>
    </ul>
  </li>
</ul>

Jak si můžeme povšimnout kořenová značka UL má identifikátor example. Pokud použijeme zásuvný modul z webové adresy: http://jquery.bassistance.de/treeview/jquery.treev iew.js. Stačí zavolat nad touto poměrně nepřehlednou skupinou prvků následující funkci:

$(function() {
  $("#example").treeview({
    collapsed: true,
    animated: "medium",
    control:"#sidetreecontrol",
    persist: "location"
  });
})

A výsledek si můžete sami prohlédnout: __ZDE__.

Netřeba připomínat, že takováto funkcionalita je mocná zbraň a v porovnání s klasickými internetovými obchody umožňuje maximálně rychlou a dynamickou orientaci v kategoriích v internetovém obchodě. Ačkoliv z hlediska SEO klasického internetového obchodu by se nejednalo o ideální řešení návrhu.