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

1. <select id="querySysMenuAll"  resultMap="Result"  parameterType="com.asiainfo.psm.common.modal.SysMenu" >  
2.     SELECT  
3.         B.SYS_MENU_ID AS "menu_id",  
4.         B.SYS_MENU_NAME AS "menu_name",  
5.         B.SUP_SYS_MENU_ID AS "parentid",  
6.         B.ORDER_SEQ  AS "orderSeq",  
7.         B.SYS_MODULAR_ID  AS "sysModularId"  
8.     FROM  
9.         SYSTEM_MENU B  
10.     <where>  
11.         <if test="menu_id != null and menu_id != ''">  
12.             AND B.SYS_MENU_ID = #{menu_id,jdbcType=INTEGER}  
13.         </if>  
14.     </where>      
15.   </select>  

1.1.2.SysMenu 系统菜单实体Bean

SysMenu.java

[java]  view plain  copy

1. import java.io.Serializable;  
2.   
3. /*** 
4.  * @SysMenu 系统菜单 
5.  *  
6.  * @author wlw @ 
7.  */  
8. public class SysMenu implements Serializable {  
9.   
10.     private static final long serialVersionUID = 1L;  
11.   
12.     //用户ID  
13.     private String userId;  
14.   
15.     // 系统菜单ID  
16.     private int menu_id;  
17.   
18.     // 系统菜单名称  
19.     private String menu_name;  
20.   
21.     // 上级系统菜单ID，如果是根系统菜单，值为0  
22.     private String parentid;  
23.   
24.     // 展现顺序，特指同级兄弟间的展现顺序  
25.     private String orderSeq;  
26.   
27.     //业务模块ID  
28.     private String sysModularId;  
29.   
30.     //菜单级别  
31.     private String menuflag;  
32.   
33.     //图标链接  
34.     private String imgurl;  
35.   
36.     private String url;  
37.   
38.     private String isLastNode;  
39.   
40.     public String getUserId() {  
41.         return userId;  
42.     }  
43.   
44.     public void setUserId(String userId) {  
45.         this.userId = userId;  
46.     }  
47.   
48.     public int getMenu_id() {  
49.         return menu_id;  
50.     }  
51.   
52.     public void setMenu_id(int menu_id) {  
53.         this.menu_id = menu_id;  
54.     }  
55.   
56.     public String getMenu_name() {  
57.         return menu_name;  
58.     }  
59.   
60.     public void setMenu_name(String menu_name) {  
61.         this.menu_name = menu_name;  
62.     }  
63.   
64.     public String getParentid() {  
65.         return parentid;  
66.     }  
67.   
68.     public void setParentid(String parentid) {  
69.         this.parentid = parentid;  
70.     }  
71.   
72.     public String getMenuflag() {  
73.         return menuflag;  
74.     }  
75.   
76.     public void setMenuflag(String menuflag) {  
77.         this.menuflag = menuflag;  
78.     }  
79.   
80.     public String getImgurl() {  
81.         return imgurl;  
82.     }  
83.   
84.     public void setImgurl(String imgurl) {  
85.         this.imgurl = imgurl;  
86.     }  
87.   
88.     public String getUrl() {  
89.         return url;  
90.     }  
91.   
92.     public void setUrl(String url) {  
93.         this.url = url;  
94.     }  
95.   
96.     public String getIsLastNode() {  
97.         return isLastNode;  
98.     }  
99.   
100.     public void setIsLastNode(String isLastNode) {  
101.         this.isLastNode = isLastNode;  
102.     }  
103.   
104.     public String getOrderSeq() {  
105.         return orderSeq;  
106.     }  
107.   
108.     public void setOrderSeq(String orderSeq) {  
109.         this.orderSeq = orderSeq;  
110.     }  
111.   
112.     public String getSysModularId() {  
113.         return sysModularId;  
114.     }  
115.   
116.     public void setSysModularId(String sysModularId) {  
117.         this.sysModularId = sysModularId;  
118.     }  
119.   
120.     @Override  
121.     public String toString() {  
122.         return "SysMenu [menu_id=" + menu_id + ", menu_name=" + menu_name + ", parentid=" + parentid + ", menuflag="  
123.                 + menuflag + ", imgurl=" + imgurl + ",url=" + url + "]";  
124.     }  
125. }  

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

Node.java

[java]  view plain  copy

