ui-choose是一款基于jQuery的列表选择美化插件。ui-choose可用于选项不太多的select、radio、checkbox等,提升用户体验。

使用方法

使用ui-choose列表美化插件需要引入jQuery、ui-choose.js和ui-choose.css文件。

<link href="src/ui-choose.css" rel="stylesheet" />
<script src="js/jquery.min.js"></script>
<script src="src/ui-choose.js"></script>

HTML结构

ui-choose可用于无序列表或下拉列表的美化。无序列表和下拉列表的HTML结构分别如下:

<ul class="ui-choose" multiple="multiple" id="uc_03">
<li>html</li>
<li>css</li>
<li>javascript</li>
<li>php</li>
<li>nodejs</li>
</ul>
<select class="ui-choose" multiple="multiple" id="uc_04">
<option value="a">html</option>
<option value="b">php</option>
<option value="c">css</option>
<option value="d">javascript</option>
<option value="e">nodejs</option>
</select>

初始化插件

在页面DOM元素加载完毕之后,可以通过下面的方法初始化ui-choose插件。

将所有.ui-choose实例化

// 将所有.ui-choose实例化
$('.ui-choose').ui_choose();

无序列表单选:

// 无序列表单选
var uc_01 = $('#uc_01').data('ui-choose'); // 取回已实例化的对象
uc_01.click = function(index, item) {
console.log('click', index, item.text())
}
uc_01.change = function(index, item) {
console.log('change', index, item.text())
}

下拉列表单选:

// 下拉列表单选
var uc_02 = $('#uc_02').data('ui-choose');
uc_02.click = function(value, item) {
console.log('click', value);
};
uc_02.change = function(value, item) {
console.log('change', value);
};

无序列表多选:

// 无序列表多选
var uc_03 = $('#uc_03').data('ui-choose');
uc_03.click = function(index, item) {
console.log('click', index);
};
uc_03.change = function(index, item) {
console.log('change', index);
};

下拉列表多选:

// 下拉列表多选
var uc_04 = $('#uc_04').ui_choose();
uc_04.click = function(value, item) {
console.log('click', value);
};
uc_04.change = function(value, item) {
console.log('change', value);
};

ui-choose列表美化插件的github地址为:https://github.com/wangxing218/ui-choose

ui-choose|列表选择jQuery美化插件的更多相关文章

  1. jquery.chosen.js下拉选择框美化插件项目实例

    由于之前使用的bootstrap-select插件是建立在bootstrap基础上的,实际使用到项目中的时候,与我们使用的ace-admin(基于bootstrap)存在样式冲突,导致下拉框的样式发生 ...

  2. [jQueryUI] – Chosen:select下拉选择框美化插件及问题

    Chosen 是一个支持jquery的select下拉框美化插件,它能让丑陋的.很长的select选择框变的更好看.更方便.不仅如此,它更扩展了select,增加了自动筛选的功能.它可对列表进行分组, ...

  3. 【NX二次开发】Block UI 从列表选择部件

    属性说明 属性   类型   描述   常规           BlockID    String    控件ID    Enable    Logical    是否可操作    Group    ...

  4. jQuery下拉框扩展和美化插件Chosen

    Chosen 是一个支持jquery的select下拉框美化插件,它能让丑陋的.很长的select选择框变的更好看.更方便.不仅如此,它更扩展了select,增加了自动筛选的功能.它可对列表进行分组, ...

  5. jQuery高性能自己定义滚动栏美化插件

    malihu是一款高性能的滚动栏美化jQuery插件. 该滚动栏美化插件支持水平和垂直滚动栏,支持鼠标滚动,支持键盘滚动和支持移动触摸屏. 而且它能够和jQuery UI和Bootatrap完美的结合 ...

  6. jQuery美化下拉菜单插件dropkick

    dropkick是一款基于jquery库的美化下拉框下拉菜单的插件,它通过定制HTML插入可使丑陋无聊的<select>下拉列表变得美丽. name属性是唯一一个必需的填写的,不过你也应该 ...

  7. 分享JQuery动画插件Velocity.js的六种列表加载特效

    分享JQuery动画插件Velocity.js的六种列表加载特效.在这款实例中给中六种不同的列表加载效果.分别为从上飞入.从右侧飞入.从左侧飞入.和渐显.一起看下效果图: 在线预览   源码下载 实现 ...

  8. JavaScript/jQuery 表单美化插件小结

    Niceforms Niceforms是一款独立的表单美化工具,当前版本为2.0 官方主页:http://www.emblematiq.com/lab/niceforms/ 官方演示:http://w ...

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

    今天给大家介绍一款基于jQuery美化联动下拉选择框.这款下下拉选择框js里自带了全国所有城市的数数库.下拉选择框适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲 ...

随机推荐

  1. JavaScipt 动画引擎

    队列操作 jquery中有一个Queue队列的接口,这个模块没有单独拿出来作为一个章节是因为这个是内部专门为动画服务的,Queue队列如同data数据缓存与Deferred异步模型一样,都是jQuer ...

  2. UML-GoF设计模式

    我认为,本章是重点中的重点.并非23个模式都被广泛应用,其中常用和最为有效的大概有15个模式. 1.适配器(Adapter) 1).使用场景 使用一个已经存在的类,但如果他的接口,也就是他的方法和你的 ...

  3. Thread--volatile详细

  4. JavaScript—面向对象小例子

    什么是面向对象 要是以前别人问我.随口道来,封装继承多态,万物皆对象...一大推.说的自己都以为自己掌握了面向对象.呵呵一笑.确实掌握了 只是不会用..... 什么是面向对象编程 以前 学.Net 虽 ...

  5. 从定时器的选型,到透过源码看XXL-Job(上)

    此内容来自一位好朋友的分享,也是当初建议我写博客提升的朋友.内容只做转载,未做修改. 定时任务选型 背景 目前项目定时任务采用Spring Task实现,随着项目需求的迭代,新增的定时任务也越来越多. ...

  6. Android 消息推送流程机制

    1.引言 所谓的消息推送就是从服务器端向移动终端发送连接,传输一定的信息.比如一些新闻客户端,每隔一段时间收到一条或者多条通知,这就是从服务器端传来的推送消息:还比如常用的一些IM软件如微信.GTal ...

  7. 基于Token的身份验证

    最近了解下基于 Token 的身份验证,跟大伙分享下.很多大型网站也都在用,比如 Facebook,Twitter,Google+,Github 等等,比起传统的身份验证方法,Token 扩展性更强, ...

  8. int preg_match( string pattern

    preg_match -- 进行正则表达式匹配.并且只匹配一次,注意与preg_match_all区别. int preg_match( string pattern, string subject ...

  9. Java使用Sftp实现对跨服务器上传、下载、打包、写入相关操作

    1.Maven引入jar <dependency> <groupId>com.jcraft</groupId> <artifactId>jsch< ...

  10. JavaSE--【JAVA】unicode为12288字符

    转载:http://blog.csdn.net/zfpigpig/article/details/8186470 今天做一个导入数据功能时发现一个问题,就是一个unicode为12288的字符显示为空 ...