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. 软件设计之基于Java的连连看小游戏(三)——所有功能的实现

    新年快乐!期末接二连三的考试实在太忙了忘记连连看没有更新完,今天想要学习生信时才发现.所以这次直接把连连看所有功能全部放上. 在传统的连连看的基础上,我增加了上传头像的功能,即可以自行上传图片作为游戏 ...

  2. 从零开始入门 K8s | Kubernetes 存储架构及插件使用

    本文整理自<CNCF x Alibaba 云原生技术公开课>第 21 讲. 导读:容器存储是 Kubernetes 系统中提供数据持久化的基础组件,是实现有状态服务的重要保证.Kubern ...

  3. 在excel中评估模型性能

    一直在用的结果, 从代码中整理出来. 评分卡模型的结果一般在excel中即可计算完成. 下面是在number中计算评分卡模型的性能(KS/AUC), 表格中百分数省略%

  4. UML-测试驱动开发

    1.什么是测试驱动开发? 测试驱动开发(TDD)是迭代和敏捷XP方法提倡的优秀实践,该实践为测试测试优先开发.不仅包含单元测试. 2.为什么测试驱动开发? 1).最大提升代码稳定性 2).澄清接口和行 ...

  5. Django2.0——模板渲染(一)

    在前面的介绍中我们都是用简单的 django.http.HttpResponse来把内容显示到网页上,本节将讲解如何使用渲染模板的方法来显示内容,即调用精美的HTML页面.模板的创建既可以在项目下创建 ...

  6. python 用 pycharm 光速下载各种包

    https://blog.csdn.net/z1178517021/article/details/80200999 就是这么简单

  7. Codeforces Round #571 (Unrated for Div. 1+Div. 2)

    A 略 B 被删了,被这个假题搞自闭了,显然没做出来. C 开始莽了个NTT,后来发现会TLE,其实是个SB前缀和,对于这题,我无**说. #include<bits/stdc++.h> ...

  8. Python笔记_第四篇_高阶编程_反射_(getattr,setattr,deattr,hasattr)

    1. 元数据和反射概念: 有关程序及其类型的数据成为元数据(metadata),他保存在程序的程序集中. 反射这个词儿听起来比较陌生.程序在运行时,可以查看其它程序集或其本身的元数据.一个运行的程序查 ...

  9. 基于libcurl的POST(http)

    #include <stdio.h> #include <curl/curl.h> int main (void) { char *url="http://www.n ...

  10. 基础练习--huffman

    问题描述 Huffman树在编码中有着广泛的应用.在这里,我们只关心Huffman树的构造过程. 给出一列数{pi}={p0, p1, …, pn-},用这列数构造Huffman树的过程如下: . 找 ...