使用tree的左边菜单+多iframe实现的tab 实战

使用tree的左边菜单+多iframe实现的tab 实战

标签： jqueryiframe
2015-03-24 10:52 507人阅读 评论(1) 收藏 举报


分类：

jQuery（1）


版权声明：本文为博主原创文章，未经博主允许不得转载。

目录(?)[+]

通常系统的主页面，左侧是菜单，右侧是tab按钮以及页面内容，这里给出实现的主要代码：

一：关于左侧菜单的实现：

1.1.后台java代码

1.1.1.表结构,SQL

最主要的字段就是SYS_MENU_ID:系统菜单ID，SYS_MENU_NAME:菜单名，SUP_SYS_MENU_ID：上级菜单ID。

使用mybatis查询sql语句：

[sql] view
plain copy

<select id="querySysMenuAll" resultMap="Result" parameterType="com.asiainfo.psm.common.modal.SysMenu" >

SELECT

B.SYS_MENU_ID AS "menu_id",

B.SYS_MENU_NAME AS "menu_name",

B.SUP_SYS_MENU_ID AS "parentid",

B.ORDER_SEQ AS "orderSeq",

B.SYS_MODULAR_ID AS "sysModularId"

FROM

SYSTEM_MENU B

<where>

<if test="menu_id != null and menu_id != ''">

AND B.SYS_MENU_ID = #{menu_id,jdbcType=INTEGER}

</if>

</where>

</select>

1.1.2.SysMenu 系统菜单实体Bean

SysMenu.java

[java] view
plain copy

import java.io.Serializable;

/***

* @SysMenu 系统菜单

*

* @author wlw @

*/

public class SysMenu implements Serializable {

private static final long serialVersionUID = 1L;

//用户ID

private String userId;

// 系统菜单ID

private int menu_id;

// 系统菜单名称

private String menu_name;

// 上级系统菜单ID，如果是根系统菜单，值为0

private String parentid;

// 展现顺序，特指同级兄弟间的展现顺序

private String orderSeq;

//业务模块ID

private String sysModularId;

//菜单级别

private String menuflag;

//图标链接

private String imgurl;

private String url;

private String isLastNode;

public String getUserId() {

return userId;

}

public void setUserId(String userId) {

this.userId = userId;

}

public int getMenu_id() {

return menu_id;

}

public void setMenu_id(int menu_id) {

this.menu_id = menu_id;

}

public String getMenu_name() {

return menu_name;

}

public void setMenu_name(String menu_name) {

this.menu_name = menu_name;

}

public String getParentid() {

return parentid;

}

public void setParentid(String parentid) {

this.parentid = parentid;

}

public String getMenuflag() {

return menuflag;

}

public void setMenuflag(String menuflag) {

this.menuflag = menuflag;

}

public String getImgurl() {

return imgurl;

}

public void setImgurl(String imgurl) {

this.imgurl = imgurl;

}

public String getUrl() {

return url;

}

public void setUrl(String url) {

this.url = url;

}

public String getIsLastNode() {

return isLastNode;

}

public void setIsLastNode(String isLastNode) {

this.isLastNode = isLastNode;

}

public String getOrderSeq() {

return orderSeq;

}

public void setOrderSeq(String orderSeq) {

this.orderSeq = orderSeq;

}

public String getSysModularId() {

return sysModularId;

}

public void setSysModularId(String sysModularId) {

this.sysModularId = sysModularId;

}

@Override

public String toString() {

return "SysMenu [menu_id=" + menu_id + ", menu_name=" + menu_name + ", parentid=" + parentid + ", menuflag="

+ menuflag + ", imgurl=" + imgurl + ",url=" + url + "]";

}

}

1.1.3.Node 节点类 拼接树json结构

Node.java

[java] view
plain copy

package com.asiainfo.psm.common.util;

import java.util.ArrayList;

import java.util.Collections;

import java.util.Comparator;

import java.util.Iterator;

import java.util.List;

/**

* 节点工具类

* @author sww

*

*/

