EasyUI的面板和Ajax的结合使用

学习这一点的时候,让我感到很惊讶,因为我在丝毫没有看到ajax影子的情况下的的确确的使用着ajax,这必然是极好的。

面板的属性,方法和行为相对比较多,在这里就不做太多的累赘,这里只说一下关于一些关于被面板封装的Ajax操作。

$(function(){
	$("#box").panel({
		title: '搜面板',
		width: 500,
		height: 500,
		iconCls: 'icon-search',
		left: 300,
		top: 150,
		cla: 'a',
		headerCls: 'b',
		bodyCls: 'c',
		// fit: true,
		// border: false,
		// noheader: true,
		collapsible: true,//可折叠按钮
		minimizable: true,//最小化按钮
		maximizable: true,//最大化按钮
		closable: true,//关闭按钮
		tools: [{	//自定义方式
			iconCls: 'icon-help',
			handler: function (){
				alert("help");
			},
		},{
		}],
		tools: [{	//自定义方式
			iconCls: 'icon-reload',
			handler: function (){
				$("#box").panel('refresh');
			},
		},{
		}],
		// collapsed: true,
		href: 'content.php',
		loadingMessage: '加载中,请稍等。。。',
		extractor: function(data){
			return data.substring(0,7);
		},
		// onBeforeLoad: function(){
		// 	alert("远程加载之前触发!");
		// },
		// onLoad: function(){
		// 	alert("远程加载之后触发!");
		// },
		// onBeforeOpen: function(){
		// 	alert("打开之前触发!");
		// },
		// onOpen: function(){
		// 	alert("打开之后触发!");
		// },
		// onBeforeClose: function(){
		// 	alert("关闭之前触发!");
		// },
		// onClose: function(){
		// 	alert("关闭之后触发!");
		// },
		// onBeforeDestroy: function(){
		// 	alert("销毁之前触发!");
		// },
		// onDestroy: function(){
		// 	alert("销毁之后触发!");
		// },
		// onBeforeCollapse: function(){
		// 	alert("折叠之前触发!");
		// },
		// onCollapse: function(){
		// 	alert("折叠之后触发!");
		// },

	});

	 $("#box").panel('panel').css('position','absolute');
	 // $("#box").panel('destroy');
});
时间: 2024-10-14 17:59:43

EasyUI的面板和Ajax的结合使用的相关文章

EasyUI - Panel 面板控件

效果: html代码: <div id="p" style="padding: 10px;"> <p>panel content.</p> <p>panel content.</p> </div> JS代码: 其中有些属性,之间的使用有冲突. tools属性,与href属性,与extractor属性,与loadingMessage属性,最为有用. $(function () { $('#p').

jQuery EasyUI 折叠面板accordion的使用实例

1.对折叠面板区域 div 设置 class="easyui-accordion" 2.在区域添加多个 div, 每个 div 就是一个面板 (每个面板一定要设置 title 属性). 3.设置面板属性 fit 为 true,自适应父容器大小 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>easyui-折叠面板ac

Spring Mvc Session超时easyui tab页中ajax请求跳出问题

<!-- 启动Spring MVC的注解功能,完成请求和注解POJO的映射,添加拦截器,类级别的处理器映射 --> 拦截器配置 public class HandlerInterceptor1 extends HandlerInterceptorAdapter {//此处一般继承HandlerInterceptorAdapter适配器即可 @Override public boolean preHandle(HttpServletRequest request, HttpServletResp

jQuery EasyUI使用教程之创建可折叠面板

<jQuery EasyUI最新版下载> 在本教程中,你将学习到有关于easyui折叠面板的知识.折叠面板包含了一系列的面板,其中所有的面板标题都是可见的,但只有一个面板的主体内容在某个时间是可见的.当用户点击面板标题时,该面板的主体内容可见,其他面板的内容将会被隐藏. 查看演示 我们将创建三个面板,其中第三个面板包含了一个树形菜单. < div class = "easyui-accordion" style = "width:300px;height:2

套用JQuery EasyUI列表显示数据、分页、查询

声明,本博客从csdn搬到cnblogs博客园了,以前的csdn不再更新,朋友们可以到这儿来找我的文章,更多的文章会发表,谢谢关注! 有时候闲的无聊,看到extjs那么肥大,真想把自己的项目改了,最近看到一款轻型的UI感觉不错,但是在网上找了好多教程,但是没有一个是完全是C#asp.net写的 无耐下,自己写了下,感觉效果不错,故拿出来和大学分享一下,希望可以抛砖引玉作用. 由于好多人都只是拷贝代码,故在此全用图片作说明. 图片效果图1 这个界面是上左右下结构 左边是一棵树 右边是一个表格 上部

《jQuery EasyUI开发指南》已经出版

这本书,蕴含了我多年以来做Java企业级开发的一些经验,希望对大家有所帮助. 目前,这本书正在京东.淘宝等平台热卖中,有需要的朋友可以联系我. Web插件化开发的全新理念Java企业级开发的示例示例从基础到精通的专家级教程 jQuery EasyUI是近几年流行的一种前端开发技术,它主要是将软件开发中的前端部分,以不同插件的形式展示出来,以供开发人员选择.如果没有这些插件,前端开发会寸步难行.正是这些简单.易用.轻量级的特点使其成为了广大软件公司的选择. <jQuery EasyUI开发指南>

ASP.NET网站权限设计实现——套用JQuery EasyUI列表显示数据、分页、查询

有时候闲的无聊,看到extjs那么肥大,真想把自己的项目改了,最近看到一款轻型的UI感觉不错,但是在网上找了好多教程,但是没有一个是完全是C#asp.net写的 无耐下,自己写了下,感觉效果不错,故拿出来和大学分享一下,希望可以抛砖引玉作用. 由于好多人都只是拷贝代码,故在此全用图片作说明. 图片效果图1 这个界面是上左右下结构 左边是一棵树 右边是一个表格 上部是标题 最下部只是一个空的保留一部分空间 下面开始说下整体结构HTML代码如下 至于HTML代码不想在做多余的解说 下面开始左边的树,

java:easyui(重点示例)

1.accordion(可折叠的): <!doctype html> <html lang="zh"> <head> <title>easyUI鐨勯潰鏉跨粍浠?</title> <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"> <link r

布局 - 折叠面板

在本教程中,您将会学习到关于 easyui 折叠面板(Accordion)的知识. 折叠面板(Accordion)包含一系列的面板(panel). 所有面板(panel)的头部(header)都是可见的,但是一次仅仅显示一个面板(panel)的 body 内容. 当用户点击面板(panel)的头部(header)时,该面板(panel)的 body 内容将可见,同时其他面板(panel)的 body 内容将隐藏不可见. <div class="easyui-accordion"