`

扩展easyui.window

 
阅读更多
/**
  * @requires jquery, EasyUI 1.2.6+
  * 
  * 此方法是对 EasyUI.window 和 EasyUI.dialog 的扩展
  * 可以实现如下功能:
  * 1、使用框架页面时可以控制窗口是否跨框架弹出在框架最顶层页面,还是框架内当前页面。默认框架最顶层页面
  * 2、可以控制url加载页面方式,是使用默认方式,还是iframe加载, 默认iframe加载
  * 3、使用iframe加载页面时,可以实现父页面向子页面传递javaScript对象
  * 4、使用iframe加载页面时,可以订制iframe onLoad事件
  * 5、扩展content属性,自动识别是静态文本内容,还是加载页面
  * 6、通过赋值ID属性,控制弹出窗体唯一性
  * 7、toolbar、buttons中定义按钮的handler属性,支持弹出窗体iframe中方法调用。
  * 8、弹出窗体关闭方式更灵活
  * 
  * 
  * @author zhaojh<zjh527@163.com>
  * @date 2012.11.15
  * 
  */
 (function($){
 	$.namespace('vseaf');
 	
 	/**
 	 * 普通窗体
 	 * 
 	 * 新增属性说明如下
 	 * @param isFrame	是否开启使用iframe加载给定url页面, 此属性设置为true时则开启使用iframe加载页面。 值:true|false,  默认值true
 	 * @param self		用于框架页面,如果值为true则不跨框架,否则跨框架弹出在框架最顶层页面。 值:true|false,	默认值false
 	 * @param data		用于在使用iframe加载给定页面时,父页面给子页面传递数据。	默认值null
 	 * 
 	 * 扩展属性说明如下
 	 * @param onLoad	当使用iframe加载给定url页面时,在iframe加载完成后调用。
 	 * 					默认接收一个参数对象,参数对象属性说明参见下面toolbar、buttons说明第2项。
 	 * @param content	可根据内容前缀关键字'url:',来判断是显示静态文本还是加载页面。
 	 * @param id		此属性用来标识弹出窗体的唯一性,不再用来充当panel的id属性
 	 * 
 	 * 特殊属性说明如下
 	 * this.content		iframe方式加载内容页的window对象。 用于onLoad方法中的调用
 	 * 
 	 * 
 	 * toolbar、buttons	属性定义按钮handler属性扩展说明如下
 	 * 1、当handler 被赋值字符串时,表示调用弹出窗体iframe中已有的与字符串值同名的方法
 	 * 2、被调用方法默认接收一个参数对象,对象属性如下:
 	 *   data: 类型:Object,是对vseaf.open方法参数data的引用
 	 *   close: 类型:Function,用来关闭弹出窗体
 	 * 
 	 * 
 	 * 
 	 * 
 	 * 注:其他属性请参考EasyUI API文档。
 	 * 
 	 */
 	vseaf.open = function(opts){
 		var win;
 		var defaults = {
 			width: 500,
     		height: 400,
     		minimizable: true,
     		maximizable: true,
     		collapsible: true,
     		resizable: true,
     		isFrame: true, //是否使用iframe
     		self: false, //用于框架页面,如果值为true则不跨框架,否则跨框架弹出在框架最顶层页面
     		data: null, //iframe方式下用来父页面向弹出窗体中子页面传递数据
     		content: '',
     		onLoad: null,
     		onClose: function(){
     			win.dialog('destroy');
     		}
 		};
 		
 		var options = $.extend({}, defaults, opts);
 		
 		//取顶层页面
 		var _doc, _top = (function(w){
 			try{
 				_doc = w['top'].document;
 				_doc.getElementsByTagName;
 			}catch(e){
 				_doc = w.document; 
 				return w;
 			}
 			
 			if(options.self || _doc.getElementsByTagName('frameset').length >0){
 				_doc = w.document; 
 				return w;
 			}
 			
 			return w['top'];
 		})(window);
 		
 		
 		//如填写ID属性,则窗体唯一
 		var winId;
 		if(options.id){
 			winId = options.id;
 			delete options.id;
 			
 			//检查创建窗口是否已经存在,存在则不在创建
 			if($('#'+winId).length>0){
 				return;
 			}
 		}
 		
 		//检查content内容是静态文本,还是url地址
 		var isUrl = /^url:/.test(options.content);
 		if(isUrl){
 			var url = options.content.substr(4, options.content.length);
 			//构建iframe加载方式
 			if(options.isFrame){
 				var iframe = $('<iframe></iframe>')
 				            .attr('height', '100%')
 				            .attr('width', '100%')
 				            .attr('marginheight', '0')
 				            .attr('marginwidth', '0')
 				            .attr('frameborder','0');
 				
 				setTimeout(function(){
 					iframe.attr('src', url);
 				}, 1);
 				
 				
 				var _this = this;
 				var frameOnLoad = function(){
 					_this.content = iframe.get(0).contentWindow;
 					options.onLoad && options.onLoad.call(_this, {
 						data: options.data,
 						close: function(){
 							win.dialog('close');
 						}
 					});
 				}
 				
 				delete options.content;
 				
 			}else{//使用默认页面加载方式
 				options.href = url;
 			}
 		}
 		
 		//加工toolbar和buttons中定义的handler方法,使其可以接收给定参数,用于iframe方式下的父子页面传值和窗口关闭
 		var warpHandler = function(handler){
 			var args = {data: options.data, close: function(){win.dialog('close')}};
 			if(typeof handler =='function'){
 				return function(){
 					handler(args);
 				}
 			}
 			
 			if(typeof handler == 'string' && options.isFrame){
 				return function(){
 					iframe.get(0).contentWindow[handler](args);
 				}
 			}
 		}
 		
 		//处理toolbar数组事件定义,选择器形式不做处理
 		if(options.toolbar && $.isArray(options.toolbar)){
 			for(var i in options.toolbar){
 				options.toolbar[i].handler = warpHandler(options.toolbar[i].handler);
 			}
 		}
 		
 		//处理buttons数组事件定义,选择器形式不做处理
 		if(options.buttons && $.isArray(options.buttons)){
 			for(var i in options.buttons){
 				options.buttons[i].handler = warpHandler(options.buttons[i].handler);
 			}
 		}
 		
 
 		if(options.isFrame && iframe){
 			iframe.bind('load', frameOnLoad);
 			win = _top.$('<div>', {id: winId}).append(iframe).dialog(options);
 		}else{
 			win = _top.$('<div>', {id: winId}).dialog(options);
 		}
 	}
 	
 	
 	/**
 	 * 
 	 * 模式窗体
 	 * 
 	 * 参数说明请看vseaf.open
 	 * 
 	 */
 	vseaf.showModalDialog = function(opts){
 		var defaults = $.extend(
 					{}, 
 					opts, 
 					{
 						modal: true, 
 						minimizable: false, 
 						maximizable: false, 
 						resizable: false, 
 						collapsible: false 
 					}
 				);
 		vseaf.open(defaults);
 	}
 })(jQuery)

 

 

jquery.namespace.js

 

(function($){
 	$.extend({
 		namespace: function(ns){
 			if(typeof ns != 'string'){
 				throw new Error('namespace must be a string');
 			}
 			
 			var ns_arr = ns.split('.');
 			var parent = window;
 			for(var i in ns_arr){
 				parent[ns_arr[i]] = parent[ns_arr[i]] || {};
 				parent = parent[ns_arr[i]];
 			}
 		}
 	});
 })(jQuery)

 

 

使用示例:

 

function doEdit(){
 	vseaf.open({
 		id: 'edit',
 		title: '编辑初始化值',
 		width: 800,
 		height: 500,
		data: {name: 'Tom', age: 18}, //传递给iframe的数据
 		content: 'url:edit.jsp',
 		onLoad: function(dialog){
 			if(this.content && this.content.doInit){//判断弹出窗体iframe中的doInit方法是否存在
 				this.content.doInit(dialog);//调用并将参数传入,此处当然也可以传入其他内容
 			}
 		},
 		toolbar: [{
 			text: '保存',
 			iconCls: 'icon-save',
 			handler: 'doSave' //调用弹出窗体iframe中的doSave方法
 		},'-',{
 			text: '关闭',
 			iconCls: 'icon-cancel',
 			handler: function(dialog){
 				dialog.close();
 			}
 		}]
 	});
 }

 

 

转载自:CSDN  http://blog.csdn.net/zjh527/article/details/8190607

分享到:
评论

相关推荐

    EasyUI tutorial 中文版 chm

    easyUI 我的第一个window easyUI 自定义window工具 easyUI window和布局 easyUI 创建Dialog对话框 easyUI Dialog自定义Toolbar和button Tree easyUI 从标记创建Tree easyUI 创建异步Tree easyUI 附加...

    最全的jquery-easyui扩展

    1. 在datagrid中首列标示“序号”二字 ; 2. datagrid翻页,取消勾选当前页中的所有行; 3. 没有数据时datagrid中显示...7. 查找iframe和window.open()打开父window; 8. 查找iframe和window.open()打开最顶层window。

    easyui扩展版本的插件

    自定义扩展组件,日期,数据表格视图,window弹窗自定义,dialog等

    jQuery EasyUI 1.4.3 离线简体中文API文档 含完整开发工具包+皮肤+扩展+演示

    window:内联窗体的遮罩层可以自动伸展来填补父容器; tabs:“showTool”和“hideTool”方法提供用户显示或隐藏工具栏; layout:允许用户覆盖“cls”、“headerCls”和“bodyCls”属性值。 New Plugin(新组件)...

    jQuery EasyUI 1.4.5 离线简体中文API文档 含完整开发工具包+皮肤+扩展+演示

    快半年了,EasyUI又更新了。这次依然以BUG修复和功能改进为主,EasyUI发展至今,主体功能已经基本完善。即便以后还有新组件,那也是在现有功能完善的基础上新增一些小组件了,类似Datagrid这类的大型复合组件应该...

    jQuery EasyUI 1.4.4 离线简体中文API文档 含完整开发工具包+皮肤+扩展+演示

    window:修复在“onMove”事件中调用“options”方法时无法正常显示的问题; treegrid:修复“getLevel”方法无法接受为0的参数值的问题。 Improvement(改进) layout:改进后的“collapsedContent”、...

    jQuery EasyUI 1.5 离线简体中文API文档 含完整开发工具包+皮肤+扩展+演示

    jQuery EasyUI 1.5版本更新内容: Bug(修复) combobox:修复在加载包含所选项数据的时候不会触发“onSelect”事件的BUG; datagrid:修复在字段设置为一个空值的时候导致在某些情况下“updateRow”方法无法正常...

    jQuery EasyUI 1.5.1 离线简体中文API文档 含完整开发工具包+皮肤+扩展+演示

    jQuery EasyUI 1.5.1版本更新内容: Bug(修复) datagrid:修复在调用“updateRow”方法之后选中和复选行标志丢失的问题; tabs:修复在调用“update”方法的时候导致标签栏工具错位的问题; window:修复在...

    jQuery easyUI的教程

    jQuery easyUI 培训 教程 1 Accordion(可折叠标签) 2 1.1 实例 2 1.2 参数 3 2 DateBox(日期框) 4 2.1 实例 4 2.2 参数 6 2.3 事件 6 2.4 方法 6 3 ComboBox(组合框) 7 3.1 实例 7 3.2 参数 9 3.3 事件 9 3.4 ...

    jQuery EasyUI API 中文文档 – Dialog对话框

    扩展自 $.fn.window.defaults,用 $.fn.dialog.defaults 重写了 defaults。   依赖 window linkbutton 用法 代码如下: ”dd” title=”My xss=removed&gt; Dialog Content. &lt;/div&gt; 代码如下: $(‘#dd’).dialog({ ...

    jQuery EasyUI 1.3 API 中文教程

    窗口 - Window 对话框 - Dialog 消息窗口 - Messager 表单相关 表单 - Form Demo 日历 - Calendar 下拉选择框 - Custom Combo 下拉组合框 - ComboBox 数据表格下拉框 - ComboGrid 树形下拉框 - ...

    jquery_easyui_cn文档

    9 Window(窗口) 23 9.1 实例 23 9.2 参数 25 9.3 事件 26 9.4 方法 26 10 Panel(面板) 26 10.1 实例 26 10.2 参数 28 10.3 事件 29 10.4 方法 29 11 Tabs(标签) 30 11.1 实例 30 11.2 参数 32 11.3 事件 32 ...

    jquery_easyui_cn 中文例子 和详解

    9 Window(窗口) 23 9.1 实例 23 9.2 参数 25 9.3 事件 26 9.4 方法 26 10 Panel(面板) 26 10.1 实例 26 10.2 参数 28 10.3 事件 29 10.4 方法 29 11 Tabs(标签) 30 11.1 实例 30 11.2 参数 32 11.3 事件 32 ...

    Web应用前端技术的探索与实践

    6.5.2.14.1 基于JQuery EasyUI的日期选择组件 139 6.5.2.14.2 My97DatePicker 142 6.5.2.15 TimeSpinner 146 6.5.2.15.1 效果 146 6.5.2.15.2 应用 147 6.5.2.16 NumberSpinner 148 6.5.2.16.1 效果 148 6.5.2.17 ...

    SyUtils.js

    孙宇的jsutils,包含一些常用的js的工具.easyui 扩展 数据平滑、防止panel/window/dialog组件超出浏览器边界、panel关闭时回收内存、扩展datagrid,添加动态增加或删除Editor的方法、增加带复选框的下拉树、增加多选...

Global site tag (gtag.js) - Google Analytics