首先引入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。