zoukankan      html  css  js  c++  java
  • 帮助自定义选择框样式的Javascript

    来源:GBin1.com

    DropKick - 自定义你的<select>的样式

    在线演示   在线下载

    当你想要设计一个页面样式时,没有什么比表单更让人头疼了。而当你设计一个表单的样式时,最让你头疼的就应该非下拉框<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

  • 相关阅读:
    java设计模式-建造者模式
    java设计模式-外观模式
    java设计模式-模板方法模式
    java设计模式-原型模式
    java设计模式-代理模式
    java设计模式-装饰模式
    webpack-PWA概念、typeScript打包、webpackDevServer实现请求转发
    webpack七探-库打包
    webpack六探-打包分析、懒加载、浏览器缓存、shimming、环境变量
    webpack五探-tree shaking、模式、代码分割
  • 原文地址:https://www.cnblogs.com/gbin1/p/3291416.html
Copyright © 2011-2022 走看看