easyui精简版教程 10分钟上手
来源:互联网 发布:淘宝增值服务有哪些 编辑:程序博客网 时间:2024/06/05 02:20
--easy ui 组件依赖关系
menu菜单组件 .基础类
panel面板组件 . 基础类
easyloader加载器 . 基础类
droppable可放置 .基础类
droppable可放置 .基础类
resizable可调整尺寸 . 基础类
tooltip提示框 . 基础类
easyloader加载器 .基础类
draggable可拖动 .基础类
calendar日历 .基础类
form表单 .基础类
parser解析器 基础类
linkbutton链接按钮 . 基础类
menubutton菜单按钮 依赖 menu linkbutton
splitbutton 分割按钮 依赖menubutton
layout布局组件 依赖 panel resizable
accordion折叠面板组件 依赖panel
tabs标签页/选项卡组件 依赖panel linkbutton
progressBar进度条 依赖none
searchbox搜索框 依赖menubutton
pagination分页 依赖linkbutton
tree树 依赖draggable droppable
propertygrid属性网格 依赖datagrid
datagrid数据网格 依赖panel resizable linkbutton pagination
messager消息框 依赖window linkbutton progressbar
dialog对话框 依赖window linkbutton
numberbox数字框 依赖validatebox
datebox日期框 依赖combo calendar
datetimebox日期时间框 依赖datebox timespinner
spinner微调器 依赖validatebox
numberspinner数字微调器 依赖spinner numberbox
timespinner时间微调器 依赖spinner
slider滑动 依赖draggable
window窗口 依赖draggable resizable panel
combogrid组合网格 依赖combo datagrid
combo组合 依赖validatebox panel
combobox组合框 依赖combo
combotree组合树 依赖combo tree
validatebox验证码 依赖tooltip
treegrid树形网格datagrid
--easy ui 概述
easy ui重要的概念就是依赖,重写
注意:一个组件依赖另一个组件,类似于java中的继承,通常easy ui很少重写父类的属性.
当要修改组件的默认值时;可以通过$.fn.menu.defaults 从写默认值.
依赖方式实例:
//datetimebox本身没有事件,但是他继承了datebox,datebox继承了combo,所以datetimebox就可以使用combo的事件,实现相应的功能
$('#lizi').datetimebox({
属性1:'111',
...
onHidePanel:function(){
//事件处理方式;
}
});
重写方式实例:(给datagrid的属性添加datimebox的功能)
//重写datetimebox定义代码:$.extend($.fn.datagrid.defaults.editors, {datetimebox : {init : function(container, options) {var box = $('<input />').appendTo(container);box.datetimebox(options);return box;},getValue : function(target) {return $(target).datetimebox('getValue');},setValue : function(target, value) {$(target).datetimebox('setValue', value);},resize : function(target, width) {var box = $(target);box.datetimebox('resize', width);},destroy : function(target) {$(target).datetimebox('destroy');}}});
(2)调用代码:
{field:'fieldName',title:'标题',width:140,align:'center',sortable:true,hidden:false,editor:{type:'datetimebox' , options:{editable:false }}}
注册方式实例:
的
4个重点
- 加载方式
- 属性
- 事件
- 方法
详解:
加载方式; class加载方式,js加载方式(比较常用)
class方式:
<div id="lizi" class="easyui-menu" style="width:120px;"></div>
js方式:
$('#lizi').menu({
onClick:function(item){
//...
}
});
<div id="lizi"></div>
注意:通常easyuijs加载方式需要注册,要写在
$(function (){
//内容
}); 中
属性加载实例:
$('#lizi').menu({
id:'id',
text:'标题',
....
});
事件加载方式:
$('#lizi').menu({
id:'id',
text:'标题',
....
onclick:function(){
//事件处理...
}
});
方法加载方式:
var fanhuizhi = $('#lizi').menu('options');
阅读全文
1 0
- easyui精简版教程 10分钟上手
- Git精简教程,快速上手
- Git精简教程,快速上手
- Git 5分钟上手小白教程
- 10分钟快速上手github
- Tensorflow 10分钟快速上手
- 字典教程精简版
- ECharts官方教程(一)【5分钟上手ECharts】
- 10分钟上手玩ROS仿真机器人
- 10分钟上手图数据库Neo4j
- Git使用教程(精简版)
- Hololens官方教程精简版
- Hololens官方教程精简版
- Hololens官方教程精简版
- Hololens官方教程精简版
- Hololens官方教程精简版
- Hololens官方教程精简版
- Hololens官方教程精简版
- 动态代理hook自己进程的startActivity方法
- HDU 2485 Destroying the bus stations(最小割)
- 阿里-2018 c++ 第一题
- 博客格式测试
- 多态的经典问题
- easyui精简版教程 10分钟上手
- 1355 斐波那契的最小公倍数
- 校园招聘-2017阿里C/C++研发工程师内推笔试编程题
- VS恢复默认设置
- 第二十六天总结
- java学习——java基础(九)之序列化
- HDU 6172 Array Challenge (打表找规律+矩阵快速幂 17多校第十场第2题)
- <<Linux达人养成计划二>>学习笔记
- 挑战程序竞赛系列(37):3.4利用数据结构高效求解