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

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

另一点跟前面不同的就是面板内容能够请求远程数据。

演示样例：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>jQuery Easy UI</title>
  5. <meta charset="UTF-8" />
  6. <script type="text/javascript" src="easyui/jquery.min.js"></script>
  7. <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
  8. <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js" ></script>
  9. <link rel="stylesheet" type="text/css" href="easyui/themes/bootstrap/panel.css" />
  10. <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />
  11. <script>
  12. $(function () {
  13. 	//属性列表
  14. 	$('#box').panel({
  15. 		id : 'box',				//面板的ID值 默觉得null
  16. 		title : '我是一个面板',	//面板显示的标题文本，默觉得null
  17. 		width : 500,			//面板宽度 默觉得auto
  18. 		height : 150,			//面板高度 默觉得auto
  19. 		iconCls : 'icon-add',	//面板左上角的一个图标,可去css样式中自己定义图标文件，默觉得null
  20. 		//left : 100,			//设置面板距离左边的距离 默觉得null
  21. 		//top : 100,			//设置面板距离上边的距离 默觉得null
  22. 		cls : 'a',				//加入一个CSS 类ID 到面板。默觉得null。
  23. 		headerCls : 'b',		//參数为css类   定义面板头部样式 默认null
  24. 		bodyCls : 'c',			//參数为css类   定义面板正文样式 默认null
  25. 		//面板样式
  26. 		style : {
  27. 			'min-height' : '200px',
  28. 		},
  29. 		//fit : true,			//默觉得false，含义是面板大小是否自适应父容器
  30. 		//border : false,		//默觉得true  定义是否显示面板边框
  31. 		//doSize : false,
  32. 		//noheader : true,		//默觉得false，当设置为true，在创建面板的时候不会创建标题
  33. 		content : '<strong>面板主体内容</strong>',		//面板主体内容 默觉得null
  34. 		collapsible : true,		//是否显示可折叠button 	默觉得false
  35. 		minimizable : true,		//是否显示最小化button	默认false
  36. 		maximizable : true,		//是否显示最大化button	默认false
  37. 		closable : true,		//是否定义关闭button		默认false
  38. 		tools : '#tt',			//定义工具菜单，有两种方式，一种是以下那个数组方式，还有一种指向定义好的菜单
  39. 		/*
  40. 		tools : [{
  41. 			iconCls : 'icon-help',	//图标
  42. 			handler : function () {	//点击触发函数
  43. 				alert('help');
  44. 			},
  45. 		},{
  46. 		}],
  47. 		*/
  48. 		//collapsed : true,		//是否在初始化的时候折叠面板
  49. 		//minimized : true,		//是否在初始化的时候最小化面板
  50. 		//maximized : true,		//是否在初始化的时候最大化面板
  51. 		//closed : true,		//是否在初始化的时候关闭面板，这个属性什么时候能用到？
  52. 		//href : 'haicheng_demo/panel', 		//远程请求数据（ajax请求，不能跨域）
  53. 		//loadingMessage : '正在努力载入中...',	//正在载入远程数据的时候，在面板内显示的信息,默认loading...
  54. 		//cache:false,			//假设为true，在超链接载入时缓存面板内容。默觉得true。
  55. 		/**
  56. 		 *对ajax远程请求回来的数据进行处理，然后return到面板上
  57. 		 *
  58. 			extractor : function (data) {
  59. 				return data+"</br>--2014.08.18";
  60. 			}
  61. 		 */
  62.  
  63. 		 //触发事件列表：
  64. 		/*
  65. 		onBeforeLoad : function () {
  66. 			alert('远程载入之前触发！');
  67. 			return false;					//取消远程载入
  68. 		},
  69. 		onLoad : function () {
  70. 			alert('远程载入之后触发！');
  71. 		},
  72.  
  73. 		onBeforeOpen : function () {
  74. 			alert('打开之前触发！');
  75. 			return false;					//取消打开
  76. 		},
  77. 		onOpen : function () {
  78. 			alert('打开之后触发！');
  79. 		},
  80.  
  81. 		onBeforeClose : function () {
  82. 			alert('关闭之前触发！');
  83. 			return false;					//取消关闭
  84. 		},
  85. 		onClose : function () {
  86. 			alert('关闭之后触发！');
  87. 		},
  88.  
  89. 		onBeforeDestroy : function () {
  90. 			alert('销毁之前触发！');
  91. 			//return false;					//取消销毁
  92. 		},
  93. 		onDestroy : function () {
  94. 			alert('销毁之后触发！');
  95. 		},
  96.  
  97. 		onBeforeCollapse : function () {
  98. 			alert('折叠之前触发！');
  99. 			//return false;					//取消折叠
  100. 		},
  101. 		onCollapse : function () {
  102. 			alert('折叠之后触发！');
  103. 		},
  104.  
  105. 		onBeforeExpand : function () {
  106. 			alert('展开之前触发！');
  107. 			//return false;					//取消展开
  108. 		},
  109. 		onExpand : function () {
  110. 			alert('展开之后触发！');
  111. 		},
  112.  
  113. 		onMaximize : function () {
  114. 			alert('窗体最大化时触发！');
  115. 		},
  116. 		onRestore : function () {
  117. 			alert('窗体还原时触发！');
  118. 		},
  119.  
  120. 		onMinimize : function () {
  121. 			alert('窗体最小化时触发！');
  122. 		},
  123.  
  124. 		onResize : function (width, height) {
  125. 			alert(width + '|' + height);
  126. 		},
  127.  
  128. 		onMove : function (left, top) {
  129. 			alert(left + '|' + top);
  130. 		}
  131. 		*/
  132. 		//onBeforeOpen : function () {
  133. 		//	alert('打开之前触发！');
  134. 			//return false;					//取消打开
  135. 		//},
  136.  
  137. 	});
  138.  
  139. 	//方法列表
  140. 	//$('#box').panel('panel').css('position', 'absolute');
  141. 	//$('#box').panel('destroy');
  142. 	/*
  143. 	$(document).click(function () {
  144. 		$('#box').panel('resize', {
  145. 			'width' : 600,
  146. 			'height' : 300,
  147. 		});
  148. 	});
  149.  
  150. 	$(document).click(function () {
  151. 		$('#box').panel('move', {
  152. 			'left' : 600,
  153. 			'top' : 300,
  154. 		});
  155. 	});
  156. 	*/
  157.  
  158. 	//console.log($('#box').panel('options'));
  159. 	//console.log($('#box').panel('panel'));
  160. 	//console.log($('#box').panel('header'));
  161. 	//console.log($('#box').panel('body'));
  162. 	//$('#box').panel('setTitle', '标题');
  163. 	//$('#box').panel('open', true);
  164. 	//$('#box').panel('close');
  165. 	//$('#box').panel('destroy');
  166. 	//$('#box').panel('maximize');
  167. 	//$('#box').panel('restore');
  168. 	//$('#box').panel('minimize');
  169. 	//$('#box').panel('collapse');
  170. 	//$('#box').panel('expand');
  171. });
  172.  
  173. </script>
  174. </head>
  175. <body>
  176. <!--
  177. 	<div class="easyui-panel" data-options="closable:true" title="面板" style="width:500px;">
  178. 		<p>内容区域</p>
  179. 	</div>
  180. -->
  181. <div id="box">
  182. 	<p>内容区域</p>
  183. </div>
  184.  
  185. <div id="tt">
  186. 	<a class="icon-add" onclick="javascript:alert('add')">  </a>
  187. 	<a class="icon-edit" onclick="javascript:alert('edit')"> </a>
  188. 	<a class="icon-cut" onclick="javascript:alert('cut')"> </a>
  189. </div>
  190.  
  191. </body>
  192. </html>

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

