EasyUI学习第四篇：Layout布局

• 学会使用Layout组件布局
• accordion手风琴组件
• tabs组件的使用

Layout 布局

依赖
panel
resizable

<div id="cc" class="easyui-layout" style="width:600px;height:400px;">  

     <div region="north" title="North Title" split="true" style="height:100px;"></div>  

     <div region="south" title="South Title" split="true" style="height:100px;"></div>  

     <div region="east" iconCls="icon-reload" title="East" split="true" style="width:100px;"></div>  

    <div region="west" split="true" title="West" style="width:100px;"></div>  

    <div region="center" title="center title" style="padding:5px;background:#eee;"></div>  

 </div>  

Accordion 手风琴

  <div id="aa" class="easyui-accordion" style="width:300px;height:200px;">  
      <div title="Title1" iconCls="icon-save" style="overflow:auto;padding:10px;">  
         <h3 style="color:#0099FF;">Accordion for jQuery</h3>  
        <p>Accordion is a part of easyui framework for jQuery.    
         It lets you define your accordion component on web page more easily.</p>  
     </div>  
     <div title="Title2" iconCls="icon-reload" selected="true" style="padding:10px;">  
        content2   
    </div>  
    <div title="Title3">  
         content3   
    </div>  
 </div> 

Tabs 标签页/选项卡

<div id="tt" class="easyui-tabs" style="width:500px;height:250px;">  
     <div title="Tab1" style="padding:20px;display:none;">  
          tab1   
      </div>  
      <div title="Tab2" closable="true" style="overflow:auto;padding:20px;display:none;">  
         tab2   
     </div>  
    <div title="Tab3" iconCls="icon-reload" closable="true" style="padding:20px;display:none;">  
         tab3   
    </div>  
 </div>  

需求：点击左边菜单，在右边展示

<div id="cc" class="easyui-layout" fit=true
    style="width: 100%; height: 1000px">

    <div region="north" title="North Title" split="true"
        style="height: 100px;"></div>

    <div region="west" split="true" title="菜单" iconCls="icon-ok"
        style="width: 200px;">
        <div id="aa" class="easyui-accordion"
            style="width: 300px; height: 200px;" fit=true>

            <div title="用户管理" iconCls="icon-save"
                style="overflow: auto; padding: 10px;">
                <div>
                    <a title="001_message.jsp" style="color: #0099FF;">用户列表</a>
                </div>
                <div>
                    <a title="002_window.jsp" style="color: #0099FF;">功能列表</a>
                </div>
            </div>

            <div title="权限管理" iconCls="icon-reload" selected="true"
                style="padding: 10px;">content2</div>
            <div title="资源管理" iconCls="icon-reload">content3</div>

        </div>
    </div>

    <div region="center" title="center title"
        style="padding: 5px; background: #eee;">

        <div id="tt" class="easyui-tabs" style="width: 500px; height: 250px;"
            fit=true>
        </div>
    </div>
</div>

$("a[title]").click(function() {
    //获取点击的那个a标签的title
    var src = $(this).attr("title");
    var title = $(this).html();

    //判断选项卡有没有存在，如果存在则选中，不存在添加
    if($("#tt").tabs('exists',title)){
        $("#tt").tabs('select',title);
    }else{
        //添加选项卡
        $('#tt').tabs('add', {
            title : title,
            content : '<iframe frameborder="0" style=width:100%;height:100% src='+src+'></iframe>',
            closable : true
        });
    }
});