帮助自定义选择框样式的Javascript - DropKick.js
在线演示 在线下载
当你想要设计一个页面样式时,没有什么比表单更让人头疼了。而当你设计一个表单的样式时,最让你头疼的就应该非下拉框<select>莫属了。
我们可以使用CSS来给<select>定一个样式,但是只用CSS的话,这里就会有很大的局限性。通常情况下,唯一的可行选择就是用JavaScript来做下拉框的样式。
在这篇文章中,我们使用DropKick - 一个jQuery的插件,来创建我们的下拉列表。它做了什么呢?DropKick将<select>列表转换成完全自定义的HTML元素做的下拉列表,而当你选择了一个下拉选项时,这个选项对应的选项值会更新成表单的一部分。好了,现在让我们开始吧!
创建<select>
我们要做的第一件事,是创建一个<select>列表,我们在例子中创建一个一周工作日的列表:
<select id='mySelect'>
<option value='mon'>Monday</option>
<option value='tue'>Tuesday</option>
<option value='wed'>Wednesday</option>
<option value='thu'>Thursday</option>
<option value='fri'>Friday</option>
</select>
调用DropKick
当我们创建了<select>列表之后,我们需要加载3个文件:
- DropKick的.js文件
- .css文件
- jQuery的.js文件
我们需要在页面head里面引用css文件,在页面最后面加载JavaScript。当我们完成这个的时候,我们只需要激活DropKick插件,然后使用DropKick创建我们自己完全自定义的下拉列表:
$('#mySelect').dropkick();
然后我们可以将<select>转换成我们的HTML语句:
<div class="dk_container dk_theme_default" id="dk_container_undefined">
<a class="dk_toggle">
<span class="dk_label">Thursday</span>
</a>
<div class="dk_options">
<ul class="dk_options_inner">
<li class="">
<a data-dk-dropdown-value="mon">Monday</a>
</li>
<li class="">
<a data-dk-dropdown-value="tue">Tuesday</a>
</li>
<li class="">
<a data-dk-dropdown-value="wed">Wednesday</a>
</li>
<li class="dk_option_current">
<a data-dk-dropdown-value="thu">Thursday</a>
</li>
<li class="">
<a data-dk-dropdown-value="fri">Friday</a>
</li>
</ul>
</div>
</div>
现在你可以看到,DropKick将我们的<select>换成了其他我们可以用CSS来设计样式的元素。另外,所有选项对应的值,我们用HTML5中的data属性来定义,在事例中,我们用了data-dk-dropdown-value来命名。
我们现在可以用CSS来定义我们的下拉列表样式了,或者你也可以选择使用DropKick提供的主题。DropKick提供了三个主题:默认主题,暗泽主题和亮泽主题。但是相信更多的人跟愿意自己来定义样式,来满足项目的设计要求。
DropKick延伸
DropKick可以被延伸使用,这个也很简单。假设你想要检测一下,什么时候下拉表单被做了改变,你可以加一个change事件句柄:
$('select').dropkick({
change: function (value) {
console.log('Option selected: ' + value);
}
});
这样每当选项改变的时候,你的console中就会打出响应的选项值。
我相信这里有上千种方法让你在不用jQuery的请款下,设计一个下拉表单样式,但是无疑如果只使用CSS,你注定要以失败收场。这个插件的简便和灵活,还有它的渐增加强方法,足以让它成为一个非常值得使用的解决方案。
现在还等什么,你也可以来试试。
来源:帮助自定义选择框样式的Javascript - DropKick.js
【帮助自定义选择框样式的Javascript - DropKick.js】相关文章
1. 帮助自定义选择框样式的Javascript - DropKick.js
2. CSS自定义光标样式
6. 将HTML5封装成android应用APK文件的几种方法
10. JScrambler:保护你的JavaScript代码
本文来源:https://www.51html5.com/a3437.html
﹝帮助自定义选择框样式的Javascript - DropKick.js﹞相关内容
- Formula.js – 实现 MS Excel 公式的 JavaScript 工具库
- HTML 5 的自定义 data-* 属性和jquery的data()方法的使用
- html5的自定义data-*属性与jquery的data()方法的使用
- HTML 5 的自定义 data-* 属性和jquery的data()方法的使用
- phonegap教程第六讲 Jquery Mobile默认主题以及自定义主题
- html5的自定义data-*属性与jquery的data()方法的使用
- 超级精美的自定义复选框&单选按钮
- 自定义网页字体和图标生成工具
- 可以轻松自定义的现代风格弹窗插件
- HTML 5 的data-* 自定义属性