天天看點

EasyUI——Panel(面闆)EasyUI——Panel(面闆)

EasyUI——Panel(面闆)

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

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

EasyUI——Panel(面闆)EasyUI——Panel(面闆)

使用案例

建立面闆

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

屬性

EasyUI——Panel(面闆)EasyUI——Panel(面闆)
EasyUI——Panel(面闆)EasyUI——Panel(面闆)

事件

EasyUI——Panel(面闆)EasyUI——Panel(面闆)

方法

EasyUI——Panel(面闆)EasyUI——Panel(面闆)
EasyUI——Panel(面闆)EasyUI——Panel(面闆)

繼續閱讀