jQuery EasyUI API 中文文档 - Panel面板

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