修改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 相关文章推荐
javascript不同页面传值的改进版
Sep 30 Javascript
Javascript 汉字字节判断
Aug 01 Javascript
jquery 表格分页等操作实现代码(pagedown,pageup)
Apr 11 Javascript
js滚动条回到顶部的代码
Dec 06 Javascript
jQuery点击自身以外地方关闭弹出层的简单实例
Dec 24 Javascript
如何设置一定时间内只能发送一次请求
Feb 28 Javascript
JS实现“隐藏与显示”功能(多种方法)
Nov 24 Javascript
jQuery 实现双击编辑表格功能
Jun 19 jQuery
浅谈Webpack 持久化缓存实践
Mar 22 Javascript
前端axios下载excel文件(二进制)的处理方法
Jul 31 Javascript
详解Require.js与Sea.js的区别
Aug 05 Javascript
用图片替换checkbox原始样式并实现同样的功能
Nov 15 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
别人整理的服务器变量:$_SERVER
2006/10/20 PHP
yii2 RBAC使用DbManager实现后台权限判断的方法
2016/07/23 PHP
浅析PHP数据导出知识点
2018/02/17 PHP
event.keyCode键码值表 附只能输入特定的字符串代码
2009/05/15 Javascript
getElementByIdx_x js自定义getElementById函数
2012/01/24 Javascript
JS Pro-深入面向对象的程序设计之继承的详解
2013/05/07 Javascript
简单的代码实现jquery定时器
2013/11/17 Javascript
JavaScript+html5 canvas制作色彩斑斓的正方形效果
2016/01/27 Javascript
原生javascript实现图片无缝滚动效果
2016/02/12 Javascript
浅析JS原型继承与类的继承
2016/04/07 Javascript
javascript中href和replace的比较(详解)
2016/11/25 Javascript
JavaScript获取短信验证码(周期性)
2016/12/29 Javascript
微信小程序日历组件calendar详解及实例
2017/06/08 Javascript
[js高手之路]寄生组合式继承的优势详解
2017/08/28 Javascript
JS Testing Properties 判断属性是否在对象里的方法
2017/10/01 Javascript
vue2.0 子组件改变props值,并向父组件传值的方法
2018/03/01 Javascript
Node.js实现简单的爬取的示例代码
2019/06/25 Javascript
一文看懂如何简单实现节流函数和防抖函数
2019/09/05 Javascript
vue中使用百度脑图kityminder-core二次开发的实现
2019/09/26 Javascript
[01:02:10]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第一局
2016/02/26 DOTA
基于进程内通讯的python聊天室实现方法
2015/06/28 Python
Python正则表达式实现截取成对括号的方法
2017/01/06 Python
python使用pycharm环境调用opencv库
2018/02/11 Python
Python JSON格式数据的提取和保存的实现
2019/03/22 Python
TensorFlow tf.nn.softmax_cross_entropy_with_logits的用法
2020/04/19 Python
简单掌握CSS3中resize属性的用法
2016/04/01 HTML / CSS
巴黎欧莱雅法国官网:L’Oreal Paris
2019/04/30 全球购物
西班牙购买行李箱和背包网站:Maletas Greenwich
2019/10/08 全球购物
见习期自我鉴定
2013/11/07 职场文书
出国签证在职证明
2014/01/16 职场文书
幼儿园家长评语
2014/02/10 职场文书
小学教师自我鉴定范文
2014/03/20 职场文书
群众路线领导对照材料
2014/08/23 职场文书
给老师的保证书怎么写
2015/05/09 职场文书
暂住证明怎么写
2015/06/19 职场文书
大学学习委员竞选稿
2015/11/20 职场文书