文档索引

查看效果


隐藏域值


			

			

配置参数

引入文件

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

适用浏览器:360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。

来源:站长素材