easyUI的简单布局 

<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/> 　　　　　　//引入easyui.css
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>　　　　　　　　　　　　 //引入图标icon.css
<script src="jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>　　　　　　　 //引入jQuery.js
<script src="easyui/jquery.easyui.min.js" type="text/javascript" charset="utf-8"></script> //引入easyui.js

 

1. 可在 body 或 div 设置 class = "easyui-layout" ,面板，设置布局。

　可划分为最多五个区域，给 div 设置 data-options = " region : 'north' " 等

　　<body class="easyui-layout">
        <div title="北部" style="height: 100px;" data-options="region:'north'">北部</div>
        <div style="width: 50px;" data-options="region:'east'">东部</div>
        <div data-options="region:'center'">中部</div>
        <div style="width: 200px;" data-options="region:'west'">西部</div>
        <div style="height: 50px;" data-options="region:'south'">南部</div>
    </body>

 

2.若要再嵌套布局，则给 div 设置 class  = "easyui-accordion"，折叠面板，设置title属性可以给区域起名，还可以使得它具有折叠功能

　　　　<div data-options="region:'center'">
           <div class="easyui-accordion">
                <div title="第一个面板">asdasd</div>
                <div title="第二个面板">asdasd</div>
                <div title="第三个面板">asdasd</div>
            </div>
       </div>

 

3.

1         <div data-options="region:'west'" style="width: 200px;">　　　　　　　　　　　　　　　　　// accordion 折叠面板
2             <div class="easyui-accordion" data-options="fit:true">                          //设置data-options=“fit：‘true’”，使得面板完全展开，自适应
3                 <div title="第一面板" data-options="iconCls:'icon-cut'">标题图标为剪刀</div>　　//设置data-options=“iconCls：‘icon-cut’”，设置面板的图标
4                 <div title="第二面板" data-options="iconCls:'icon-edit'">标题图标为笔</div>
5             </div>
6         </div>

 

4.设置class = "easyui-tabs"，选项卡面板

1         <div data-options="region:'center'">
2             <div class="easyui-tabs">
3                 <div title="选项卡1"></div>
4                 <div title="选项卡2" data-options="closable:true"></div> //closable:true 设置为可关闭，也就是多了个×
5                 <div title="选项卡3"></div>
6             </div>
7         </div>

 

 

 

ps：layout：面板；accordion：可折叠的；

posted @ 2018-07-11 21:40  Jooo  阅读(328)  评论(0)    收藏  举报