Linux E X P R E S

Facebook

jQuery (21) – výběr položek v jQuery UI

jquery.png

Hromadné operace s určitými objekty vyžadují, aby byly požadované objekty nejprve vybrány. Pojďme se podívat, jaké možnosti jQuery UI nabízí. 


Jednoduchý výběr položek

Jistě víte, jak vypadají hromadné operace, například přesun více souborů, v desktopových grafických prostředích. Položky k provedení určité operace se vyberou pomocí myši s případnou pomocí z klávesnice. Proč by webové aplikace neměly mít stejný komfort?

Takový komfort zajistit lze, a to použitím widgetu Selectable v jQuery UI. Umí dva způsoby výběru: klikáním na položky (s klávesou Ctrl pro větší nesouvislý výběr) i výběrovým boxem (tažením kurzoru myši od jednoho rohu k protějšímu se vybírají položky).

Selectable bohužel neumí výběr souvislé posloupnosti přidržením klávesy Shift ani výběr pomocí klávesnice. Později se ale podíváme, jak tam tyto funkce přidat.

Práce s widgetem Selectable

Widget Selectable se používá velmi podobně jako widgety z předchozích dílů seriálu. Vytváří se z objektu v DOM, jehož potomky chceme vybírat pro další operace. Například může být následující kód HTML (představuje okno se soubory a složkami, aby to bylo podobné jako na desktopu):

<ul id="file-window">
  <li class="parent">..</li>
  <li class="folder">Složka</li>
  <li class="file">Soubor 1</li>
  <li class="file">Soubor 2</li>
</ul>

Potom se soubory a složky učiní vybíratelné tímto základním kódem (jenž vytvoří widget Selectable):

$('#file-window').selectable();

Tento kód ale samozřejmě nedělá nic jiného, než že umožní položky vybírat. K další práci je potřeba udělat trochu víc.

Vybrané a vybírané položky

Úplně nejdůležitější je zjišťování, které položky byly vybrány. To jde udělat kdykoliv, a to pomocí třídy ui-selected. Co by tak asi mohl dělat následující kód?

$(document).keyup(function(e) {
  if (e.which == 127) {
    $(this).children('.ui-selected').remove();
  }
});

Pokud tipujete, že po stisku klávesy Del smaže vybrané položky, tipujete správně. Podobně lze třídě nastavit vhodný grafický styl, aby bylo zjevné, že jde o vybrané položky. Obdobně existuje třída ui-selecting, kterou získají objekty, u nichž zrovna probíhá výběr (dostaly se do výběrového boxu). CSS pak může vypadat třeba takto:

.ui-selecting {
  background-color: silver;
}

.ui-selected {
  background-color: navy;
}

Vybírané položky budou mít světle šedé („stříbrné“) pozadí, vybrané položky pozadí vyplněné námořnickou modří. Existuje ještě třída ui-selectee, viz dále.



Filtrace

Protože se widget vytváří z rodiče těch objektů, z nichž chceme učinit vybíratelné položky, narazíme někdy na problém, že lze vybrat i něco, co by nemělo. Ve výše uvedeném příkladu je to položka „..“, která označuje přechod do nadřazené složky/adresáře a rozhodně nemá jít vybrat. Co s tím? Použít filtr!

var opts = {
  filter: '.folder, .file'
};
$('#file-window').selectable(opts);

Widget se vytvoří s tím, že půjdou vybírat jen objekty s uvedenými třídami („..“ žádnou z těchto tříd nemá). Po vytvoření widgetu bude vybíratelným objektům nastavena již zmíněná třída ui-selectee; to se může hodit například pro grafické zvýraznění.

Úprava chování

Výběrový box standardně vybírá vše, čeho se dotkne. Pokud to není žádoucí a chcete vybírat jen co, co je celé uvnitř boxu, není problém to zajistit (výchozí hodnota je „touch“, tedy dotyk):

var opts = {
  tolerance: 'fit',
  delay: 100,
  distance: 20
};
$('#file-window').selectable(opts);

Příklad ukazuje i další dva parametry ovlivňující, jak bude výběr fungovat. Objevily se už v minulých dílech a zde je lze použít k ochraně proti nechtěnému výběru.

Události

Widget Selectable generuje události při vytvoření, při začátku a konci procesu vybírání, při a po vybrání, resp. odvybrání. K čemu je obsluha událostí dobrá? Třeba u souborů můžeme sčítat a někde zobrazovat celkovou velikost vybraných souborů, přičemž přepočet se provede buď po změně výběru nebo už během vybírání (podle toho, co je vhodnější).

var opts = {
  stop: function() {
    …
  }
};
$('#file-window').selectable(opts);

Do obslužné rutiny události stop (která nastává, když proces výběru skončí) by se napsal kód, který posčítá velikosti vybraných souborů (reprezentovaných objekty třídy ui-selected). Pokud bychom potřebovali přepočet po každém jednotlivém souboru, obsloužily by se události selectedunselected, v případě potřeby reagovat už na změny výběrového boxu pak události selectingunselecting.

Výběr a přetažení

Příště dáme dohromady výběr objektů a jejich přetažení jinam. Paralela s prací se soubory v oknech na desktopu je zde více než zřejmá.

Diskuze (0) Nahoru