您现在的位置：首页 >> 前端 >> 内容

研究EasyUI系统—Panel组件（概述）

时间：2017/1/10 11:08:18 点击：

　　核心提示：panel是最为基础的布局组件，其他layout、accordion和tab等布局组件都要依赖panel。panel是一个容器，在他内部可以创建其他组件。我们可以通过html的形式构造一个panel...

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

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

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

也可以通过js脚本构造：

<style>
    .headerCss {
        background: #E6E6E6;
    }
    .bodyCss {
        background: white;
    }
    .footCss {
        background: #E6E6E6;
        text-align: center;
        height: 30px;
    }
</style>
<p id="myPanel" class="easyui-panel"></p>
<p id="myFoot" class="footCss">panel footer</p>
<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>

效果图