之前给大家讲到EasyUI的特性以及它的7种使用方法，什么是EasyUI，如何使用EasyUI？--easyui的十二种用法
在这里再给大家总结了其余五种，如此筹齐了12之数
面板
1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="UTF-8"> 5<title>EasyUI-8-面板</title> 6<script type="text/javascript" 7 src="https://my.oschina.net/js/jquery-easyui-1.4.1/jquery.min.js"></script> 8<script type="text/javascript" 9 src="https://my.oschina.net/js/jquery-easyui-1.4.1/jquery.easyui.min.js"></script> 10<script type="text/javascript" 11 src="https://my.oschina.net/js/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script> 12<link rel="stylesheet" type="text/css" 13 href="https://my.oschina.net/js/jquery-easyui-1.4.1/themes/icon.css" /> 14<link rel="stylesheet" type="text/css" 15 href="https://my.oschina.net/js/jquery-easyui-1.4.1/themes/default/easyui.css" /> 16<script type="text/javascript"> 17</script> 18</head> 19 <!--定义一个面板 --> 20 <div id="p" class="easyui-panel" title="My Panel" 21 style="width:500px;height:150px;padding:10px;background:#fafafa;" 22 data-options="iconCls:'icon-save',closable:true, 23 collapsible:true,minimizable:true,maximizable:true"> 24 <p>panel content.</p> 25 <p>panel content.</p> 26 </div> 27</html>
标签页/选项卡
1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="UTF-8"> 5<title>EasyUI-3-标签页/选项卡</title> 6<script type="text/javascript" 7 src="https://my.oschina.net/js/jquery-easyui-1.4.1/jquery.min.js"></script> 8<script type="text/javascript" 9 src="https://my.oschina.net/js/jquery-easyui-1.4.1/jquery.easyui.min.js"></script> 10<script type="text/javascript" 11 src="https://my.oschina.net/js/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script> 12<link rel="stylesheet" type="text/css" 13 href="https://my.oschina.net/js/jquery-easyui-1.4.1/themes/icon.css" /> 14<link rel="stylesheet" type="text/css" 15 href="https://my.oschina.net/js/jquery-easyui-1.4.1/themes/default/easyui.css" /> 16<script type="text/javascript"> 17</script> 18</head> 19 <body> 20 <div id="tt" class="easyui-tabs" style="width:500px;height:250px;"> 21 <div title="Tab1" style="padding:20px;display:none;"> 22 tab1 23 </div> 24 <div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;"> 25 tab2 26 </div> 27 <div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;"> 28 tab3 29 </div> 30 </div> 31 </body> 32</html>
分类面板
1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="UTF-8"> 5<title>EasyUI-10-分类面板</title> 6<script type="text/javascript" 7 src="https://my.oschina.net/js/jquery-easyui-1.4.1/jquery.min.js"></script> 8<script type="text/javascript" 9 src="https://my.oschina.net/js/jquery-easyui-1.4.1/jquery.easyui.min.js"></script> 10<script type="text/javascript" 11 src="https://my.oschina.net/js/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script> 12<link rel="stylesheet" type="text/css" 13 href="https://my.oschina.net/js/jquery-easyui-1.4.1/themes/icon.css" /> 14<link rel="stylesheet" type="text/css" 15 href="https://my.oschina.net/js/jquery-easyui-1.4.1/themes/default/easyui.css" /> 16<script type="text/javascript"> 17</script> 18</head> 19 <body> 20 <!--分类面板 --> 21 <div id="aa" class="easyui-accordion" style="width:300px;height:200px;"> 22 <div title="Title1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;"> 23 <h3 style="color:#0099FF;">Accordion for jQuery</h3> 24 <p>Accordion is a part of easyui framework for jQuery. 25 It lets you define your accordion component on web page more easily.</p> 26 </div> 27 <div title="Title2" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;"> 28 content2 29 </div> 30 <div title="Title3"> 31 content3 32 </div> 33 </div> 34 </body> 35</html>
页面布局
1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="UTF-8"> 5<title>EasyUI-11-页面布局</title> 6<script type="text/javascript" 7 src="https://my.oschina.net/js/jquery-easyui-1.4.1/jquery.min.js"></script> 8<script type="text/javascript" 9 src="https://my.oschina.net/js/jquery-easyui-1.4.1/jquery.easyui.min.js"></script> 10<script type="text/javascript" 11 src="https://my.oschina.net/js/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script> 12<link rel="stylesheet" type="text/css" 13 href="https://my.oschina.net/js/jquery-easyui-1.4.1/themes/icon.css" /> 14<link rel="stylesheet" type="text/css" 15 href="https://my.oschina.net/js/jquery-easyui-1.4.1/themes/default/easyui.css" /> 16<script type="text/javascript"> 17</script> 18</head> 19 <body> 20 <!--页面布局 --> 21 <h1>页面布局</h1> 22 <div id="cc" class="easyui-layout" style="width:600px;height:400px;"> 23 <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div> 24 <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div> 25 <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div> 26 <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div> 27 <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div> 28 </div> 29 </body> 30</html>
super（融合）
1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="UTF-8"> 5<title>EasyUI-12-super</title> 6<script type="text/javascript" 7 src="https://my.oschina.net/js/jquery-easyui-1.4.1/jquery.min.js"></script> 8<script type="text/javascript" 9 src="https://my.oschina.net/js/jquery-easyui-1.4.1/jquery.easyui.min.js"></script> 10<script type="text/javascript" 11 src="https://my.oschina.net/js/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script> 12<link rel="stylesheet" type="text/css" 13 href="https://my.oschina.net/js/jquery-easyui-1.4.1/themes/icon.css" /> 14<link rel="stylesheet" type="text/css" 15 href="https://my.oschina.net/js/jquery-easyui-1.4.1/themes/default/easyui.css" /> 16<script type="text/javascript"> 17 18 $(function(){ 19 20 //展现树形结构 21 $("#easyui-tree").tree({ 22 url:"tree.json", //加载远程JSON数据 23 method:"get", //请求方式 POST 24 animate:true, //表示显示折叠端口 25 checkbox:true, //表述复选框 26 lines:true, //表示显示连接线 27 dnd:true, //是否拖拽 28 onClick:function(node){ //添加点击事件 29 30 //当点击选项卡时进行页面跳转并且添加选项卡,如果选项卡已经打开则直接选中 31 var tab = $("#main").tabs("getTab",node.text); 32 if(tab){ 33 //如果不为空,则直接选中面板 34 $("#main").tabs("select",node.text); 35 36 }else{ 37 //如果没有选中则新增一个面板 38 $('#main').tabs('add',{ 39 title:node.text, 40 //content:'Tab Body', 41 href:"easyui-12-super"+(node.id%2==0?1:2)+".html", //重远程加载页面 42 closable:true, 43 tools:[{ 44 iconCls:'icon-mini-refresh', 45 handler:function(){ 46 alert('refresh'); 47 } 48 }] 49 }); 50 } 51 } 52 }); 53 54 55 //定义通讯录 56 $("#btn_1").click(function(){ 57 58 //定义弹出窗口 59 $("#txl").window({ 60 title:"通讯录", 61 width:200, 62 height:400, 63 modal:true 64 }); 65 66 //加载同学录树形结构 67 $("#txlTree").tree({ 68 url:"friend.json", //加载远程JSON数据 69 method:"get", //请求方式 POST 70 animate:true, //表示显示折叠端口 71 checkbox:true, //表述复选框 72 lines:true, //表示显示连接线 73 dnd:true, //是否拖拽 74 onClick:function(node){ //添加点击事件 75 alert(node.text); 76 } 77 }); 78 79 80 }); 81 82 //退出系统 83 $("#btn_2").click(function(){ 84 $.messager.confirm('确认','你确定要退出系统吗？',function(r){ 85 if (r){ 86 alert('系统已经退出成功'); 87 } 88 }); 89 }) 90 }) 91 92 93</script> 94</head> 95 <body class="easyui-layout"> 96 <div data-options="region:'north',title:'标题',split:true" style="height:150px;"> 97 <!--定义logo --> 98 <div id="lol"> 99 <img alt="英雄联盟" src="https://my.oschina.net/easy-ui/images/lol.jpg" height="150px" width="150px"> 100 101 <!--定义退出按钮 --> 102 <div id="logout" style="float: right"> 103 <a id="btn_1" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help'">通讯录</a> 104 <a id="btn_2" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'">退出</a> 105 </div> 106 </div> 107 108 109 </div> 110 <div data-options="region:'south',title:'底部 ',split:true" style="height:100px;"></div> 111 <div data-options="region:'east',iconCls:'icon-reload',title:'西侧',split:true" style="width:150px;"></div> 112 <div data-options="region:'west',title:'东侧',split:true" style="width:200px;"> 113 <!--在左侧添加面板 --> 114 <div id="leftAccordion" class="easyui-accordion"> 115 <div title="课程管理" data-options="iconCls:'icon-save',selected:true" style="overflow:auto;padding:10px;"> 116 117 <!--左侧菜单添加树形结构 --> 118 <ul id="easyui-tree"></ul> 119 </div> 120 <div title="院校管理" data-options="iconCls:'icon-reload'" style="padding:10px;"> 121 院校信息 122 </div> 123 <div title="公关管理"> 124 公关部你懂得 125 </div> 126 </div> 127 </div> 128 <div data-options="region:'center',title:'中心 '" style="padding:5px;background:#eee;"> 129 <!--在中部定义选项卡面板 --> 130 <div id="main" class="easyui-tabs" data-options="fit:true"> 131 <div title="首页" style="padding:20px;"> 132 <img alt="电竞王国" src="https://my.oschina.net/easy-ui/images/timg.jpg"> 133 </div> 134 </div> 135 </div> 136 137 <!--定义通讯录弹出窗口 --> 138 <div id="txl"> 139 <ul id="txlTree"></ul> 140 </div> 141</body> 142</html>
简单配置（程序员的世界你懂的--惨白的解释，没办法啊）
啥啥啥都有了，美中不足的就是那一点美感！！！
不知这十二种方法是否能让你了解如何使用EasyUI！！！