public class Node {

/**

* 节点编号

*/

public String id;

/**

* 节点内容

*/

public String name;

/**

* 父节点编号

*/

public String parentId;

/**

* 菜单等级

*/

public String menuflag;

/**

* 菜单图标路径

*/

public String imgUrl;

/**

* 路径

*/

public String url;

/**

* 兄弟节点排序

*/

public String orderSeq;

/**

* 业务模块ID

*/

public String sysModularId;

/**

* 孩子节点列表

*/

private List children = new ArrayList();

// 添加孩子节点

public void addChild(Node node) {

children.add(node);

}

// 先序遍历，拼接JSON字符串

public String toString() {

String result = "{" + "id : '" + id + "'" + ", name : '" + name + "'" + ", menuflag : '" + menuflag + "'"

+ ", imgUrl : '" + imgUrl + "'" + ", orderSeq : '" + orderSeq + "'" + ", sysModularId : '"

+ sysModularId + "'" + ", url : '" + url + "'";

if (children.size() != 0) {

result += ", submenu : [";

for (Iterator it = children.iterator(); it.hasNext();) {

result += ((Node) it.next()).toString() + ",";

}

result = result.substring(0, result.length() - 1);

result += "]";

} else {

result += ", leaf : true";

}

return result + "}";

}

// 兄弟节点横向排序

public void sortChildren() {

if (children.size() != 0) {

// 对本层节点进行排序（可根据不同的排序属性，传入不同的比较器，这里传入ID比较器）

Collections.sort(children, new NodeIDComparator());

// 对每个节点的下一层节点进行排序

for (Iterator it = children.iterator(); it.hasNext();) {

((Node) it.next()).sortChildren();

}

}

}

}

/**

* 节点比较器

*/

class NodeIDComparator implements Comparator {

// 按照节点编号比较

public int compare(Object o1, Object o2) {

int j1 = Integer.parseInt(((Node) o1).id);

int j2 = Integer.parseInt(((Node) o2).id);

return (j1 < j2 ? -1 : (j1 == j2 ? 0 : 1));

}

}

1.1.4.控制层处理查询菜单sql

[java] view
plain copy

@RequestMapping("/profile/showMenuTree.action")

public ModelAndView showMenuTree(HttpServletRequest request) {

ModelMap model = new ModelMap();

//1.获取菜单list集合

//String userId = "1";

List<SysMenu> list = new ArrayList<SysMenu>();

SysMenu sysMenu = new SysMenu();

try {

list = iSysMenuManagerBMO.querySysMenuAll(sysMenu);

} catch (Exception e) {

logger.error(e.getMessage() + "error");

}

//2.list 转成树 用的node对象集合nodeList

HashMap nodeList = new HashMap();

//根节点

Node root = null;

HashSet<Node> hashSet = new HashSet<Node>();

// 将结果集存入散列表（后面将借助散列表构造多叉树）

for (SysMenu sysmenu : list) {

Node node = new Node();

node.id = String.valueOf(sysmenu.getMenu_id());

node.name = (String) sysmenu.getMenu_name();

node.orderSeq = (String) sysmenu.getOrderSeq();

node.sysModularId = (String) sysmenu.getSysModularId();

String parentId = String.valueOf(sysmenu.getParentid());

//父节点为0 置空

if ("0".equals(parentId)) {

node.parentId = "";

} else {

node.parentId = (String) sysmenu.getParentid();

}

nodeList.put(node.id, node);

}

//3.nodeList拼装json

Set entrySet = nodeList.entrySet();

for (Iterator it = entrySet.iterator(); it.hasNext();) {

Node node = (Node) ((Map.Entry) it.next()).getValue();

if (node.parentId == null || node.parentId.equals("")) {

root = node;

} else {

((Node) nodeList.get(node.parentId)).addChild(node);

}

if (null != root) {

hashSet.add(root);

}

}

//4.对多叉树进行横向排序

root.sortChildren();

//5.输出有序的树形菜单的JSON字符串 替换其中submenu 为 children

String jsonString = String.valueOf(hashSet.toString());

String returnString = jsonString.replaceAll("submenu", "children");

logger.debug("输出的菜单为:" + returnString);

model.addAttribute("returnString", returnString);

return new ModelAndView("protected/sysMenu/sysMenuManager", model);

}

