Elegant Selects s ​​Quick[select]

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

Zobrazit ukázku

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

Zobrazit ukázku

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!