jQuery列表选择美化插件uichoose

所属分类:输入-选择框

 7801  78  查看评论 (3)
jQuery列表选择美化插件uichoose ie兼容8

使用方法

使用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);
}


相关插件-选择框

简洁实用的城市选择插件(原创)

简洁实用,字段值自定义,可以添加选择城市后的回调事件;并且,城市ID和名称与内部提供的数据表内数据一致
  选择框
 48883  82

移动端网页轻量级日期控件LCalenda

LCalendar移动端日期时间选择控件
  选择框
 11770  54

jQuery地区插件带搜索功能

根据网友代码,调整了样式,并优化了部分显示,新增了搜索功能
  选择框
 7603  57

jQuery选择框插件FancySelect

FancySelect这款插件是 Web 开发中下拉框功能的一个更好的选择。Fancy 使用方便,只要绑定页面上的任何 元素,并调用就 .fancy() 就可以了。默认情况下,Fancy 在移动设备上使用原生的选择功能和风格。
  选择框
 3425  17

讨论这个项目(3)回答他人问题或分享插件使用方法奖励jQ币

    先森你好 0
    2017/11/6 9:48:38

    接口不全,不能通过对象设置哪个取消选中。

    回复
    ~ 0
    2017/9/16 10:48:08

    怎么设置默认选择哪个?

    回复
    LS.getName().toString(); 0
    2017/3/9 14:44:48
取消回复