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

随机推荐

csu 1553(RMQ+尺取法)
1553: Good subsequence Time Limit: 2 Sec Memory Limit: 256 MBSubmit: 794 Solved: 287[Submit][Statu ...
SICP第三章题解
目录 SICP第三章题解 ex3-17 ex3-18 ex3-19 队列 ex3-21 ex3-22 ex3-24 ex3-25 3.4 并发:时间是一个本质问题 ex3-38 3.4.2 控制并发的 ...
WordPress用户角色与用户能力/权限
WordPress用户角色(user roles)是WP或者其它插件增加的,可以让网站管理员(网站管理员也是一种角色)来方便的管理用户的权限/能力(Capabilities,一般情况下,一种角色不止有 ...
pyqt5改变窗体颜色
from PyQt5.QtWidgets import QApplication,QWidget from PyQt5.QtGui import QColor import sys from t im ...
微软企业库5.0 学习之路——第十步、使用Unity解耦你的系统—PART2——了解Unity的使用方法（3）
今天继续介绍Unity,在上一篇的文章中,我介绍了使用UnityContainer来注册对象之间的关系.注册已存在的对象之间的关系,同时着重介绍了Unity内置的各种生命周期管理器的使用方法,今天则 ...
Java 中静态代码块初始化问题测试
Java 中静态代码块初始化问题测试原创情况一:变量是 static final 修饰的"编译期常量",如 public static final String a = &qu ...
poj2253 Frogger(Floyd)
题目链接 http://poj.org/problem?id=2253 题意给出青蛙A,B和若干石头的坐标,现在青蛙A要跳到青蛙B所在的石头上,求出所有路径中最远那一跳的最小值. 思路 Floyd算 ...
[Codeforces19D]Points 线段树
大致题意: 给出n个询问,每次询问有三种: 1.往平面上加一个点 2.删除平面上的一个点 3.给出一个点p,查询平面上某点q,使得q.x>p.x且q.y>p.y,输出x轴坐标最小的q,若有 ...
洛谷P2296 寻找道路 [拓扑排序，最短路]
题目传送门寻找道路题目描述在有向图G 中,每条边的长度均为1 ,现给定起点和终点,请你在图中找一条从起点到终点的路径,该路径满足以下条件: 1 ．路径上的所有点的出边所指向的点都直接或间接与终点 ...
洛谷P2471 [SCOI2007] 降雨量 [RMQ，模拟]
题目传送门降雨量题目背景 07四川省选题目描述我们常常会说这样的话:“X年是自Y年以来降雨量最多的”.它的含义是X年的降雨量不超过Y年,且对于任意Y<Z<X,Z年的降雨量严格小于X ...

jQuery EasyUI API 中文文档 - Panel面板

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

随机推荐

热门专题