easyui的window插件再次封装

说明:该插件弹出的弹出框在最顶层的页面中,而不是在当前页面所在的iframe中,它的可拖动范围是整个浏览器窗口;所以不能用JS的parent对象获取弹出它的父页面,这里用了一个笨方法,最多支持四级弹出框,即弹出框中再弹出弹出框的情况,笨方法也是方法,它很简单、很有效。

代码:

/**
* easyui的window插件再次封装
* 2014年11月10日
*/ SimpoWin = {
showWin: function showWindow(title, url, width, height) {
if (!top.SimpoWinId) top.SimpoWinId = 0;
var divId = "simpoWin" + top.SimpoWinId;
top.$("body").append('<div id="' + divId + '"></div>'); top.$('#' + divId).window({
modal: true,
title: title,
width: width,
height: height,
collapsible: false,
minimizable: false,
maximizable: false,
content: function () {
return '<iframe frameborder="0" src="' + url + '" style="width: ' + (width - 14).toString() + 'px; height: ' + (height - 39).toString() + 'px; margin: 0;">';
},
onClose: function () {
top.$('#' + divId).window('destroy');
top.SimpoWinId--;
}
}).window('open'); top.SimpoWinId++;
switch (top.SimpoWinId) {
case 1:
top.SimpoWinParent1 = window;
break;
case 2:
top.SimpoWinParent2 = window;
break;
case 3:
top.SimpoWinParent3 = window;
break;
default:
top.SimpoWinParent = window;
break;
}
}, closeWin: function () {
var divId = "simpoWin" + (top.SimpoWinId - 1).toString();
top.$('#' + divId).window('close');
}, GetWinParent: function () {
switch (top.SimpoWinId) {
case 1:
return top.SimpoWinParent1;
case 2:
return top.SimpoWinParent2;
case 3:
return top.SimpoWinParent3;
default:
return top.SimpoWinParent;
}
}
}

带回调函数版,支持传入url或div容器id:

/**
* easyui的window插件再次封装
* 2014年11月10日
*/ SimpoWin = {
showWin: function (title, url, width, height, okcallback, closecallback) {
if (!top.SimpoWinId) top.SimpoWinId = 0;
var divId = "simpoWin" + top.SimpoWinId;
top.$("body").append('<div id="' + divId + '"></div>'); top.$('#' + divId).window({
modal: true,
title: title,
width: width,
height: height,
collapsible: false,
minimizable: false,
maximizable: false,
content: function () {
return '<iframe frameborder="0" src="' + url + '" style="width: ' + (width - 14).toString() + 'px; height: ' + (height - 39).toString() + 'px; margin: 0;">';
},
onClose: function () {
top.$('#' + divId).window('destroy');
top.SimpoWinId--;
if (closecallback) closecallback();
}
}).window('open'); top.SimpoWinId++;
switch (top.SimpoWinId) {
case 1:
top.SimpoWinParent1 = window;
top.SimpoWinOKCallback1 = okcallback;
break;
case 2:
top.SimpoWinParent2 = window;
top.SimpoWinOKCallback2 = okcallback;
break;
case 3:
top.SimpoWinParent3 = window;
top.SimpoWinOKCallback3 = okcallback;
break;
default:
top.SimpoWinParent = window;
top.SimpoWinOKCallback = okcallback;
break;
}
}, closeWin: function () {
var divId = "simpoWin" + (top.SimpoWinId - 1).toString();
top.$('#' + divId).window('close');
}, OK: function (data) {
switch (top.SimpoWinId) {
case 1:
top.SimpoWinOKCallback1(data);
case 2:
top.SimpoWinOKCallback2(data);
case 3:
top.SimpoWinOKCallback3(data);
default:
top.SimpoWinOKCallback(data);
}
}, GetWinParent: function () {
switch (top.SimpoWinId) {
case 1:
return top.SimpoWinParent1;
case 2:
return top.SimpoWinParent2;
case 3:
return top.SimpoWinParent3;
default:
return top.SimpoWinParent;
}
}, showWin2: function (title, containerId, width, height, closecallback) {
top.$('#' + containerId).css("display", "");
var l = (top.$(top.window).width() - width) / 2;
var t = (top.$(top.window).height() - height) / 2 + top.$(top.document).scrollTop();
top.$('#' + containerId).window({
modal: true,
title: title,
width: width,
height: height,
left: l,
top: t,
collapsible: false,
minimizable: false,
maximizable: false,
onClose: function () {
if (closecallback) closecallback();
}
}).window('open');
}, closeWin2: function (containerId) {
top.$('#' + containerId).window('close');
}
}

如何使用:

1、引用该插件的JS文件

2、父页面代码:

SimpoWin.showWin("选择素材", "TextMessageList.aspx", 880, 580);

3、子页面代码:

var winParent = SimpoWin.GetWinParent();
winParent.setValue(val); //子页面操作父页面
SimpoWin.closeWin(); //关闭弹出框

