博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
EasyUI——常见用法总结
阅读量:5903 次
发布时间:2019-06-19

本文共 2160 字,大约阅读时间需要 7 分钟。

 

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里面,这样就方便多了。

 

 

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>

<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>

 

实现效果就是这样的!

 

 

 

 

 

转载地址:http://aqkpx.baihongyu.com/

你可能感兴趣的文章
两种方式设置iframe的高度区别
查看>>
应用后台省电秘籍——低功耗状态下应用如何正常运行?
查看>>
Iterator 和 for...of 循环
查看>>
PAT A1086
查看>>
浅析微信支付:开发前的准备
查看>>
我理解的数据结构(七)—— 堆和优先队列(Heap And PriorityQueue)
查看>>
Category 特性在 iOS 组件化中的应用与管控
查看>>
浮动的label
查看>>
前端工程化
查看>>
微信公众号开发中的支付流程
查看>>
PowerShell 学习笔记 - 1 PS Core 基础
查看>>
NodeJS+Express搭建个人博客-环境搭建(一)
查看>>
关于iOS 11.x微信连wifi流程中,在Portal页无法拉起微信问题的简单记录
查看>>
Python GUI库wxPython官网Hello World示例的逐行解释
查看>>
RE·WORK 巅峰对话:深度学习将彻底改变医疗健康领域
查看>>
计算机网络物理层
查看>>
快速得到Word2007的Docx或Docm文档中的图片
查看>>
在Exchange Server 2007中使用多主机名称证书
查看>>
Cool!15个创意的 CSS3 文本效果【下篇】
查看>>
中手游接到私有化提议 每股ADS 21.5美元
查看>>