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        });    }});