jquery的扩展编写

kwenLee

2013-03-11

jQuery.extend对jQuery对象的扩展，可以理解为静态方法，不需要实例jQuery就可以使用；我们使用的是$.fn.extend，需要实例化jQuery对象才可以使用。

1.下面是单独的js文件，调用页面只需引入，并传入指定的参数，可以实现调用：

//获取cookie对象
var userInfo = getUserInfo();
//用户id
var userId = userInfo.userId;
//角色信息
var roleCode = userInfo.roleCode;

//项目路径
var basePath; 
//本插件全局参数
var webMasterData = new Object() ;
webMasterData["roleCode"] = roleCode;

//菜单插件
$.fn.extend({
     webMaster: function(obj){
    	 //console.log(obj);
    	 basePath = obj.basePath; 
    	 initWebMaster();
    }     
});

//初始化页面监听
function initEvent(){
	//默认全部菜单收起
	$(".first").children("ul").hide();
	//点击一级标题收起或者展开二级标题
	$(".first").children("a").bind("click", function() {
		if ($(this).siblings("ul").css("display") == "none") {
			$(this).children("img").attr("src",basePath+"img/ico_open.gif");
			$(this).siblings("ul").show();
		} else {
			$(this).children("img").attr("src",basePath+"img/ico_close.gif");
			$(this).siblings("ul").hide();
		}
		setTimeout(resetMtHeight,10);
	});
	//点击二级标题在中间部分展示对应页
	$(".first").children("ul").children("li").bind("click", function() {
		$(document).scrollTop(0);
		$("#content").empty();
		var url = $(this).children("a").attr("href");
		$("#content").load(basePath + url);
		//阻止页面跳转
		return false;
	});	
}

//初始化
function initWebMaster(){
	mrLoadMenu();
}

//主节点菜单数组
var hostArr = new Array();
//加载菜单
function mrLoadMenu(){
	$.ajax({
		'url'  : basePath + "manage/mtwebmaster/getRoleMenuInfo.do",
		'type' : 'post',
		'data' : webMasterData,
		'dataType' : 'json',
		 cache:false,
		'success' : function(data, statusText) {
			 if(data.state = false){
				 layer.alert(data.msg,8);
			 }else{
				 
				 //遍历主节点，生成一级菜单
				 $.each(data.hostNode,function(i,o){
					 hostArr.push('<ul>');
					 hostArr.push('<li class="first"><a style="font-weight: bold; margin-left: 0px;"><img align="left" alt="" src="'+basePath+'img/ico_close.gif">'+o.mname+'</a>');
					 hostArr.push('<input type="hidden" value='+o.code+' />');
					 hostArr.push('</li>');
					 hostArr.push('</ul>');
				 });
				 
				 //一级菜单,添加单页面元素
				 $(".left_nav").html(hostArr.join(""));
				 
				 //遍历一级菜单节点
				 $(".first").each(function(i){
					//获取菜单code 
					var code = $(this).find("input").val();
					//子节点菜单数组
					var childArr = new Array();
					//遍历子节点
					$.each(data.childNode,function(i,o){
						//如果主节点code和子节点code相等
						if(code == o.code){
							//console.log(o);
							childArr.push('<li class="first_sub"><a href="'+o.url+'">'+o.mname+'</a></li>');
						}
					});
					//将子菜单添加到主菜单
					$(this).append('<ul>'+childArr.join("")+'</ul>');
				});
				
				//初始化页面监听
				initEvent();
			 }
			 //重置高度
			 resetMtHeight();
		},'error' : function(xhr, e1, e2) {
			layer.alert('获取菜单信息异常',1);
		}
	});
}

2.调用页面：

<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
	<%	
String path = request.getContextPath(); 
String basePath = path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>平台管理主页面</title>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<jsp:include page="common/common.jsp"></jsp:include>
<script src="<%=basePath%>page/messageadvice/message.js"></script>
<script src="appcenter/appcenter.js"></script>
<script src="bulletin/bulletin.js"></script>
<script src="detailed/detailed.js"></script>
<script type="text/javascript" src="<%=basePath %>js/m97date/WdatePicker.js"></script>
<script type="text/javascript" src="question/question-plugin.js"></script>
<script type="text/javascript" src="<%=basePath%>/js/manhuaDate.1.0.js"></script>
<script type="text/javascript" src="<%=basePath%>/js/manhuaDateTwo.1.0.js"></script>
<script type="text/javascript" src="<%=basePath%>/js/layer/layer.min.js"></script>
<script type="text/javascript" src="<%=basePath%>page/mtsurveymanage/surveymanage.js"></script>
<script type="text/javascript" src="<%=basePath%>page/mtbulletin/bulletinmanage.js"></script>
<script type="text/javascript" src="<%=basePath%>page/imgscroll/imgscroll.js"></script>
<script type="text/javascript"  src="<%=basePath%>page/imgscroll/imgscroll-plugin.js"></script> 
<script type="text/javascript" src="<%=basePath %>js/jquery.lazyload.js"></script>
<link href="<%=basePath%>css/surveymore/surveymore.css" rel="stylesheet" type="text/css"></link>
<link href="<%=basePath%>css/datetime.css" rel="stylesheet" type="text/css"></link>
<link href="<%=basePath%>css/datetime1.css" rel="stylesheet" type="text/css"></link>
<link href="<%=basePath%>css/imgscroll/imgscroll.css" rel="stylesheet" type="text/css"></link>
<%-- 菜单脚本插件 --%>
<script type="text/javascript"  src="<%=basePath%>page/webmaster.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		//获取cookie对象
		var userInfo = getUserInfo();
		
		$(".left_nav").webMaster({
            target : "#content",
            basePath: basePath,
            cookieObj:userInfo
		});
	});
	
	
</script>
<link rel="stylesheet" type="test/css" href="../css/style.css" />
<style type="text/css">
#content {
	width: 810px;
	height: 100%;
	background: #fff;
	padding-bottom: 20px;
	float: left;
}

#footer {
	width: 960px;
	margin: 0 auto;
	background-color: FF1493
}
/*应用中心*/
.left_tt { width:135px; line-height:32px; color:#090; font-weight:bold; font-size:14px; background:url(../img/face_green.png) 0px -350px; margin-top:50px; padding-left:15px; clear:both; }
.left_nav li { width:150px; line-height:30px; font-size:14px; margin-top:5px; float:left; }
.left_nav li img{ padding-top: 4px;}
.first_sub { padding-left:20px;}
.left_nav li a { color:#333; text-decoration:none; padding-left:10px; display:block; }
.left_nav li a:hover { color:#390; font-weight:bold; background:#D7E6CB; text-decoration:none; padding-left:10px; display:block; }
</style>
</head>
<body onload="resetMtHeight();">
<jsp:include page="navitool/navi.jsp"></jsp:include>
	<div class="w960">
		<div class="left">
			<div class="left_tt">菜单列表</div>
			<div class="left_nav">
				
			</div>
			<div class="line"></div>
			<div class="more_666">
				<ul>
					<li><a href="javascript:;">更多&gt;&gt;</a></li>
				</ul>
			</div>
		</div>
		<!--中部-->
		<div id="content"><img src="<%=basePath%>img/welcome.jpg"/></div> 
	</div>
	<div style="clear: both"></div>
	<div id="footer">
		<jsp:include page="foot/footer.jsp"></jsp:include>
	</div>
</body>
</html>

jquery var