程序博客网 > 易宠软件 登录

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

来源：互联网 发布：易宠软件 登录 编辑：程序博客网 时间：2024/05/16 04:12
 

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

标签： jqueryiframe
2015-03-24 10:52 507人阅读 评论(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+'" onclick=optMenu(this) /><h5>'+item.name+'</h5></li>');  
  49.             }else{            
  50.                 lihtml = $('<li class="first-title"><a href="#" menuFlag="'+item.menuflag+'"  onclick=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+'"  onclick="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+'"  onclick="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+'"  onclick="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+'"  onclick=optMenu(this)>'+item.name+'2</a></li>');  
  103.                         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>');  
  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+'"  onclick=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+'"  onclick="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+'"  onclick=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+'"  onclick="openMenu(this)"'+item.name+'</a></li>');  
  117.                 }else{  
  118.                     subLi = $('<li class="fourth"><a id="'+id+'" href="'+url+'"  menuFlag="'+menuFlag+'"  onclick=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" 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>  





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);\" onclick=\"openMenu(this)\" class=\"selected\" sourcemenu=\""+menuId+"\" sourceurl=\""+targetUrl+"\">" + $menuObj.text() + "</a><b onclick=\"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);\" onclick=\"openTabFromIFrame('','','" + menuId + "')\" class=\"selected\" sourceMenu=\""+menuId+"\">" + tabName + "</a><b onclick=\"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跨域访问更加复杂不允许。


0 0
易宠软件 登录 易宠软件 登录
原创粉丝点击
热门IT博客
mac .ds store 隐藏mac .ds store 隐藏
matlab矩阵中的最小值matlab矩阵中的最小值
免费的网络验证
克里诺林裙淘宝店铺
淘宝无线端店铺装修
房价会如何变化 知乎
图片怎么上传淘宝店铺
关键词数据库
平面广告制作软件
网络教育本科含金量
java微信卡券开发实例
小米移动4g网络
免费的工资条软件
手机淘宝 我的尺码
电气仿真软件
毛笔字 知乎
turtlebot编程
管理业务员的软件
一键装机软件
组策略隐藏网络
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 第113页 浆果儿超市无删减视频 红猫网站大本营 血腥帝国 第1话 玫瑰凋零 国产 113页 慕初晴盛煜宸目录 华夏英雄传妃子爆衣图 你会萌萌吗 98年小可爱毛 窄红 折一枚针 终结者6在线播放 你会萌萌吗歌曲试听 jzjzjz日本人免费观看 色两酷电影院 妹妹影院。 浆果儿在线 sw274满员电车女 fog 漫漫何其多 爱原翼在线 18.06-01血腥帝国 第1话-2 玫瑰凋零 大香煮蕉伊在线网 色酷酷 浆果儿超市 偷伯自伯80页 终结者6国语版完整免费 天天天澡天天天碰青青女主播 林羽全书目录目录 大香煮蕉伊 www.4438x 浮力国产第三页 欧美老妇 浮力国产 久99久女女精品免费观看15 红猫大本营2 热播女美 1-99页萝莉 浆果儿6部 浮力第一页国产 亚洲综人网免费 经典家庭伦txt 1769资源网

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里