EasyUI——Panel(面闆)
使用$.fn.panel.defaults重寫預設值對象。
面闆作為承載其它内容的容器。這是建構其他元件的基礎(比如:layout,tabs,accordion等)。它還提供了折疊、關閉、最大化、最小化和自定義行為。面闆可以很容易地嵌入到web頁面的任何位置。
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIyZuBnL2ITMzMDO1kTM0AjMxkTMwIzLc52YucWbp5GZzNmLn9Gbi1yZtl2Lc9CX6MHc0RHaiojIsJye.png)
使用案例
建立面闆
- 通過标簽建立面闆
通過标簽建立更簡單。添加’easyui-panel’類ID到
标簽。
<div id="p" class="easyui-panel" title="My Panel"
style="width:500px;height:150px;padding:10px;background:#fafafa;"
data-options="iconCls:'icon-save',closable:true,
collapsible:true,minimizable:true,maximizable:true">
<p>panel content.</p>
<p>panel content.</p>
</div>
- 建立面闆程式
讓我們建立面闆右上角的的工具欄
<div id="p" style="padding:10px;">
<p>panel content.</p>
<p>panel content.</p>
</div>
$('#p').panel({
width:500,
height:150,
title: 'My Panel',
tools: [{
iconCls:'icon-add',
handler:function(){alert('new')}
},{
iconCls:'icon-save',
handler:function(){alert('save')}
}]
});
移動面闆
調用’move’方法移動面闆到新的位置
$('#p').panel('move',{
left:100,
top:100
});
讀取内容
當加載成功的時候讓我們通過ajax加載面闆内容并顯示一些消息。
$('#p').panel({
href:'content_url.php',
onLoad:function(){
alert('loaded successfully');
}
});
panel入門小demo
<div id="p" class="easyui-panel" style="width:500px;height:200px;padding:10px;"
title="My Panel" iconCls="icon-save" collapsible="true">
The panel content
</div>
更改成為h5相容屬性的規範
<div id="p" class="easyui-panel" style="width:500px;height:200px;padding:10px;"
title="My Panel" data-options="iconCls:'icon-save',collapsible:true">
The panel content
</div>
在eayui中,所有的标簽被easyui渲染之後就叫做_元件_了,所有的元件都有以下三個内容:
1.屬性
所有的屬性都定義在jQuery.fn.{plugin}.defaults裡面。例如,對話框屬性定義在jQuery.fn.dialog.defaults裡面。
2.事件
所有的事件(回調函數)也都定義在jQuery.fn.{plugin}.defaults裡面。
3.方法
調用方法的文法:$(‘selector’).plugin(‘method’, parameter);
解釋:
- selector 是jQery對象選擇器。
- plugin 是插件的名稱。
- method 是相應插件現有的方法。
- parameter 是參數對象,可以是一個對象、字元串等。