1. package com.asiainfo.psm.common.util;  
2.   
3. import java.util.ArrayList;  
4. import java.util.Collections;  
5. import java.util.Comparator;  
6. import java.util.Iterator;  
7. import java.util.List;  
8.   
9. /** 
10.  * 节点工具类 
11.  * @author sww 
12.  * 
13.  */  
14. public class Node {  
15.     /**  
16.      * 节点编号  
17.      */  
18.     public String id;  
19.   
20.     /**  
21.      * 节点内容  
22.      */  
23.     public String name;  
24.   
25.     /**  
26.      * 父节点编号  
27.      */  
28.     public String parentId;  
29.   
30.     /**  
31.      * 菜单等级 
32.      */  
33.     public String menuflag;  
34.   
35.     /** 
36.      * 菜单图标路径 
37.      */  
38.     public String imgUrl;  
39.   
40.     /** 
41.      * 路径 
42.      */  
43.     public String url;  
44.   
45.     /** 
46.      * 兄弟节点排序 
47.      */  
48.     public String orderSeq;  
49.   
50.     /** 
51.      * 业务模块ID 
52.      */  
53.     public String sysModularId;  
54.   
55.     /**  
56.      * 孩子节点列表  
57.      */  
58.     private List children = new ArrayList();  
59.   
60.     // 添加孩子节点    
61.     public void addChild(Node node) {  
62.         children.add(node);  
63.     }  
64.   
65.     // 先序遍历，拼接JSON字符串    
66.     public String toString() {  
67.         String result = "{" + "id : '" + id + "'" + ", name : '" + name + "'" + ", menuflag : '" + menuflag + "'"  
68.                 + ", imgUrl : '" + imgUrl + "'" + ", orderSeq : '" + orderSeq + "'" + ", sysModularId : '"  
69.                 + sysModularId + "'" + ", url : '" + url + "'";  
70.         if (children.size() != 0) {  
71.             result += ", submenu : [";  
72.             for (Iterator it = children.iterator(); it.hasNext();) {  
73.                 result += ((Node) it.next()).toString() + ",";  
74.             }  
75.             result = result.substring(0, result.length() - 1);  
76.             result += "]";  
77.         } else {  
78.             result += ", leaf : true";  
79.         }  
80.         return result + "}";  
81.     }  
82.   
83.     // 兄弟节点横向排序    
84.     public void sortChildren() {  
85.         if (children.size() != 0) {  
86.             // 对本层节点进行排序（可根据不同的排序属性，传入不同的比较器，这里传入ID比较器）    
87.             Collections.sort(children, new NodeIDComparator());  
88.             // 对每个节点的下一层节点进行排序    
89.             for (Iterator it = children.iterator(); it.hasNext();) {  
90.                 ((Node) it.next()).sortChildren();  
91.             }  
92.         }  
93.     }  
94. }  
95.   
96. /**  
97.  * 节点比较器  
98.  */  
99. class NodeIDComparator implements Comparator {  
100.     // 按照节点编号比较    
101.     public int compare(Object o1, Object o2) {  
102.         int j1 = Integer.parseInt(((Node) o1).id);  
103.         int j2 = Integer.parseInt(((Node) o2).id);  
104.         return (j1 < j2 ? -1 : (j1 == j2 ? 0 : 1));  
105.     }  
106. }  

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

[java]  view plain  copy

1. @RequestMapping("/profile/showMenuTree.action")  
2.     public ModelAndView showMenuTree(HttpServletRequest request) {  
3.         ModelMap model = new ModelMap();  
4.         //1.获取菜单list集合  
5.         //String userId = "1";  
6.         List<SysMenu> list = new ArrayList<SysMenu>();  
7.         SysMenu sysMenu = new SysMenu();  
8.         try {  
9.             list = iSysMenuManagerBMO.querySysMenuAll(sysMenu);  
10.         } catch (Exception e) {  
11.             logger.error(e.getMessage() + "error");  
12.         }  
13.   
14.         //2.list 转成树 用的node对象集合nodeList  
15.         HashMap nodeList = new HashMap();  
16.         //根节点    
17.         Node root = null;  
18.         HashSet<Node> hashSet = new HashSet<Node>();  
19.         // 将结果集存入散列表（后面将借助散列表构造多叉树）    
20.         for (SysMenu sysmenu : list) {  
21.             Node node = new Node();  
22.             node.id = String.valueOf(sysmenu.getMenu_id());  
23.             node.name = (String) sysmenu.getMenu_name();  
24.             node.orderSeq = (String) sysmenu.getOrderSeq();  
25.             node.sysModularId = (String) sysmenu.getSysModularId();  
26.             String parentId = String.valueOf(sysmenu.getParentid());  
27.             //父节点为0 置空  
28.             if ("0".equals(parentId)) {  
29.                 node.parentId = "";  
30.             } else {  
31.                 node.parentId = (String) sysmenu.getParentid();  
32.             }  
33.             nodeList.put(node.id, node);  
34.         }  
35.   
36.         //3.nodeList拼装json  
37.         Set entrySet = nodeList.entrySet();  
38.         for (Iterator it = entrySet.iterator(); it.hasNext();) {  
39.             Node node = (Node) ((Map.Entry) it.next()).getValue();  
40.             if (node.parentId == null || node.parentId.equals("")) {  
41.                 root = node;  
42.             } else {  
43.                 ((Node) nodeList.get(node.parentId)).addChild(node);  
44.             }  
45.             if (null != root) {  
46.                 hashSet.add(root);  
47.             }  
48.         }  
49.   
50.         //4.对多叉树进行横向排序    
51.         root.sortChildren();  
52.   
53.         //5.输出有序的树形菜单的JSON字符串   替换其中submenu 为  children  
54.         String jsonString = String.valueOf(hashSet.toString());  
55.         String returnString = jsonString.replaceAll("submenu", "children");  
56.         logger.debug("输出的菜单为:" + returnString);  
57.         model.addAttribute("returnString", returnString);  
58.         return new ModelAndView("protected/sysMenu/sysMenuManager", model);  
59.     }  