1.2.前台js

1.2.1.common.js

[javascript] view
plain copy

//主界面左侧菜单 加载使用的js author:sww

function AccordionMenu(options) {

this.config = {

containerCls : '.subnav',

menuArrs : '',

type : 'click',

renderCallBack : null,

clickItemCallBack : null

};

this.cache = {

};

this.init(options);

}

AccordionMenu.prototype = {

constructor: AccordionMenu,

init: function(options){

this.config = $.extend(this.config,options || {});

var self = this,

_config = self.config,

_cache = self.cache;

$(_config.containerCls).each(function(index,item){

self._renderHTML(item);

self._bindEnv(item);

});

},

_renderHTML: function(container){

var self = this,

_config = self.config,

_cache = self.cache;

var ulhtml;

//检测是否IE6-8

if (!$.support.leadingWhitespace) {

ulhtml = $('<ul ></ul>');

}else{

ulhtml = $('<ul></ul>');

}

$(_config.menuArrs).each(function(index,item){

var lihtml;

if (!$.support.leadingWhitespace) {

lihtml = $('<li class="first-title"><a href="#" menuFlag="'+item.menuflag+'" onclick=optMenu(this) /><h5>'+item.name+'</h5></li>');

}else{

lihtml = $('<li class="first-title"><a href="#" menuFlag="'+item.menuflag+'" onclick=optMenu(this) /><h5>'+item.name+'</h5></li>');

}

if(item.submenu && item.submenu.length > 0) {

//创建子菜单

self._createSubMenu(item.submenu,lihtml);

}

$(ulhtml).append(lihtml);

});

$(container).append(ulhtml);

_config.renderCallBack && $.isFunction(_config.renderCallBack) && _config.renderCallBack();

self._levelIndent(ulhtml);

},

/**

* 创建子menu

* @param {array}

* @param {lihtml}

*/

_createSubMenu: function(submenu,lihtml){

var self = this,

_config = self.config,

_cache = self.cache;

var subUl = $('<ul></ul>'),

callee = arguments.callee,

subLi;

$(submenu).each(function(index,item){

var url = 'javascript:void(0)';

var menuFlag = item.menuflag;

var isLastNode = item.isLastNode;

var menuUrl = item.url;

var id = item.id;

var imgUrl = item.imgUrl;

//根据menuFlag 追加对应html

if("1" == menuFlag){

if("" != menuUrl && "null" != menuUrl){

subLi = $('<li class="first-ss"><a id="'+id+'" targetUrl="'+menuUrl+'" onclick="openMenu(this)">'+item.name+'</a></li>');

}else{

subLi = $('<li class="first-ss"><a id="'+id+'" href="'+url+'" >'+item.name+'</a></li>');

}

}else if("2" == menuFlag){

//有url连接的二级菜单

if("" != menuUrl && "null" != menuUrl){

//二级菜单添加图标 没有则默认

if("" != imgUrl && "null" != imgUrl){

subLi = $('<li class="second-ss-nochild"><img src="'+imgUrl+'" height="20" width="20" class="left-ico" /><a id="'+id+'" menuFlag="'+menuFlag+'" targetUrl="'+menuUrl+'" onclick="openMenu(this)">'+item.name+'</a></li>');

}else{

subLi = $('<li class="second-ss-nochild"><img src="resources/m_images/ico2.png" height="20" width="20" class="left-ico" /><a id="'+id+'" menuFlag="'+menuFlag+'" targetUrl="'+menuUrl+'" onclick="openMenu(this)">'+item.name+'</a></li>');

}

}else{

if("" != imgUrl && "null" != imgUrl){

//subLi = $('<li class="second-ss"><img src="'+imgUrl+'" height="20" width="20" class="left-ico" /><a id="'+id+'" href="'+url+'" menuFlag="'+menuFlag+'" onclick=optMenu(this)>'+item.name+'2</a></li>');

subLi = $('<li class="second-ss"><a id="'+id+'" href="'+url+'" menuFlag="'+menuFlag+'" onclick=optMenu(this)><img src="'+imgUrl+'" height="20" width="20" class="left-ico" />'+item.name+'</a></li>');

}else{

subLi = $('<li class="second-ss"><img src="resources/m_images/ico2.png" height="20" width="20" class="left-ico" /><a id="'+id+'" href="'+url+'" menuFlag="'+menuFlag+'" onclick=optMenu(this)>'+item.name+'</a></li>');

}

}

}else if("3" == menuFlag){

if("" != menuUrl && "null" != menuUrl){

subLi = $('<li class="third-ss"><a id="'+id+'" menuFlag="'+menuFlag+'" targetUrl="'+menuUrl+'" onclick="openMenu(this)"><div class="secondimg"></div>'+item.name+'</a></li>');

}else{

subLi = $('<li class="third-ss"><a id="'+id+'" href="'+url+'" menuFlag="'+menuFlag+'" onclick=optMenu(this)><div class="secondimg"></div>'+item.name+'</a></li>');

}

}else{

if("" != menuUrl && "null" != menuUrl){

subLi = $('<li class="fourth"><a id="'+id+'" menuFlag="'+menuFlag+'" targetUrl="'+menuUrl+'" onclick="openMenu(this)"'+item.name+'</a></li>');

}else{

subLi = $('<li class="fourth"><a id="'+id+'" href="'+url+'" menuFlag="'+menuFlag+'" onclick=optMenu(this)>'+item.name+'</a></li>');

}

}

if(item.submenu && item.submenu.length > 0) {

$(subLi).children('a').prepend('<img src="resources/images/blank.gif" alt=""/>');

callee(item.submenu, subLi);

}

$(subUl).append(subLi);

});

$(lihtml).append(subUl);

},

/**

*

*/

_levelIndent: function(ulList){

var self = this,

_config = self.config,

_cache = self.cache,

callee = arguments.callee;

var initTextIndent = 2,

lev = 1,

$oUl = $(ulList);

while($oUl.find('ul').length > 0){

initTextIndent = parseInt(initTextIndent,10) + 5 + 'em';

$oUl.children().children('ul')

.children('li').css("second-ss", initTextIndent);

$oUl = $oUl.children().children('ul');

lev++;

}

if (!$.support.leadingWhitespace) {

$(ulList).find('ul').slideUp();

$(ulList).find('ul:first').slideUp();

// $(ulList).find('ul').hide();

//$(ulList).find('ul:first').hide();

}else{

$(ulList).find('ul').slideUp();

$(ulList).find('ul:first').slideUp();

}

},

/**

* 绑定事件

*/

_bindEnv: function(container) {

var self = this,

_config = self.config;

$('h5,a',container).unbind(_config.type);

$('h5,a',container).bind(_config.type,function(e){

var liClass = $(this).parent().get(0).className;

var thisLiObj = $(this).parent();

//一级菜单伸缩样式调整

if("first-tktitle" == liClass){

//收缩菜单

thisLiObj.removeClass().addClass("first-title");

if ( !thisLiObj.is(':has(ul)') ) {

return;

}

}else if("first-title" == liClass){

//打开菜单

thisLiObj.removeClass().addClass("first-tktitle");

if ( !thisLiObj.is(':has(ul)') ) {

return;

}

}

if($(this).siblings('ul').length > 0) {

$(this).siblings('ul').slideToggle('slow').end().children('img').toggleClass('unfold');

}

//单击菜单时自动伸缩其他菜卿

//$(this).parent('li').siblings().find('ul').hide()

// .end().find('img.unfold').removeClass('unfold');

//_config.clickItemCallBack && $.isFunction(_config.clickItemCallBack) && _config.clickItemCallBack($(this));

});

}

};

