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

随机推荐

scala学习笔记4--scala的函数一
默认值: def sayMyName(name : String = "Jack"){ println(name) } 可变参数: def sumMoreParameters(el ...
CoreOS中随着系统启动Docker Container
Start containers automatically https://docs.docker.com/engine/admin/host_integration/ https://www.fr ...
CentOS系统初始化---不断更新中
注意EOF不能有空格tab键 #get os version release=$(rpm -q --qf "%{VERSION}" $(rpm -q --whatprovides ...
【BZOJ 3998】 3998: [TJOI2015]弦论 (SAM )
3998: [TJOI2015]弦论 Time Limit: 10 Sec Memory Limit: 256 MBSubmit: 2627 Solved: 881 Description 对于一 ...
「BZOJ 4502」串
「BZOJ 4502」串题目描述兔子们在玩字符串的游戏.首先,它们拿出了一个字符串集合 $S$,然后它们定义一个字符串为"好"的,当且仅当它可以被分成非空的两段,其中每一段 ...
[BZOJ2402]陶陶的难题II(树链剖分+线段树维护凸包+分数规划)
陶陶的难题II 时间限制:40s 空间限制:128MB 题目描述输入格式第一行包含一个正整数N,表示树中结点的个数. 第二行包含N个正实数,第i个数表示xi (1<=xi<= ...
[BZOJ1040][ZJOI2008]骑士(环套树dp)
1040: [ZJOI2008]骑士 Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 5816 Solved: 2263[Submit][Status ...
2018/3/13 noiρ[rəʊ]模拟赛 125分
T1 60分暴力,水分也不会水,打表也不会打,正解是不可能写正解的,这辈子都写不出来正解的,虽然是zz题但是也拿不到分这样子. 正解:(啥?正解是sb组合数?这都他娘的想不到,真鸡儿丢人我自杀吧.) ...
[JZYZOJ 1288][洛谷 1005] NOIP2007 矩阵取数 dp 高精度
https://www.luogu.org/problem/show?pid=1005 dp好想,高精度练手题,有点不舒服的是前后取数位置的计算,代码量太少才会写题这么慢,noip之前虽然重点放在 ...
[CodeForces-375E]Red and Black Tree
题目大意: 给你一棵带边权的树,每个结点可能是红色或者黑色,你可以交换若干个点对使得任意一个红点到达与其最近的黑点的距离小于等于m. 思路: 动态规划. f[i][j][k]表示以i为根的子树中,连向 ...

jQuery EasyUI API 中文文档 - Panel面板

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

随机推荐

热门专题