1.2.前台js

1.2.1.common.js

[javascript]  view plain  copy

1. //主界面左侧菜单 加载使用的js  author:sww    
2. function AccordionMenu(options) {  
3.     this.config = {  
4.         containerCls        : '.subnav',                   
5.         menuArrs            :  '',                           
6.         type                :  'click',                      
7.         renderCallBack      :  null,                          
8.         clickItemCallBack   : null                          
9.     };  
10.     this.cache = {  
11.           
12.     };  
13.     this.init(options);  
14.  }  
15.   
16.    
17.  AccordionMenu.prototype = {  
18.   
19.     constructor: AccordionMenu,  
20.   
21.     init: function(options){  
22.         this.config = $.extend(this.config,options || {});  
23.         var self = this,  
24.             _config = self.config,  
25.             _cache = self.cache;  
26.           
27.         $(_config.containerCls).each(function(index,item){  
28.               
29.             self._renderHTML(item);  
30.   
31.             self._bindEnv(item);  
32.         });  
33.     },  
34.     _renderHTML: function(container){  
35.         var self = this,  
36.         _config = self.config,  
37.         _cache = self.cache;  
38.         var ulhtml;  
39.         //检测是否IE6-8  
40.         if (!$.support.leadingWhitespace) {  
41.             ulhtml = $('<ul ></ul>');  
42.         }else{            
43.             ulhtml = $('<ul></ul>');  
44.         }  
45.         $(_config.menuArrs).each(function(index,item){  
46.             var lihtml;  
47.             if (!$.support.leadingWhitespace) {  
48.                 lihtml = $('<li class="first-title"><a href="#" menuFlag="'+item.menuflag+'" οnclick=optMenu(this) /><h5>'+item.name+'</h5></li>');  
49.             }else{            
50.                 lihtml = $('<li class="first-title"><a href="#" menuFlag="'+item.menuflag+'"  οnclick=optMenu(this) /><h5>'+item.name+'</h5></li>');  
51.             }  
52.             if(item.submenu && item.submenu.length > 0) {  
53.                 //创建子菜单  
54.                 self._createSubMenu(item.submenu,lihtml);  
55.             }  
56.             $(ulhtml).append(lihtml);  
57.         });  
58.         $(container).append(ulhtml);  
59.           
60.         _config.renderCallBack && $.isFunction(_config.renderCallBack) && _config.renderCallBack();  
61.           
62.         self._levelIndent(ulhtml);  
63.     },  
64.     /** 
65.      * 创建子menu 
66.      * @param {array}  
67.      * @param {lihtml} 
68.      */  
69.     _createSubMenu: function(submenu,lihtml){  
70.         var self = this,  
71.             _config = self.config,  
72.             _cache = self.cache;  
73.         var subUl = $('<ul></ul>'),  
74.             callee = arguments.callee,  
75.             subLi;  
76.           
77.         $(submenu).each(function(index,item){  
78.             var url =  'javascript:void(0)';  
79.             var menuFlag = item.menuflag;   
80.             var isLastNode = item.isLastNode;  
81.             var menuUrl = item.url;  
82.             var id = item.id;  
83.             var imgUrl = item.imgUrl;  
84.             //根据menuFlag 追加对应html  
85.             if("1" == menuFlag){  
86.                 if("" != menuUrl && "null" != menuUrl){  
87.                     subLi = $('<li class="first-ss"><a id="'+id+'" targetUrl="'+menuUrl+'"  οnclick="openMenu(this)">'+item.name+'</a></li>');  
88.                 }else{  
89.                     subLi = $('<li class="first-ss"><a id="'+id+'" href="'+url+'" >'+item.name+'</a></li>');  
90.                 }  
91.             }else if("2"  == menuFlag){   
92.                 //有url连接的二级菜单  
93.                 if("" != menuUrl && "null" != menuUrl){  
94.                     //二级菜单添加图标   没有则默认  
95.                     if("" != imgUrl && "null" != imgUrl){  
96.                         subLi = $('<li class="second-ss-nochild"><img src="'+imgUrl+'" height="20" width="20" class="left-ico" /><a id="'+id+'" menuFlag="'+menuFlag+'" targetUrl="'+menuUrl+'"  οnclick="openMenu(this)">'+item.name+'</a></li>');  
97.                     }else{  
98.                         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+'"  οnclick="openMenu(this)">'+item.name+'</a></li>');  
99.                     }  
100.                 }else{  
101.                     if("" != imgUrl && "null" != imgUrl){  
102.                         //subLi = $('<li class="second-ss"><img src="'+imgUrl+'" height="20" width="20" class="left-ico" /><a id="'+id+'" href="'+url+'" menuFlag="'+menuFlag+'"  οnclick=optMenu(this)>'+item.name+'2</a></li>');  
103.                         subLi = $('<li class="second-ss"><a id="'+id+'" href="'+url+'" menuFlag="'+menuFlag+'"  οnclick=optMenu(this)><img src="'+imgUrl+'" height="20" width="20" class="left-ico" />'+item.name+'</a></li>');  
104.                     }else{  
105.                         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+'"  οnclick=optMenu(this)>'+item.name+'</a></li>');  
106.                     }  
107.                 }  
108.             }else if("3"  == menuFlag){  
109.                 if("" != menuUrl && "null" != menuUrl){  
110.                     subLi = $('<li class="third-ss"><a id="'+id+'" menuFlag="'+menuFlag+'" targetUrl="'+menuUrl+'"  οnclick="openMenu(this)"><div class="secondimg"></div>'+item.name+'</a></li>');  
111.                 }else{  
112.                     subLi = $('<li class="third-ss"><a id="'+id+'" href="'+url+'"  menuFlag="'+menuFlag+'"  οnclick=optMenu(this)><div class="secondimg"></div>'+item.name+'</a></li>');  
113.                 }  
114.             }else{  
115.                 if("" != menuUrl && "null" != menuUrl){  
116.                     subLi = $('<li class="fourth"><a id="'+id+'"  menuFlag="'+menuFlag+'" targetUrl="'+menuUrl+'"  οnclick="openMenu(this)"'+item.name+'</a></li>');  
117.                 }else{  
118.                     subLi = $('<li class="fourth"><a id="'+id+'" href="'+url+'"  menuFlag="'+menuFlag+'"  οnclick=optMenu(this)>'+item.name+'</a></li>');  
119.                 }  
120.             }  
121.             if(item.submenu && item.submenu.length > 0) {  
122.   
123.                 $(subLi).children('a').prepend('<img src="resources/images/blank.gif" alt=""/>');  
124.                 callee(item.submenu, subLi);  
125.             }  
126.             $(subUl).append(subLi);  
127.         });  
128.         $(lihtml).append(subUl);  
129.     },  
130.     /** 
131.      *  
132.      */  
133.     _levelIndent: function(ulList){  
134.             var self = this,  
135.             _config = self.config,  
136.             _cache = self.cache,  
137.             callee = arguments.callee;  
138.          
139.         var initTextIndent = 2,  
140.             lev = 1,  
141.             $oUl = $(ulList);  
142.           
143.           while($oUl.find('ul').length > 0){  
144.             initTextIndent = parseInt(initTextIndent,10) + 5 + 'em';   
145.             $oUl.children().children('ul')  
146.                         .children('li').css("second-ss", initTextIndent);  
147.             $oUl = $oUl.children().children('ul');  
148.             lev++;  
149.          }  
150.                   
151.             if (!$.support.leadingWhitespace) {  
152.                 $(ulList).find('ul').slideUp();  
153.                 $(ulList).find('ul:first').slideUp();         
154.                     //  $(ulList).find('ul').hide();  
155.                 //$(ulList).find('ul:first').hide();                          
156.             }else{    
157.                 $(ulList).find('ul').slideUp();  
158.                 $(ulList).find('ul:first').slideUp();                 
159.           }  
160.     },  
161.     /** 
162.      * 绑定事件 
163.      */  
164.     _bindEnv: function(container) {  
165.         var self = this,  
166.             _config = self.config;  
167.   
168.         $('h5,a',container).unbind(_config.type);  
169.         $('h5,a',container).bind(_config.type,function(e){  
170.             var liClass = $(this).parent().get(0).className;  
171.             var thisLiObj = $(this).parent();  
172.             //一级菜单伸缩样式调整  
173.               if("first-tktitle" == liClass){  
174.                     //收缩菜单  
175.                 thisLiObj.removeClass().addClass("first-title");  
176.                       if ( !thisLiObj.is(':has(ul)') ) {  
177.                           return;  
178.                       }  
179.                   }else if("first-title" == liClass){  
180.                     //打开菜单  
181.                       thisLiObj.removeClass().addClass("first-tktitle");  
182.                       if ( !thisLiObj.is(':has(ul)') ) {  
183.                           return;  
184.                       }  
185.                   }       
186.             if($(this).siblings('ul').length > 0) {  
187.                 $(this).siblings('ul').slideToggle('slow').end().children('img').toggleClass('unfold');  
188.             }  
189.         //单击菜单时自动伸缩其他菜卿  
190.          //$(this).parent('li').siblings().find('ul').hide()  
191.              //    .end().find('img.unfold').removeClass('unfold');  
192.             //_config.clickItemCallBack && $.isFunction(_config.clickItemCallBack) && _config.clickItemCallBack($(this));  
193.   
194.         });  
195.     }  
196.  };  
197.   
198.   
199. function optMenu(obj){  
200.       slidingBox();  
201.       //判断当前菜单是否包含有子菜单  
202.       var liClass = $(obj).parent().attr("class");  
203.       var menuFlag = $(obj).attr("menuFlag");  
204.       //不同级菜单的伸缩样式改变  
205.       if("1" == menuFlag){   
206.           if("first-tktitle" == liClass){  
207.                 //收缩菜单  
208.                  $(obj).parent().removeClass().addClass("first-title");  
209.                   if ( !$(obj).parent().is(':has(ul)') ) {  
210.                       return;  
211.                   }else{  
212.                     //隐藏  
213.                     //$(obj).parent().find("ul").slideUp();  
214.                   }  
215.               }else{  
216.                 //打开菜单  
217.                  $(obj).parent().removeClass().addClass("first-tktitle");  
218.                   if ( !$(obj).parent().is(':has(ul)') ) {  
219.                       return;  
220.                   }else{  
221.                     //隐藏  
222.                     //  $(obj).parent().find("ul").slideDown();  
223.                   }  
224.               }       
225.       }else if ("2" == menuFlag){  
226.               if("second-tk" == liClass){  
227.                 //收缩菜单  
228.                  $(obj).parent().removeClass().addClass("second-ss");  
229.                   if ( !$(obj).parent().is(':has(ul)') ) {  
230.                       return;  
231.                   }else{  
232.                     //隐藏  
233.                     //$(obj).parent().find("ul").slideUp();  
234.                   }  
235.               }else{  
236.                 //打开菜单  
237.                  $(obj).parent().removeClass().addClass("second-tk");  
238.                   if ( !$(obj).parent().is(':has(ul)') ) {  
239.                       return;  
240.                   }else{  
241.                     //隐藏  
242.                     //  $(obj).parent().find("ul").slideDown();  
243.                   }  
244.               }       
245.       }else if ("3" == menuFlag){  
246.               if("third-tk" == liClass){  
247.                 //收缩菜单  
248.                  $(obj).parent().removeClass().addClass("third-ss");  
249.                   if ( !$(obj).parent().is(':has(ul)') ) {  
250.                       return;  
251.                   }else{  
252.                     //隐藏  
253.                     //$(obj).parent().find("ul").slideUp();  
254.                   }  
255.               }else{  
256.                 //打开菜单  
257.                  $(obj).parent().removeClass().addClass("third-ss");  
258.                   if ( !$(obj).parent().is(':has(ul)') ) {  
259.                       return;  
260.                   }else{  
261.                     //隐藏  
262.                     //  $(obj).parent().find("ul").slideDown();  
263.                   }  
264.               }     
265.         
266.       }else if ("4" == menuFlag){  
267.           
268.       }  
269. }  

