文章目录
EasyUI
简述
jQuery EasyUI 是一组基于 jQuery 的 UI 插件集合体，而 jQuery EasyUI 的目标就是帮助 web 开发者更轻松的打造出功能丰富并且美观的 UI 界面。开发者不需要编写复杂的 javascript，也不需要对 css 样式有深入的了解，开发者需要了解的只有一些简单的 html 标签。 jQuery EasyUI 是基于 JQuery 的一个前台ui 界面的插件，页面相当好看，同时页面支持各种 themes 以满足使用者对于页面不同风格的喜好。拥有足够开发者使用的功能。
使用步骤
1.引入 EasyUI 脚本: locale , themes ,jquery,easyui
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
<script type="text/javascript" src="easyui/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
EasyUI 组件的两种加载方式
- 使用 class 加载
好处：使用比较方便，只需要了解 html 和 css 知识即可。
弊端：耦合性比较高，因为 class 用在标签上面。
其实最终还是调用js的方式来创建，$(“#p”).panel({json参数});
<div id="win" class="easyui-window" title="My Window" style="width:600px;height:400px" data-options="iconCls:'icon-save',modal:true">
Window Content
</div>
2.使用 js 加载
[外链图片转存失败(img-S3mRXawn-1568991128565)(file:///C:\Users\62601\AppData\Local\Temp\ksohtml15240\wps1.jpg)]
好处：耦合性比较低，易于扩展。
弊端：使用起来麻烦点，而且对开发人员的 javascript 知识有要求
组件三要素（属性，事件，方法）
1.属性
设置属性的两种方式：
1.直接作为标签的自定义属性
title,closed都是自定义属性; 2. 使用html5中规范data属性. data-options 3. 以上两种混合使用 两种方式的区别：自定义属性的值只能是一个普通的字符串,不能写事件函数名和json数组，如果同时用两种方式设置了属性，那么js的会覆盖class的，但是一般没有人这样操作属性只能在创建（初始化）组件有效，组件创建完毕后，如果对某个属性进行了修改无效，但是可以通过方法修改，$(“对象”).组件名(“方法名”,参数…);
//以下代码修改只是body的属性而已,并不是面板的属性.
$("#p1").attr("title","你的面板");无效
$("#p1").attr("closed","true");无效
方法
1.调用方法的语法
$('selector').plugin('method', [parameter]);
selector 是jQuery对象选择器。
plugin 是插件的名称。
method 是相应插件现有的方法。
parameter 是参数对象，可以是一个对象、字符串等。
如果写了easyui组件之后传入的第一个参数是字符串,那么就代表执行组件上面某一个方法,
如果不是一个字符串那么就是创建组件，传入的参数是json字符串；如果没有传入参数还是创建组件.
事件
.如果组件发生了什么事情
那么它就会通过事件反应给我们。比如：我们点击tree组件的某个节点，那么就会触发onClick事件。
所有的事件（回调函数）也都定义在jQuery.fn.{plugin}.defaults里面。
注意：注册事件不能采用dom传统方式注册，需要通过组件注册；
语法格式
// 创建
$("#win").window(
// 事件名:匿名方法
{
'title':'JS 窗口',
'onClose':function(){
alert("拜拜！");
},
}
);
常用组件
LinkButton组件
按钮组件，需要通过a标签创建
常用属性：
iconCls:图标;
disabled:是否禁用;按钮显示为灰色，其实就一个样式，并不能禁止事件，还是可以点
plain:true时显示简洁效果,其实就是没有背景;
iconAlign:按钮图标位置;可以选值为left,right;默认为:left;
toggle: 是否可以选中效果.
group : 分组,一般与toggle配合使用,达到单选效果;
禁用按钮事件
按钮有一个属性disabled设置样式为灰色，但是不能达到禁用的效果，我们绑定事件的时候需要判断组件有没有这个属性，如果有则不添加事件
实现方式：
//绑定事件的时候判断一下，灰色的按钮都有一个l-btn-disabled属性,如果有该属性则不添加点击事件
$("a").on("click",function(){
if(!$(this).hasClass("l-btn-disabled")){
alert($(this).text());
}
});
panel组件
panel组件需要通过
[外链图片转存失败(img-wzxUhcSx-1568991128567)(file:///C:\Users\62601\AppData\Local\Temp\ksohtml15240\wps2.jpg)]
<script>
$(function() {
$("#p").panel({
"title":"面板名字",
"conCls":"icon-edit",
//面板大小
'width': 600,
'height': 300,
//折叠按钮
"collapsible":true,
//定义是否显示最小化按钮。
"minimizable":true,
//定义是否显示最大化按钮
"maximizable":true,
//定义是否显示关闭按钮。
"closable":true,
//面板内容，引入其他页面,用<iframe>标签可以引入页面中的js代码
"content":'<iframe width="100%" height="90%" frameborder=0 src="LinkButton组件的使用.html"></iframe>',
// href 只会加载 <body> 中的内容 (不需要script 脚本时可以使用)
//"href":"LinkButton组件的使用.html"
//设置位置
"left":300,
"top":100,
'cls':'pos',
//设置面板是否显示
//closed : true
})
});
</script>
</head>
<body>
<div id="p"></div>
</body>
使用属性fit的时候会自动适应页面，原来设置的宽高会失效
注意：使用href加载页面的时候，其实只会读取被加载页面的body的内容，不会加载body以外的内容。使用content加载另一个页面（在实际开发这种方式用的多）
content:"",
panel不作用的属性
left：左边距
top：上边距
用position: relative添加样式之后才可以
// 给父容器添加css样式cls ; 兄弟 headerCls
tree树状菜单
树控件在web页面中一个将分层数据以树形结构进行显示。它提供用户展开、折叠、拖拽、编辑和异步加载等功能。
语法：
<ul id="tt" class="easyui-tree" data-options="url:'data.json',method:'get'"></ul>
添加点击事件，但是父节点不需要点击事件，这时候就需要判断是否为父节点了
$(function() {
$('#tt').tree({
onClick: function(node) {
//判断只有节点没有children属性的时候才添加事件
if(!node.children){
alert(node.text); // 在用户点击的时候提示
}
}
});
});
url: 后台提供json数据, method: 请求方式 - 默认值post (要改成get)
JSON 结构:
text: 节点名 children[{},{}]子节点 state 初始状态(是否展开,默认打开,如果在最后且没有子节点,就不要写)
tree 的点击事件:
默认提供 node 对象, 判断是否是父节点,然后在进行添加
method: 请求方式 - 默认值post (要改成get)
JSON 结构:
text: 节点名 children[{},{}]子节点 state 初始状态(是否展开,默认打开,如果在最后且没有子节点,就不要写)
tree 的点击事件:
默认提供 node 对象, 判断是否是父节点,然后在进行添加
2175
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
