jQuery EasyUI API 中文文档

<html>

    <head>

        <title>布局管理器--控制面板</title>

        <script src="jquery-easyui/jquery.min.js"></script>

        <script src="jquery-easyui/jquery.easyui.min.js"></script>

        <script src="jquery-easyui/easyloader.js"></script>

        <script src="jquery-easyui/locale/easyui-lang-zh_CN.js"></script>

        <link rel="stylesheet" type="text/css" href="jquery-easyui/themes/default/easyui.css">

        <script>

        $(function (){

        //alert弹出框，

        //第一个参数是标题

        //第二个参数是内容

        //$.messager.alert('Warning','The warning message'); 

            //2. 使用脚本创建控制面板

            /*$("#p1").panel({

                width:100,

                height:100,

                title:'嘻嘻哈哈',//标题

                tools:[{

                    iconCls:'icon-save',

                    handler:function (){alert('123')}

                }]//自定义工具栏，每一个工具都可以包含2个属性：图标类 和句柄。

            })*/

            //下面的代码将使用ajax载入控制面板内容并且在载入成功时显示信息。

            /*$('#p1').panel({

                href:'1.html',

                onLoad:function(){

                    alert('loaded successfully');

                }

            });*/

            $('#p1').panel({

                    width:100,

                    height:100,

                    title:'嘻嘻哈哈',//标题

                    tools:[{

                        iconCls:'icon-save',

                        handler:function (){alert('123')}

                    }]//自定义工具栏，每一个工具都可以包含2个属性：图标类 和句柄。

            });

    /*

    options：返回选项属性。

    panel：返回控制面板对象。

    header：返回控制面板头对象。

    body：返回控制面板主体对象。

    setTitle：设置控制面板头部的标题文本。

    open：当参数forceOpen设置为true时，控制面板将被打开，不受onBeforeOpen回调函数的约束。

    close：当参数forceClose设置为true时, 控制面板将被打开，不受onBeforeClose回调函数的约束。

    destroy：当参数forceDestroy设置为true时,控制面板将被打开,不受onBeforeDestroy回调函数的约束。

    refresh：当href属性被设置时，刷新控制面板以载入远程数据。

    resize：这是控制面板的尺寸并且进行布局。options对象包含以下2个属性:

        width： 新的控制面板宽度

        height： 新的控制面板高度

        left： 新的控制面板左边距

        top： 新的控制面板顶边距

    move：移动控制面板到一个新的位置。options对象包含以下2个属性:

        left： 新的控制面板左边距

        top： 新的控制面板顶边距

    maximize：使控制面板铺满整个容器。

    minimize：最小化控制面板。

    restore：使最大化的控制面板重置为其初始化时的大小和位置。

    collapse：折叠控制面板主体。

    expand：扩展控制面板主体。

    */

            //open,close的方法使用如下：

            $("#open").click(function (){

                $('#p1').panel('open');

            })

            $("#close").click(function (){

                $('#p1').panel('close');

            })

        });

        </script>

    </head>

    <body>

        <!--2. 使用脚本创建控制面板-->

        <div id="p1"></div>

        <input id="close" type="button" value="关闭">

        <input id="open" type="button" value="开启">

        <!--1. 使用标签创建控制面板

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

        -->

        <!--

    panel的属性

        data-options：是放easyui自带的属性和方法的

        title：控制面板的标题

        <div id="p" class="easyui-panel"  title="My Panel"></div>

        iconCls：控制面板的图标

        <div id="p" class="easyui-panel" iconCls="icon-save"  title="My Panel"></div>

        width：控制面板的宽

        <div id="p" class="easyui-panel" iconCls="icon-save" title="My Panel" data-options="width:100"></div>

        height：控制面板的高

        <div id="p" class="easyui-panel" iconCls="icon-save" title="My Panel" data-options="width:100,height:100"></div>

        style：给控制面板加一个自定义样式

        <div id="p" class="easyui-panel" style="width:100" iconCls="icon-save" title="My Panel" data-options="width:100,height:100"></div>

        fit：设置为true时，控制面板的大小将铺满它所在的(浏览器)

        <div id="p" class="easyui-panel" style="width:100" iconCls="icon-save" title="My Panel" data-options="width:100,height:100,fit:true"  ></div>

        border：为false时不显示边框，相反是显示，默认是true

        <div id="p" class="easyui-panel" style="width:100" iconCls="icon-save" title="My Panel" border=true data-options="width:100,height:100,fit:true"  ></div>

        noheader：为true时控制面板头部将不被创建，相反会被创建，默认是false

        <div id="p" class="easyui-panel" noheader=true style="width:100" iconCls="icon-save" title="My Panel" border=true data-options="width:100,height:100,fit:true"  ></div>

        content：显示控制面板里的内容

        <div id="p" class="easyui-panel" noheader=true style="width:100" iconCls="icon-save" title="My Panel" border=true data-options="width:100,height:100,fit:true content:'xixihaha'"  ></div>

        collapsible：为true时显示可折叠按钮，相反不显示，默认是fales

        <div id="p" class="easyui-panel" collapsible=true noheader=true style="width:100" iconCls="icon-save" title="My Panel" border=true data-options="width:100,height:100,fit:true content:'xixihaha'"   ></div>

        minimizable：为true时显示最小化按钮，相反不显示，默认是false

        <div id="p" class="easyui-panel" minimizable=true collapsible=true noheader=true style="width:100" iconCls="icon-save" title="My Panel" border=true data-options="width:100,height:100,fit:true content:'xixihaha'"   ></div>

        maximizable：为true时显示最大化按钮，相反不显示，默认是false

        <div id="p" class="easyui-panel" maximizable=true minimizable=true collapsible=true noheader=true style="width:100" iconCls="icon-save" title="My Panel" border=true data-options="width:100,height:100,fit:true content:'xixihaha'"   ></div>

        closable：为true时显示关闭按钮，相反不显示，默认是false

        <div id="p" class="easyui-panel" closable=true maximizable=true minimizable=true collapsible=true noheader=true style="width:100" iconCls="icon-save" title="My Panel" border=true data-options="width:100,height:100,fit:true content:'xixihaha'"   ></div>

        collapsed：为true时默认是折叠，相反不折叠，默认是false

        <div id="p" class="easyui-panel" collapsed=true></div>

        minimized：为true时默认是最小化的，相反是不最小化的，默认是false

        <div id="p" class="easyui-panel" minimized=true></div>

        maximized：为true时默认是最大化的，相反是不最大化的，默认是false

        <div id="p" class="easyui-panel" maximized=true></div>

        closed：为true时默认是关闭的，相反是不关闭的，默认是false

        <div id="p" class="easyui-panel" closed=true></div>

        href：载入远程数据的超链接，载入的数据将显示在控制面板中。

        <div id="p" class="easyui-panel" href="1.html"></div>

        loadingMessage：完全加载之前显示的内容

        <div id="p" class="easyui-panel" data-options="loadin..."></div>

    panel的事件

        onLoad：在远程数据被载入时触发。

        <div id="p" class="easyui-panel"  title="My Panel" collapsible=true closable=true href="1.html" width="100" data-options="width:500,height:500,onLoad:aa" > 

        onBeforeOpen：在控制面板被打开之前触发，返回false将停止打开。

        <div id="p" class="easyui-panel"  title="My Panel" collapsible=true closable=true href="1.html" width="100" data-options="width:500,height:500,onBeforeOpen:aa" > 

        onOpen：在控制面板被打开之后触发。

        <div id="p" class="easyui-panel"  title="My Panel" collapsible=true closable=true href="1.html" width="100" data-options="width:500,height:500,onOpen:aa" > 

        onBeforeClose：在控制面板被关闭之前触发，返回false将取消关闭。

        <div id="p" class="easyui-panel"  title="My Panel" collapsible=true closable=true href="1.html" width="100" data-options="width:500,height:500,onBeforeClose:aa" >

        onClose：在控制面板被关闭后触发。

        <div id="p" class="easyui-panel"  title="My Panel" collapsible=true closable=true href="1.html" width="100" data-options="width:500,height:500,onClose:aa" >

        onBeforeCollapse：在控制面板被折叠之前触发，返回false将停止折叠。

        <div id="p" class="easyui-panel"  title="My Panel" collapsible=true closable=true href="1.html" width="100" data-options="width:500,height:500,onBeforeCollapse:aa" >

        onCollapse：在控制面板被折叠之后触发。

        <div id="p" class="easyui-panel"  title="My Panel" collapsible=true closable=true href="1.html" width="100" data-options="width:500,height:500,onCollapse:aa" >

        onBeforeExpand：在控制面板被扩展之前触发，返回false将停止扩展。

        <div id="p" class="easyui-panel"  title="My Panel" collapsible=true closable=true href="1.html" width="100" data-options="width:500,height:500,onBeforeExpand:aa" >

        onExpand：在控制面板被扩展之后触发。

        <div id="p" class="easyui-panel"  title="My Panel" collapsible=true closable=true href="1.html" width="100" data-options="width:500,height:500,onExpand:aa" >

        onMaximize：在控制面板被最大化后触发。

        <div id="p" class="easyui-panel"  title="My Panel" collapsible=true closable=true href="1.html" width="100" data-options="width:500,height:500,onMaximize:aa" >

        onMinimize：在控制面板被最小化后触发。

        <div id="p" class="easyui-panel"  title="My Panel" collapsible=true closable=true href="1.html" width="100" data-options="width:500,height:500,onMinimize:aa" >

        -->

    </body>

