jQuery vybraný plugin

Můj nejméně oblíbený formulářový prvek je bezpochyby SELECT živel. Prvek je téměř nestylovatelný, vypadá na různých platformách jinak, má nekonzistentní přístup k hodnotám a katastrofa, která je výsledkem multiple=true je to katastrofa. Netřeba dodávat, že kdykoli vývojář udělá něco navíc, aby nabídl řešení těchto problémů, na tváři se mi vykreslí široký úsměv. Harvest nedávno vydal Chosen, SELECT enhancer, který nabízí automatický návrh, vyhledávání, stylizaci a elegantní řešení pro vícenásobný výběr. Ještě lépe, Chosen je k dispozici pro jQuery i Prototype. Pojďme se podívat na to, jak používat Chosen!

Zobrazit ukázku

HTML

Zvolený používá true SELECT prvky jako základ pro jeho konstrukci, takže si vytvořte svůj SELECT a OPTION prvky jako obvykle:

<!-- single dropdown -->
<select class="chosen" style="width:200px;">
	<option>Choose...</option>
	<option>jQuery</option>
	<option selected="selected">MooTools</option>
	<option>Prototype</option>
	<option>Dojo Toolkit</option>
</select>

<!-- multiple dropdown -->
<select class="chosen" multiple="true" style="width:400px;">
	<option>Choose...</option>
	<option>jQuery</option>
	<option selected="selected">MooTools</option>
	<option>Prototype</option>
	<option selected="selected">Dojo Toolkit</option>
</select>

Jak se očekávalo, Chosen respektuje selected atribut a během konstrukce vybere požadované hodnoty.

JavaScript jQuery

Použití jQuery je takové, jaké byste očekávali:

jQuery(document).ready(function(){
	jQuery(".chosen").chosen();
});

Plugin detekuje vícenásobné označení a vytvoří zobrazení ve stylu Facebooku, jinak vytvoří standardně vypadající SELECT prvek s možností vyhledávání. Zvolený také reaguje na příkazy klávesnice pro výběr. Brilantní! Chcete-li změnit zástupný text daného násobku SELECT , aktualizujte zástupná data pro daný uzel:

jQuery(document).ready(function(){
	jQuery(".chosen").data("placeholder","Select Frameworks...").chosen();
});

Doporučuji aktualizovat zástupný symbol, protože výchozí „Vybrat některé možnosti“ není ze zpráv nejpříjemnější.

Zobrazit ukázku

Zvolen není úplně dokonalý; Chtěl bych vidět možnost maxSelectedOptions a možná stav „chyba“ nebo „povinný“ stav CSS. Kromě těchto drobných výtek si myslím, že Chosen je solidní dílo. Být nabízen v jQuery i Prototype je bonusem pro uživatele obou JavaScriptových frameworků. Pokud nesnášíte SELECT prvky stejně jako já, vyzkoušejte Chosen!