Html5添加基於列表的選擇美化插件教程

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

2、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>

3、初始化插件
$('.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,提供最優質的廣告和技術支持,爲應用開發者創造超高收益的實力廣告。