java中JScollPanel_jQuery EasyUI Panel面板组件使用详解

panel面板组件,跟前面的组件用法几乎都差不多，也是从设置一些面板属性、操作面板触发的事件、我们可针对面板对象的操作方法这三个点去学习。

后面有一些组件要依赖于这个组件。

还有一点跟前面不同的就是面板内容可以请求远程数据。

示例：

jQuery Easy UI

$(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 : '面板主体内容', //面板主体内容 默认为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) {

return data+"--2014.08.18";

}

*/

//触发事件列表：

/*

onBeforeLoad : function () {

alert('远程加载之前触发！');

return false; //取消远程加载

},

onLoad : function () {

alert('远程加载之后触发！');

},

onBeforeOpen : function () {

alert('打开之前触发！');

return false; //取消打开

},

onOpen : function () {

alert('打开之后触发！');

},

onBeforeClose : function () {

alert('关闭之前触发！');

return false; //取消关闭

},

onClose : function () {

alert('关闭之后触发！');

},

onBeforeDestroy : function () {

alert('销毁之前触发！');

//return false; //取消销毁

},

onDestroy : function () {

alert('销毁之后触发！');

},

onBeforeCollapse : function () {

alert('折叠之前触发！');

//return false; //取消折叠

},

onCollapse : function () {

alert('折叠之后触发！');

},

onBeforeExpand : function () {

alert('展开之前触发！');

//return false; //取消展开

},

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('打开之前触发！');

//return false; //取消打开

//},

});

//方法列表

//$('#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');

});

内容区域

其他地方不说了，就说一下那个href属性，我在实际学习的时候是基于一个SpringMVC框架写的例子。

后台代码：

@RequestMapping(value = "panel")

public ModelAndView panel(String _){

System.out.println("****************进入后台*******************"+_);

ModelAndView mv =new ModelAndView("/panelDemo/panelData.jsp");

mv.addObject("data", "Hello Hirain!!!");

return mv;

}

为什么我的后台方法多了个参数String _呢？是因为我看到它实际请求的时候在url后面自动拼上了一个参数_，后台不接收这个参数也一样。

panelData.jsp内代码就只有${data}