帮助自定义选择框样式的Javascript - DropKick.js

来源：GBin1.com

 

在线演示   在线下载

当你想要设计一个页面样式时，没有什么比表单更让人头疼了。而当你设计一个表单的样式时，最让你头疼的就应该非下拉框<select>莫属了。

我们可以使用CSS来给<select>定一个样式，但是只用CSS的话，这里就会有很大的局限性。通常情况下，唯一的可行选择就是用JavaScript来做下拉框的样式。

在这篇文章中，我们使用DropKick - 一个jQuery的插件，来创建我们的下拉列表。它做了什么呢？DropKick将<select>列表转换成完全自定义的HTML元素做的下拉列表，而当你选择了一个下拉选项时，这个选项对应的选项值会更新成表单的一部分。好了，现在让我们开始吧！

创建<select>

我们要做的第一件事，是创建一个<select>列表，我们在例子中创建一个一周工作日的列表：

.....

调用DropKick

当我们创建了<select>列表之后，我们需要加载3个文件：

• DropKick的.js文件
• .css文件
• jQuery的.js文件

我们需要在页面head里面引用css文件，在页面最后面加载JavaScript。当我们完成这个的时候，我们只需要激活DropKick插件，然后使用DropKick创建我们自己完全自定义的下拉列表：

.....

然后我们可以将<select>转换成我们的HTML语句：

.....

现在你可以看到，DropKick将我们的<select>换成了其他我们可以用CSS来设计样式的元素。另外，所有选项对应的值，我们用HTML5中的data属性来定义，在事例中，我们用了data-dk-dropdown-value来命名。

我们现在可以用CSS来定义我们的下拉列表样式了，或者你也可以选择使用DropKick提供的主题。DropKick提供了三个主题：默认主题，暗泽主题和亮泽主题。但是相信更多的人跟愿意自己来定义样式，来满足项目的设计要求。 

DropKick延伸

DropKick可以被延伸使用，这个也很简单。假设你想要检测一下，什么时候下拉表单被做了改变，你可以加一个change事件句柄：

.....

.....

via Nelly@极客标签

来源：帮助自定义选择框样式的Javascript - DropKick.js