1.2.2.jsp中调用处

newIndex.jsp：

[html]  view plain  copy

1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
2. <%  
3. String path = request.getContextPath();  
4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";  
5. %>  
6. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
7. <html>  
8. <head>  
9.     <base href="<%=basePath%>">  
10.     <title>系统管理</title>  
11.      <link rel="stylesheet" type="text/css" href="resources/css/style.css"/>  
12.      <link rel="stylesheet" type="text/css" href="resources/css/m_style.css"/>  
13.      <script type="text/javascript" src="resources/js/jquery.min.js"></script>  
14.      <script type="text/javascript" src="resources/js/tabMenuEvent.js"></script>  
15.      <script type="text/javascript" src="resources/js/common.js"></script>  
16.      <script type="text/javascript">  
17.         var ctx = '<%=request.getContextPath() %>';      
18.         var loginCode = '<%=request.getAttribute("loginCode") %>';  
19.         var isAdmin = "1";  
20.         var timePeriod = '<%=request.getAttribute("timePeriod") %>';  
21.         var name = '<%=request.getAttribute("name") %>';  
22.         var userId = '<%=request.getAttribute("userId") %>';  
23.      </script>  
24.      <script type="text/javascript">  
25.         var menuInfo = <%=request.getAttribute("menuObj") %>;  
26.         var titleArray = new Array();  
27.         $(function(){  
28.             new AccordionMenu({menuArrs:menuInfo});  
29.         });  
30.      </script>  
31.      <script type="text/javascript">  
32.         //加载欢迎界面  
33.         $(document).ready(function(){  
34.             //隐藏纵向滚动条  
35.             document.body.parentNode.style.overflowY = "hidden";  
36.             $("#titleBegin").bind("click", function () {  
37.                 $("#cTitle").find("ul").children().removeClass("selected");  
38.                 $("#titleBegin").addClass("homeFocus");  
39.             });   
40.               
41.         });    
42.     </script>  
43.        
44.        
45. </head>  
46.  <body>  
47.   <div class="top">  
48.     <div class="top-left">  
49.         <img src="resources/m_images/logo.png"/>  
50.     </div>  
51.     <div class="top-right">  
52.         <div class="guideBar">  
53.             <ul><li><span class="name">${name}   您好！</span></li>  
54.                 <li><a href="javascript:void(0)" class="icon-notice" title="消息(开发中)"><span class="dBlock">8</span></a></li>  
55.                 <li><a href="javascript:void(0)" class="icon-setup" title="配置(开发中)"></a></li>  
56.                 <li><a class="icon-exit" id="config" href="javascript:void(0)" title="退出" onClick="return confirmOut()" ></a></li>  
57.             </ul>  
58.         </div>  
59.     </div>  
60.   </div>   
61.     
62.   <!-- tab begin-->  
63.   <div class="cTitle" id="cTitle">  
64.     <ul id="cTitleUl">  
65.         <li> <a href="javascript:void(0)" class="home" id="home" targetUrl="<%=basePath%>main/profile/welcome.action" onclick="openMenu(this)" sourcemenu="home">首页</a></li>  
66.     </ul>  
67.   </div>  
68.   <!-- tab end-->  
69.     
70.   <!-- 左侧菜单 -->  
71.   <div class="sidebar">  
72.     <div class="nav-tt"><a href="javascript:void(0)" onclick="onDevelop()">快捷操作</a><a href="javascript:void(0)" onclick="onDevelop()">栏目导航</a></div>  
73.     <div class="subnav" style="height:570px"></div>  
74.   </div>  
75.     
76.   <!-- 菜单牵引条 -->  
77.   <div class="sul"  id="menuMove" onclick=moveLeftDiv()><span><img id="moveImg" src="resources/images/ico9.png" height="62" width="10" /></span></div>  
78.     
79.   <!-- 右侧菜单条 -->   
80.   <div class="con" id="toolbarId">  
81.   </div>  
82.         
83.   <!-- 主体 -->     
84.   <div class="content" id="container">  
85.     <iframe id="homecontentDiv" name="homecontentDiv" src="<%=basePath%>main/profile/welcome.action" width="99%" height="600px" frameborder="0" scrolling="no">  
86.     </iframe>  
87.   </div>  
88. </body>  
89. </html>  

