EasyUI——Panel（面闆）

使用$.fn.panel.defaults重寫預設值對象。

面闆作為承載其它内容的容器。這是建構其他元件的基礎（比如：layout,tabs,accordion等）。它還提供了折疊、關閉、最大化、最小化和自定義行為。面闆可以很容易地嵌入到web頁面的任何位置。

使用案例

建立面闆

1. 通過标簽建立面闆

通過标簽建立更簡單。添加’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> 
           

1. 建立面闆程式

讓我們建立面闆右上角的的工具欄

<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 是參數對象，可以是一個對象、字元串等。

屬性

事件

方法