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');
});


郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。