HTML5资讯

当前位置: HTML5技术网 > HTML5资讯 > 帮助自定义选择框样式的Javascript - DropKick.js

帮助自定义选择框样式的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自定义光标样式

3. jQuery实现苹果Dock样式的菜单

4. 分享5个超酷flash样式的jQuery导航和菜单

5. 分享5个超酷flash样式的jQuery导航和菜单

6. 将HTML5封装成android应用APK文件的几种方法

7. 更好用的 jQuery 下拉选择框插件

8. 基于jQuery美化联动下拉选择框

9. 更好用的 jQuery 下拉选择框插件

10. JScrambler:保护你的JavaScript代码

本文来源:https://www.51html5.com/a3437.html

点击展开全部

﹝帮助自定义选择框样式的Javascript - DropKick.js﹞相关内容

「帮助自定义选择框样式的Javascript - DropKick.js」相关专题

其它栏目

也许您还喜欢