easyui的tab 

www.java1234.com java学习的好去处！

<script type="text/javascript">
    $(function(){
        //数据
        var treeData=[{
            text:"运营部",
            children:[{
                text:"班级信息管理",
                attributes:{
                    url:"gradeInfoManage.jsp"
                }
            },{
                text:"学生信息管理",
                attributes:{
                    url:"studentInfoManage.jsp"
                }
                
            }]
        }];
        
        //实例化树菜单
        $("#tree").tree({
            data:treeData,
            lines:true,
            onClick:function(node){
                if(node.attributes){
                    openTab(node.text,node.attributes.url);
                }
            }
        });
        
        //新增tab
        function openTab(text,url){
            if($("#tabs").tabs('exists',text)){
                $("#tabs").tabs('select',text);
            }else{
                var content="<iframe frameborder='0' scrolling='auto' style='width:100%;height:100%;' src="+url+"></iframe>";
                $("#tabs").tabs('add',{
                    title:text,
                    closable:true,
                    content:content
                });
            }
        }
        
    });


</script>

 调用jquery的布局：分 【北 中 西 南】四个方向 基本上都是 DIV 套  DIV

<body class="easyui-layout">

　　<div region="north" style="height:80px ;background-color: #E0EDFF;overflow-y:hidden;"></div>

　　<div region="center"><div class="easyui-tabs" fit="true" border="false" id="tabs"></div></div>

下面是完整的代码：

<body class="easyui-layout">

    <div region="north" style="height:80px ;background-color: #E0EDFF;overflow-y:hidden;">
        <dir align="left" style="width:80%;float:left;"><img src="images/main1.jpg"></dir>
        <dir style="padding-top: 30px; padding-right: 20px;">当前用户：&nbsp;<font color="red">${currentUser.userName}</font></dir>
    </div>
    <div region="center">
        <div class="easyui-tabs" fit="true" border="false" id="tabs">
            <div title="首页">
                <div align="center" style="padding-top: 100px"><font color="red" size="10">欢迎使用</font></div>
            </div>
        </div>
    </div>
    <div region="west" style="width:150px;" title="导航菜单" split="true">
        <ul id="tree"></ul>
    </div>
    <div region="south" style="height:25px;" align="center">版权所有<a href="http://www.baidu.com">www.baidu.com</a></div>
    
</body>

 

 

posted on 2013-06-17 22:57  鱼东鱼  阅读(579)  评论(0)  编辑  收藏  举报

导航