查看效果

隐藏域值

配置参数

• width

  概述

  (默认值: "580") 弹出窗体宽度

  类型

  Number

• eventType

  概述

  (默认值: "click") 事件类型有 click focus

  类型

  String

• dropmenu

  概述

  弹出容器对象 样式可以重写

  类型

  Jquery对象

• hiddenID

  概述

  所选项目的隐藏域 传值用

  类型

  String

引入文件

在页面 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>

调用方式

1. $("#selectpos").xMenu({	
   
   	width :600,	
   
   	eventType: "click", //事件类型 支持focus click hover
   
   	dropmenu:"#m1",//弹出层
   
   	hiddenID : "selectposhidden"//隐藏域ID	
   
   });
   
   					

页面结构

<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>