您的位置:首页 > Web前端 > JQuery

jQuery UI MultiSelect Widget使用实现步骤

2014-01-19 17:26 691 查看
1、引入CSS文件

<!-- jquery ui 使用的样式 -->
<link rel="stylesheet" type="text/css" href="../../common/jquery/jquery-ui/jquery-ui-1.10.3/themes/redmond/jquery-ui-1.10.3.custom.css" />
<!-- jquery ui multiselect 使用的样式 -->
<link rel="stylesheet" type="text/css" href="../../common/jquery/jquery-ui/multiselect/jquery.multiselect.css" />


2、引入JS文件

<script type="text/javascript" src="../../common/jquery/jquery-1.8.3.js"></script>
<script type="text/javascript" src="../../common/jquery/jquery-ui/jquery-ui-1.10.3/ui/minified/jquery-ui.min.js"></script>
<script type="text/javascript" src="../../common/jquery/jquery-ui/multiselect/src/jquery.multiselect.js"></script>
<script type="text/javascript" src="../../common/jquery/jquery-ui/multiselect/i18n/jquery.multiselect.zh-cn.js"></script>


3、编写HTML

<select id="comCode4QueryArrStr_query" name="paramsUser.comCode4QueryArrStr" multiple="multiple">
<option value='xx'>xx</option>
<option value='xx'>xx</option>
<option value='xx'>xx</option>
</select>


4、调用MultiSelect方法渲染<select>

$j(document).ready(function(){
$j("#comCode4QueryArrStr_query").multiselect();
}


更多参考:
http://www.erichynds.com/blog/jquery-ui-multiselect-widget http://www.erichynds.com/examples/jquery-ui-multiselect-widget/demos/
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: