博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Html5添加基于列表的选择美化插件教程
阅读量:6872 次
发布时间:2019-06-26

本文共 1454 字,大约阅读时间需要 4 分钟。

hot3.png

一、使用方法

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

转载于:https://my.oschina.net/u/2505907/blog/600646

你可能感兴趣的文章
敏捷开发:产品思维项目管理免费讲座
查看>>
浪潮与爱立信签署云、媒体以及物联网合作谅解备忘录
查看>>
屋顶光伏发电越走越宽 民用市场成争夺重点
查看>>
ERP云成甲骨文重点发力对象
查看>>
8.19亿,增速126%,阿里云能追上亚马逊、微软吗?
查看>>
关于ZigBee智能家居系统的几大思维误区
查看>>
IBM 又迎来了一次 精减性质 大裁员
查看>>
甲骨文为女性STEM教育事业投300万美元资金
查看>>
贵阳交通大数据中心9月启用 出行先看“拥堵指数”
查看>>
国家信息中心和华为智慧城市联合创新实验室揭牌仪式隆重举办
查看>>
为何每年投入上千亿的智能家居市场还没年收上千亿?
查看>>
联发科Helio X35细节曝光:采用10nm工艺
查看>>
Facebook默默开始“抄”微信,但“抄”得还不够
查看>>
智慧医疗助力患者康复,提高医疗质量
查看>>
业务发展如何利用创新驱动力量?
查看>>
城市智慧物流中心启航 助推济南“携河北跨”
查看>>
让任正非陷入“迷茫”的,不只是华为……
查看>>
Django性能测试—一个现实世界的例子
查看>>
中国光伏组件反补贴税下调1.32%
查看>>
Cray推出开源大数据一体机Urika-GX
查看>>