[分享源码]Html5添加基于列表的选择美化插件教程 [复制链接]

一、使用方法
<link href="src/ui-choose.css" rel="stylesheet" />
<script src="js/jquery.min.js"></script>
<script src="src/ui-choose.js"></script>

二、Html结构
<ul class="ui-choose" multiple="multiple" id="uc_03">
<li>多盟</li>
<li>安沃</li>
<li>KeyMob</li>
<li>广点通</li>
<li>有米</li>
</ul>
<select class="ui-choose" multiple="multiple" id="uc_04">
<option value="1">html</option>
<option value="2">php</option>
<option value="3">css</option>
<option value="4">javascript</option>
<option value="5">nodejs</option>
</select>

三、初始化插件
$('.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);
};              

KeyMob是国内领先的专业移动广告联盟,专注于android/IOS/SDK,提供最优质的广告和技术支持,为应用开发者创造超高收益的实力广告。