帮助自定义选择框样式的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@极客标签
相关文章
- JS框架_(JQuery.js)图片相册掀开切换效果
- JS框架_(JQuery.js)上传进度条
- javascript构造函数及原型对象
- [Javascript] Broadcaster + Operator + Listener pattern -- 26. Share the Same Broadcaster Values Across Multiple Listeners
- [Javascript] Coding interview problem: Scheduler functional way
- [Javascript] Link to Other Objects through the JavaScript Prototype Chain
- [Javascript] Identify and Deal with NaN in JavaScript
- [Javascript] How to use JavaScript's String.replace
- [Javascript] Using JSHint for Linting with Gulp
- JavaScript typeof, null, 和 undefined
- [Javascript] Build lodash.merge from Scratch
- [Javascript] Customize Behavior when Accessing Properties with Proxy Handlers
- [Immutable.js] Converting Immutable.js Structures to Javascript and other Immutable Types
- [Javascript] Creating an Immutable Object Graph with Immutable.js Map()
- SAP UI5 应用如何采取 JavaScript 代码调用 OData API 读取满足过滤条件的业务数据($filter 操作)试读版
- Angular Component TypeScript代码和最后转换生成的JavaScript代码比较
- Atitit. Java script 多重多重catch语句的实现and Javascript js 异常机制
- 从零开始学_JavaScript_系列(20)——js系列<7>(函数原型的两种声明方式、函数的作用域)
- 从零开始学_JavaScript_系列(15)——js系列<3>(转为字符串,截取字符串)
- 前端基础 & 初识JS(JavaScript)
- javascript异步延时载入及推断是否已载入js/css文件
- JS垃圾回收——和其他语言一样,JavaScript 的 GC 策略也无法避免一个问题:GC 时,停止响应其他操作,这是为了安全考虑
- JavaScript----JS下载文件重命名不生效即a.download修改文件名不生效的解决办法
- JavaScript 获取地址栏指定参数(整理)