/** * @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
相关推荐
7. **插件扩展**:EasyUI 支持插件扩展,开发者可以创建自己的组件或扩展现有组件的功能。 8. **国际化支持**:EasyUI 提供了内置的国际化功能,方便开发多语言应用。 在Java环境下,开发者可以通过将 "easyui.jar...
- **窗口(Window)**:EasyUI 的窗口组件可以创建浮动或固定的弹出窗口,支持拖动、大小调整、关闭等功能。源码中,窗口的创建、显示、隐藏等操作都有相应的函数处理。 - **表格(Grid)**:提供了数据展示和操作...
EasyUI 支持 HTML5,允许对 HTML 标签进行增强,并提供丰富的组件库,如 Layout、Window、Tabs、Dialog、Messager、DataGrid、Tree、Form、Validate、Button等,极大地简化了网页开发的过程。 使用 EasyUI 的步骤...
"jQuery EasyUI 公司管理后台模板"是专门为构建企业级后台管理系统设计的界面模板,它整合了多种EasyUI组件,包括layout、tab、accordion、window等,为开发高效简洁的后台页面提供了便捷。 1. **Layout(布局)**:...
- **jquery.min.js**:基础的jQuery库,EasyUI在此基础上扩展了UI功能。 - **easyloader.js**:EasyUI的加载器,用于自动化加载和初始化相关组件。 - **jquery.easyui.mobile.js**:移动版的jQuery EasyUI库,专门...
在"easyui扩展版本的插件"中,我们看到的是对原生EasyUI组件的进一步增强和定制,以满足更具体的需求。 1. **日期组件扩展**:原生的EasyUI日期选择器通常提供了基本的日历功能,但扩展版本可能包含了更多的自定义...
每个组件都有自己的文件,如`window.js`对应窗口组件,`datagrid.js`对应表格组件。这些源码可以帮助我们理解组件的实现逻辑。 3. `themes`目录:包含各种预设的主题样式,每种主题下有对应的图片资源和CSS文件,...
1. **组件丰富**:EasyUI 提供了诸如窗口(Window)、表格(Grid)、面板(Panel)、菜单(Menu)、下拉框(Combobox)、日期选择器(Datebox)等常见UI组件,涵盖了网页应用开发的大部分需求。 2. **主题多样化**...
此外,由于 EasyUI 基于 jQuery,你可以结合 jQuery 插件或自定义 JavaScript 进行扩展。 ### 6. 主题定制 EasyUI 提供了多种预设主题,用户也可以根据需要自定义主题。只需修改 `themes/default/easyui.css` 文件...
easyUI 我的第一个window easyUI 自定义window工具 easyUI window和布局 easyUI 创建Dialog对话框 easyUI Dialog自定义Toolbar和button Tree easyUI 从标记创建Tree easyUI 创建异步Tree easyUI 附加...
3. 插件扩展:EasyUI 社区提供了许多插件,如树形表格、时间选择器等,进一步增强了其功能。 4. 高度可定制:通过修改主题或编写自定义 CSS,可以实现个性化界面设计。 5. 友好的 API:1.5 版本的 API 中文版让...
源码分析可以帮助开发者理解EasyUI如何处理事件、渲染DOM元素、以及与jQuery的交互方式,对于性能优化和扩展功能很有价值。 ### 演示示例 (`jquery-easyui-DEMO`) `jquery-easyui-DEMO` 文件夹提供了各种组件的使用...
6. **可扩展性**:允许开发者根据需求自定义和扩展控件,以满足特定项目的需求。 7. **不断改进**:随着版本更新,jQuery EasyUI 不断完善其功能和性能,修复已知问题,以适应不断变化的 web 开发环境。 jQuery ...
除此之外,jQuery EasyUI 还包含日期时间选择器(Datebox、Datetimebox)、日历(Calendar)、滑块(Slider)等控件,以及数据展示组件如 DataGrid、TreeGrid,窗口组件如 Window 和 Dialog,以及消息提示组件 ...
<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"> <h3>This is Window ...
这些库包括 jQuery 本身、EasyUI 的 CSS 样式文件、图标样式、扩展样式以及 JavaScript 文件。此外,还需要本地化语言支持(这里是中文)。 ```html <!-- ... --> <script type="text/javascript" src="../../js...
- **Window(窗口)**:浮动的独立窗口,可拖动、调整大小。 2. **新组件与功能**: - **Mobile 版本**:v1.7 引入了移动端适配的组件 `jquery.easyui.mobile.js`,让开发者可以轻松构建响应式移动应用界面。 - ...
EasyUI也提供了丰富的API接口,如`$.fn.extend`用于扩展jQuery对象,`$.parser`用于解析页面上的EasyUI元素并初始化它们,`$.fn.datagrid`等方法则用于操作数据网格。理解这些API可以帮助你更灵活地控制组件行为。 ...
- **Window 窗口**和**Dialog 对话框**:创建弹出式窗口,常用于显示信息或进行用户交互。 - **Messager 消息框**:快速显示警告、信息或确认提示。 - **DataGrid 数据表格**和**Tree 树**:展示结构化数据,支持...