2021-05-18

最新推荐文章于 2024-11-05 14:59:15 发布

ADgainaigainai

最新推荐文章于 2024-11-05 14:59:15 发布

阅读量122

点赞数

分类专栏： EasyUI 文章标签： easyui

本文链接：https://blog.csdn.net/ADgainaigainai/article/details/116998395

版权

EasyUI 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

EasyUI的panel组件

创建实例标签元素：panel组件使用<div>标签元素定义

Panel组件定义：Panel（面板），作为承载其它内容的容器，是构建其它组件的基础（如layout、tabs、accordion等）。它还提供了折叠、关闭、最大化、最小化和自定义行为，面板可以很容易的嵌入到web页面的任意位置。

panel组件常用基本属性见表：

属性名	属性值类型	描述
title	string	在面板头部显示的标题文本
iconCls	string	设置一个16*16图标的CSS类ID，显示在面板左上角
width	number	设置面板宽度
height	number	设置面板高度
fit	boolean	当设置为true时，面板大小将自适应父容器
border	boolean	定义是否显示面板边框
doSize	Boolean	如果设置为true，在面板创建时将重置大小和重新布局
minimizable	boolean	定义是否显示最小化按钮
maximizable	boolean	定义是否显示最大化按钮
closable	boolean	定义是否显示关闭按钮
tools	array，selector	自定义工具菜单，可用值：（1）数组，每个元素均包含“iconCls”和“handler”属性（2）指向工具菜单的选择器
href	string	从URL读取远程数据并显示到面板。注意：内容将不会被载入，直到面板打开或扩大，在创建延迟加载面板时非常有用
loadingMessage	string	在加载远程数据时，在面板内显示一条消息
collapsible	Boolean	定义是否显示可折叠按钮

实例化panel组件

 <script type="text/javascript">
        $(function () {
            loadPanel();
        });

        function loadPanel() {
            $("#panel01").panel({
                title: "面板标题信息-dataoption",
                collapsible: "true",
                iconcls: "icon-save",
                width: 500,
                height: 300,
                fit: true,
                border: true,
                minimizable: true,
                maximizable: true,
                closeble: true
            })
        }
</script>

<div id="panel01">
        实例化面板组件
</div>

panel组件的tools属性

panel组件的tools属性，是自定义工具菜单，其可用值包括：

（1）数组，每个元素均包含“iconCls”和“handler”属性

（2）指向工具菜单的选择器

（3）iconCls是选择图标样式。

（4）handler属性，单击会触发的事件，通过事件执行代码或函数。

<script type="text/javascript">
        $(function () {
            loadPanel();
        });

        function loadPanel() {
            $("#panel01").panel({
                title: "面板标题信息-dataoption",
                collapsible: "true",
                iconcls: "icon-save",
                width: 500,
                height: 300,
                fit: true,
                border: true,
                minimizable: true,
                maximizable: true,
                closeble: true,
                tools: [{
                    iconCls: 'icon-add',
                    handler: function () {
                        console.info("执行添加操作")
                    }
                },
                {
                    iconCls: 'icon-remove',
                    handler: function () {
                        console.info("执行删除操作")
                    }
                }]
            })
        }
</script>

<div id="panel01">
        实例化面板组件
</div>

panel组件href和loadingMessage属性

href属性是从URL读取远程数据并将其显示到面板，loadingMessage属性用于在加载远程数据时在面板内显示一条等待中的友好提示信息。所以这两个属性通常配套使用，特别要注意的是，href属性只会引用目标文件<body>标签元素内的内容。

<script type="text/javascript">
        $(function () {
            loadPanel();
        });

        function loadPanel() {
            $("#panel01").panel({
                title: "面板标题信息-dataoption",
                collapsible: "true",
                iconcls: "icon-save",
                width: 500,
                height: 300,
                border: true,
                minimizable: true,
                maximizable: true,
                closeble: true,
                loadmessage: "努力加载中...",
                href: "HTMLPage1.htm",
                tools: [{
                    iconCls: 'icon-add',
                    handler: function () {
                        console.info("执行添加操作")
                    }
                },
                {
                    iconCls: 'icon-remove',
                    handler: function () {
                        console.info("执行删除操作")
                    }
                }]
            })
        }
    </script>

<div id="panel01">
        实例化面板组件
</div>



//HTMLPage.htm代码
<body>
    <style type="text/css">
        .redCls
        {
            color: Red;
            font-weight: bold;
        }
        .blueCls
        {
            color: blue;
            font-weight: bold;
        }
        .greenCls
        {
            color: green;
            font-weight: bold;
        }
    </style>
    <p class="redCls">
        一行红色文字</p>
    <p class="blueCls">
        一行蓝色色文字</p>
    <p class="greenCls">
        一行绿色文字</p>
</body>

EasyUI方法的调用

语法：$("#ID选择器").渲染EasyUI组件名称(“方法名称”，参数集合)；

panel组件的常用方法见表：

方法名	方法参数	描述
resize	option	设置面板大小和布局，参数对象包含下列属性： width：新的面板宽度 height：新的面板高度
open	forceOpen	在‘forceOpen’参数设置为true时，打开面板时将跳过‘onBeforeOpen’回调函数
close	forceClose	在‘forceClose’参数设置为true时，打开面板时将跳过‘onBeforeClose’回调函数
setTitle	title	设置面板头部标题文本
refresh	href	刷新面板来装载远程数据。如果‘href’属性有了新配置，它将重写旧的‘href’属性

EasyUI事件绑定

语法：$("#ID选择器").渲染EasyUI组件名称(事件名.function(参数集合){实现代码})；

<script type="text/javascript">
        $(function () {
            loadPanel();

            $("#btn").linkbutton({
                onClick: function () {
                    var strA = $("#setTitle").val();
                    alert(strA);
                    $("#panel01").panel("setTitle", strA);
                }
            })
        });

        function loadPanel() {
            $("#panel01").panel({
                title: "面板标题信息-dataoption",
                collapsible: "true",
                iconcls: "icon-save",
                width: 500,
                height: 300,
                border: true,
                minimizable: true,
                maximizable: true,
                closeble: true,
                loadmessage: "努力加载中...",
                href: "HTMLPage1.htm",
                tools: [{
                    iconCls: 'icon-add',
                    handler: function () {
                        console.info("执行添加操作")
                    }
                },
                {
                    iconCls: 'icon-remove',
                    handler: function () {
                        console.info("执行删除操作")
                    }
                }]
            })
        }
    </script>

 <form id="form1" runat="server">
    <div id="panel01">
        实例化面板组件
    </div>
    输入新标题：<input id="setTitle" class="easyui-validatebox textbox" />
    <a id="btn" href="#" class="easyui-linkbutton" iconcls="icon-search">修改标题</a>
    </form>