easyui的window插件再次封装的更多相关文章

  1. javascript笔记——jqGrid再次封装

    xingrunzhao js插件再次封装 demo 'use strict'; /** * commerce grid框架 * 依赖jqgrid */ (function ($_self, jQuer ...

  2. JS弹出框插件zDialog再次封装

    zDialog插件网址:http://www.jq22.com/jquery-info2426 再次封装zDialog的代码: (function ($) { $.extend({ iDialog: ...

  3. ajax的再次封装!(改进版) —— new与不 new 有啥区别?

    生命不息重构不止! 上一篇写了一下我对ajax的再次封装的方法,收到了很多有价值的回复,比如有童鞋建议用$.extend,一开始还以为要做成插件呢,后来才知道,原来这个东东还可以实现合并.省着自己再去 ...

  4. quartz.net插件类库封装(含源码)

    1.前言 目录: 1.quartz.net任务调度:源码及使用文档 2.quartz.net插件类库封装 最近项目需要做一写任务作业调度的工作,最终选择了quartz.net这个插件,它提供了巨大的灵 ...

  5. ajax的再次封装!

    js的动态加载.缓存.更新以及复用 系列有点卡文,放心会继续的.先来点更基础的,为js的加载做点铺垫. jQuery的ajax本来就很方便了,为啥还要在进一步的封装呢?这个首先要看项目的具体需求了,如 ...

  6. easyUI的window包含一个iframe,在iframe中如何关闭window?

    easyUI的window包含一个iframe,在iframe中如何关闭window? parent.$('#win').window('close');

  7. easyui表单插件-包括日期时控件-列表

    ← jQuery EasyUI 表单插件 – Numberspinner 数值微调器 jQuery EasyUI 表单插件 - Timespinner 时间微调器  jQuery EasyUI 插件 ...

  8. Easyui 让Window弹出居中

    原文:Easyui 让Window弹出居中 easyui1.3.2版本,window的弹出不会居中了.而dialog是会居中的,我们必须为为window的open事件做扩展 代码如下:只要加入以下代码 ...

  9. EasyUI在window中使用kindeditor 4.1.10在IE9中不能回显、获得焦点编辑的问题

    描述 :kindeditor4.1.10版本是当前最新的版本,在浏览器兼容性和功能方面都是值得一赞的,在开发中能方便快捷的满足一些开发需求. 问题 :  问题总是有的.  在使用过程中,遇到EasyU ...

随机推荐

  1. 移动App开发需要更多的PaaS平台而不是IaaS

    时代的变迁,创业的大潮,越来越多的人关注了有点开发,越来越多的人了解了互联网服务术语:PaaS.IaaS.SaaS.BaaS等.今天大家在开发App的时候这么多复杂的云服务如何来选择呢? IaaS服务 ...

  2. Jquery Mobile 小结

    第一次做一个移动站点,当时纠结选Jquery Mobile还是Zepto,Zepto相对于JM更加轻巧,语法上面也很相似,但考虑到时间问题和JM自带了很多组件(Bootstrap惯出来的),还是选择了 ...

  3. css实现左栏固定右栏自适应,高度自适应的布局

    收集css中的基础知识,所以这并不是什么新鲜的技术,只是作为备忘~本文的内容如题所示,是一个简单的布局,用于左右两栏布局的页面,左侧是固定宽度,右侧占据剩余的宽度.在垂直方向,始终以高度最大的一栏为基 ...

  4. java提高篇(二十)-----集合大家族

          在编写java程序中,我们最常用的除了八种基本数据类型,String对象外还有一个集合类,在我们的的程序中到处充斥着集合类的身影!java中集合大家族的成员实在是太丰富了,有常用的Arra ...

  5. REST建模语言RAML介绍

    原创文章转载请注明出处:@协思, http://zeeman.cnblogs.com   RAML是什么?   RAML是一种简洁的RESTful API描述性语言,它基于 YAML和JSON这样的公 ...

  6. Asp.net MVC JsonResult 忽略属性

    指定 JavaScriptSerializer 不序列化公共属性或公共字段.无法继承此类. 命名空间:  System.Web.Script.Serialization 程序集:  System.We ...

  7. 《30天自制操作系统》笔记(02)——导入C语言

    <30天自制操作系统>笔记(02)——导入C语言 进度回顾 在上一篇,记录了计算机开机时加载IPL程序(initial program loader,一个nas汇编程序)的情况,包括IPL ...

  8. NodeJS系列~第四个小例子,NodeJs处理Get请求和Post请求

    返回目录 说在前 对于HTTP请求来说,我们通常使用的是Get和Post,除此之外还有put,delete等,而对于get来说,比较lightweight,只是对字符串的传输,它会被添加到URL地址里 ...

  9. EF架构~通过EF6的DbCommand拦截器来实现数据库读写分离~再续~添加对各只读服务器的心跳检测

    回到目录 上一讲中基本实现了对数据库的读写分离,而在选择只读数据库上只是随机选择,并没有去检测数据库服务器是否有效,如服务器挂了,SQL服务停了,端口被封了等等,而本讲主要对以上功能进行一个实现,并对 ...

  10. Java中的数是用补码表示的检验

    一.基本介绍(关于下列五个定义来自http://www.cnblogs.com/zhangziqiu/archive/2011/03/30/ComputerCode.html#!comments,谢原 ...