`

扩展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.rar jar包

    7. **插件扩展**:EasyUI 支持插件扩展,开发者可以创建自己的组件或扩展现有组件的功能。 8. **国际化支持**:EasyUI 提供了内置的国际化功能,方便开发多语言应用。 在Java环境下,开发者可以通过将 "easyui.jar...

    jquery.easyUI.1.1.2 源码 .rar

    - **窗口(Window)**:EasyUI 的窗口组件可以创建浮动或固定的弹出窗口,支持拖动、大小调整、关闭等功能。源码中,窗口的创建、显示、隐藏等操作都有相应的函数处理。 - **表格(Grid)**:提供了数据展示和操作...

    EasyUI.pdf_前端学习资料

    EasyUI 支持 HTML5,允许对 HTML 标签进行增强,并提供丰富的组件库,如 Layout、Window、Tabs、Dialog、Messager、DataGrid、Tree、Form、Validate、Button等,极大地简化了网页开发的过程。 使用 EasyUI 的步骤...

    jQuery EasyUI公司管理后台模板.zip

    "jQuery EasyUI 公司管理后台模板"是专门为构建企业级后台管理系统设计的界面模板,它整合了多种EasyUI组件,包括layout、tab、accordion、window等,为开发高效简洁的后台页面提供了便捷。 1. **Layout(布局)**:...

    jquery-easyui-1.8.4.zip

    - **jquery.min.js**:基础的jQuery库,EasyUI在此基础上扩展了UI功能。 - **easyloader.js**:EasyUI的加载器,用于自动化加载和初始化相关组件。 - **jquery.easyui.mobile.js**:移动版的jQuery EasyUI库,专门...

    easyui扩展版本的插件

    在"easyui扩展版本的插件"中,我们看到的是对原生EasyUI组件的进一步增强和定制,以满足更具体的需求。 1. **日期组件扩展**:原生的EasyUI日期选择器通常提供了基本的日历功能,但扩展版本可能包含了更多的自定义...

    jquery-easyui-1.2.5源码

    每个组件都有自己的文件,如`window.js`对应窗口组件,`datagrid.js`对应表格组件。这些源码可以帮助我们理解组件的实现逻辑。 3. `themes`目录:包含各种预设的主题样式,每种主题下有对应的图片资源和CSS文件,...

    easyUI工具

    1. **组件丰富**:EasyUI 提供了诸如窗口(Window)、表格(Grid)、面板(Panel)、菜单(Menu)、下拉框(Combobox)、日期选择器(Datebox)等常见UI组件,涵盖了网页应用开发的大部分需求。 2. **主题多样化**...

    EasyUI教材文档

    此外,由于 EasyUI 基于 jQuery,你可以结合 jQuery 插件或自定义 JavaScript 进行扩展。 ### 6. 主题定制 EasyUI 提供了多种预设主题,用户也可以根据需要自定义主题。只需修改 `themes/default/easyui.css` 文件...

    EasyUI tutorial 中文版 chm

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

    jQuery EasyUI 1.5 版 API 中文版【功能强大,实用,详细】,后台开发中必不可少的工具,查找非常方便,可以直接进入依赖,和扩展方法

    3. 插件扩展:EasyUI 社区提供了许多插件,如树形表格、时间选择器等,进一步增强了其功能。 4. 高度可定制:通过修改主题或编写自定义 CSS,可以实现个性化界面设计。 5. 友好的 API:1.5 版本的 API 中文版让...

    jquery easyui demo和源码

    源码分析可以帮助开发者理解EasyUI如何处理事件、渲染DOM元素、以及与jQuery的交互方式,对于性能优化和扩展功能很有价值。 ### 演示示例 (`jquery-easyui-DEMO`) `jquery-easyui-DEMO` 文件夹提供了各种组件的使用...

    jQueryEasyUI介绍.docx

    6. **可扩展性**:允许开发者根据需求自定义和扩展控件,以满足特定项目的需求。 7. **不断改进**:随着版本更新,jQuery EasyUI 不断完善其功能和性能,修复已知问题,以适应不断变化的 web 开发环境。 jQuery ...

    jQueryEasyUI介绍.pdf

    除此之外,jQuery EasyUI 还包含日期时间选择器(Datebox、Datetimebox)、日历(Calendar)、滑块(Slider)等控件,以及数据展示组件如 DataGrid、TreeGrid,窗口组件如 Window 和 Dialog,以及消息提示组件 ...

    jQueryEasyUi培训文档.pdf

    &lt;div id="window" class="easyui-window" data-options="title:'Window Title',collapsible:true,minimizable:true,maximizable:true,resizable:true,modal:true,closed:true,shadow:true"&gt; &lt;h3&gt;This is Window ...

    jQuery EasyUI window窗口使用实例代码

    这些库包括 jQuery 本身、EasyUI 的 CSS 样式文件、图标样式、扩展样式以及 JavaScript 文件。此外,还需要本地化语言支持(这里是中文)。 ```html &lt;!-- ... --&gt; &lt;script type="text/javascript" src="../../js...

    easyui 1.7

    - **Window(窗口)**:浮动的独立窗口,可拖动、调整大小。 2. **新组件与功能**: - **Mobile 版本**:v1.7 引入了移动端适配的组件 `jquery.easyui.mobile.js`,让开发者可以轻松构建响应式移动应用界面。 - ...

    easyui 1.5 中文说明文档

    EasyUI也提供了丰富的API接口,如`$.fn.extend`用于扩展jQuery对象,`$.parser`用于解析页面上的EasyUI元素并初始化它们,`$.fn.datagrid`等方法则用于操作数据网格。理解这些API可以帮助你更灵活地控制组件行为。 ...

    jquery easyui 中文帮助文档(最完整的API).docx

    - **Window 窗口**和**Dialog 对话框**:创建弹出式窗口,常用于显示信息或进行用户交互。 - **Messager 消息框**:快速显示警告、信息或确认提示。 - **DataGrid 数据表格**和**Tree 树**:展示结构化数据,支持...

Global site tag (gtag.js) - Google Analytics