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

随机推荐

apache2.2控制目录文件访问设置
1.apache2.2控制目录文件访问需求红框可以访问,其他不能访问 2.apache2.2具体正则配置 <locationMatch ^/f/user/Panorama/81/581/(gr ...
ceph存储池基本管理
一,设置默认存储池的pg或pgp的值(推荐100左右),在ceph.conf文件里增加: osd pool default pg num = osd pool default pgp num = 二, ...
springboot 零xml集成mybatis
maven依赖 <?xml version="1.0" encoding="UTF-8"?> <project xmlns="htt ...
yii2 DateTimePicker显示到天
扩展是 kartik\datetime\DateTimePicker; 关键是加入此配置 'minView'=> "month",示例如下: <?php echo D ...
js_数组对象的浅克隆
如果再考虑更奇葩更复杂的情况,例如我们定义: var obj = [{ "a": { "a1": ["a11", "a12&q ...
趣味js【练习题】
1.无限极函数递归,使每次的参数相乘需求:add(1)(2)(3)(4)(5) 1.1首先要知道一个东西,就是function每次调用,都会默认执行tosting 1.2利用递归,每次返回的都是函数 ...
Python爬虫-urllib的基本用法
from urllib import response,request,parse,error from http import cookiejar if __name__ == '__main__' ...
洛谷P3639 [APIO2013] 道路费用 [生成树的特殊算法]
题目传送门道路费用格式难调,题面就不放了. 分析: 这是一道要细(yan)心(jing)的生成树的好(gui)题. 首先我们看到$k$的范围非常小,那么我们就可以直接$2^k$枚举每一条加边是否选 ...
基于springboot实现http响应异常信息国际化
背景国际化是指在设计软件,将软件与特定语言及地区脱钩的过程.当软件被移植到不同的语言及地区时,软件本身不用做内部工程上的改变或修正. 本文提到的异常响应信息国际化是指:前端向后台发起请求,后台在处理 ...
Unity全面优化
前言 Unity的项目优化已经是老生常谈,很多人在项目完成之后,即便创意新颖,也会觉得差强人意,原因就在于没有做详细的项目优化.众所周知,Unity是一个综合性的3D开发引擎,其中包含图像渲染,逻辑处 ...

jQuery EasyUI API 中文文档 - Panel面板

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

随机推荐

热门专题