</html>

jQuery EasyUI API 中文文档 - Panel面板的更多相关文章

jQuery EasyUI API 中文文档 - ComboGrid 组合表格
jQuery EasyUI API 中文文档 - ComboGrid 组合表格,需要的朋友可以参考下. 扩展自 $.fn.combo.defaults 和 $.fn.datagrid.defaults ...
jQuery EasyUI API 中文文档 - ValidateBox验证框
jQuery EasyUI API 中文文档 - ValidateBox验证框,使用jQuery EasyUI的朋友可以参考下. 用 $.fn.validatebox.defaults 重写了 d ...
jQuery EasyUI API 中文文档
http://www.cnblogs.com/Philoo/tag/jQuery/ 共2页: 1 2 下一页 jQuery EasyUI API 中文文档 - 树表格(TreeGrid) 风流涕淌 ...
jQuery EasyUI API 中文文档 - 面板（Panel）
Panel 面板用$.fn.panel.defaults重写defaults. 用法示例创建Panel 1. 经由标记创建Panel 从标记创建Panel更容易.把 'easyui-panel ...
jQuery EasyUI API 中文文档 - 布局（Layout）
<html> <head> <script src="jquery-easyui/jquery.min.js"></script> ...
jquery easyui 弹出消息框 (转载) jQuery EasyUI API 中文文档 - 消息框（Messager） http://www.cnblogs.com/hantianwei/archive/2012/03/19/2407113.html
<html> <head>  <link rel="stylesheet" ty ...
jQuery EasyUI API 中文文档 - 分隔按钮（splitbutton）
<html> <head> <script src="jquery-easyui/jquery.min.js"></script> ...
jQuery EasyUI API 中文文档 - 菜单按钮（menubutton）
<html> <head> <script src="jquery-easyui/jquery.min.js"></script> ...
jQuery EasyUI API 中文文档 - 链接按钮（linkbutton）
<html> <head> <script src="jquery-easyui/jquery.min.js"></script> ...

