Html5添加基于列表的选择美化插件教程

时间：2016-01-11 12:53:18 阅读：184 评论：0 收藏：0 [点我收藏+]

标签：

一、使用方法
<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,提供最优质的广告和技术支持,为应用开发者创造超高收益的实力广告。

标签：

踩

(0)

评论一句话评论（0）

key

加入时间：2016-01-05

关注此人发短消息

文章分类

默认分类（277）

“key”关注的人------（0）

“key”的粉丝们------（0）