function optMenu(obj){

slidingBox();

//判断当前菜单是否包含有子菜单

var liClass = $(obj).parent().attr("class");

var menuFlag = $(obj).attr("menuFlag");

//不同级菜单的伸缩样式改变

if("1" == menuFlag){

if("first-tktitle" == liClass){

//收缩菜单

$(obj).parent().removeClass().addClass("first-title");

if ( !$(obj).parent().is(':has(ul)') ) {

return;

}else{

//隐藏

//$(obj).parent().find("ul").slideUp();

}

}else{

//打开菜单

$(obj).parent().removeClass().addClass("first-tktitle");

if ( !$(obj).parent().is(':has(ul)') ) {

return;

}else{

//隐藏

// $(obj).parent().find("ul").slideDown();

}

}

}else if ("2" == menuFlag){

if("second-tk" == liClass){

//收缩菜单

$(obj).parent().removeClass().addClass("second-ss");

if ( !$(obj).parent().is(':has(ul)') ) {

return;

}else{

//隐藏

//$(obj).parent().find("ul").slideUp();

}

}else{

//打开菜单

$(obj).parent().removeClass().addClass("second-tk");

if ( !$(obj).parent().is(':has(ul)') ) {

return;

}else{

//隐藏

// $(obj).parent().find("ul").slideDown();

}

}

}else if ("3" == menuFlag){

if("third-tk" == liClass){

//收缩菜单

$(obj).parent().removeClass().addClass("third-ss");

if ( !$(obj).parent().is(':has(ul)') ) {

return;

}else{

//隐藏

//$(obj).parent().find("ul").slideUp();

}

}else{

//打开菜单

$(obj).parent().removeClass().addClass("third-ss");

if ( !$(obj).parent().is(':has(ul)') ) {

return;

}else{

//隐藏

// $(obj).parent().find("ul").slideDown();

}

}

}else if ("4" == menuFlag){

}

}