后台代码：

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

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

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

点此下载源码

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

  1. 第一百九十九节，jQuery EasyUI，Panel(面板)组件

    jQuery EasyUI,Panel(面板)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解EasyUI中Panel(面板)组件的使用方法,这个组件不依赖于其 ...

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

    Resizable(调整大小)组件,easyui基础组件之中的一个.调整大小就是能够对元素能够拖着调整大小,这个组件不依赖于其它组件,使用比較简单,相关的属性.事件都 在样例中介绍了. 演示样例: & ...

  3. jQuery Easy UI Droppable(放置)组件

    Droppable(放置)组件也是一个基本组件,使用方法较简单,语法都在样例里面凝视了: 演示样例: <!DOCTYPE html> <html> <head> & ...

  4. jQuery Easy UI Draggable(拖动)组件

    上文已经提到过了 jQuery EasyUI插件引用一般我们经常使用的有两种方式(排除easyload载入方式),所以本篇要总结的Draggable组件相同有两种方式载入: (1).使用class载入 ...

  5. 7个jquery easy ui 基本组件图解

    以下给出7个jquery easy ui 基本组件: 1 基本面板 <!DOCTYPE html> <html> <head> <meta charset=& ...

  6. jQuery Easy UI Tooptip(提示框)组件

    我们都知道DOM节点的title属性.Tooptip组件就是比較强大的title,它能够自由的设置自己的样式.位置以及有自己相关的触发事件. 演示样例: <!DOCTYPE html> & ...

  7. jQuery Easy UI ProgressBar（进度条）组件

    ProgressBar(进度条)组件,这个还是挺好玩的.我们在自己做点什么的时候常常能用到,比方上传下载文件.导入导出文档啊.加载网页等等. 应用场景非常多,使用起来还非常easy. 演示样例: &l ...

  8. JQuery Easy Ui dataGrid 数据表格 ---制作查询下拉菜单

    JQuery Easy Ui dataGrid 数据表格 数据表格 - DataGrid 继承$.fn.panel.defaults,使用$.fn.datagrid.defaults重载默认值.. 数 ...

  9. JQuery Easy Ui （Tree树）详解（转）

    第一讲:JQuery Easy Ui到底是什么呢? 首先咱们知道JQuery是对Java Script的封装,是一个js库,主要提供的功能是选择器,属性修改和事件绑定等等.. JQuery ui是在j ...

