【連載】研究EasyUI系統—Panel元件(概述)
阿新 • • 發佈:2019-02-10
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>
效果圖