[转]EasyUI——常见用法总结
原文链接:
EasyUI——常见用法总结
1. 使用 data-options 来初始化属性。
data-options是jQuery Easyui 最近两个版本才加上的一个特殊属性。通过这个属性,我们可以对easyui组件的实例化可以完全写入到html中,例如:
<div class="easyui-dialog" style="width:400px;height:200px"
data-options="title:'My Dialog',collapsible:true,iconCls:'icon-ok',onOpen:function(){}">
dialog content.
</div>
属性,事件,都可以直接写在data-options里面,这样就方便多了。
来自:http://easyui.btboys.com/the-use-of-easyui-data-options.html
2. tools定义工具栏,继承自panel的应该都可以使用。

$('#p').panel({
width:500,
height:150,
title: 'My Panel',
tools: [{
iconCls:'icon-add',
handler:function(){alert('new')}
},{
iconCls:'icon-save'
handler:function(){alert('save')}
}]
});

tools 同样可以加到data-options里面。
3. easyui 里面的组件属性,同样可以写在标签里面。

<div id="p" class="easyui-panel" title="My Panel" style="width:500px;height:150px;padding:10px;background:#fafafa;"
iconCls="icon-save" closable="true"
collapsible="true" minimizable="true" maximizable=true>
<p>panel content.</p>
<p>panel content.</p>
</div>

data-options和这里效果是一样,但是API里面大部分是按照属性来定义标签的,就想早先的HTML,而data-options就想style定义样式,不知道这两种有什么优劣。
4. 继承

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="easyui/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="easyui/jquery.easyui.min.js" type="text/javascript"></script>
<link href="easyui/themes/gray/easyui.css" rel="stylesheet" type="text/css" />
<link href="easyui/themes/icon.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
$('#dd').dialog({
title: "My Dialog",
modal: true, //dialog继承自window,而window里面有modal属性,所以dialog也可以使用
collapsible: true, //是否可折叠,默认false
minimizable: false, //是否可最小化,默认false
maximizable: true, //是否可最大化,默认false
resizable: true, //是否可折叠,默认false
toolbar: [{
iconCls: 'icon-add',
handler: function () { alert('new') }
}, {
iconCls: 'icon-save',
handler: function () { alert('save') }
}],
buttons: [{
iconCls: 'icon-add',
handler: function () { alert('new') }
}, {
iconCls: 'icon-save',
handler: function () { alert('save') }
}],
//继承自panel,tool只有下面两个属性
tools: [{
iconCls: 'icon-add',
handler: function () { alert('new') }
}, {
iconCls: 'icon-save',
handler: function () { alert('save') }
}]
});
})
</script>
</head>
<body>
<div id="dd" style="width: 500px; height: 400px;">
Dialog Content.
</div>
</body>
</html>

[转]EasyUI——常见用法总结的更多相关文章
- EasyUI——常见用法总结
1. 使用 data-options 来初始化属性. data-options是jQuery Easyui 最近两个版本才加上的一个特殊属性.通过这个属性,我们可以对easyui组件的实例化可以完全写 ...
- Linux中find常见用法
Linux中find常见用法示例 ·find path -option [ -print ] [ -exec -ok command ] {} \; find命令的参数 ...
- php中的curl使用入门教程和常见用法实例
摘要: [目录] php中的curl使用入门教程和常见用法实例 一.curl的优势 二.curl的简单使用步骤 三.错误处理 四.获取curl请求的具体信息 五.使用curl发送post请求 六.文件 ...
- Guava中Predicate的常见用法
Guava中Predicate的常见用法 1. Predicate基本用法 guava提供了许多利用Functions和Predicates来操作Collections的工具,一般在 Iterabl ...
- find常见用法
Linux中find常见用法示例 ·find path -option [ -print ] [ -exec -ok command ] {} \; find命令的参数 ...
- iOS 开发多线程篇—GCD的常见用法
iOS开发多线程篇—GCD的常见用法 一.延迟执行 1.介绍 iOS常见的延时执行有2种方式 (1)调用NSObject的方法 [self performSelector:@selector(run) ...
- iOS开发多线程篇—GCD的常见用法
iOS开发多线程篇—GCD的常见用法 一.延迟执行 1.介绍 iOS常见的延时执行有2种方式 (1)调用NSObject的方法 [self performSelector:@selector(run) ...
- NSString常见用法总结
//====================NSStirng 的常见用法==================== -(void)testString { //创建格式化字符串:占位符(由一个%加一个字 ...
- [转]Linux中find常见用法示例
Linux中find常见用法示例[转]·find path -option [ -print ] [ -exec -ok command ] {} \;find命令的参 ...
随机推荐
- Oracle存储过程java 调用
1.nest表组合成结果集,然后以游标变量的形式返回 --创建类型 create or replace package mytest is -- Author : ADMINISTRATOR -- ...
- Redis学习一 五种基本的数据类型
首先一定要确保Redis是运行这的. 不知道为啥,我的电脑陪完服务以后,刚配完的时候好使,已重启就不行了,死活起不来. 好吧,这些暂时不是很重要. 运行 redis-server.exe 在开一个窗口 ...
- WCF两种方式
http://www.ilanever.com/article/sitedetail.html?id=164 1. 显示添加服务行为,为服务自动提供基于HTTP-GET的元数据.2. 采用元数据交换终 ...
- 使用JetBrains dotMemory 4.0分析内存
安装下载地址:http://www.jetbrains.com/profiler/ 1.在本地启动web应用后,打开dotMemory,附加进程 2.附加后会看到集中颜色得粗条,不断往左边走动,这是内 ...
- 更强大的trim功能,过滤汉字等
第一种方法:通过php自带的函数 <?php /* trim 去除一个字符串两端空格, rtrim 是去除一个字符串右部空格, ltrim 是去除一个字符串左部空格. */ ?> < ...
- C/C++ 笔试、面试题目大汇总
1.求下面函数的返回值( 微软) int func(x) { int countx =0; while(x) { countx ++; x = x&(x-1); } return countx ...
- Cocos2d-JS工程中的文件结构
res文件夹存放资源文件 src文件夹是主要的程序代码 app.js是实现游戏场景的JavaScript文件 resource.js在src文件夹中,定义资源对应的变量 config.json保存模拟 ...
- Maven实战(三)Eclipse构建Maven项目
1. 安装m2eclipse插件 要用Eclipse构建Maven项目,我们需要先安装meeclipse插件 点击eclipse菜单栏Help->Eclipse Marketplac ...
- Windows Runtime - 面向对象化的C++(并非意味着托管)
Windows 8的开发平台总体上分为两部分:一是全新的WinRT,界面搭配Metro style,二是传统的Win32..NET(SL).IE三大平台,界面为传统窗体风格.其中全新的WinRT被微软 ...
- css spprite应用
(一)实现简单的淘宝带图标侧边栏效果 <!DOCTYPE html> <html lang="en"> <head> <meta char ...