【连载】研究EasyUI系统—Panel组件（概述）

最新推荐文章于 2021-05-18 22:03:51 发布

原创最新推荐文章于 2021-05-18 22:03:51 发布 · 875 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#easyui #布局

收录于

Web编程同时被 2 个专栏收录

29 篇文章

订阅专栏

easyui

26 篇文章

订阅专栏

本文介绍了 EasyUI 框架中的 Panel 组件，并通过 HTML 和 JavaScript 的方式展示了如何创建和配置 Panel。Panel 是 EasyUI 中的基础布局组件，支持多种自定义属性如可关闭、最小化、最大化等功能。

panel是最为基础的布局组件，其他layout、accordion和tab等布局组件都要依赖panel。panel是一个容器，在他内部可以创建其他组件。

我们可以通过html的形式构造一个panel组件：

<div class="easyui-panel" title="我的panel" 
    data-options="iconCls:'icon-lock',
    closable:true,minimizable:true,maximizable:true">
</div>

也可以通过js脚本构造：

<style>
    .headerCss {
        background: #E6E6E6;
    }
    .bodyCss {
        background: white;
    }
    .footCss {
        background: #E6E6E6;
        text-align: center;
        height: 30px;
    }
</style>
<div id="myPanel" class="easyui-panel"></div>
<div id="myFoot" class="footCss">panel footer</div>
<script>
    $("#myPanel").panel({
        width:450,
        height:350,
        title:'我的panel',
        iconCls:'icon-lock',
        headerCls:'headerCss',
        bodyCls:'bodyCss',
        collapsible:true,
        minimizable:true,
        maximizable:true,
        closable:true,
        footer:'#myFoot'
    });
</script>