4、easyUI-七种布局（layout）
1、为网页创建边框布局
边框布局（border layout）提供五个区域：east、west、north、south、center。以下是一些通常用法：
- north 区域可以用来显示网站的标语。
- south 区域可以用来显示版权以及一些说明。
- west 区域可以用来显示导航菜单。
- east 区域可以用来显示一些推广的项目。
- center 区域可以用来显示主要的内容。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>为网页创建边框布局</title>
<link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/icon.css">
<link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/color.css">
<script src="../../../ui/jquery-easyui-1.4.5/jquery.min.js"></script>
<script src="../../../ui/jquery-easyui-1.4.5/jquery.easyui.min.js"></script>
<script src="../../../ui/jquery-easyui-1.4.5/locale/easyui-lang-zh_CN.js"></script>
<script src="../../../js/crud/bus_pubuser.js"></script>
<style>
.rtitle{
font-size:18px;
font-weight:bold;
padding:5px 10px;
background:#336699;
color:#fff;
}
</style>
<script>
$(function(){
showcontent('http://www.cnblogs.com/jianyeLee/p/5656968.html');
});
</script>
</script>
</head>
<body>
<div class="easyui-layout" style="width:100%;height:100%;">
<div region="north" border="false" class="rtitle">
RSS 在线阅读
</div>
<div region="west" split="true" title="博文栏目" style="width:150px;">
<ul class="easyui-tree" lines="true" >
<li>
<span>我的博文</span>
<ul>
<li>
<span>easyUI</span>
<ul>
<li><a href="javascript:void(0)" onclick="showcontent('http://www.cnblogs.com/jianyeLee/p/5656968.html')" target="bowen"><span>1、easyUI-创建 CRUD普通dataGrid（表格）</span></a></li>
<li><a href="javascript:void(0)" onclick="showcontent('http://www.cnblogs.com/jianyeLee/p/5657657.html')" target="bowen"><span>2、easyUI-创建 CRUD可编辑dataGrid（表格）</span></a></li>
</ul>
</li>
<li state="closed">
<span>Highcharts</span>
<ul>
<li>
<span>折线图</span>
<ul>
<li><span>1-Highcharts环境介绍及配置</span></li>
<li><span>2-Highcharts曲线图之折线图</span></li>
<li><span>3-Highcharts曲线图之显示点值折线图</span></li>
<li><span>4-Highcharts曲线图之时间轴折线图</span></li>
<li><span>5-Highcharts曲线图之轴反转</span></li>
<li><span>6-Highcharts曲线图之带标识</span></li>
<li><span>7-Highcharts曲线图之分辨带</span></li>
<li><span>8-Highcharts曲线图之对数直线图</span></li>
</ul>
</li>
<li>
<span>3D图</span>
<ul>
<li><span>1-Highcharts 3D图之普通3D柱状图与带空值</span></li>
<li><span>2-Highcharts 3D图之3D柱状图带可调试倾斜角度</span></li>
<li><span>3-Highcharts 3D图之3D柱状图分组叠堆3D图</span></li>
<li><span>4-Highcharts 3D图之3D普通饼图</span></li>
<li><span>5-Highcharts 3D图之3D双饼图</span></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div id="content" region="center" title="在线阅读" style="padding:5px;">
<iframe id="bowen" name="bowen" style="border: none;width: 100%;height: 100%;"></iframe>
</div>
</div>
</body>
<html>
/* * layout布局 */ function showcontent(url){ $('#bowen').attr('src',url); }
2、在面板中创建复杂布局
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>在面板中创建复杂布局</title>
<link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/icon.css">
<link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/color.css">
<script src="../../../ui/jquery-easyui-1.4.5/jquery.min.js"></script>
<script src="../../../ui/jquery-easyui-1.4.5/jquery.easyui.min.js"></script>
<script src="../../../ui/jquery-easyui-1.4.5/locale/easyui-lang-zh_CN.js"></script>
<script src="../../../js/crud/bus_pubuser.js"></script>
<style>
.p-search{
background:#fafafa;
padding:5px;
border:1px solid #ccc;
border-bottom:0;
overflow:hidden;
}
.p-search input{
width:300px;
border:1px solid #ccc;
background: #fff url('../../../img/search.png') no-repeat right top;
}
.p-right{
text-align:center;
border:1px solid #ccc;
border-left:0;
width:150px;
background:#fafafa;
padding-top:10px;
}
</style>
</head>
<body>
<div class="easyui-panel" title="可收缩查询框" iconCls="icon-search" collapsible="true" style="padding:5px;width:100%;height:600;">
<div class="easyui-layout" fit="true">
<div region="north" border="false" class="p-search">
<label>查询:</label><input></input>
</div>
<div region="center" border="false">
<div class="easyui-layout" fit="true">
<div region="east" border="false" class="p-right">
<img src="../../../img/msn.gif"/>
</div>
<div region="center" border="false" style="border:1px solid #ccc;">
<div class="easyui-layout" fit="true">
<div region="south" split="true" border="false" style="height:60px;">
<textarea style="border:0;width:100%;height:100%;resize:none">Hi,I am easyui.</textarea>
</div>
<div region="center" border="false">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<html>
3、创建折叠面板
附上所有icon
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>创建折叠面板</title>
<link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/icon.css">
<link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/color.css">
<script src="../../../ui/jquery-easyui-1.4.5/jquery.min.js"></script>
<script src="../../../ui/jquery-easyui-1.4.5/jquery.easyui.min.js"></script>
<script src="../../../ui/jquery-easyui-1.4.5/locale/easyui-lang-zh_CN.js"></script>
<script src="../../../js/crud/bus_pubuser.js"></script>
</head>
<body>
<div class="easyui-accordion" style="width: 400px;height: 1000px;">
<div title="accordion1" iconCls="icon-ok" >
<h3 style="color:#0099FF;">Accordion for jQuery</h3>
<p>content1</p>
</div>
<div title="easyUI" selected="true" iconCls="icon-reload">
<p>content2</p>
</div>
<div title="tree menu" iconCls="icon-cut">
<ul class="easyui-tree" lines="true">
<li>
<span>menu1</span>
<ul>
<li>
<span>sub menu1</span>
<ul>
<li>111</li>
<li>111</li>
<li>111</li>
</ul>
</li>
</ul>
</li>
<li>
<span>menu2</span>
</li>
</ul>
</div>
<div title="icon-blank" iconCls="icon-blank">
<p>icon-blank</p>
</div>
<div title="icon-add" iconCls="icon-add">
<p>icon-add</p>
</div>
<div title="icon-edit" iconCls="icon-edit">
<p>icon-edit</p>
</div>
<div title="icon-clear" iconCls="icon-clear">
<p>icon-clear</p>
</div>
<div title="icon-remove" iconCls="icon-remove">
<p>icon-remove</p>
</div>
<div title="icon-save" iconCls="icon-save">
<p>icon-save</p>
</div>
<div title="icon-cut" iconCls="icon-cut">
<p>icon-cut</p>
</div>
<div title="icon-ok" iconCls="icon-ok">
<p>icon-ok</p>
</div>
<div title="icon-no" iconCls="icon-no">
<p>icon-no</p>
</div>
<div title="icon-cancel" iconCls="icon-cancel">
<p>icon-cancel</p>
</div>
<div title="icon-reload" iconCls="icon-reload">
<p>icon-reload</p>
</div>
<div title="icon-search" iconCls="icon-search">
<p>icon-search</p>
</div>
<div title="icon-print" iconCls="icon-print">
<p>icon-print</p>
</div>
<div title="icon-help" iconCls="icon-help">
<p>icon-help</p>
</div>
<div title="icon-undo" iconCls="icon-undo">
<p>icon-undo</p>
</div>
<div title="icon-redo" iconCls="icon-redo">
<p>icon-redo</p>
</div>
<div title="icon-back" iconCls="icon-back">
<p>icon-back</p>
</div>
<div title="icon-sum" iconCls="icon-sum">
<p>icon-sum</p>
</div>
<div title="icon-tip" iconCls="icon-tip">
<p>icon-tip</p>
</div>
<div title="icon-filter" iconCls="icon-filter">
<p>icon-filter</p>
</div>
<div title="icon-man" iconCls="icon-man">
<p>icon-man</p>
</div>
<div title="icon-lock" iconCls="icon-lock">
<p>icon-lock</p>
</div>
<div title="icon-more" iconCls="icon-more">
<p>icon-more</p>
</div>
<div title="icon-mini-add" iconCls="icon-mini-add">
<p>icon-mini-add</p>
</div>
<div title="icon-mini-edit" iconCls="icon-mini-edit">
<p>icon-mini-edit</p>
</div>
<div title="icon-mini-refresh" iconCls="icon-mini-refresh">
<p>icon-mini-refresh</p>
</div>
<div title="icon-large-picture" iconCls="icon-large-picture">
<p>icon-large-picture</p>
</div>
<div title="icon-large-clipart" iconCls="icon-large-clipart">
<p>icon-large-clipart</p>
</div>
<div title="icon-large-shapes" iconCls="icon-large-shapes">
<p>icon-large-shapes</p>
</div>
<div title="icon-large-smartart" iconCls="icon-large-smartart">
<p>icon-large-smartart</p>
</div>
<div title="icon-large-chart" iconCls="icon-large-chart">
<p>icon-large-chart</p>
</div>
</div>
</body>
<html>
4、创建标签页（Tabs）
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>创建标签页（Tabs）</title>
<link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/icon.css">
<link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/color.css">
<script src="../../../ui/jquery-easyui-1.4.5/jquery.min.js"></script>
<script src="../../../ui/jquery-easyui-1.4.5/jquery.easyui.min.js"></script>
<script src="../../../ui/jquery-easyui-1.4.5/locale/easyui-lang-zh_CN.js"></script>
<script src="../../../js/crud/bus_pubuser.js"></script>
</head>
<body>
<div class="easyui-tabs" fit="false" style="width: 100%;height: 100%;" plain="false" >
<div title="页签1">
<p>width number 选项卡容器宽度。 </p>
<p>height number 选项卡容器高度。 </p>
<p>plain boolean 设置为true时，将不显示控制面板背景。 </p>
<p>fit boolean 设置为true时，选项卡的大小将铺满它所在的容器。 </p>
</div>
<div title="页签2" selected="2">
<p>selected number 初始化选中一个tab页。 </p>
</div>
<div title="页签3">
<p>showHeader boolean 设置为true时，显示tab页标题。 </p>
</div>
</div>
</body>
<html>
5、动态添加标签页（Tabs）
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>动态添加标签页（Tabs）</title>
<link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/icon.css">
<link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/color.css">
<script src="../../../ui/jquery-easyui-1.4.5/jquery.min.js"></script>
<script src="../../../ui/jquery-easyui-1.4.5/jquery.easyui.min.js"></script>
<script src="../../../ui/jquery-easyui-1.4.5/locale/easyui-lang-zh_CN.js"></script>
<script src="../../../js/crud/bus_pubuser.js"></script>
<style>
.rtitle{
font-size:18px;
font-weight:bold;
padding:5px 5px;
background:#336699;
color:#fff;
}
</style>
</head>
<body>
<div style="margin-bottom:10px" class="rtitle">
<a href="#" class="easyui-linkbutton" onclick="addTab('bokeyuan','http://www.cnblogs.com/jianyeLee/p/5656968.html')">bokeyuan</a>
<a href="#" class="easyui-linkbutton" onclick="addTab('jquery','http://jquery.com/')">jquery</a>
<a href="#" class="easyui-linkbutton" onclick="addTab('easyui','http://jeasyui.com/')">easyui</a>
</div>
<div id="tt" class="easyui-tabs" style="width: 100%;height: 90%;" fit="false" pain="true">
<div title="Home">
</div>
</div>
</body>
<html>
function addTab(title, url){ if ($('#tt').tabs('exists', title)){ $('#tt').tabs('select', title); } else { var content = '<iframe scrolling="auto" frameborder="0" src="'+url+'" style="width:100%;height:100%;"></iframe>'; $('#tt').tabs('add',{ title:title, content:content, closable:true }); } }
6、添加自动播放标签页（Tabs）
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>添加自动播放标签页（Tabs）</title> <link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/icon.css"> <link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/color.css"> <script src="../../../ui/jquery-easyui-1.4.5/jquery.min.js"></script> <script src="../../../ui/jquery-easyui-1.4.5/jquery.easyui.min.js"></script> <script src="../../../ui/jquery-easyui-1.4.5/locale/easyui-lang-zh_CN.js"></script> <script src="../../../js/crud/bus_pubuser.js"></script> <script> $(function(){ var index = 0; var t = $('#tt'); var tabs = t.tabs('tabs'); setInterval(function(){ t.tabs('select', tabs[index].panel('options').title); index++; if (index >= tabs.length){ index = 0; } }, 1000); }); </script> </head> <body> <div id="tt" class="easyui-tabs" style="width: 100%;height: 100%;" fit="false" pain="true"> <div title="s1"> <img src="../../../img/shirt1.gif" /> </div> <div title="s2"> <img src="../../../img/shirt2.gif" /> </div> <div title="s3"> <img src="../../../img/shirt3.gif" /> </div> <div title="s4"> <img src="../../../img/shirt4.gif" /> </div> <div title="s5"> <img src="../../../img/shirt5.gif" /> </div> </div> </body> <html>
7、创建 XP 风格左侧面板
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>创建 XP 风格左侧面板</title> <link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/icon.css"> <link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/color.css"> <script src="../../../ui/jquery-easyui-1.4.5/jquery.min.js"></script> <script src="../../../ui/jquery-easyui-1.4.5/jquery.easyui.min.js"></script> <script src="../../../ui/jquery-easyui-1.4.5/locale/easyui-lang-zh_CN.js"></script> <script src="../../../js/crud/bus_pubuser.js"></script> <style> .demo{ width:200px;height:auto;padding:10px; } .panel-body{ background:#f0f0f0; } .panel-header{ background:#fff url('../../../img/panel_header_bg.gif') no-repeat top right; } .panel-tool-collapse{ background:url('../../../img/arrow_up.gif') no-repeat 0px -3px; } .panel-tool-expand{ background:url('../../../img/arrow_down.gif') no-repeat 0px -3px; } </style> </head> <body> <div style="width:200px;height:auto;background:#7190E0;padding:5px;"> <div class="easyui-panel demo" title="工具" collapsible="true"> <p>content</p> </div> <br/> <div class="easyui-panel demo" title="文件夹" collapsible="true" collapsed="true"> <p>content</p> </div> <br/> <div class="easyui-panel demo" title="地址" collapsible="true" collapsed="true"> <p>content</p> </div> <br/> <div class="easyui-panel demo" title="详情" collapsible="true" collapsed="true"> <p>content</p> </div> </div> </body> <html>
这些代码布局 都不需要什么js，直接使用class即可；
/*
**author:EthanCoco
**sina:18720989539
**WeChat:dyznzyl
**Email:lijianlin0204@163.com
**欢迎收藏
*/
