EasyUI——Panel（面板）

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> 

2. 创建面板程序

让我们创建面板右上角的的工具栏

<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 是参数对象，可以是一个对象、字符串等。

属性

事件

方法