7-19easyui1

1.课程介绍

1. easyui的认识(了解)

(1)是一组基于jQuery的UI(用户界面)插件集合;
(2)而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。
(3)学习的时候，成本不大，easyui知识点由JS+HTML+CSS+jquery，容易上手
(4)开发者不需要编写复杂的JavaScript，也不需要对css样式有深入的了解，开发者只有需要了解一些简单的html标签。–完成页面的构建
(5)学习方法 copy+edit 官网里面有很多示例

 Bootstrap -- 响应式的jquery框架 快速构建web程序的框架

Easyui 就是基于jquery做界面的框架，上手容易，学习方式copy+edit

2. 创建组件的方式（掌握）

//创建组件方式两种，
//第一通过HTML方式创建 语法

、

			//第二种通过js来创建
			$("#a1").panel({
				width:500,
				height:200,
				title:"爱不爱我",
				tools: [{    
			    iconCls:'icon-add',    
			    handler:function(){alert('new')}    
			  },{    
			    iconCls:'icon-save',    
			    handler:function(){alert('save')}    
			  }]   
			});
			
		});

3. 组件的实现底层原理（了解）

两种方法最后还是基于js方法调用
最终还是调用js的方式来创建，$(“#p”).panel({json参数});

4. 组件三要素（掌握）

/组件三要素：
（a） 每一个组件创建出来的时候，都有默认属性
(b) 属性在创建的时候，就应该定义好，不要在创建完才去修改属性
© 属性的定义方式
（d） 直接在js创建组件的时候，使用
组件的事件：
js jquery 事件
事件：操作这个组件 具体发生一些事情/

$(function(){
				//调用panel方法创建组件
				$("#zsq1").panel({
					title:"爱你",
					closable:true
				});
				$("#mybtn").click(function(){
					$("#zsq1").panel('open')
				});
				$("#mybtn1").click(function(){
					$("#zsq1").panel('close')
				})
				$("#mybtn2").click(function(){
					$("#zsq1").panel('refresh','aa.txt')
				});
				
			});```

	**属性只能在创建（初始化）组件有效，组件创建完毕后，如果对某个属性进行了修改无效；**
## 5. Panel、LinkButton、上下文菜单;（掌握）
**linkbutton**

$(function(){
/linkbutton的属性说明:
iconCls:按钮图标
toggle：为true时允许用户切换其状态是被选中还是未选择 结合group来使用 在一组里面只能选中一个
plain：简洁的效果
iconAlign：图标的位置
data-options：可以设置组件的属性
disabled：禁用
group：分组/
//注册事件
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲cutBtn").on('cl…(this).hasClass(‘l-btn-disabled’)){

				}else{
					alert("悟空你看。。。。。。。。。")
				}
				
			})
		
			
		});

**pannel**

title:标题
padding：内容距离边框距离
iconCls：图标
collapsible：true显示折叠按钮
minimizable：最小化
maximizable：最大化
closable：关闭按钮
tools:引入工具 比如引入 add和save图标
fit:自适应父容器 设置为true 宽度和高度没有效果
href:加载文件内容