Easy UI
Easy UI的认识：
jQuery EasyUI (基于jQuery的UI用户界面插件集合)
easyui是属于前端框架，易于快速的构建页面
Easy UI怎么去使用：
1.下载easyui
2.引入easyUI压缩包，文件（搭建easyUI环境）
<!-- easyui的样式主题文件 -->
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
<!-- easyui的系统图标-->
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
<!-- easyui依赖的jquery库-->
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<!-- easyui的插件库-->
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<!-- easyui的汉化包 -->
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"> </script>
Easy UI怎么创建组件（掌握）：
创建组件的方式：
1.HTML标签方式创建：
<div class="easyUI-组件名字"> //标签里面class最重要
内容随便写
</div>
2.JavaScript方式创建 （通过JS代码来创建）
<div id="p1" style="padding:100px">
</div>
$('#p1').panel({
title：'标题' (写入easyUI属性)
})
Easy UI底层原理：
essyUI组件创建原理：
平时写的class=“easyui-panel” -------说白了就是底层始终会去调用panel方法来创建
底层通过 $.parser.auto=true，调用parse方法，循环页面的组件，找到对应的easyUI-panel
找到之后，调用panel({})创建组件，panel底层组装html。
$.parse方法= {
panel……
}
Easy UI各个常用组件的使用（掌握）：
LinkButton: 按钮
panel：面板
tree： 树形菜单
menu：菜单
LinkButton组件：
/*
LinkButton属性说明：
iconCls：图标
toggle：为true时允许用户切换其状态是被选中还是没有被选中
可以结合group来使用，在一组里面只能选择一个来使用
plain:简洁的效果
iconAlign:按钮图标位置。
data-options:可以设置组件的属性
disable：禁用按钮 为true时禁止使用
.hasClass('l-btn-disabled') ： 判断是否有禁用的效果
group： 分组 可以结合toggle来使用，在一组里面只能选择一个来使用
*/
<a id="btn" href="#" class="easyui-linkbutton"
data-options="iconCls:'icon-search'">easyui</a> //按钮
panel组件：
注意：panel面板并不是每个属性都可以修改。 一个组件创建完之后，就不要去改变属性的值，如果 创建完之后，改变组件属性的值，就会出现我们不想要的效果。
结论，组件在定义的时候就把属性设置好
/*
title:标题
padding: 内容距离边框距离
iconCls:图标
collapsible：定义为ture是显示可折叠按钮,false就是不可折叠
minimizable boolean 定义是否显示最小化按钮。
maximizable boolean 定义是否显示最大化按钮。
closable:true为关闭按钮 false就没有关闭按钮
tools：引用工具 比如引用add和save图标
fit：自适应（当设置为true的时候面板大小将自适应父容器。）
loadingMessage：（加载中……） 在加载远程数据的时候在面板内显示一条消息。
href：加载文件内容
.attr()： 设置属性
*/
<div id="p" style="padding:10px;">
<p>panel content.</p>
<p>panel content.</p>
</div>
$('#p').panel({
width:500,
height:150,
title: 'My Panel',
tools: [{
iconCls:'icon-add',
handler:function(){alert('new')}
},{
iconCls:'icon-save',
handler:function(){alert('save')}
}]
});
Easy UI组件三要素（掌握）：每个组件都有这三要素
1.属性：
描述组件的信息，比如title width height…
1.每一个组件创建出来的时候，都有默认的属性
$.fn.panel.defaults
一般都不会去修改组件的默认属性，如果要改，就在组件里面自己定义组件的属性.
$("#p1").attr("title","面板头") //这样修改是无效的。只能修改body里面的东西 修改头无效并且毫无意义
<div ud="p1" class="easyui-panel">
<p> xxxxxxxxxx </p>
</div>
2.属性在创建的时候，就应该定义好，不要在创建完之后再去修改属性
3.属性的定义方式
a. 直接作为一个标签定义 （属性名=“属性值”）
比如
b.直接再data-options里面定义进行指定属性 data-options tools:[{…},{…}]这种多个属性就不要写在外面就写在 data-options里面
c.标签和data-options结合起来一起使用
注意：如果data-options里面tools里面有多个属性值的话只能在data-options里面设置
<div class="easyui-panel" style="width:300px;height:200px"
title="My Panel" data-options="iconCls:'icon-ok',tools:[
{
iconCls:'icon-add',
handler:function(){alert('add')}
},{
iconCls:'icon-edit',
handler:function(){alert('edit')}
}]">
</div>
d.直接在js创建组件的时候使用。
$("#p2").panel{
tools:'创建组件',
closable:true
}
2.方法：
2.1 调用方法：
$("#p1").plugin(‘methodName’,‘参数’)
$("#id").panel(‘open’);
$("#id").panel(‘clise’);
$("#id").panel(‘refresh’);
2.2 创建组件：
$("#id").panel( { 参数 } );
/*
open 在'forceOpen'参数设置为true的时候，打开面板时将跳过'onBeforeOpen'回调函数。 （打开）
close 在'forceClose'参数设置为true的时候，关闭面板时将跳过'onBeforeClose'回调函数。（关闭）
clear none 清除面板内容。（清除）
refresh href 刷新面板来装载远程数据。如果'href'属性有了新配置，它将重写旧的'href'属性。
代码示例： （刷新）
*/
// 打开面板且刷新其内容。
$('#pp').panel('open').panel('refresh');
// 刷新一个新的URL内容$('#pp').panel('open').panel('refresh','new_content.php');
3.事件：
树状菜单： tree
<ul id="tt" class="easyui-tree">
<li>
<span>Folder</span>
<ul>
<li>
<span>Sub Folder 1</span>
<ul>
<li>
<span><a href="#">File 11</a></span>
</li>
<li>
<span>File 12</span>
</li>
<li>
<span>File 13</span>
</li>
</ul>
</li>
<li>
<span>File 2</span>
</li>
<li>
<span>File 3</span>
</li>
</ul>
</li>
<li>
<span>File21</span>
</li>
</ul>
/*
每个节点都具备以下属性：
id：节点ID，对加载远程数据很重要。
text：显示节点文本。
state：节点状态，'open' 或 'closed'，默认：'open'。如果为'closed'的时候，将不自动展开该节点。
checked：表示该节点是否被选中。
attributes: 被添加到节点的自定义属性。
children: 一个节点数组声明了若干节点。
*/
//示例：
[
{
"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"
}]
} //因为这里是默认post提交 没有后台的话就要修改为get提交才行
] //method：检索数据的HTTP方法。（POST / GET） 默认为post
$('#tt').tree({
method：'get' //这里要修改为Get才会显示
onClick: function(node){
alert(node.text); // 在用户点击的时候提示
}
});
/*
onClick：点击事件
onDblClick： 双击事件
*/
$('#tt').tree({
onClick: function(node){
alert(node.text); // 在用户点击的时候提示
}
});
//onContextMenu （e, node）： 在右键点击节点的时候触发，右键点击节点并显示快捷菜单
// e: 相当于是event事件对象 node：节点
$('#tt').tree({
onContextMenu: function(e, node){
e.preventDefault(); // .preventDefault()阻止浏览器默认事件
// 查找节点
$('#tt').tree('select', node.target);
// 显示快捷菜单
$('#mm').menu('show', {
left: e.pageX,
top: e.pageY
});
}
});
//右键菜单定义如下： menu(菜单)
<div id="mm" class="easyui-menu" style="width:120px;">
<div onclick="append()" data-options="iconCls:'icon-add'">追加</div>
<div onclick="remove()" data-options="iconCls:'icon-remove'">移除</div>
</div>
右键菜单：
<script>
$(function() {
//contextmenu : 右键菜单(上下文菜单)
$(document).on('contextmenu', function(event) {
//event 事件对象: 描述了事件发生时所有的信息,包含事件名,事件源,触发事件的坐标.
event.preventDefault();//阻止浏览器默认事件
$("#mm").menu("show", {
left : event.pageX,
top : event.pageY
});
});
});
</script>
</head>
<body>
502
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
