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:加载文件内容