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

随机推荐

Flyweight模式（亨元模式）
这应该算是最好理解的一个设计模式了吧·················· 面向对象语言的原则就是一切都是对象,但是如果真正使用起来,有时对象数可能显得很庞大,比如,字处理软件,如果以每个文字都作为一个 ...
05 java 基础：运算符、程序结构
赋值运算符 : = 三元运算符 : ? 算术运算符 : +.- .*./.% 自增自减运算符: ++.-- 关系运算符:>.<.==.>=.<=.!= 逻辑运算符 :& ...
CoreOS 添加用户并赋予sudo权限
使用root账号登录CoreOS username 为你要添加的用户登录名添加用户到root组 useradd -g rot username 添加 sudo 权限 visudo -f /etc/s ...
Deepin 2015 安装惠普打印机驱动
参考:https://bbs.deepin.org/forum.php?mod=viewthread&tid=34749&extra= 1.安装新立得包管理器:sudo apt-get ...
(13) go map
1.定义 map 无序, key唯一 (1) (2) (3)定义+赋值 2. map的值时map, 记得要make 3.增删改查 (1)增改 (2)删除 (3)查 4.遍历值map 嵌套for, ...
小程序登陆遇到 ERR_REQUEST_PARAM
小程序测试环境突然登陆不上,返回的错误信息是{}"code":-1,"error":"ERR_REQUEST_PARAM"}. 小程序登陆代 ...
Linux安装apache服务
1.通过yum包下载安装httpd yum -y install httpd*(等待安装) 到下面就安装完毕 2.启动apache服务 service httpd restart 3.现在就可以查看a ...
vmware12中centos7以NAT连接网络
1.第一步当然是安装VM和安装CentOS,我用的是VM12和64位的CentOS7,怎么安装在我的其他文中有写到: http://www.cnblogs.com/wuyx/p/7246675.htm ...
CF614A【签到题】
题目链接[http://codeforces.com/problemset/problem/614/A] 题意:输入三个数l.r.k(1 ≤ l ≤ r ≤ 1018, 2 ≤ k ≤ 109),输出 ...
( VIJOS )VOJ 1049 送给圣诞夜的礼品矩阵快速幂
https://vijos.org/p/1049 非常普通的矩阵快速幂... 但是我第一次写忘了矩阵不能交换律... 第一二次提交RE直到看到题解才发现这道题不能用递归快速幂... 第三次提交成 ...

jQuery EasyUI API 中文文档 - Panel面板

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

随机推荐

热门专题