jQuery美化下拉菜单插件dropkick
dropkick是一款基于jquery库的美化下拉框下拉菜单的插件,它通过定制HTML插入可使丑陋无聊的<select>下拉列表变得美丽。
name属性是唯一一个必需的填写的,不过你也应该设定一个tabindex属性来设定导航菜单的排序。
在dropkick选择一个选项时,亦会触发事件,这意味着您的表单、AJAX工作和传统的一样,无需进行任何更改。
如本款不合适,请看下本站另一款jQuery下拉框能扩展和美化插件Chosen
特点
1、像一个下拉框一样工作
2、支持键盘:可通回车,上下方向健来打开和选中选项
3、可通过(object).dropkick('refresh')方法来动态更新选项内容
4、可轻松定义主题和动态更换主题
5、可自定义回调函数
如何使用
引入核心文件,确保引入jQuery 1.7.1 或以上的版本
<link rel="stylesheet" href="css/dropkick.css" type="text/css">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.dropkick-min.js"></script>
写入html,这里只需加入一个下拉框
<select name="country" class="default" tabindex="2">
<option value="">Try Me!</option>
<option value="AU">Australia</option>
<option value="CA">Canada</option>
<option value="DE">Germany</option>
<option value="JP">Japan</option>
<option value="GB">United Kingdom</option>
<option value="US">United States</option>
</select>
写入JS,初始化插件
$('.default').dropkick();
好了,一个漂亮的下拉框就做好了。
jQuery美化下拉菜单插件dropkick的更多相关文章
- Bootstrap历练实例:下拉菜单插件方法的使用
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- jQuery水平下拉菜单实现
<!DOCTYPE html> <html> <head> <title>jQuery水平下拉菜单实现</title> ...
- jquery 实现下拉菜单
Jquery 是一个轻量的框架,个人认为非常好用,今天就写一个非常简单的例子,实现下拉菜单功能: 首先肯定要在页面引用jquery.js 版本不限 : 接下来把=================== ...
- 第72天:jQuery实现下拉菜单
jQuery实现下拉菜单 一.居中 1.块元素居中:给块元素本身设置:margin:0 auto;,块元素必须设置宽度 2.行内块元素居中:给元素父级设置text-algin:center; < ...
- jquery带下拉菜单和焦点图
jQuery,下拉菜单,二级菜单,索引按钮,焦点图代码,jquery带下拉菜单和焦点图是一款顶部通栏带二级下拉菜单和banner导航菜单代码. JQuery特效代码来源:http://www.huiy ...
- 【Bootstrap】 bootstrap-select2下拉菜单插件
这次开发了个小TRS系统,虽然是很小,但是作为初心者,第一次用到了很多看起来洋气使用起来有相对简单的各种前端(主要是和bootstrap配合使用)组件.包括bootstrap-select2,boot ...
- JQuery纵向下拉菜单实现心得
jquery库给我们带来了许多便利,不愧是轻量级的DOM框架,在前面的博文中小编分别对jquery的基础知识以及jquery的一些小demo有一系列的简单介绍,期待各位小伙伴的指导.使用jquery实 ...
- jQuery EasyUI 下拉菜单获取日期,最高年份为当前年份,最低年份为当前年份向前推10年
http://blog.csdn.net/wangjingjing1014/article/details/16885341 <head><meta http-equiv=" ...
- jQuery下拉菜单插件Tendina.
插件效果: 下载地址和文档: https://github.com/iprignano/tendina
随机推荐
- kafka-0.10.0官网翻译(一)入门指南
1.1 IntroductionKafka is a distributed streaming platform. What exactly does that mean?kafka是一个分布式的流 ...
- 无限级ddsmoothmenu菜单实例
点击这里查看效果以横向ddsmoothmenu下来菜单为例,以下是实现代码: <base target="_blank" /><link rel="st ...
- $(function) ready onload 等区别
新手接触javascript.jquery的时候不可避免的要接触题目所标识的相关内容,反复看过几次一到用的时候总是不踏实,写文以记之. 符号“$”是jquery对象(个人这样理解,拥有函数的用法).接 ...
- SharePoint 2013 工作流之Visual Studio开发示例篇
SharePoint 2013引用了WF4.0 Foundation,支持使用Designer和Visio进行设计,但是功能受限,而Visual Studio可以开发功能更加丰富的工作流,下面我们简单 ...
- 初学HTML 常见的标签(二) 列表标签
上次介绍了一些简单的文本标签设计, 这篇介绍列表类标签, 通过列表能写出很好看的, 多元化的网络页面. ul-li 列表标签 <ul> <li>列表1</li> & ...
- CoreData的一些简单运用
1.首先创建一个新的工程 记得勾选下面的 Use Core Data 万恶分割线———————————————————————— 然后点击Add Entity 创建一个类似于表名. 万恶分割线———— ...
- iOS百度地图SDK集成详细步骤
1.iOS百度地图下载地址 http://developer.baidu.com/map/index.php?title=iossdk/sdkiosdev-download 根据需要选择不同的版本 ...
- jxl导入导出实例
1 package com.tgb.test; 2 3 import java.io.File; 4 import java.io.IOException; 5 import java.util.Ar ...
- GConf error:Failed to contact configuration server
Linux系统运行一直正常,但是图形界面使用root账号登录时遇到下面错误,第一次遇到这么怪异的状况 具体错误信息如下所示: GConf error:Failed to contact configu ...
- crontab不执行perl脚本分析
在新装的Linux服务器上部署了一个作业监控磁盘空间并提前告警,在shell脚本里面调用了一个perl脚本发送告警邮件.结果出现了一个很奇怪的现象:如果手工执行该脚本/home/oracle/scri ...