easyui每个组件都有其属性,如panel有最小化、关闭等属性,如何配置呢?
1. 在标签中,使用html属性(属性=属性值)方式,定义组件配置.
<div class="easyui-panel" title="我的第一个panel" style="width:300px;height:300px"
collapsible ="true" minimizable="true" maximizable ="true" closable="true" iconCls = "icon-add">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</div>
- 在标签中,使用data-options属性,值为json结构.
<div id="p" class="easyuipanel" title="PanelTools" style="width:600px;height:200px;padding:10px;"
data-options="iconCls:'iconsave', collapsible:true, minimizable:true, maximizable:true,closable:true"></div>
iconCls:’iconsave’:图标 collapsible:true :是否可折叠
minimizable:true:是否可最小化 maximizable:true:是否可最大化
注意:data-options中可以定义所有的属性,如title,参考帮助文档
可以在官网中查看
3. 在js中,使用jQueryObj.组件名(json配置对象).相当于把data-options属性值以json方式放进JS中
$(function(){
/*$("#mypanel").panel();*/
$("#panelsecond").panel({
width:500,
height:150,
title:'我的第三panel',
collapsible:true,
minimizable:true,
maximizable:true,
closable:true,
tools:[{//添加第一个图标,并添加点击事件
iconCls:'icon-add',
handler:function(){alert('new')}
},{//添加第二个图标,并添加点击事件
iconCls:'icon-save',
handler:function(){alert('save')}
}]
});
});