随机推荐

  1. CF546E Soldier and Traveling（网络流，最大流）

    CF546E Soldier and Traveling 题目描述 In the country there are \(n\) cities and \(m\) bidirectional road ...

  2. P2633 Count on a tree(主席树)

    题目描述 给定一棵N个节点的树,每个点有一个权值,对于M个询问(u,v,k),你需要回答u xor lastans和v这两个节点间第K小的点权.其中lastans是上一个询问的答案,初始为0,即第一个 ...

  3. Unity 调用 Android Native 方法(一) 获得Android系统音量

    学习雷锋,好榜样,接下来的这一系类教程里,将通过unity来实现Android端的一些常用功能, 不需要在 Asset/Plugins/Android 目录下引用jar包或者aar包,这是重点. us ...

  4. 【习题 8-18 UVA - 1619】Feel Good

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 用单调队列求出l[i]和r[i] 分别表示i的左边最近的大于a[i]的数的位置以及i右边最近的大于a[i]的数的位置. 则l[i]+ ...

  5. WebKit载入流程 - 概述

    之前写了几篇载入流程的说明,是从下向上看,有点仅仅见树木不见森林的感觉.经过近期一段时间的学习,有了能加以概括抽象的方法. WebKit载入流程和页面组成是直接相关的,页面就是WebKit要载入的对象 ...

  6. 《Java并发编程实战》第五章 同步容器类 读书笔记

    一.同步容器类 1. 同步容器类的问题 线程容器类都是线程安全的.可是当在其上进行符合操作则须要而外加锁保护其安全性. 常见符合操作包括: . 迭代 . 跳转(依据指定顺序找到当前元素的下一个元素) ...

  7. web前端开发——AJAX入门

    什么是AJAX AJAX: A New Approach to Web Applications XML AJAX是老技术新思想. 它所包括的内容我们之前都接触过.例如以下: (1)使用XHTML和C ...

  8. wxWidgets笔记_1_linux环境下wxwidgets的安装与配置

    linux下wxwidgets环境的安装与配置 一．建立目标文件夹(自己定义) mkdir /opt/SCOTT 二．安装wxWidgets 1.wxWidgets版本号能够选用wxGTK-2.8.1 ...

  9. 暑假集训-WHUST 2015 Summer Contest #0.2

    ID Origin Title 10 / 55 Problem A Gym 100625A Administrative Difficulties   4 / 6 Problem B Gym 1006 ...

  10. Android App中使用Gallery制作幻灯片播放效果

    http://www.jb51.net/article/83313.htm 我们有时候在iPhone手机上或者Windows上面看到动态的图片,可以通过鼠标或者手指触摸来移动它,产生动态的图片滚动效果 ...