1.2.2.jsp中调用处

newIndex.jsp：

[html] view
plain copy

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<base href="<%=basePath%>">

<title>系统管理</title>

<link rel="stylesheet" type="text/css" href="resources/css/style.css"/>

<link rel="stylesheet" type="text/css" href="resources/css/m_style.css"/>

<script type="text/javascript" src="resources/js/jquery.min.js"></script>

<script type="text/javascript" src="resources/js/tabMenuEvent.js"></script>

<script type="text/javascript" src="resources/js/common.js"></script>

<script type="text/javascript">

var ctx = '<%=request.getContextPath() %>';

var loginCode = '<%=request.getAttribute("loginCode") %>';

var isAdmin = "1";

var timePeriod = '<%=request.getAttribute("timePeriod") %>';

var name = '<%=request.getAttribute("name") %>';

var userId = '<%=request.getAttribute("userId") %>';

</script>

<script type="text/javascript">

var menuInfo = <%=request.getAttribute("menuObj") %>;

var titleArray = new Array();

$(function(){

new AccordionMenu({menuArrs:menuInfo});

});

</script>

<script type="text/javascript">

//加载欢迎界面

$(document).ready(function(){

//隐藏纵向滚动条

document.body.parentNode.style.overflowY = "hidden";

$("#titleBegin").bind("click", function () {

$("#cTitle").find("ul").children().removeClass("selected");

$("#titleBegin").addClass("homeFocus");

});

});

</script>

</head>

<body>

<div class="top">

<div class="top-left">

<img src="resources/m_images/logo.png"/>

</div>

<div class="top-right">

<div class="guideBar">

<ul><li><span class="name">${name} 您好！</span></li>

<li><a href="javascript:void(0)" class="icon-notice" title="消息(开发中)"><span class="dBlock">8</span></a></li>

<li><a href="javascript:void(0)" class="icon-setup" title="配置(开发中)"></a></li>

