přejít na obsah přejít na navigaci

Linux E X P R E S, jQuery (21) – výběr položek v jQuery UI

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í. 


reklama

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á.

Nahoru

(Jako ve škole)
 

Top články z OpenOffice.cz

Přidat téma diskuse

Nejsou podporovány žádné značky, komentáře jsou jen čistě textové. Více o diskuzích a pravidlech najdete v nápovědě.
Diskuzi můžete sledovat pomocí RSS kanálu rss



 
 

Lukáš Jelínek

Lukáš Jelínek

Šéfredaktor LinuxEXPRESu a OpenOffice.cz. Vystudoval FEL ČVUT v oboru Výpočetní technika. Žije v Kutné Hoře a podniká v oblasti informačních technologií. Ve volném čase rád fotografuje, natáčí a stříhá video a také se věnuje (v Čechách poměrně málo známému) powerkitingu.


  • Distribuce: Debian, Kubuntu
  • Grafické prostředí: KDE
  • Hodnocení autora: ***

| proč linux | blog



Public Relations

Extrémní virtuální servery s SSD úložištěm

Pojmy, jako jsou cloud a virtualizace, na nás v dnešní době vykukují zpoza každého rohu. A není divu. Služby založené na virtualizaci fyzického hardwaru se těší velké oblibě a často jsou vnímány jako levnější alternativa k fyzickému serveru. Dedikované virtuální servery od Coolhousingu jsou však jiné.

Pokračování ...