jQuery Chosen: vylepšete si rozbalovací nabídky na svém webu

Běžné rozbalovací nabídky na webu jsou poněkud nudné. Pokud je v nich velké množství položek, obtížně se v nich vyhledává, zvlášť, když položky nejsou seřazeny abecedně. Rozbalovačky však velmi rychle proměníte v pěkný ovládací prvek pomocí jQuery pluginu Chosen.

Jestli je nějaký ovládací prvek ve formulářích na webových stránkách nepohodlný, pak je to rozbalovací nabídka, případně jakákoli vybíračka obecně. Pokud je v ní větší množství položek, pak ji rozklepnete a teď dlouho rolujete tam a zpátky, dokud nenajdete požadovanou volbu.

O něco lepší to je v případě, že jsou položky seřazeny abecedně. Pak jen stačí v rozbalené nabídce psát písmena na klávesnici a kurzor se vám posune na odpovídající položku. Není to ale úplně pohodné a myslím, že většina uživatelů to ani neumí používat.

Když jsem si nedávno hrál s Grocery CRUD, zalíbilo se mi řešení rozbalovacích nabídek, které jsou přetvořeny pomocí pluginu do jQuery s názvem Chosen. Po jeho aplikaci je jednak možné rozbalovací nabídku lépe nastylovat, jednak se zásadně vylepší její funkcionalita, neboť obsahuje vyhledávací políčko, kde se objevují stisknuté znaky a obsah vybíračky se podle nich automaticky filtruje.

jQuery Chosen navíc podporuje i vybíračky s více volbami, element <optgroup> pro vytvoření sekcí uvnitř rozbalené nabídky a řadu dalších věcí.

Tip: Chcete jen nastylovat prvek <select>, ale neměnit jeho funkcionalitu? Pak se podívejte na článek Jak stylovat rozbalovací nabídky (select) pomocí CSS a jQuery.

Jak použít jQuery Chosen

Nejprve si ukážeme jednoduchý HTML formulář s rozbalovací nabídkou a tlačítkem pro odeslání.

<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Formulář s rozbalovací nabídkou</title>
</head>
<body>
  <form action="#">
    <select id="rozbalovacka">
      <option>Praha</option>
      <option>Brno</option>
      <option>Ostrava</option>
      <option>Břeclav</option>
      <option>Olomouc</option>
      <option>Jičín</option>
      <option>Prachatice</option>
      <option>Hradec Králové</option>
    </select>
    <input type="submit" value="Odeslat" />
  </form>
</body>
</html>

Jak takový jednoduchý formulář vypadá, není těžké odhadnout. Vzhled rozbalovací nabídky, tedy prvku <select> odpovídá použité platformě.

Nyní však zkusíme aplikovat plugin jQuery Chosen. Do hlavičky stránky přidejte odkaz na knihovnu jQuery a na soubor s pluginem Chosen. Jeho aktuální verzi najdete na GitHubu. Zkopírujte ji do svého projektu a do hlavičky stránky napojte soubor JavaScriptu a CSS. To můžete případně přestylovat dle svých potřeb.

Nyní přidejte jednoduchý skriptík v jQuery, který po načtení dokumentu zavolá element s id rozbalovacka (všimněte si, že to jsme přiřadili prvku select) a aplikuje na něj funkci chosen(). Tím je proměna vybíračky dokončena.

<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Formulář s rozbalovací nabídkou</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
  <script src="chosen/chosen.jquery.min.js"></script>
  <link rel="stylesheet" href="chosen/chosen.css" />
  <script>
    jQuery(document).ready(function () { 
      jQuery('#rozbalovacka').chosen();
    });
  </script>
</head>
<body>
  <form action="#">
    <select id="rozbalovacka">
      <option>Praha</option>
      <option>Brno</option>
      <option>Ostrava</option>
      <option>Břeclav</option>
      <option>Olomouc</option>
      <option>Jičín</option>
      <option>Prachatice</option>
      <option>Hradec Králové</option>
    </select>
    <input type="submit" value="Odeslat" />
  </form>
</body>
</html>

Výsledek pak bude vypadat nějak takto:

Jak vidíte, použití tohoto pluginu je velmi jednoduché. Na domovské stránce najdete pár poznámek k různým modifikacím a úpravám takto vytvořené rozbalovačky. Upozornil bych hlavně na nutnost změny volání události change u prvku <select>. Pokud to ve svém kódu pro jQuery používáte, pak místo jQuery('#rozbalovacka').change(...) volejte jQuery('#rozbalovacka').chosen().change(...), jinak vám to nebude správně fungovat.

jQuery Chosen a Drupal

V podstatě nic nebrání tomu, abyste Chosen zkopírovali do tématu vzhledu a do šablony napojili JavaScript a CSS tohoto pluginu. jQuery už má Drupal v sobě. Pokud si chcete těchto pár kroků ušetřit a mít řešení nezávislé na tématu vzhledu, pak stačí doplnit modul nazvaný Chosen.

Tento modul se postará o napojení příslušné knihovny, umožní vám změnit nastavení přes administraci a projeví se v definici políček, kde budete moci nastavit, zda se k jejich vykreslení má použít jQuery Chosen. Zatím jsem modul nezkoušel, ale jeho použití bych rád viděl hlavně u vystavených filtrů Views, což, zdá se dle popisu, modul zatím neumí. Proto jsem tedy doporučoval ruční napojení do tématu vzhledu.

Tagy

jQuery

JavaScript

Drupal

Autor článku: Jan Polzer

Tvůrce webů z Brna se specializací na Drupal, WordPress a Symfony. Acquia Certified Developer & Site Builder. Autor několika knih o Drupalu.
Web Development Director v Lesensky.cz. Ve volných chvílích podnikám výlety na souši i po vodě. Více se dozvíte na polzer.cz a mém LinkedIn profilu.

@maxiorel