jQuery Easy UI Panel(面板)组件

来源：互联网发布：linux发行版排行 2017 编辑：程序博客网时间：2024/05/16 16:06

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

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

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

示例：

<!DOCTYPE html><html><head><title>jQuery Easy UI</title><meta charset="UTF-8" /><script type="text/javascript" src="easyui/jquery.min.js"></script><script type="text/javascript" src="easyui/jquery.easyui.min.js"></script><script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js" ></script><link rel="stylesheet" type="text/css" href="easyui/themes/bootstrap/panel.css" /><link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" /><script>$(function () {//属性列表$('#box').panel({id : 'box',//面板的ID值 默认为nulltitle : '我是一个面板',//面板显示的标题文本，默认为nullwidth : 500,//面板宽度 默认为autoheight : 150,//面板高度 默认为autoiconCls : 'icon-add',//面板左上角的一个图标,可去css样式中自定义图标文件，默认为null//left : 100,//设置面板距离左边的距离 默认为null//top : 100,//设置面板距离上边的距离 默认为nullcls : 'a',//添加一个CSS 类ID 到面板。默认为null。headerCls : 'b',//参数为css类   定义面板头部样式 默认nullbodyCls : 'c',//参数为css类   定义面板正文样式 默认null//面板样式style : {'min-height' : '200px',},//fit : true,//默认为false，含义是面板大小是否自适应父容器//border : false,//默认为true  定义是否显示面板边框//doSize : false,//noheader : true,//默认为false，当设置为true，在创建面板的时候不会创建标题content : '<strong>面板主体内容</strong>',//面板主体内容 默认为nullcollapsible : true,//是否显示可折叠按钮 默认为falseminimizable : true,//是否显示最小化按钮默认falsemaximizable : true,//是否显示最大化按钮默认falseclosable : true,//是否定义关闭按钮默认falsetools : '#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+"</br>--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');});</script></head><body><!--<div class="easyui-panel" data-options="closable:true" title="面板" style="width:500px;"><p>内容区域</p></div>--><div id="box"><p>内容区域</p></div><div id="tt"><a class="icon-add" onclick="javascript:alert('add')">  </a><a class="icon-edit" onclick="javascript:alert('edit')"> </a><a class="icon-cut" onclick="javascript:alert('cut')"> </a></div></body></html>

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

后台代码：

@RequestMapping(value = "panel")public ModelAndView panel(String _){<span style="white-space:pre"></span>System.out.println("****************进入后台*******************"+_);<span style="white-space:pre"></span>ModelAndView  mv =new ModelAndView("/panelDemo/panelData.jsp");<span style="white-space:pre"></span>mv.addObject("data", "Hello Hirain!!!");<span style="white-space:pre"></span>return mv;}

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

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

点此下载源代码

2 0