<li><a class="icon-exit" id="config" href="javascript:void(0)" title="退出" onClick="return confirmOut()" ></a></li>

</ul>

</div>

</div>

</div>

<!-- tab begin-->

<div class="cTitle" id="cTitle">

<ul id="cTitleUl">

<li> <a href="javascript:void(0)" class="home" id="home" targetUrl="<%=basePath%>main/profile/welcome.action" onclick="openMenu(this)" sourcemenu="home">首页</a></li>

</ul>

</div>

<!-- tab end-->

<!-- 左侧菜单 -->

<div class="sidebar">

<div class="nav-tt"><a href="javascript:void(0)" onclick="onDevelop()">快捷操作</a><a href="javascript:void(0)" onclick="onDevelop()">栏目导航</a></div>

<div class="subnav" style="height:570px"></div>

</div>

<!-- 菜单牵引条 -->

<div class="sul" id="menuMove" onclick=moveLeftDiv()><span><img id="moveImg" src="resources/images/ico9.png" height="62" width="10" /></span></div>

<!-- 右侧菜单条 -->

<div class="con" id="toolbarId">

</div>

<!-- 主体 -->

<div class="content" id="container">

<iframe id="homecontentDiv" name="homecontentDiv" src="<%=basePath%>main/profile/welcome.action" width="99%" height="600px" frameborder="0" scrolling="no">

</iframe>

</div>

</body>

</html>

二:iframe实现tab切换

每次打开新的tab页需要创建心的iframe，并且用一个数组titleArray来保存所有创建的tab的Id,创建的每个tab的sourcemenu属性就是左侧菜单的ID。

newIndex.jsp:

[javascript] view
plain copy

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<base href="<%=basePath%>">

<title>系统管理</title>

<link rel="stylesheet" type="text/css" href="resources/css/style.css"/>

<link rel="stylesheet" type="text/css" href="resources/css/m_style.css"/>

<script type="text/javascript" src="resources/js/jquery.min.js"></script>

<script type="text/javascript" src="resources/js/tabMenuEvent.js"></script>

<script type="text/javascript" src="resources/js/common.js"></script>

<script type="text/javascript">

var ctx = '<%=request.getContextPath() %>';

var loginCode = '<%=request.getAttribute("loginCode") %>';

var isAdmin = "1";

var timePeriod = '<%=request.getAttribute("timePeriod") %>';

var name = '<%=request.getAttribute("name") %>';

var userId = '<%=request.getAttribute("userId") %>';

</script>

<script type="text/javascript">

var menuInfo = <%=request.getAttribute("menuObj") %>;

var titleArray = new Array();

$(function(){

new AccordionMenu({menuArrs:menuInfo});

});

</script>

<script type="text/javascript">

//加载欢迎界面

$(document).ready(function(){

//隐藏纵向滚动条

document.body.parentNode.style.overflowY = "hidden";

$("#titleBegin").bind("click", function () {

$("#cTitle").find("ul").children().removeClass("selected");

$("#titleBegin").addClass("homeFocus");

});

});

</script>

</head>

<body>

<div class="top">

<div class="top-left">

<img src="resources/m_images/logo.png"/>

</div>

<div class="top-right">

<div class="guideBar">

<ul><li><span class="name">${name} 您好！</span></li>

<li><a href="javascript:void(0)" class="icon-notice" title="消息(开发中)"><span class="dBlock">8</span></a></li>

<li><a href="javascript:void(0)" class="icon-setup" title="配置(开发中)"></a></li>

<li><a class="icon-exit" id="config" href="javascript:void(0)" title="退出" onClick="return confirmOut()" ></a></li>

</ul>

</div>

</div>

</div>

<!-- tab begin-->

<div class="cTitle" id="cTitle">

<ul id="cTitleUl">

<li> <a href="javascript:void(0)" class="home" id="home" targetUrl="<%=basePath%>main/profile/welcome.action" onclick="openMenu(this)" sourcemenu="home">首页</a></li>

</ul>

