使用Jquery X-Menu 插件實現多選checkbox控件的功能

Jquery X-Menu 插件可以用來實現表單多選形式。

實現效果如下：

下面介紹使用步驟：

1、在頁面 head 引入 x-Menu 樣式與腳本文件:

<link type="text/css" rel="stylesheet" 	href="css/powerFloat.css" />
<link type="text/css" rel="stylesheet" 	href="css/xmenu.css" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-powerFloat-min.js"></script>
<script type="text/javascript" src="js/jquery-xmenu.js"></script>

2、下拉控件的頁面設計：

<div class="info_value_long">
	<a id="selectdept" href="javascript:void(0);" class="as">
		<span>選擇部門</span>
	</a>
	<input type="hidden" value="" id="selectdeptidden" />
</div>

3、多選項的頁面設計：

<div id="m2" class="xmenu" style="display: none;">
	<div class="select-info">	
		<label class="top-label">已選部門：</label> <——決定哪些項別選擇的區域
		<ul>
			
		</ul>
		<a  name="menu-confirm" href="javascript:void(0);" class="a-btn">
			<span class="a-btn-text">確定</span>
		</a>
	<div>	
	<dl>
		<dt class="open">需求部門</dt>		<———第一個多選備選項區域
			<dd>       
				<ul>
					<li rel="1"  class="">開發部</li>
					<li rel="2">人事部</li>
					<li rel="3">市場部</li>
					<li rel="4" class="">業務部</li>
					<li rel="5">財務部</li>							
				</ul>						
			</dd>
		<dt class="open">缺編部門</dt>		<———第二個多選備選項區域
		<dd>
			<ul>
				<li rel="15" class="">研發部</li>
				<li rel="16">廣告部</li>
				<li rel="17">出納部</li>
				<li rel="18" class="">後勤部</li>						
			</ul>    
		</dd>
     </dl>				 
</div>

4、X-Menu的調用，在頁面的 js代碼中：

$(document).ready(function() {	
	$("#selectdept").xMenu({
		width :600, 
		eventType: "click", //事件類型 支持focus click hover
		dropmenu:"#m2",//彈出層
		hiddenID : "selectdeptidden"//隱藏域ID
	});			
});

注意：上面只是介紹了X-Menu的大致使用步驟，在實際開發中，會有一些出入。詳細文檔參考：http://sc.chinaz.com/jiaoben/140126415770.htm

下載源碼查看。

提示：修改樣式文件參考　xmenu.css；  同時調用 x-menu 的jquery代碼中，還有很大的一部分沒有寫進文章中，調用時請注意別遺漏。