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 selected a unselected, v případě potřeby reagovat už na změny výběrového boxu pak události selecting a unselecting.
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á.