jQuery Easy UI Panel(面板)组件

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值 默认为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) {
				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}

点此下载源代码

时间: 2024-10-12 17:36:25

jQuery Easy UI Panel(面板)组件的相关文章

jQuery Easy UI Droppable(放置)组件

Droppable(放置)组件也是一个基本组件,用法较简单,语法都在例子里面注释了: 示例: <!DOCTYPE html> <html> <head> <title>jQuery Easy UI</title> <meta charset="UTF-8" /> <script type="text/javascript" src="easyui/jquery.min.js&qu

jQuery Easy UI Resizable(调整大小)组件

Resizable(调整大小)组件,easyui基础组件之一,调整大小就是可以对元素可以拖着调整大小,这个组件不依赖于其他组件,使用比较简单,相关的属性.事件都 在例子中介绍了. 示例: <!DOCTYPE html> <html> <head> <title>jQuery Easy UI</title> <meta charset="UTF-8" /> <script type="text/jav

jQuery Easy UI LinkButton(按钮)组件

LinkButton(按钮)组件,easyui基础组件之一 示例: <!DOCTYPE html> <html> <head> <title>jQuery Easy UI</title> <meta charset="UTF-8" /> <script type="text/javascript" src="easyui/jquery.min.js"></s

jQuery Easy UI Draggable(拖动)组件

上文已经提到过了 jQuery EasyUI插件引用一般我们常用的有两种方式(排除easyload加载方式),所以本篇要总结的Draggable组件同样有两种方式加载: (1).使用class加载方式: <div id="box" class="easyui-draggable" style="width:400px;height:200px;background:red;"> 内容部分 </div> (2).JS 加载调

jQuery Easy UI Layout(布局)组件

layout 布局组件,依赖于panel,自己开发个web小程序的时候直接用这个组件布局很方便. 对于一个web程序原来说,特别是像我这种一遇到界面美化问题就找美工的程序员,想自己独立的开发一个东西,除了套用以前的项目中的界面布局之外就没别的 办法了,虽然我们可以用ifame切分出一个界面布局,但是我不会添加样式啊.使用layout组件就可以帮我们快速的有一个界面布局,而且美观效果也看得过去. 看个例子: <!doctype html> <html lang="en"

jQuery Easy UI整理笔记目录

jQuery Easy UI整理笔记目录 ps:最近对Easy UI比较感兴趣,打算系统的学习一下,前面基础部分的东西很简单,都是参照API去写的,例子也就是随便举的,没有列举项目中的实际应用. 打算基础部分后面的知识多投入点时间,多与项目中的实际相结合一些,也尽量多想象出一些应用场景. 计划最慢每周更新一篇文章. 一.基础组件部分 1. jQuery Easy UI的使用 2. jQuery Easy UI Draggable(拖动)组件 3. jQuery Easy UI Droppable

7个jquery easy ui 基本组件图解

以下给出7个jquery easy ui 基本组件: 1 基本面板 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Basic Panel - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href=".

jQuery Easy UI Tooptip(提示框)组件

我们都知道DOM节点的title属性,Tooptip组件就是比较强大的title,它可以自由的设置自己的样式.位置以及有自己相关的触发事件. 示例: <!DOCTYPE html> <html> <head> <title>jQuery Easy UI</title> <meta charset="UTF-8" /> <script type="text/javascript" src=&

jQuery Easy UI ProgressBar(进度条)组件

ProgressBar(进度条)组件,这个还是挺好玩的,我们在自己做点什么的时候经常能用到,比如上传下载文件.导入导出文档啊.载入网页等等. 应用场景很多,使用起来还很简单. 示例: <!DOCTYPE html> <html> <head> <title>jQuery Easy UI</title> <meta charset="UTF-8" /> <script type="text/javas