Panel（面板）

1、Panel创建第一种方式（div直接添加class="easyui-panel"）：

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

效果图：http://sandbox.runjs.cn/show/xnlogyo5

 

2、Panel创建第二种方式（js中初始化）：

<div id="p" style="padding:10px;">  
    <p>panel content.</p>  
    <p>panel content.</p>  
</div>  

$(function(){
	$('#p').panel({  
	  width:500,  
	  height:150,  
	  title: '我的面板',  
	  tools: [{  
		iconCls:'icon-add',  
		handler:function(){
			alert("点击添加按钮");
		}  
	  },{  
		iconCls:'icon-save',  
		handler:function(){
			alert("点击保存按钮");
		}  
	  }]  
	});   
});

效果图： http://sandbox.runjs.cn/show/7esvbnlk

 

3、常用属性：

<div id="p" class="easyui-panel" style="width:500px;height:300px" title="我的面板" data-options="iconCls:'icon-ok',closable:true,collapsible:true,maximized:false,loadingMessage:'正在load你妹！'">  
</div>  
<input type="button" value="click" onclick="javascript:clickMe()"/>

function clickMe(){
	$('#p').panel({  
		href:'/js/sandbox/jquery-easyui/jquery.easyui.min.js',  
		onLoad:function(){  
			alert('loaded 你妹 successfully');  
		}  
	});  
}

效果图：http://sandbox.runjs.cn/show/fkjnat5l

说明：

1）、tools：可用一个数组（每个元素包含按钮样式和它的处理方法）或已存在的div。
<div class="easyui-panel" style="width:300px;height:200px"
		title="My Panel" data-options="iconCls:'icon-ok',tools:[
				{
					iconCls:'icon-add',
					handler:function(){alert('add')}
				},{
					iconCls:'icon-edit',
					handler:function(){alert('edit')}
				}]">
</div>
--------------------------------------------------------------------------------------
<div class="easyui-panel" style="width:300px;height:200px"
		title="My Panel" data-options="iconCls:'icon-ok',tools:'#tt'">
</div>
<div id="tt">
	<a href="#" class="icon-add" onclick="javascript:alert('add')"></a>
	<a href="#" class="icon-edit" onclick="javascript:alert('edit')"></a>
</div>
--------------------------------------------------------------------------------------
2）、collapsed：panel初始化的时候是否缩放
3）、minimized、maximized、closed：初始化的时候是否最小化或最大化或关闭
4）、href：加载远程数据并显示在panel上，只有panel在open状态下才会加载
<div id="pp" class="easyui-panel" style="width:300px;height:200px"
		data-options="href='get_content.php',closed:true">
</div>
<a href="#" onclick="javascript:$('#pp').panel('open')">Open</a>
--------------------------------------------------------------------------------------
5）、loadingMessage：加载数据时显示的提示信息
6）、collapsible、minimizable、maximizable、closable：是否显示缩放、最小化、最大化、关闭按钮
7）、noheader：是否不显示头部标题
8）、border：是否显示边框，boolean类型
9）、fit：自适应父类窗口尺寸
10）、title：panel标题

4、常用事件：

1）、onLoad：远程数据加载成功执行
2）、onOpen、onClose：面板被打开、关闭执行
3）、onCollapse、onExpand：面板缩放、展开执行
4）、onMaximize、onMinimize：面板最大化、最小化执行

<div id="p" class="easyui-panel" style="width:500px;height:300px;" title="我的面板" data-options="iconCls:'icon-ok',closable:true,collapsible:true,maximized:false,loadingMessage:'正在load你妹！',border:true,noheader:false,minimizable:true,maximizable:true,
onOpen:function(){alert('面板打开啦！')},
onClose:function(){alert('面板被关闭了！')},
onCollapse:function(){alert('面板被缩放了！')},
onExpand:function(){alert('面板被展开了！')}">  
</div>  

效果图：http://sandbox.runjs.cn/show/6xffeimt

5、常用方法：

(未完待续...)