</div>

<!-- tab end-->

<!-- 左侧菜单 -->

<div class="sidebar">

<div class="nav-tt"><a href="javascript:void(0)" onclick="onDevelop()">快捷操作</a><a href="javascript:void(0)" onclick="onDevelop()">栏目导航</a></div>

<div class="subnav" style="height:570px"></div>

</div>

<!-- 菜单牵引条 -->

<div class="sul" id="menuMove" onclick=moveLeftDiv()><span><img id="moveImg" src="resources/images/ico9.png" height="62" width="10" /></span></div>

<!-- 右侧菜单条 -->

<div class="con" id="toolbarId">

</div>

<!-- 主体 -->

<div class="content" id="container">

<iframe id="homecontentDiv" name="homecontentDiv" src="<%=basePath%>main/profile/welcome.action" width="99%" height="600px" frameborder="0" scrolling="no">

</iframe>

</div>

</body>

</html>

tabMenuEvent.js

[javascript] view
plain copy

/**

* 后台管理主框架菜单导航与快捷操作切换功能

* @param displayId:需要显示的div Id

* @param hiddenId:需要隐藏的div Id

* @auther sww

*/

var tabClick = function (displayId, hiddenId){

$("#" + displayId + "").attr("class", "block");

$("#" + hiddenId + "").attr("class", "no");

}

/**

* 左侧菜单点击产生tab tab点击

* @param {Object} dom

*/

var openMenu = function(e){

var menuId = e.id || $(e).attr("sourcemenu");

var targetUrl = $(e).attr("targetUrl") || $(e).attr("sourceurl");

var flag = true;

var $menuObj = $("#" + menuId);

if(!judugTitleAccount()){

alert("最多只可以点击八个界面，请关闭多余界面");

return false;

}

//titleArray tab id集合

var flag = true;

if(titleArray.indexOf(menuId) > -1){

//包含元素，重定向到该元素

flag = false;

}else{

titleArray.push(menuId);

}

//控制tab样式false:存在 true:不存在

$("#titleBegin").removeClass("homeFocus");

$.each($("#cTitleUl>li"),function(index, i){

if($(i).children("a").text() == $menuObj.text()){

flag = false;

$(i).attr('class','selected');

} else {

$(i).attr('class','');

}

});

//先隐藏所有的iframe的主内容

$.each($("#container>iframe"),function(index,i){

$(i).hide();

})

//此菜单为第一次打开,则对应在container中创建一个展示该菜单内容的iFrame,然后加载对应的页面

if(flag && menuId != 'home'){

if($menuObj.text() != undefined && $menuObj.text() != ''){

$("#cTitleUl").append("<li class=\"selected\"><a href=\"javascript:void(0);\" onclick=\"openMenu(this)\" class=\"selected\" sourcemenu=\""+menuId+"\" sourceurl=\""+targetUrl+"\">" + $menuObj.text() + "</a><b onclick=\"closeMenuOpen('"+menuId+"')\"></b></li>");

var childIframe = $('<iframe frameborder="0" width="100%" height="100%" scrolling="yes" name="'+ menuId+'contentDiv" id="'+ menuId+'contentDiv" src="'+targetUrl+'"></iframe>')

childIframe.appendTo($("#container"));

}

} else{//如果不是第一次打开,则直接显示该div

$("#" + menuId + "contentDiv").show();

}

}

/**

* 关闭打开的类似tab页面

* @param {Object} menuId

*/

function closeMenuOpen(menuId){

//前一tab

var preTab = null;

var liNum = 0;

$.each($("#cTitleUl>li"),function(index, i){

liNum ++;

if(index != 0){

//找到当前要关闭的tab

if($(i).children("a").attr('sourceMenu') == menuId){

//将tab对应的iFrame删除

$("#" + menuId + "contentDiv").remove();

//将tab的ID从数组中删除

var deleteTableIndex = titleArray.indexOf(menuId);

titleArray.splice(deleteTableIndex,1);

if($(i).attr('class')== 'selected'){//当前要关闭的页面正处于展示中状态,则删除后将其前一个tab展现

$(preTab).attr('class','selected');

$("#" + $(preTab).children("a").attr('sourcemenu') + "contentDiv").show();

}

//将tab删

$(i).remove();

}

}

preTab = i;

});

//tab为2

if(liNum == 2){

$("#homecontentDiv",parent.document).show();

}

}

