EasyUI panel

Posted 2020-10-12 biind

1.脚本生成panel

2.panel属性

3.panel事件

4.panel方法

一 脚本生成panel

  <div id="tt"></div>
    <script>
        $(function () {
            $(‘#tt‘).panel({
                width: ‘100%‘,
                height: ‘200‘
            });
        });

二 panel属性

参考：http://www.jeasyui.net/plugins/159.html

 $(function () {           
            $(‘#tt‘).panel({
                width: ‘100%‘,
                height: ‘200‘,
                fit: true,    //适应父容器大小
                border: false,//不显示边框
                minimizable: true,
                maximizable: true,
                closable: true,
                collapsible: true,
                title: ‘My Panel‘,
                href: ‘WebForm1.aspx‘,
                onLoad: function () { },
                tools: [{
                    iconCls: ‘icon-add‘,
                    handler: function () { alert(‘new‘) }
                }, {
                    iconCls: ‘icon-save‘,
                    handler: function () { alert(‘save‘) }
                }]
            });
        });

三 panel 事件

例如：onLoad  onOpen，还有其他事件，参考官网注解

 $(function () {
            $(‘#tt‘).panel({
                width: ‘100%‘,
                height: ‘200‘,
                fit: true,    //适应父容器大小
                border: false,//不显示边框
                minimizable: true,
                maximizable: true,
                closable: true,
                collapsible: true,
                title: ‘My Panel‘,
                href: ‘WebForm1.aspx‘,
                onLoad: function () { },
                onOpen: function () { },
                tools: [{
                    iconCls: ‘icon-add‘,
                    handler: function () { alert(‘new‘) }
                }, {
                    iconCls: ‘icon-save‘,
                    handler: function () { alert(‘save‘) }
                }]
            });
        });

 

四 panel 方法

$("#tt").panel("open");
        $("#tt").panel("close");
        $("#tt").panel("refresh");   //刷新内容，当href有值时，页面重新加载
        $("#tt").panel("maximize");  //最大化
        $("#tt").panel("minimize");  //最小化