ui-choose|列表选择jQuery美化插件

24 篇文章 0 订阅
14 篇文章 0 订阅

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值