第三讲 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 οnclick="$('#p').panel('open')">显示</button>

其他方法和属性看API。