Prvky formuláře vždy umožňovaly omezený styl... proto nenávidím práci se zobrazením formuláře. A začal jsem, když byly prvky formuláře v Internet Exploreru před 4 dny prakticky nestylovatelné. Samozřejmě jsme ušli dlouhou cestu, ale je tu jeden prvek, který je stále poněkud obtížně stylizovatelný a není nijak zvlášť elegantní: SELECT
. Prvek vypadá v jednotlivých operačních systémech a někdy dokonce i od prohlížeče k prohlížeči jinak – není to ideální.
Nedávno jsem našel úžasný plugin jQuery pro vytvoření SELECT
prvek prezentovatelnější, elegantnější a stylovější: Rychle[výběr]. Quick[select] otočí SELECT
možnosti do klikatelných tlačítek s tradičním SELECT
jako záložní.
CSS
Quick[select] je dodáván se základní šablonou stylů, ale můžete si upravit styl "tlačítek" jakýmkoli způsobem, jak můžete vidět v mé ukázce. Zde jsou mé základní styly:
.btn-group .btn { border: 1px solid #ccc; background: #eee; padding: 4px; border-radius: 4px; margin: 0 10px 0 0; font-size: 14px; display: inline; transition: background .3s, border-color .3s; } .btn-group .btn.active { background: #7ac9ed; border-color: #0c7bb6; }
Quick[select] má také pomocníka pro weby řízené bootstrapem, pokud je to váš stack.
JavaScript
Použití Quick[select] je snadné: přidejte plugin na stránku a poté použijte syntaxi pluginu jQuery k vytvoření instancí pro daný SELECT
prvky:
jQuery('#wakeup-time').quickselect({ activeButtonClass: 'btn-primary active', breakOutValues: ['06:30', '07:00', '07:30', '08:00'], buttonClass: 'btn btn-default', selectDefaultText: 'Other', wrapperClass: 'btn-group' });
Nejdůležitější možností je breakOutValues
který generuje tlačítka s možností kliknutí pro oblíbené volby (vámi určené) v rámci SELECT
živel. Budete také chtít nastavit vlastní selectDefaultText
hodnota, kdy tlačítko, které spustí úplné zobrazení možností.
Quick[select] je nejlepší SELECT
alternativu, kterou jsem už dlouho viděl. Tento plugin umožňuje elegantní, stylové a použitelné SELECT
Prvky. Jděte se na to podívat a udělejte svým uživatelům laskavost!