随机推荐

以太坊go-ethereum客户端docker安装（二）开发（dev）环境搭建
在上一篇博客中,讲述了基于docker怎么搭建一个go-ethereum节点.作为开发人员,如果只是单纯的拥有一个Full node,还无法满足正常的开发.比如说,进行转账交易,你要考虑是否拥有一定的 ...
csu 1548(三分)
1548: Design road Time Limit: 2 Sec Memory Limit: 256 MBSubmit: 383 Solved: 200[Submit][Status][We ...
cocos2dx2.x 创建项目
cocos2d-x下载地址:http://www.cocos2d-x.org/download 2.0之后的创建项目比较easy了第一步,首先 cd cocos2d-x-2.2.1/tools/pr ...
javax.persistence.EntityNotFoundException: Unable to find报错
这类错id 可能是10,可能是27,也可能是其他数字错误描述: javax.persistence.EntityNotFoundException: Unable to find 某个类 with ...
PHP原理之对象(一)
作者: Laruence( ) 本文地址: http://www.laruence.com/2008/08/22/412.html 转载请注明出处或许你知道,或许你不知道,PHP是一个弱类型,动 ...
2017 计蒜之道初赛第五场 B. UCloud 的安全秘钥（简单）
暴力. 暴力枚举$S$串的每一个长度为$m$的子串,排序判断即可. #include <iostream> #include <cstdio> #include <cst ...
2018IEEE冬季生物识别学校 5天课程
里边有很多介绍及相关报告的PPT https://www.comp.hkbu.edu.hk/wsb18/index.php https://www.comp.hkbu.edu.hk/wsb18/pro ...
批量修改 android eclipse 项目名
韩梦飞沙韩亚飞 313134555@qq.com yue31313 han_meng_fei_sha 最外层的文件夹名字.
[ZROI 9.16模拟赛] Tutorial
Link: 传送门 A: 套路题结果想了好久…… 排序二叉树的性质就是中序遍历单调递增于是只考虑当前树的中序遍历的序列即可,与树的形态无关将序列改成严格单调增想到最大化不变的数,但直接LIS求的是 ...
[UOJ30]/[CF487E]Tourists
[UOJ30]/[CF487E]Tourists 题目大意: 一个$n(n\le10^5)$个点$m(m\le10^5)$条边的无向图,每个点有点权.$q(q\le10^5)$次操作,操作 ...

jQuery EasyUI API 中文文档 - Panel面板

jQuery EasyUI API 中文文档 - Panel面板的更多相关文章

随机推荐

热门专题