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:;">更多>></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自定义插件或控件的好书，本书共14章，内容充实，是不本相当不错的前端开发学习资料
jQuery扩展通常包含预设的代码片段、模板和库，这些都可以提高开发效率，减少手动编写JavaScript代码的时间。它们通常针对特定功能，如表单验证、导航菜单、滑动效果等，使开发者能够快速实现常见Web交互。 接下来...
为jquery编写的扩展，仿easyui，清晰简洁，适合初学者，包含扩展jquery.accordion.js、jquery.combobox.js、jquery.datagrid.js、jquery.datebox.js、jquery.dialog.js、jquery.form.js、jquery.layout.js、jquery....
在本案例中，我们讨论的是一个专为Dreamweaver CS3设计的JQuery扩展，它能够增强Dreamweaver的代码提示和辅助功能，帮助开发者更高效地编写JQuery代码。 这个名为"JQuery MX-9 v.0.2.9"的扩展，是针对Dreamweaver ...
资源名称：Extending.jQuery—扩展jQuery 内容简介：《扩展jQuery》分为4部分，共14章，讲解了为jQuery库创建自定义扩展的方法，从最大可重用性的角度来设计和编写插件的方法，以及为jQuery UI编写小部件和特效的...
jQuery插件编写是jQuery框架中一个重要的组成部分，它允许开发者扩展jQuery的核心功能，创建自定义的、可复用的组件。jQuery插件的编写通常遵循一套标准的步骤，这些步骤包括： 1. **封装匿名函数**： jQuery插件...
速读JS 一个方便的速读应用程序 待办事项 ####Add 停止按钮####Fix Unicode 显示错误####Pull 纯文本完整的版权外书籍####Cordova App 用法 解压。 在浏览器中打开 index.html。
它通过提供强大的选择器和方法扩展机制，使得开发者能够更高效地编写代码。jQuery 的实现依赖于 `init` 构造函数，`extend` 方法用于扩展功能，而 `$` 符号是其主要的调用接口。理解这些原理，可以帮助我们更好地...
本文将深入探讨如何使用jQuery扩展实现这一功能，并解释相关的核心知识点。 首先，`serialize()`是jQuery提供的一个方法，用于将表单元素转换为URL编码的字符串，适合于发送到服务器。然而，如果我们需要的是JSON...
本篇文章将深入探讨如何进行jQuery扩展插件和拓展函数的编写。 首先，我们来理解jQuery插件的基本结构。一个简单的jQuery插件通常会定义一个新的方法，这个方法可以在jQuery对象上调用。以下是一个基本的插件模板：...
《扩展jQuery》分为4部分，共14章，讲解了为jQuery库创建自定义扩展的方法，从最大可重用性的角度来设计和编写插件的方法，以及为jQuery UI编写小部件和特效的方法。此外，《扩展jQuery》还讲解了另外一些关键主题，...
1. **jQuery基础**：插件基于jQuery框架，利用其强大的DOM操作和事件处理能力，简化了代码编写，提高了性能。 2. **CSS样式**：`index.css`文件中包含了插件的样式定义，通过CSS实现了日期选择器的外观和交互效果。...
### 利用jQuery扩展VS2008 Ajax应用的知识点详解 #### 一、引言与背景 随着互联网技术的不断发展，用户对于Web应用的体验要求越来越高。Ajax（Asynchronous JavaScript and XML）作为一种提高用户体验的有效手段，...
《jQuery语法提示扩展在Dreamweaver中的应用》 在网页开发过程中，JavaScript库jQuery以其简洁易用的API和强大的功能，成为了许多开发者首选的工具。然而，在编写代码时，手动输入完整的jQuery函数和方法可能会耗费...
为了解决这一问题，"jQuery自动提示"扩展应运而生，它为Dreamweaver带来了实时的jQuery函数提示功能，使得在CS4和CS3等不同版本中，开发者可以更便捷地进行jQuery代码编写。 首先，我们来看“dw for CS4”版本。这...
尽管这是一个初级的购物商城系统，但开发者已经考虑到系统升级的可能性，表明其具有一定的扩展性。未来可能的更新包括：引入用户登录注册系统，以便保存用户的购物历史和偏好；添加评论和评分功能，促进商品的互动和...
jQuery 是一款非常流行的 JavaScript 库，它简化了JavaScript代码的编写，使得网页交互变得更加简单和高效。本教案旨在提供最新的jQuery知识，帮助学习者快速掌握这个强大的工具。 ### 1. jQuery 基础概念 jQuery ...
这个扩展增强了Dreamweaver的内置功能，使得用户可以更直观、高效地编写jQuery代码，而无需直接在源代码编辑器中手动编写复杂的JavaScript。 jQuery是一个流行的JavaScript库，它的主要目标是简化HTML文档遍历、...
总而言之，jQuery表单验证扩展提供了强大的功能，可以帮助开发者在用户界面层面减少数据错误，同时为用户提供即时的反馈。随着技术的不断更新，我们可以期待jQuery表单验证插件会持续改进，为开发者提供更多实用的...