原文链接：

EasyUI——常见用法总结

1. 使用 data-options 来初始化属性。

data-options是jQuery Easyui 最近两个版本才加上的一个特殊属性。通过这个属性，我们可以对easyui组件的实例化可以完全写入到html中，例如：

  1. <div class="easyui-dialog" style="width:400px;height:200px"
  2.     data-options="title:'My Dialog',collapsible:true,iconCls:'icon-ok',onOpen:function(){}">
  3.     dialog content.
  4. </div>

属性，事件，都可以直接写在data-options里面，这样就方便多了。

来自：http://easyui.btboys.com/the-use-of-easyui-data-options.html

2.  tools定义工具栏，继承自panel的应该都可以使用。

  1. $('#p').panel({
  2.     width:500,
  3.     height:150,
  4.     title: 'My Panel',
  5.    tools: [{
  6.      iconCls:'icon-add',
  7.      handler:function(){alert('new')}
  8.     },{
  9.      iconCls:'icon-save'
  10.      handler:function(){alert('save')}
  11.    }]
  12. });

tools 同样可以加到data-options里面。

3.  easyui 里面的组件属性，同样可以写在标签里面。

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

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

 4. 继承

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <title></title>
  5.     <script src="easyui/jquery-1.7.2.min.js" type="text/javascript"></script>
  6.     <script src="easyui/jquery.easyui.min.js" type="text/javascript"></script>
  7.     <link href="easyui/themes/gray/easyui.css" rel="stylesheet" type="text/css" />
  8.     <link href="easyui/themes/icon.css" rel="stylesheet" type="text/css" />
  9.     <script type="text/javascript">
  10.         $(function () {
  11.             $('#dd').dialog({
  12.                 title: "My Dialog",
  13.                 modal: true, //dialog继承自window，而window里面有modal属性，所以dialog也可以使用
  14.                 collapsible: true, //是否可折叠，默认false
  15.                 minimizable: false, //是否可最小化，默认false
  16.                 maximizable: true, //是否可最大化，默认false
  17.                 resizable: true, //是否可折叠，默认false
  18.                 toolbar: [{
  19.                     iconCls: 'icon-add',
  20.                     handler: function () { alert('new') }
  21.                 }, {
  22.                     iconCls: 'icon-save',
  23.                     handler: function () { alert('save') }
  24.                 }],
  25.                 buttons: [{
  26.                     iconCls: 'icon-add',
  27.                     handler: function () { alert('new') }
  28.                 }, {
  29.                     iconCls: 'icon-save',
  30.                     handler: function () { alert('save') }
  31.                 }],
  32.                 //继承自panel,tool只有下面两个属性
  33.                 tools: [{
  34.                     iconCls: 'icon-add',
  35.                     handler: function () { alert('new') }
  36.                 }, {
  37.                     iconCls: 'icon-save',
  38.                     handler: function () { alert('save') }
  39.                 }]
  40.             });
  41.         })
  42.     </script>
  43. </head>
  44. <body>
  45.     <div id="dd" style="width: 500px; height: 400px;">
  46.         Dialog Content.
  47.     </div>
  48. </body>
  49. </html>

[转]EasyUI——常见用法总结的更多相关文章

  1. EasyUI——常见用法总结

    1. 使用 data-options 来初始化属性. data-options是jQuery Easyui 最近两个版本才加上的一个特殊属性.通过这个属性,我们可以对easyui组件的实例化可以完全写 ...

  2. Linux中find常见用法

    Linux中find常见用法示例 ·find   path   -option   [   -print ]   [ -exec   -ok   command ]   {} \; find命令的参数 ...

  3. php中的curl使用入门教程和常见用法实例

    摘要: [目录] php中的curl使用入门教程和常见用法实例 一.curl的优势 二.curl的简单使用步骤 三.错误处理 四.获取curl请求的具体信息 五.使用curl发送post请求 六.文件 ...

  4. Guava中Predicate的常见用法

    Guava中Predicate的常见用法 1.  Predicate基本用法 guava提供了许多利用Functions和Predicates来操作Collections的工具,一般在 Iterabl ...

  5. find常见用法

    Linux中find常见用法示例 ·find   path   -option   [   -print ]   [ -exec   -ok   command ]   {} \; find命令的参数 ...

  6. iOS 开发多线程篇—GCD的常见用法

    iOS开发多线程篇—GCD的常见用法 一.延迟执行 1.介绍 iOS常见的延时执行有2种方式 (1)调用NSObject的方法 [self performSelector:@selector(run) ...

  7. iOS开发多线程篇—GCD的常见用法

    iOS开发多线程篇—GCD的常见用法 一.延迟执行 1.介绍 iOS常见的延时执行有2种方式 (1)调用NSObject的方法 [self performSelector:@selector(run) ...

  8. NSString常见用法总结

    //====================NSStirng 的常见用法==================== -(void)testString { //创建格式化字符串:占位符(由一个%加一个字 ...

  9. [转]Linux中find常见用法示例

    Linux中find常见用法示例[转]·find   path   -option   [   -print ]   [ -exec   -ok   command ]   {} \;find命令的参 ...

随机推荐

  1. 在HCI层看从inquiry的整个过程

    一.概述    在windows下寻找远端蓝牙设备,从最开始的inquiry寻找设备,到连接设备,到最后配对完成,整个HCI层所发的command和event以及Data包可以反应整个蓝牙的inqui ...

  2. AQS 与 LockSupport

    1.结构 Lock的实现类其实都是构建在AbstractQueuedSynchronizer上,每个Lock实现类都持有自己内部类Sync的实例 二.二元信号量 A semaphore initial ...

  3. Qt 之 使用 https发送 HTTP请求（使用OPENSSL库）

    一.简述 在使用Qt发送HTTP请求中一般使用的链接都是http://前缀,而有的服务器支持 https://前缀的链接,而Qt本身是支持https的,但是https访问需要用到SSL认证,而QT默认 ...

  4. bodyParser注意“需要请求头的支持”

    bodyParser 支持此类参数解析. 注意: 在提交之前需要指定http 请求头为 content-type=application/json 代码如下: var express = requir ...

  5. new char[]和new char()的区别

    new char[1];分配一块连续的内存,也就是一个数组,里面有1个元素new   char(1);分配一块内存,有一个元素,该元素被初始化为1

  6. Eclipse插件项目 引用其他类库的方法(jar)

    这两天搞了个Eclipse插件项目,用来监测ios.android设备和电脑的连接,安装apk/ipa到对应设备等等功能. 遇到了build path下的library引入编译正常,运行时报Class ...

  7. leetcode：Valid Parentheses

    括号匹配 Given a string containing just the characters '(', ')', '{', '}', '[' and ']', determine if the ...

  8. grep与find

    grep命令可以指定文件中搜索特定的内容,并将含有这些内容的行标准输出.grep全称是Global Regular Expression Print -c:只输出匹配行的计数.-I:不区分大小写(只适 ...

  9. ul和ol的一些知识

    ul和ol的一些知识 div#div0 ul{ border:1px solid #ccc; list-style:none; } div#div0 ul li{ border:1px solid g ...

  10. dubbo的简单使用

    整个过程大致是这样的 1.注册中心使用zookeeper,地址为192.168.192.128:2181! 2.首先服务方 所在的服务器是127.0.0.1:8081 服务方提供的接口: public ...