【EasyUI篇】Panel面板组件

最新推荐文章于 2025-09-11 07:15:38 发布

原创最新推荐文章于 2025-09-11 07:15:38 发布 · 2.5k 阅读

3 ·

CC 4.0 BY-SA版权

微信公众号：程序yuan
关注可了解更多的教程。问题或建议，请公众号留言;

查看--> 全套EasyUI示例目录

7.Panel面板组件

JSP文件

<%--
  Created by IntelliJ IDEA.
  User: ooyhao
  Date: 2018/7/29 0029
  Time: 9:21
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Panel</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/color.css">
    <script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/easyui/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/Panel.js"></script>
    <style rel="stylesheet" type="text/css">
    </style>
</head>
<body>

    <%--class加载方式--%>
   <%--
    <div class="easyui-panel" data-options="closable:true," title="My Panel" style="width: 500px;">
        <p>内容部分</p>
    </div>
--%>
    <button id="btn1">销毁面板</button>
    <button id="btn2">打开面板</button>
    <button id="btn3">关闭面板</button>
    <button id="btn4">刷新面板</button>
    <button id="btn5">重新设置大小</button>
    <button id="btn6">移动面板</button>
    <button id="btn7">最大化面板</button>
    <button id="btn8">最小化面板</button>
    <button id="btn9">从最大化恢复</button>
    <button id="btn10">折叠面板主体</button>
    <button id="btn11">展开面板主体</button>


    <div id="box">
        <p>内容部分</p>
    </div>

    <div id="selector">
        <a class="icon-add" onclick="javascript:alert('add')"></a>
        <a class="icon-edit" onclick="javascript:alert('edit')"></a>
        <a class="icon-cut" onclick="javascript:alert('cut')"></a>
    </div>


</body>
</html>

JS文件

$(function () {

    $("#box").panel({

//----------- 属性列表 ---------------

        //设置id值
        // id:'panel',
        width:400,
        height:300,
        title:"我的面板",
        iconCls:'icon-search',
        // left:200,
        // top:200,
        //可以进行自定义css的设置，但是可能会涉及到优先级的问题
        cls:'a',
        headerCls:'b',
        bodyCls:'c',
        style:{
          //设置背景颜色没有效果
          // background:'red',
          // 不起作用
          // 'min-height':'500px',
        },
        //自适应
        // fit:true,
        //是否显示面板边框，默认为true，
        border:true,
        //在面板创建时是否重新载入属性，默认为true，
        doSize:true,
        //设置是否不显示头部区域，默认false，
        noheader:false,
        content:"设置面板内容",
        //设置面板是否可以折叠
        collapsible:true,
        //设置面板是否可以最小化
        minimizable:true,
        //设置面板是否可以最大化
        maximizable:true,
        //设置面板是否可以有关闭按钮
        closable:true,
        //数组方式
        tools:[
            {
                iconCls:'icon-save',
                handler:function () {
                    alert("保存");
                }
            },{
                iconCls:'icon-help',
                handler:function () {
                    alert('帮助');
                }
            }
        ],
        /*//使用选择器的方式
        tools:"#selector",*/
        //定义在初始化时是否折叠面板，默认为false，
        collapsed:false,
        //定义在初始化时是否最小化面板，默认为false，
        minimized:false,
        //定义在初始化时是否最大化面板，默认为false，
        maximized:false,
        //定义在初始化时是否关闭面板，默认为false，
        closed:false,
        //从URL读取远程数据并且显示到面板。默认为null，
        href:'http://localhost:8081/easyui/getUsers.action',
        // cache:true,
        loadingMessage:"正在努力加载中...",
        //可以对加载过来的数据进行过滤
        extractor:function (data) {
            // alert(data);
            // return data.substring(1,10);
            return data;
        },

//------------- 事件列表 ------------------
//     (带Before的都可以return false)

        onBeforeLoad:function () {
            // alert("在加载远程数据之前触发");
        },
        onLoad:function () {
            // alert("在加载数据之后触发");
        },
        onBeforeOpen:function () {
            // alert("在打开面板之前触发");
        },
        onOpen:function () {
            // alert("在打开面板之后触发");
        },
        onBeforeClose:function () {
            // alert("在关闭面板之后触发");
        },
        onClose:function () {
            // alert("在关闭面板之后触发");
        },
        onBeforeDestroy:function () {
            // alert("在销毁面板之前触发");
        },
        onDestroy:function () {
            // alert("在销毁面板之后触发");
        },
        onBeforeCollapse:function () {
            // alert("在折叠之前触发");
        },
        onCollapse:function () {
            // alert("在折叠过程中触发");
        },
        onBeforeExpand:function () {
            // alert("在展开前触发");
        },
        onExpand:function () {
            // alert("在展开过程中触发");
        },
        onResize:function (width,height) {
            alert("width:"+width+", height:"+height);
        },
        onMove:function (left,top) {
            alert("left:"+left+", top:"+top);
        },
        onMaximize:function () {
            // alert("窗口最大化后触发");
        },
        onRestore:function () {
            // alert("在窗口恢复原始大小之后触发");
        },
        onMinimize:function () {
            // alert("在窗口最小化后触发");
        }




    });

    //属性设置left和top需要设置定位方式
    $("#box").panel('panel').css('position','absolute');

//--------------- 方法列表 ------------------

    //返回属性对象
    console.log($("#box").panel('options'));
    //返回面板对象
    console.log($("#box").panel('panel'));
    //返回header头部对象
    console.log($("#box").panel('header'));
    //返回body对象
    console.log($("#box").panel('body'));

    //设置面板标题
    $("#box").panel('setTitle','myTitle');

    $("#btn1").click(function () {
        $("#box").panel('destroy');//执行onBeforeDestroy
        // $("#box").panel('destroy',true);//不执行onBeforeDestroy
    });

    $("#btn2").click(function () {
        // $("#box").panel('open');//执行onBeforeOpen
        $("#box").panel('open',true);//不执行onBeforeOpen
    });

    $("#btn3").click(function () {
        // $("#box").panel('close');//执行onBeforeClose
        $("#box").panel('close',true);//不执行onBeforeClose
    });

    $("#btn4").click(function () {
        $("#box").panel('refresh');//不执行onBeforeClose
        // $("#box").panel('refresh',"http://www.baidu.com");//不执行onBeforeClose
    });

    //重新设置面板大小
    $("#btn5").click(function () {
        $("#box").panel('resize',{
            left:100,
            top:100,
            width:250,
            height:250,
        });
    });

    //移动面板
    $("#btn6").click(function () {
        $("#box").panel('move',{
            left:200,
            top:200,
        });
    });

    $("#btn7").click(function () {
        $("#box").panel('maximize');
    });

    $("#btn8").click(function () {
        $("#box").panel('minimize');
    });

    $("#btn9").click(function () {
        $("#box").panel('restore');
    });

    $("#btn10").click(function () {
        $("#box").panel('collapse');
    });

    $("#btn11").click(function () {
        $("#box").panel('expand');
    });

});

效果图