表单/表格
ui choose - 列表选择jQuery美化插件
PetitQ
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);
};
Github 地址：https://github.com/wangxing218/ui-choose
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
