jQuery EasyUI Panel面板组件使用详解
panel面板组件,跟前面的组件用法几乎都差不多，也是从设置一些面板属性、操作面板触发的事件、我们可针对面板对象的操作方法这三个点去学习。
后面有一些组件要依赖于这个组件。
还有一点跟前面不同的就是面板内容可以请求远程数据。
示例：
<!DOCTYPEhtml>
<html>
<head>
<title>jQueryEasyUI</title>
<metacharset="UTF-8"/>
<scripttype="text/javascript"src="easyui/jquery.min.js"></script>
<scripttype="text/javascript"src="easyui/jquery.easyui.min.js"></script>
<scripttype="text/javascript"src="easyui/locale/easyui-lang-zh_CN.js"></script>
<linkrel="stylesheet"type="text/css"href="easyui/themes/bootstrap/panel.css"rel="externalnofollow"/>
<linkrel="stylesheet"type="text/css"href="easyui/themes/icon.css"rel="externalnofollow"/>
<script>
$(function(){
//属性列表
$('#box').panel({
id:'box',//面板的ID值默认为null
title:'我是一个面板',//面板显示的标题文本，默认为null
width:500,//面板宽度默认为auto
height:150,//面板高度默认为auto
iconCls:'icon-add',//面板左上角的一个图标,可去css样式中自定义图标文件，默认为null
//left:100,//设置面板距离左边的距离默认为null
//top:100,//设置面板距离上边的距离默认为null
cls:'a',//添加一个CSS类ID到面板。默认为null。
headerCls:'b',//参数为css类定义面板头部样式默认null
bodyCls:'c',//参数为css类定义面板正文样式默认null
//面板样式
style:{
'min-height':'200px',
},
//fit:true,//默认为false，含义是面板大小是否自适应父容器
//border:false,//默认为true定义是否显示面板边框
//doSize:false,
//noheader:true,//默认为false，当设置为true，在创建面板的时候不会创建标题
content:'<strong>面板主体内容</strong>',//面板主体内容默认为null
collapsible:true,//是否显示可折叠按钮默认为false
minimizable:true,//是否显示最小化按钮默认false
maximizable:true,//是否显示最大化按钮默认false
closable:true,//是否定义关闭按钮默认false
tools:'#tt',//定义工具菜单，有两种方式，一种是下面那个数组方式，另一种指向定义好的菜单
/*
tools:[{
iconCls:'icon-help',//图标
handler:function(){//点击触发函数
alert('help');
},
},{
}],
*/
//collapsed:true,//是否在初始化的时候折叠面板
//minimized:true,//是否在初始化的时候最小化面板
//maximized:true,//是否在初始化的时候最大化面板
//closed:true,//是否在初始化的时候关闭面板，这个属性什么时候能用到？
//href:'haicheng_demo/panel',//远程请求数据（ajax请求，不能跨域）
//loadingMessage:'正在努力加载中...',//正在加载远程数据的时候，在面板内显示的信息,默认loading...
//cache:false,//如果为true，在超链接载入时缓存面板内容。默认为true。
/**
*对ajax远程请求回来的数据进行处理，然后return到面板上
*
extractor:function(data){
returndata+"</br>--2014.08.18";
}
*/
//触发事件列表：
/*
onBeforeLoad:function(){
alert('远程加载之前触发！');
returnfalse;//取消远程加载
},
onLoad:function(){
alert('远程加载之后触发！');
},
onBeforeOpen:function(){
alert('打开之前触发！');
returnfalse;//取消打开
},
onOpen:function(){
alert('打开之后触发！');
},
onBeforeClose:function(){
alert('关闭之前触发！');
returnfalse;//取消关闭
},
onClose:function(){
alert('关闭之后触发！');
},
onBeforeDestroy:function(){
alert('销毁之前触发！');
//returnfalse;//取消销毁
},
onDestroy:function(){
alert('销毁之后触发！');
},
onBeforeCollapse:function(){
alert('折叠之前触发！');
//returnfalse;//取消折叠
},
onCollapse:function(){
alert('折叠之后触发！');
},
onBeforeExpand:function(){
alert('展开之前触发！');
//returnfalse;//取消展开
},
onExpand:function(){
alert('展开之后触发！');
},
onMaximize:function(){
alert('窗口最大化时触发！');
},
onRestore:function(){
alert('窗口还原时触发！');
},
onMinimize:function(){
alert('窗口最小化时触发！');
},
onResize:function(width,height){
alert(width+'|'+height);
},
onMove:function(left,top){
alert(left+'|'+top);
}
*/
//onBeforeOpen:function(){
//alert('打开之前触发！');
//returnfalse;//取消打开
//},
});
//方法列表
//$('#box').panel('panel').css('position','absolute');
//$('#box').panel('destroy');
/*
$(document).click(function(){
$('#box').panel('resize',{
'width':600,
'height':300,
});
});
$(document).click(function(){
$('#box').panel('move',{
'left':600,
'top':300,
});
});
*/
//console.log($('#box').panel('options'));
//console.log($('#box').panel('panel'));
//console.log($('#box').panel('header'));
//console.log($('#box').panel('body'));
//$('#box').panel('setTitle','标题');
//$('#box').panel('open',true);
//$('#box').panel('close');
//$('#box').panel('destroy');
//$('#box').panel('maximize');
//$('#box').panel('restore');
//$('#box').panel('minimize');
//$('#box').panel('collapse');
//$('#box').panel('expand');
});
</script>
</head>
<body>
<!--
<divclass="easyui-panel"data-options="closable:true"title="面板"style="width:500px;">
<p>内容区域</p>
</div>
-->
<divid="box">
<p>内容区域</p>
</div>
<divid="tt">
<aclass="icon-add"onclick="javascript:alert('add')"></a>
<aclass="icon-edit"onclick="javascript:alert('edit')"></a>
<aclass="icon-cut"onclick="javascript:alert('cut')"></a>
</div>
</body>
</html>
其他地方不说了，就说一下那个href属性，我在实际学习的时候是基于一个SpringMVC框架写的例子。
后台代码：
@RequestMapping(value="panel")
publicModelAndViewpanel(String_){
<spanstyle="white-space:pre"></span>System.out.println("****************进入后台*******************"+_);
<spanstyle="white-space:pre"></span>ModelAndViewmv=newModelAndView("/panelDemo/panelData.jsp");
<spanstyle="white-space:pre"></span>mv.addObject("data","HelloHirain!!!");
<spanstyle="white-space:pre"></span>returnmv;
}
为什么我的后台方法多了个参数String_呢？是因为我看到它实际请求的时候在url后面自动拼上了一个参数_，后台不接收这个参数也一样。
panelData.jsp内代码就只有${data}
源码下载：jQueryEasyUIPanel面板组件