/**

* 从iframe界面中打开页面

* @param {Object} targetUrl：目标url,tabName:tab名,menuId:iframe中按钮ID

*/

function openTabFromIFrame(targetUrl, tabName, menuId){

var flag = true;//标识是否全新打开

if(parent.titleArray.indexOf(menuId) > -1){

//包含元素

flag = false;

}else{

parent.titleArray.push(menuId);

}

$.each($("#cTitleUl>li", parent.document),function(index, i){

//先隐藏所有主内容区域内容

$("#" + $(i,parent.document).children("a").attr('sourceMenu') + 'contentDiv', parent.document).attr("style","display:none;");

if(menuId != undefined && $(i,parent.document).attr('source') == menuId){

$(i, parent.document).attr('class','selected');

flag = false;

}else{

$(i, parent.document).attr('class','');

}

});

if(!flag){//不是第一次打开,直接show

$("#" + menuId + "contentDiv",parent.document).show();

} else {

//用时间戳做打开页面标识

var timestamp = new Date().getTime();

$("#cTitleUl", parent.document).append("<li class=\"selected\" source=\""+menuId+"\"><a href=\"javascript:void(0);\" onclick=\"openTabFromIFrame('','','" + menuId + "')\" class=\"selected\" sourceMenu=\""+menuId+"\">" + tabName + "</a><b onclick=\"closeMenuOpen('"+menuId+"')\"></b></li>");

var childIframe = $('<iframe frameborder="0" width="100%" height="100%" scrolling="yes" name="'+ menuId+'contentDiv" id="'+ menuId+'contentDiv" src="'+targetUrl+'"></iframe>')

childIframe.appendTo($("#container", parent.document));

}

}

/**

* 从iframe界面中点击关闭页面

* @param {Object} targetTabName:调到的tab名,menuId：要关闭的tab的ID，passObject：传递的参数(可空)

* @returns 返回的参数 returnIframeContentName(返回重新加载页面的iframe的name)

*/

function closeTabFromIFrame(targetTabName, menuId, passObject){

//先隐藏所有的iframe的主内容

$.each($("#container>iframe",parent.document),function(index,i){

$(i).hide();

})

var deleteTableIndex = parent.titleArray.indexOf(menuId);

parent.titleArray.splice(deleteTableIndex,1);

//处理tab

var returnIframeContentName;

$.each($("#cTitleUl>li",parent.document),function(index, i){

if($(i).children("a").text() == targetTabName){

$(i).attr('class','selected');

$("#" + $(i).children("a").attr('sourcemenu') + "contentDiv",parent.document).show();

returnIframeContentName = $(i).children("a").attr('sourcemenu') + "contentDiv";

} else {

$(i).attr('class','');

}

if($(i).children("a").attr("sourceMenu") == menuId){

//将tab删

$(i).remove();

}

});

return returnIframeContentName;

}





点击左侧菜单调用openMenu(this)方法，在主界面newIndex.jsp创建新的iframe标签。

每次tab页的切换可以通过隐藏显示该tab对应的iframe,进行hide.show操作。

三:iframe a 下的js如何访问iframe b页面的dom元素

谷歌下本人测试

$("#[b]tbody",document.frames('iframename').document)这种方式无效，所以可以采取折中方式，先取父页面中id=container标签，该标签包含所有iframe，然后取contents,再去找ID=tbody元素。

[/b]

var $tbody = $("#container",parent.document).find("iframe[name=" + returnIframeContentName +"]").contents().find("#tbody");



附带：iframe不跨域，iframe跨域访问更加复杂不允许。