图片.png
ui-choose列表美化插件的github地址为： https://github.com/wangxing218/ui-choose
原文： http://www.html5cn.org/article-9158-1.html
简要教程
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>
- 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>
- 将所有.ui-choose实例化
$('.ui-choose').ui_choose();
- 单选模式 ，demo 中有很多选择
$('#genderChoose').data('ui-choose').click = function (index, item) {
//alt(index+"__"+item.text());
$('#gender').val(index);
};