二:iframe实现tab切换

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

newIndex.jsp:

[javascript]  view plain  copy

1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
2. <%  
3. String path = request.getContextPath();  
4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";  
5. %>  
6. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
7. <html>  
8. <head>  
9.     <base href="<%=basePath%>">  
10.     <title>系统管理</title>  
11.      <link rel="stylesheet" type="text/css" href="resources/css/style.css"/>  
12.      <link rel="stylesheet" type="text/css" href="resources/css/m_style.css"/>  
13.      <script type="text/javascript" src="resources/js/jquery.min.js"></script>  
14.      <script type="text/javascript" src="resources/js/tabMenuEvent.js"></script>  
15.      <script type="text/javascript" src="resources/js/common.js"></script>  
16.      <script type="text/javascript">  
17.         var ctx = '<%=request.getContextPath() %>';      
18.         var loginCode = '<%=request.getAttribute("loginCode") %>';  
19.         var isAdmin = "1";  
20.         var timePeriod = '<%=request.getAttribute("timePeriod") %>';  
21.         var name = '<%=request.getAttribute("name") %>';  
22.         var userId = '<%=request.getAttribute("userId") %>';  
23.      </script>  
24.      <script type="text/javascript">  
25.         var menuInfo = <%=request.getAttribute("menuObj") %>;  
26.         var titleArray = new Array();  
27.         $(function(){  
28.             new AccordionMenu({menuArrs:menuInfo});  
29.         });  
30.      </script>  
31.      <script type="text/javascript">  
32.         //加载欢迎界面  
33.         $(document).ready(function(){  
34.             //隐藏纵向滚动条  
35.             document.body.parentNode.style.overflowY = "hidden";  
36.             $("#titleBegin").bind("click", function () {  
37.                 $("#cTitle").find("ul").children().removeClass("selected");  
38.                 $("#titleBegin").addClass("homeFocus");  
39.             });   
40.               
41.         });    
42.     </script>  
43.        
44.        
45. </head>  
46.  <body>  
47.   <div class="top">  
48.     <div class="top-left">  
49.         <img src="resources/m_images/logo.png"/>  
50.     </div>  
51.     <div class="top-right">  
52.         <div class="guideBar">  
53.             <ul><li><span class="name">${name}   您好！</span></li>  
54.                 <li><a href="javascript:void(0)" class="icon-notice" title="消息(开发中)"><span class="dBlock">8</span></a></li>  
55.                 <li><a href="javascript:void(0)" class="icon-setup" title="配置(开发中)"></a></li>  
56.                 <li><a class="icon-exit" id="config" href="javascript:void(0)" title="退出" onClick="return confirmOut()" ></a></li>  
57.             </ul>  
58.         </div>  
59.     </div>  
60.   </div>   
61.     
62.   <!-- tab begin-->  
63.   <div class="cTitle" id="cTitle">  
64.     <ul id="cTitleUl">  
65.         <li> <a href="javascript:void(0)" class="home" id="home" targetUrl="<%=basePath%>main/profile/welcome.action" οnclick="openMenu(this)" sourcemenu="home">首页</a></li>  
66.     </ul>  
67.   </div>  
68.   <!-- tab end-->  
69.     
70.   <!-- 左侧菜单 -->  
71.   <div class="sidebar">  
72.     <div class="nav-tt"><a href="javascript:void(0)" οnclick="onDevelop()">快捷操作</a><a href="javascript:void(0)" οnclick="onDevelop()">栏目导航</a></div>  
73.     <div class="subnav" style="height:570px"></div>  
74.   </div>  
75.     
76.   <!-- 菜单牵引条 -->  
77.   <div class="sul"  id="menuMove" οnclick=moveLeftDiv()><span><img id="moveImg" src="resources/images/ico9.png" height="62" width="10" /></span></div>  
78.     
79.   <!-- 右侧菜单条 -->   
80.   <div class="con" id="toolbarId">  
81.   </div>  
82.         
83.   <!-- 主体 -->     
84.   <div class="content" id="container">  
85.     <iframe id="homecontentDiv" name="homecontentDiv" src="<%=basePath%>main/profile/welcome.action" width="99%" height="600px" frameborder="0" scrolling="no">  
86.     </iframe>  
87.   </div>  
88. </body>  
89. </html>  

