jQuery EasyUi实现tab页

在项目中往往会遇到这种情况,点击菜单,上面出现tab页,下次如果再要访问这个菜单下面的数据就不用重新加载,以下代码是我这次在项目中用jQuery EasyUI实现的tab页:

在jsp中需要引入的重要js:

<link href="<%=request.getContextPath()%>/common/jquery-easyui/themes/default/easyui.css" rel="stylesheet" type="text/css" />  
<link href="<%=request.getContextPath()%>/common/jquery-easyui/themes/icon.css" rel="stylesheet" type="text/css" />  
<script src="<%=request.getContextPath()%>/common/js/jquery.js" type="text/javascript"></script>  
<script src="<%=request.getContextPath()%>/common/jquery-easyui/jquery.easyui.min.js" type="text/javascript"></script> 


接下来是jsp中的tab页div:
    <div id="phone_list_date">  
                <div id="tab" class="easyui-tabs">  
                </div>  
            </div>  

以下是js中对应的一些代码,菜单树使用的也是jquery EasyUI实现的

//加载菜单树  
    $('#tt').tree({  
        data: menuData,  
        loadFilter: function(rows) {  
            return convert(rows);  
        },  
        onClick : function(node) {   //点击onclick事件,查询出对应的数据  
            addTablePanel(node);   //添加table页  
            onclickMenu(node);   //数据加载到table页中  
        }  
    }); 

下面代码是向页面中添加tab页的核心代码:

    /** 
     * 点击菜单树添加table页 
     */  
    function addTablePanel(node){  
         if(isTabExists(node.text)){  
              $('#tab').tabs('select',node.text);//选中当前tabs  
         }else{  
             $('.multipleAnalyse_iframe').removeClass("multipleAnalyse_iframe").addClass('xx');  
             $('#tab').tabs('add',{  
                 title:node.text,  
                 content:"<iframe class='multipleAnalyse_iframe' style='height:100%; width:100%'></iframe>", //每个tab页里面添加一个iframe标签  
                 closable:true  
             });  
             $('.multipleAnalyse_iframe').height($('#phone_list_date').height()-29);  
         }  
    }  
    /** 
     * 判断tab页是否存在 
     * @param title 
     * @returns 
     */  
    function isTabExists(title){  
        return $('#tab').tabs('exists',title);  
    }  

下面代码就是向tab页里面添加数据啦,这里添加的又是jsp页面

    /** 
     * 根据不同的菜单,向iframe里面添加不同的jsp页面 
     * @param node 
     */  
    function onclickMenu(node){  
        var nodeId = node.id;  
        switch(nodeId){  
        case 93: //DT用户跟踪  
            $(".multipleAnalyse_iframe").attr("src",path+"/multipleAnalyse/jsp/extendsBusinessAnalyse.jsp");  
            <span style="white-space:pre">    </span>$.messager.alert('提示','演示版暂时未提供该功能演示,请谅解!!');  
            break;  
        }  
    }  




你可能感兴趣的:(jQuery EasyUi实现tab页)