快速选择优雅[select]

野性酷女 2023-02-21 14:24 1阅读 0赞

Form elements have always allowed limited styling...which is why I hate working on form display.  And I started when form elements were virtually unstylable back in the Internet Explorer 4 days.  Of course we've come a long way but there's one element which is still somewhat difficult to style and isn't particularly elegant:  `SELECT`.  The element looks different from OS to OS and sometimes even browser to browser -- not ideal.

表单元素始终允许样式受限……这就是为什么我讨厌在表单显示上工作。 我从4天后Internet几乎无法样式化表单元素开始。 当然，我们已经走了很长一段路，但是有一个元素在样式上仍然有些困难并且并不是特别优雅： `SELECT` 。 元素因操作系统而异，有时甚至因浏览器而异-并不理想。

I recently found an awesome jQuery plugin to make the `SELECT` element more presentable, elegant, and stylable:  [Quick\[select\]][Quick_select].  Quick\[select\] turns `SELECT` options into clickable buttons with a traditional `SELECT` as a fallback.

我最近找到了一个很棒的jQuery插件，以使`SELECT`元素更美观，更优雅且更具样式： [Quick \[select\]][Quick_select] 。 快速\[选择\]将`SELECT`选项变成可点击的按钮，并以传统的`SELECT`作为后备选项。

[View Demo][] [观看演示][View Demo]

## CSS **(**The CSS**)** ##

Quick\[select\] comes with a base stylesheet but you can style the option "buttons" in any way you'd like, as you can see in my demo.  Here are my basic styles:

Quick \[select\]带有基本样式表，但是您可以按照自己的方式对“按钮”选项进行样式设置，如在我的演示中所见。 这是我的基本风格：

.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\] also has a helper for bootstrapped-driven sites, if that's your stack.

Quick \[select\]也有一个用于引导驱动站点的帮助程序(如果这是您的堆栈)。

## JavaScript **(**The JavaScript**)** ##

Using Quick\[select\] is easy:  add the plugin to the page and then use the jQuery plugin syntax to create instances for given `SELECT` elements:

使用Quick \[select\]很容易：将插件添加到页面，然后使用jQuery插件语法为给定的`SELECT`元素创建实例：

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'
    });

The most important option is `breakOutValues` which generates clickable buttons for popular choices (specified by you) within the `SELECT` element.  You'll also want to set a custom `selectDefaultText` value for when the button which triggers the full display of the options.

最重要的选项是`breakOutValues` ，它为`SELECT`元素内的流行选择(由您指定)生成可单击的按钮。 您还想为按钮触发选项的完整显示时设置自定义的`selectDefaultText`值。

[View Demo][] [观看演示][View Demo]

Quick\[select\] is the best `SELECT` alternative that I've seen in a long time.  This plugin allows for elegant, stylish, and usable `SELECT` elements.  Go check it out and do your users a favor!

Quick \[select\]是我很长时间以来见过的最好的`SELECT`选择。 该插件允许优雅，时尚和可用的`SELECT`元素。 去检查一下，对您的用户有所帮助！

> 翻译自: [https://davidwalsh.name/quick-select][https_davidwalsh.name_quick-select]

[Quick_select]: http://eggboxio.github.io/quick-select/
[View Demo]: https://davidwalsh.name/demo/quick-select.php
[https_davidwalsh.name_quick-select]: https://davidwalsh.name/quick-select