考勤系統代碼分析——主頁布局easyui框架

考勤系統主頁的布局用的是easyui的Layout控件

Layout:布局容器有5個區域：北、南、東、西和中間。中間區域面板是必須的，邊緣的面板都是可選的。每個邊緣區域面板都可以通過拖拽其邊框改變大小，也可以點擊折疊按鈕將面板折疊起來。布局可以進行嵌套，用戶可以通過組合布局構建復雜的布局結構。

<div id="cc" class="easyui-layout" style="width:600px;height:400px;">   
    <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>   
    <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>   
    <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>   
    <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>   
    <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>   
</div>  

頁面展示：

我們的考勤系統就是采用layout控件進行布局，還需要tabs選項卡

考勤系統我們僅需要上部，左部，中部

<!-- 布局 -->
<div id="cc" class="easyui-layout" style="width:100%;height:600px;">   
    <!-- 頂部 -->
    <div data-options="region:'north',split:true," style="height:158px;">
        <div style="width:100%;height:100px;margin-top:0px;">
          <img alt="" src="images/head.jpg" width="100%">
       </div>
       <!-- 頂部導航標簽 -->
       <div style="background-color:#393755;width:100%;height:50px;margin-top:0px;">
          <a href="#"><div class="caidan">人事管理模塊</div></a>
          <a href="#"><div class="caidan">考勤管理模塊</div></a>
          <a href="#"><div class="caidan">招聘管理模塊</div></a>
          <a href="#"><div class="caidan">培訓管理模塊</div></a>
          <a href="#"><div class="caidan">薪酬管理模塊</div></a>
       </div>
    </div> 
    <!-- 底部 -->  
    <div data-options="region:'south',split:true" style="height:20px;">
    <p> 漢企瑪雅考勤系統</p>
    </div> 
    <!-- 左側導航 -->   
    <div data-options="region:'west',title:'導航菜單',split:true" style="width:15%;">
    <!-- 導航菜單 -->
    <div id="aa" class="easyui-accordion" style="width:100%;height:100%;">   
    <div title="基本信息/打卡" style="overflow:auto;">   
    <a class="easyui-linkbutton" id="add_tab" href="#" style="width:100%" title="dakaMain.jsp">上下班打卡</a><br> 
    <a class="easyui-linkbutton" href="#" style="width:100%" data-options="iconCls:'icon-search'" title="shangxiabanBiaoZhun.jsp">上下班標准</a><br>        
    </div>   
    <div title="查詢考勤信息" style="overflow:auto;">   
    <a class="easyui-linkbutton" href="#" style="width:100%" data-options="iconCls:'icon-ok'" title="rikaoqinxinxi.jsp">日考勤信息</a><br>        
    <a class="easyui-linkbutton" href="#" style="width:100%" data-options="iconCls:'icon-undo'" title="yuekaoqinxinxi.jsp">月考勤信息</a><br> 
    <a class="easyui-linkbutton" href="#" style="width:100%" data-options="iconCls:'icon-man'" title="jiabanxinxi.jsp">加班信息</a><br> 
    <a class="easyui-linkbutton" href="#" style="width:100%" data-options="iconCls:'icon-add'" title="tongjiyuekaoqin.jsp">統計月考勤</a><br>
    </div>   
    <div title="請假申請">   
    <a class="easyui-linkbutton" href="#" style="width:100%" data-options="iconCls:'icon-tip'" title="qingjiaxinxi.jsp">請假信息</a><br>
    <a class="easyui-linkbutton" href="#" style="width:100%" data-options="iconCls:'icon-ok'" title="Qingjiashenqing.jsp">請假申請</a><br>       
    </div>   
    </div>  
    
    </div>  
    <!-- 中部內容顯示 --> 
    <div data-options="region:'center',title:'信息展示'" style="padding:5px;background:#eee;">
    <!-- 標簽頁 -->
    <div id="tt" class="easyui-tabs" style="width:100%;height:100%;background:url(images/background.png)"></div>
    </div>   
</div>

左側導航我們使用linkbutton來建立標簽，title指向要顯示的界面，通過jQuery來控制點擊事件

 <a class="easyui-linkbutton" href="#" style="width:100%" data-options="iconCls:'icon-ok'" title="rikaoqinxinxi.jsp">日考勤信息</a><br>

tabs選項卡：選項卡顯示一批面板。但在同一個時間只會顯示一個面板。每個選項卡面板都有頭標題和一些小的按鈕工具菜單，包括關閉按鈕和其他自定義按鈕。

<!-- 標簽頁 -->
    <div id="tt" class="easyui-tabs" style="width:100%;height:100%;background:url(images/background.png)"></div>

使用jQuery來控制標簽頁的打開

$(".easyui-linkbutton").click(function(){
        // 獲取組件的屬性和值    
        var str = $(this).text();
        var tab_href = $(this).attr("title");
            if($("#tt").tabs('exists',str)){
                $("#tt").tabs('select',str);
            }else{
                $("#tt").tabs('add',{title:str,closable:true,//href:tab_href
                content:"<iframe width='100%' frameborder='0' height='100%' src='"+ tab_href +"'></iframe>"    
                });
                }
        });

為linkbutton添加點擊事件，首先我們要獲取linkbutton的text值，傳給tabs,使得新打開的標簽頁與linkbutton的名字相同，對應到相應的頁面上，其次再控制新的標簽頁。