引入
所以我们需要引入4个文件，在EasyUI官网中随便找一个文件就可以使用引入
组件的创建
创建的两种方式
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"> <link rel="stylesheet" type="text/css" href="easyui/themes/color.css"> <script type="text/javascript" src="easyui/jquery.min.js"></script> <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script> <script src="easyui/locale/easyui-lang-zh_CN.js"></script> <script> $(function(){ //通过JS创建 $("#btn").linkbutton({ "iconCls":'icon-search', text:'js按钮' }); }) </script> </head> <body> <a id="btn"></a> <!--通过class创建--> <a id="btn2" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">easyui</a> </body> </html>
三要素
其中有重要的三种元素
1属性
2.事件
那么它就会通过事件反应给我们。比如：我们点击tree组件的某个节点，那么就会触发onClick事件。
3方法
我们通过方法去改变已经定义好的属性值
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"> <link rel="stylesheet" type="text/css" href="easyui/themes/color.css"> <script type="text/javascript" src="easyui/jquery.min.js"></script> <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script> <script src="easyui/locale/easyui-lang-zh_CN.js"></script> <script> $(function(){ $("#win").window( { //属性的创建 'title':'JS 窗口', //事件 'onClose':function(){ alert("拜拜！"); }, } ); }); function myclear(){ //方法 // 选择器对象.组件名("方法名",参数) $("#win").window("clear"); } </script> </head> <body> <div id="win" data-options="title:'新建窗口'" height="200px" width="200px"> smakgfkqbwefbq </div> <button id="btn" onclick="myclear()">清楚</button> </body> </html>
LinkButton
创建一个button通过A标签才能创建，其中可以使用我们的一些属性
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"> <link rel="stylesheet" type="text/css" href="easyui/themes/color.css"> <script type="text/javascript" src="easyui/jquery.min.js"></script> <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script> <script src="easyui/locale/easyui-lang-zh_CN.js"></script> <script> $(function(){ $("#btn").linkbutton( { //创建图标 'iconCls':'icon-edit', //是否为不展示 'disabled':true, }); $("a").on("click",function(){ //判断是否为展示，如果是展示就不显示text if(!$(this).hasClass("l-btn-disabled")){ console.debug(this.text); } }) }); </script> </head> <body> <div style="padding:5px 0;"> <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'">Add</a> <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">Remove</a> <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'">Save</a> <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cut',disabled:true">Cut</a> <a href="#" class="easyui-linkbutton">Text Button</a> </div> <div style="padding:5px 0;"> <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true">Add</a> <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true">Remove</a> <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true">Save</a> <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cut',disabled:true,plain:true">Cut</a> <a href="#" class="easyui-linkbutton">Text Button</a> </div>w <a id="btn">自己的</a> </body> </html>
Panel
面板作为承载其它内容的容器。这是构建其他组件的基础（比如：layout,tabs,accordion等）。它还提供了折叠、关闭、最大化、最小化和自定义行为。面板可以很容易地嵌入到web页面的任何位置
其中有些重要元素，作为一个画板，
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"> <link rel="stylesheet" type="text/css" href="easyui/themes/color.css"> <script type="text/javascript" src="easyui/jquery.min.js"></script> <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script> <script src="easyui/locale/easyui-lang-zh_CN.js"></script> <script> $(function(){ $("#d1").panel({ 'title':'涛涛', 'width': 600, 'height': 300, 'collapsible':true, //'content': '<h1>面版</h1>里面的内容！！！！！！！！！！！', //把我们需要的页面添加到当前页面，并且带有JS属性 'content':'<iframe width="100%" height="90%" frameborder=0 src="三要素.html"></iframe>', //'fit':true, 'closable':true, 'minimizable':true, 'maximizable':true, //这个只能有body属性不带有JS //'href':'06-常用组件--linkbutton.html', }); }) </script> </head> <body> <!--title： 标题 iconCls： 图标 closable：x 关闭 collapsible：折叠 minimizable：最小化 maximizable：最大化 --> <div id="p" class="easyui-panel" title="磊磊" style="500px;height:150px;padding:10px;background:#fafafa;" data-options="iconCls:'icon-save',closable:true, collapsible:true,minimizable:true,maximizable:true"> <p>panel content.</p> <p>panel content.</p> </div> <div id="d1"></div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"> <link rel="stylesheet" type="text/css" href="easyui/themes/color.css"> <script type="text/javascript" src="easyui/jquery.min.js"></script> <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script> <script src="easyui/locale/easyui-lang-zh_CN.js"></script> <script> $(function(){ $("#d1").panel({ 'title':'涛涛', 'width': 600, 'height': 300, 'left':200, 'collapsible':true, //'content': '<h1>面版</h1>里面的内容！！！！！！！！！！！', 'content':'<iframe width="100%" height="90%" frameborder=0 src="三要素.html"></iframe>', //'fit':true, 'closable':true, 'minimizable':true, 'maximizable':true, //'href':'06-常用组件--linkbutton.html', //在父元素中添加属性 'cls':'pos', }); }) </script> <style> .pos{ position: relative; } </style> </head> <body> <!--title： 标题 iconCls： 图标 closable：x 关闭 collapsible：折叠 minimizable：最小化 maximizable：最大化 --> <div id="p" class="easyui-panel" title="磊磊" style="500px;height:150px;padding:10px;background:#fafafa;" data-options="iconCls:'icon-save',closable:true, collapsible:true,minimizable:true,maximizable:true"> <p>panel content.</p> <p>panel content.</p> </div> <div id="d1"></div> </body> </html>
组件三要素
改变我们已有的属性
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"> <link rel="stylesheet" type="text/css" href="easyui/themes/color.css"> <script type="text/javascript" src="easyui/jquery.min.js"></script> <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script> <script src="easyui/locale/easyui-lang-zh_CN.js"></script> <script> $(function(){ $("#d1").panel({ 'title':'涛涛', 'width': 600, 'height': 300, 'left':200, 'collapsible':true, //'content': '<h1>面版</h1>里面的内容！！！！！！！！！！！', 'content':'<iframe width="100%" height="90%" frameborder=0 src="三要素.html"></iframe>', //'fit':true, 'closable':true, 'minimizable':true, 'maximizable':true, //'href':'06-常用组件--linkbutton.html', //在父元素中添加属性 }); }); function change(){ //改变title的值 $("#d1").panel("setTitle","杰大大"); } </script> </head> <body> <!--title： 标题 iconCls： 图标 closable：x 关闭 collapsible：折叠 minimizable：最小化 maximizable：最大化 --> <div id="d1"></div> <button onclick="change()">改变</button> </body> </html>
tree
json结构
[
{
//属性
"id": 1,
"text": "组织机构",
"iconCls": "icon-save",
//子元素
"children": [{
"id": 11,
"text": "部门管理",
"iconCls": "icon-ok",
//连接地址
"url": "department.action"
},{
"id": 12,
"text": "员工管理",
"iconCls": "icon-ok",
"url": "employee.action"
}]
},
{
"id": 2,
"text": "系统管理",
"iconCls": "icon-save",
"children": [{
"id": 13,
"text": "权限管理",
"iconCls": "icon-ok",
"url": "permission.action"
},{
"id": 14,
"text": "角色管理",
"iconCls": "icon-ok",
"url": "role.action"
}]
}
]
树结构，我们需要通过点击显示其他的内容
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"> <link rel="stylesheet" type="text/css" href="easyui/themes/color.css"> <script type="text/javascript" src="easyui/jquery.min.js"></script> <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script> <script src="easyui/locale/easyui-lang-zh_CN.js"></script> <script> $(function(){ //这里也需要通过tree判断 $("#bigtree").tree({ //会有一个默认值node 'onClick':function(node){ //判断是否有子元素 if(!node.children){ console.debug(node.text); } } }) }) </script> </head> <body> <!--树结构叶涛通过panel来做画板--> <div class="easyui-panel" style="padding:5px"> <!-- 树状菜单通过 ul 标签 url: 后台提供json数据 method: 请求方式 - 默认值post --> <ul id="bigtree" class="easyui-tree" data-options="url:'data.json',method:'get'"></ul> </div> </body> </html>