第三讲 EasyUI panel的使用

首先引入js文件

同样是两种写法：

第一种：

<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>   

<script type="text/javascript">
  $(function(){
 
  $('#p_').panel({   
 width:500,   
 height:150,   
 title: 'My Panel',   
 iconCls:'icon-save',
 tools: [{   
   iconCls:'icon-add',   
   handler:function(){alert('new')}   
 },{   
   iconCls:'icon-save',   
   handler:function(){alert('save')}   
 }]   
}); 
  });
 </script>

 
效果图是一样的

panel的方法：

一个按钮点击显示该panel

<button onclick="$('#p').panel('open')">显示</button>

其他方法和属性看API。