修改jquery里的dialog对话框插件为框架页(iframe) 的方法


Posted in Javascript onSeptember 14, 2010

jquery有个很不错的ui插件,dialog插件,他的官方网站上有各种形式的演示:http://jqueryui.com/demos/dialog/   ,可能大家用得比较多的还是它的默认模式,具体的用法官网上都有,也有中文的讲解地址,我就不再重复了,最近在弄弹出框架页,仔细一看,和dialog插件的modal form 模式很相似,demo演示效果:http://www.lovewebgames.com/addNews.aspx
修改jquery里的dialog对话框插件为框架页(iframe) 的方法
就是这么个效果,要进行登录注册弹出层,至于为什么我不直接用modal form来做呢?因为我喜欢,你管我。所以我就做了个jquery下面dialog的插件,需要引用原来dialog的文件。具体代码如下:

(function ($) { 
$.fn.openWidow = function (options) { 
var divId = "dialog" + Math.round(Math.random() * 100); 
var settings = { 
id: divId, 
width: 300, 
height: 200, 
modal: true, 
buttons: { 
}, 
show: "explode", 
hide: "highlight", 
title: "提示", 
url: "/test.aspx", 
close: function () { 
$("#" + this.id).remove(); 
//debugger 
if (document.getElementById(this.id)) 
document.body.removeChild(document.getElementById(this.id)); 
} 
}; 
if (options) { 
$.extend(settings, options); 
} 
$("body").append('<div id="' + settings.id + '" title="Dialog Title"><p class="loading"></p></div>'); 
// Dialog 
$('#' + settings.id).dialog({ 
autoOpen: false, 
title: settings.title, 
width: settings.width, 
height: settings.height, 
modal: true, 
bgiframe: true, 
show: settings.show, 
hide: settings.hide, 
buttons: settings.buttons, 
close: settings.close, 
open: function () { 
$("#" + settings.id).html('<iframe src="' + settings.url + '" frameborder="0" height="100%" width="100%" id="dialogFrame" scrolling="auto"></iframe>'); 
}, 
resizeStop: function () { 
$("#dialogFrame").css("width", parseInt($(this).css("width")) - 5); 
$("#dialogFrame").css("height", parseInt($(this).css("height")) - 5); 
} 
}); $('#' + settings.id).dialog("open"); 
return this; 
}; 
})(jQuery);

我想大家应该都还看得懂的,没啥复杂的,就是重复重复再重复的工作。甚至很多参数本身就是dialog的,我只是加了层皮。我相信这个方法是很多新手都希望用到的,毕竟不是每个人都喜欢并熟练使用ajax,所以这时候iframe的用途还是很大的。

并希望有兴趣的朋友加入我的Q群:70210212、5678537,平时多勾通下,有问题不用一个人想。

Javascript 相关文章推荐
JS模拟多线程
Feb 07 Javascript
JS按位非(~)运算符与~~运算符的理解分析
Jul 31 Javascript
js导航菜单(自写)简单大方
Mar 28 Javascript
在js文件中如何获取basePath处理js路径问题
Jul 10 Javascript
js获取GridView中行数据的两种方法 分享
Jul 13 Javascript
js获取页面传来参数的方法
Sep 06 Javascript
浅谈JavaScript中null和undefined
Jul 09 Javascript
轻量级网页遮罩层jQuery插件用法实例
Jul 31 Javascript
javascript使用 concat 方法对数组进行合并的方法
Sep 08 Javascript
微信小程序购物商城系统开发系列-目录结构介绍
Nov 21 Javascript
JS/jQuery判断DOM节点是否存在的简单方法
Nov 24 Javascript
JavaScript中如何对多维数组(矩阵)去重的实现
Dec 04 Javascript
基于jquery的划词搜索实现(备忘)
Sep 14 #Javascript
基于jquery的页面划词搜索JS
Sep 14 #Javascript
基于Jquery的实现回车键Enter切换焦点
Sep 14 #Javascript
js输出列表实现代码
Sep 12 #Javascript
JavaScript日历实现代码
Sep 12 #Javascript
某页码显示的helper 少量调整,另附js版
Sep 12 #Javascript
网页中CDATA标记的说明
Sep 12 #Javascript
You might like
PHP 高手之路(二)
2006/10/09 PHP
php实现从ftp服务器上下载文件树到本地电脑的程序
2009/02/10 PHP
php ftp文件上传函数(基础版)
2010/06/03 PHP
获取用户Ip地址通用方法与常见安全隐患(HTTP_X_FORWARDED_FOR)
2013/06/01 PHP
详解PHP内置访问资源的超时时间 time_out file_get_contents read_file
2013/06/03 PHP
jsp js鼠标移动到指定区域显示选项卡离开时隐藏示例
2013/06/14 Javascript
jquery对象和DOM对象的区别介绍
2013/08/09 Javascript
js实现的map方法示例代码
2014/01/13 Javascript
jQuery+ajax实现鼠标单击修改内容的思路
2014/06/29 Javascript
JavaScript与Java正则表达式写法的区别介绍
2017/08/15 Javascript
浅谈vue中慎用style的scoped属性
2017/11/28 Javascript
vue实现导航栏效果(选中状态刷新不消失)
2017/12/13 Javascript
es6数值的扩展方法
2019/03/11 Javascript
JS异步错误捕获的一些事小结
2019/04/26 Javascript
vue3.0 自适应不同分辨率电脑的操作
2021/02/06 Vue.js
python字符串加密解密的三种方法分享(base64 win32com)
2014/01/19 Python
python smtplib模块发送SSL/TLS安全邮件实例
2015/04/08 Python
Python实现程序的单一实例用法分析
2015/06/03 Python
Python爬虫之xlml解析库(全面了解)
2017/08/08 Python
python中利用Future对象异步返回结果示例代码
2017/09/07 Python
python决策树之C4.5算法详解
2017/12/20 Python
Python使用tkinter库实现文本显示用户输入功能示例
2018/05/30 Python
Python实现语音识别和语音合成功能
2019/09/20 Python
python使用SQLAlchemy操作MySQL
2020/01/02 Python
Python 列表推导式需要注意的地方
2020/10/23 Python
日本必酷网络直营店:Biccamera
2019/03/23 全球购物
RUIFIER官网:英国奢侈高级珠宝品牌
2020/06/12 全球购物
语文教育专业应届生求职信
2013/11/23 职场文书
工作自荐信
2013/12/11 职场文书
外企求职信范文分享
2013/12/31 职场文书
大学学习计划书范文
2014/05/02 职场文书
司法局火灾防控方案
2014/06/05 职场文书
退伍军人感言
2015/08/01 职场文书
导游词之泉州崇武古城
2019/12/20 职场文书
nginx中封禁ip和允许内网ip访问的实现示例
2022/03/17 Servers
postgresql如何找到表中重复数据的行并删除
2023/05/08 MySQL