Dropdown.js基于jQuery开发的轻量级下拉框插件
Dropdown.js
前言
在SPA(Single Page Application)盛行的时代,jQuery插件的轮子正在减少,由于我厂有需求而开发了这个插件。
如果觉得本文对您有帮助,请给个赞,以表对我的鼓励和支持。(๑•ᴗ•๑)
如果觉得有什么问题,可以到 Github 提Issue,欢迎大家提意见~
介绍
Dropdown是面向PC端的基于jQuery开发的轻量级下拉框插件,支持key/value搜索,有token和select两种模式。
版本
- 1.0.0
支持
- Internet Explorer 8+
- Chrome for PC
- Safari for PC
- Firefox for PC
依赖于
- jQuery 1.4+
特性
- 支持
select
和token
两种模式 - 支持
optgroup
分组 - 保留原生
select
的键盘操作 - 数据源可以直接通过接口
data
注入,也可以直接渲染select > option
,由插件自动转换。 - 插件同步
select
和ul>li
标签,便于表单字段提交及前端校验,
原理
程序设计原理如下图所示:
Options
名称 | 描述 | 类型 | 默认 |
---|---|---|---|
readOnly | 是否只读 | Boolean | false |
limitCount | 选择上限 | Number | Infinity |
input | 搜索框模板 | HTML | <input type="text" maxLength="20" placeholder="搜索关键词或ID"> |
data | 数据源 | Array | [] |
searchable | 是否可开启搜索 | Boolean | true |
searchNoData | 无数据模板 | HTML | <li style="color:#ddd">查无数据,换个词儿试试 /(ㄒoㄒ)/~~</li> |
choice | 选择后回调函数 | Function | function(){} |
Usage
引入
<script src="http://cdn.bootcss.com/jquery/1.8.1/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="./jquery.dropdown.css">
<script src="./jquery.dropdown.js"></script>
HTML 部分
<div class="dropdown-mul-1">
<!-- PS: select标签需手动设置隐藏 -->
<select style="display:none" name="" id="" multiple placeholder="请选择">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
</div>
JavaScript 部分
$('.dropdown-mul-1').dropdown({
limitCount: 40,
multipleMode: 'label',
choice: function () {
console.log(arguments,this);
}
});
Example
Dropdown.js基于jQuery开发的轻量级下拉框插件的更多相关文章
- jQuery自定义漂亮的下拉框插件8种效果演示
原始的下拉框不好看这里推荐一个jQuery自定义漂亮的下拉框插件8种效果演示 在线预览 下载地址 实例代码 <!DOCTYPE html> <html lang="en&q ...
- 一款基于jQuery的联动Select下拉框
今天我们要来分享一款很实用的jQuery插件,它是一个基于jQuery多级联动的省市地区Select下拉框,并且值得一提的是,这款联动下拉框是经过自定义美化过的,外观比浏览器自带的要漂亮许多.另外,这 ...
- js:jquery multiSelect 多选下拉框实例
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- FineReport——JS二次开发(隐藏下拉框控件的倒三角)
在对FR控件进行二次开发的过程中,需要自定义样式,比如下拉框控件带有自动检索的功能,但是又希望它的显示样式如同文本框一样,这时就需要隐藏多余的部分. 在对在线文档的查阅中可以发现很多选择器适用于多种控 ...
- jQuery UI 多选下拉框插件:jquery-ui-multiselect
前一个项目,由于项目需求,需要大量使用到下拉多选框,而由于本人又不会写有关 CSS 样式,所以,便上网找到了这个 jQuery 插件:jquery-ui-multiselect .该款插件提供了基本下 ...
- 基于jquery和bootstrap的下拉框左右选择功能
实现如图选择的功能,可以用基于bootstrap的样式,结合jquery事件: <div class="row"> <div class="col-xs ...
- jQuery自定义漂亮的下拉框插件8种效果
jquery美化选择器实例有:边框.下划线. 伸缩 .滑动. 覆盖. 旋转. 弹出层选择 .环形效果. 在线预览 实例代码 <body class="demo-1"> ...
- jQuery下拉框插件8种效果
jQuery自定义漂亮的下拉框插件8种效果 jquery美化选择器实例有:边框.下划线. 伸缩 .滑动. 覆盖. 旋转. 弹出层选择 .环形效果. 在线预览 <body class=" ...
- 基于jQuery的input输入框下拉提示层(自动邮箱后缀名)
基于jQuery的input输入框下拉提示层,方便用户输入邮箱时的提示信息,需要的朋友可以参考下 效果图 // JavaScript Document (function($){ $.fn ...
随机推荐
- MPC&MAGIC
MPC: Popularity-based Caching Strategy for Content Centric Networks MPC: most popular content MPC主要思 ...
- 【干货】查看windows文件系统中的数据—利用簇号查看文件与恢复文件
前面我们使用这个软件发现了很多删除掉的数据,今天来看看簇.FAT文件系统中,存在一个簇的链接,我知道了簇1在哪里就可以顺藤摸瓜恢复所有的信息. 这里使用FAT 12为例子,FAT其他万变不离其宗,甚至 ...
- springMVC版本和jdk版本不匹配造成的问题
一个简单的例子项目,使用springMVC的版本是3.2,jdk的版本是1.7,使用的是注解的处理器适配器和处理器映射器.spring的xml配置文件中单独配置每个handler,可以正常的使用,如果 ...
- 协议中UART的两种模式 【转】
转自:http://wjf88223.blog.163.com/blog/static/3516800120104179327286/ ^^…… 协议栈中UART有两种模式:1.中断2.DMA 对于这 ...
- 使用pt-table-checksum校验MySQL主从复制【转】
pt-table-checksum是一个基于MySQL数据库主从架构在线数据一致性校验工具.其工作原理在主库上运行, 通过对同步的表在主从段执行checksum, 从而判断数据是否一致.在校验完毕时, ...
- Eureka的自我保护模式
一 Eureka的自我保护模式 进入自我保护模式最直观的体现就是Eureka Server首页的警告,如下图: 默认情况下,如果Eureka Server在一定时间内没有接收到某个微服务实例的心跳,E ...
- node koa2
http://www.codes51.com/itwd/4316421.html 问题: (node.js)nodejs koa ctx=> 报错描述: 刚开始接触 koa 一直提示 ctx=& ...
- ConvertUtils.register的作用
BeanUtils的populate方法或者getProperty,setProperty方法其实都会调用convert进行转换 但Converter只支持一些基本的类型,甚至连Java.util.D ...
- k8s中新建一个namespace和harborsecret的yaml文件
注意哟, 不同的harborsecret,在不同的namespace中,是不共用的. 也就是说,如果在default名字空间中,创建了一个docker login secret, 在其它名字空间中,是 ...
- 扩展BootstrapTable的treegrid功能
扩展BootstrapTable的treegrid功能 阅读目录 一.效果预览 二.代码示例 三.组件需要完善的地方 四.总结 正文 前言:上篇 JS组件系列——自己动手封装bootstrap-tr ...