代码改变世界

jQuery easyUI页面布局

2016-11-28 10:32  宇航员舒克  阅读(389)  评论(0)    收藏  举报 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>


<!-- 1.导jQuery的JS包 -->
<script type="text/javascript" src="jquery-easyui-1.4.4/jquery.min.js"></script>
<!-- 2.导入css资源 -->
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.4/themes/default/easyui.css">
<!-- 3.导入图标资源 -->
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.4/themes/icon.css">
<!--4. EasyUI的js包 -->
<script type="text/javascript" src="jquery-easyui-1.4.4/jquery.easyui.min.js"></script>
<!-- 5.本地语言 -->
<script type="text/javascript" src="jquery-easyui-1.4.4/locale/easyui-lang-zh_CN.js"></script>

<script type="text/javascript">
//创建linkbutton打开新标签页的按钮
$(function(){

    $(".easyui-linkbutton").click(
            function()
            {
    var tab_title=$(this).text();//this表示所点的，所选的那个按钮            
        //alert(tab_title);                        
    var tab_href=$(this).attr("title");            
                
                if($("#tt").tabs("exists",tab_title))
                    {
                    $("#tt").tabs("select",tab_title);
                    }
                else
                    {
                    $("#tt").tabs('add',    
                            {
                                title:tab_title,
                                closable:true,
                                href:tab_href
                            });
                    }
            });
});


</script>
</head>
<body class="easyui-layout">
<!-- split是否可以拖动大小（=true/fasle）；title是否把标题栏去掉（删除为去掉）；collapsible是去掉折叠按钮（=true/fasle） -->
    <div data-options="region:'north',split:false" style="height:100px;"></div>   
    <div data-options="region:'south',title:'底部',split:true" style="height:100px;"></div>   
    <div data-options="region:'east',iconCls:'icon-reload',title:'工具',split:true" style="width:100px;"></div>    
    <div data-options="region:'west',split:false" style="width:200px;">  
    <div id="ac" class="easyui-accordion" data-options="fit:true">
    <br>
    <div title="员工信息" selected="true">
    <a class="easyui-linkbutton" href="#" style="width:100%;margin-top:10px;">新标签页</a>
    <a class="easyui-linkbutton" href="#" style="width:100%;margin-top:10px;" title="adduser.html">添加员工  </a>
    <a class="easyui-linkbutton" href="#" style="width:100%;margin-top:10px;" title="deleteuser.html">删除员工 </a>
    <a class="easyui-linkbutton" href="#" style="width:100%;margin-top:10px;"title="edituser.html">修改员工</a>
    
    
    
    
    
    
    </div>
    <div title="考勤信息" >这是考勤信息模块</div>
    <div title="考勤信息" >这是考勤信息模块</div>
    </div>

    </div>   
    <div data-options="region:'center', title:'主窗口'" style="padding:5px;background:#eee;" >
    <div id="tt" class="easyui-tabs"  fit='false'">   
    <div title="Tab1" style="padding:20px;">   
        tab1    
    </div>   
    <div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;">   
        tab2    
    </div>   
    <div title="Tab3" data-options="iconCls:'icon-reload',closable:true,selected:true" style="padding:20px;">   
        tab3    
    </div>   
    </div>  
    </div>   


</body>
</html>