tabMenuEvent.js

[javascript]  view plain  copy

1. /** 
2.  * 后台管理主框架菜单导航与快捷操作切换功能 
3.  * @param displayId:需要显示的div Id 
4.  * @param hiddenId:需要隐藏的div Id 
5.  * @auther sww 
6.  */  
7. var tabClick = function (displayId, hiddenId){  
8.     $("#" + displayId + "").attr("class", "block");  
9.     $("#" + hiddenId + "").attr("class", "no");  
10. }  
11.   
12. /** 
13.  * 左侧菜单点击产生tab tab点击 
14.  * @param {Object} dom 
15.  */  
16. var openMenu = function(e){  
17.     var menuId = e.id || $(e).attr("sourcemenu");  
18.     var targetUrl = $(e).attr("targetUrl") || $(e).attr("sourceurl");  
19.     var flag = true;  
20.     var $menuObj = $("#" + menuId);  
21.   
22.     if(!judugTitleAccount()){  
23.         alert("最多只可以点击八个界面，请关闭多余界面");  
24.         return false;  
25.     }  
26.       
27.     //titleArray tab id集合  
28.     var flag = true;  
29.     if(titleArray.indexOf(menuId) > -1){  
30.         //包含元素，重定向到该元素  
31.         flag = false;  
32.     }else{  
33.         titleArray.push(menuId);  
34.     }  
35.       
36.     //控制tab样式false:存在      true:不存在  
37.     $("#titleBegin").removeClass("homeFocus");  
38.     $.each($("#cTitleUl>li"),function(index, i){  
39.         if($(i).children("a").text() == $menuObj.text()){  
40.             flag = false;  
41.             $(i).attr('class','selected');  
42.         } else {  
43.             $(i).attr('class','');  
44.         }  
45.     });  
46.       
47.     //先隐藏所有的iframe的主内容  
48.     $.each($("#container>iframe"),function(index,i){  
49.         $(i).hide();  
50.     })  
51.       
52.     //此菜单为第一次打开,则对应在container中创建一个展示该菜单内容的iFrame,然后加载对应的页面  
53.     if(flag && menuId != 'home'){  
54.         if($menuObj.text() != undefined && $menuObj.text() != ''){  
55.             $("#cTitleUl").append("<li class=\"selected\"><a href=\"javascript:void(0);\" οnclick=\"openMenu(this)\" class=\"selected\" sourcemenu=\""+menuId+"\" sourceurl=\""+targetUrl+"\">" + $menuObj.text() + "</a><b οnclick=\"closeMenuOpen('"+menuId+"')\"></b></li>");  
56.             var childIframe = $('<iframe frameborder="0" width="100%" height="100%" scrolling="yes" name="'+ menuId+'contentDiv" id="'+ menuId+'contentDiv" src="'+targetUrl+'"></iframe>')  
57.             childIframe.appendTo($("#container"));  
58.         }  
59.     } else{//如果不是第一次打开,则直接显示该div  
60.         $("#" + menuId + "contentDiv").show();  
61.     }   
62. }  
63.   
64. /** 
65.  * 关闭打开的类似tab页面 
66.  * @param {Object} menuId 
67.  */  
68. function closeMenuOpen(menuId){  
69.     //前一tab  
70.     var preTab = null;  
71.     var liNum = 0;  
72.     $.each($("#cTitleUl>li"),function(index, i){  
73.         liNum ++;  
74.         if(index != 0){  
75.             //找到当前要关闭的tab             
76.             if($(i).children("a").attr('sourceMenu') == menuId){  
77.                 //将tab对应的iFrame删除                 
78.                 $("#" + menuId + "contentDiv").remove();  
79.                 //将tab的ID从数组中删除  
80.                 var deleteTableIndex = titleArray.indexOf(menuId);  
81.                 titleArray.splice(deleteTableIndex,1);  
82.                 if($(i).attr('class')== 'selected'){//当前要关闭的页面正处于展示中状态,则删除后将其前一个tab展现  
83.                     $(preTab).attr('class','selected');  
84.                     $("#" + $(preTab).children("a").attr('sourcemenu') + "contentDiv").show();  
85.                 }  
86.                 //将tab删               
87.                 $(i).remove();  
88.             }  
89.         }  
90.         preTab = i;  
91.     });  
92.     //tab为2  
93.     if(liNum == 2){  
94.         $("#homecontentDiv",parent.document).show();  
95.     }  
96. }  
97.   
98. /** 
99.  * 从iframe界面中打开页面 
100.  * @param {Object} targetUrl：目标url,tabName:tab名,menuId:iframe中按钮ID 
101.  */  
102. function openTabFromIFrame(targetUrl, tabName, menuId){  
103.     var flag = true;//标识是否全新打开  
104.     if(parent.titleArray.indexOf(menuId) > -1){  
105.         //包含元素  
106.         flag = false;  
107.     }else{  
108.         parent.titleArray.push(menuId);  
109.     }  
110.       
111.       
112.     $.each($("#cTitleUl>li", parent.document),function(index, i){  
113.         //先隐藏所有主内容区域内容  
114.         $("#" + $(i,parent.document).children("a").attr('sourceMenu') + 'contentDiv', parent.document).attr("style","display:none;");  
115.           
116.         if(menuId != undefined && $(i,parent.document).attr('source') == menuId){  
117.             $(i, parent.document).attr('class','selected');  
118.             flag = false;  
119.         }else{  
120.             $(i, parent.document).attr('class','');  
121.         }  
122.     });  
123.       
124.     if(!flag){//不是第一次打开,直接show  
125.         $("#" + menuId + "contentDiv",parent.document).show();  
126.     } else {  
127.         //用时间戳做打开页面标识  
128.         var timestamp = new Date().getTime();   
129.         $("#cTitleUl", parent.document).append("<li class=\"selected\" source=\""+menuId+"\"><a href=\"javascript:void(0);\" οnclick=\"openTabFromIFrame('','','" + menuId + "')\" class=\"selected\" sourceMenu=\""+menuId+"\">" + tabName + "</a><b οnclick=\"closeMenuOpen('"+menuId+"')\"></b></li>");  
130.         var childIframe = $('<iframe frameborder="0" width="100%" height="100%" scrolling="yes" name="'+ menuId+'contentDiv" id="'+ menuId+'contentDiv" src="'+targetUrl+'"></iframe>')  
131.         childIframe.appendTo($("#container", parent.document));  
132.     }  
133. }  
134.   
135. /** 
136.  * 从iframe界面中点击关闭页面 
137.  * @param {Object} targetTabName:调到的tab名,menuId：要关闭的tab的ID，passObject：传递的参数(可空) 
138.  * @returns 返回的参数 returnIframeContentName(返回重新加载页面的iframe的name) 
139.  */  
140. function closeTabFromIFrame(targetTabName, menuId, passObject){  
141.       
142.     //先隐藏所有的iframe的主内容  
143.     $.each($("#container>iframe",parent.document),function(index,i){  
144.         $(i).hide();  
145.     })  
146.       
147.     var deleteTableIndex = parent.titleArray.indexOf(menuId);  
148.     parent.titleArray.splice(deleteTableIndex,1);  
149.       
150.       
151.     //处理tab  
152.     var returnIframeContentName;  
153.     $.each($("#cTitleUl>li",parent.document),function(index, i){  
154.         if($(i).children("a").text() == targetTabName){  
155.             $(i).attr('class','selected');  
156.             $("#" + $(i).children("a").attr('sourcemenu') + "contentDiv",parent.document).show();  
157.             returnIframeContentName = $(i).children("a").attr('sourcemenu') + "contentDiv";  
158.         } else {  
159.             $(i).attr('class','');  
160.         }  
161.         if($(i).children("a").attr("sourceMenu") == menuId){  
162.             //将tab删               
163.             $(i).remove();  
164.         }  
165.     });  
166.     return returnIframeContentName;  
167. }  

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

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

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

谷歌下本人测试

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

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

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