修改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实现单继承和多继承的简单方法
Mar 29 Javascript
JavaScript 学习笔记(十六) js事件
Feb 01 Javascript
使用基于jquery的gamequery插件做JS乒乓球游戏
Jul 31 Javascript
js的延迟执行问题分析
Jun 23 Javascript
深入理解JavaScript系列(28):设计模式之工厂模式详解
Mar 03 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之绑定事件
Nov 19 Javascript
js+css实现回到顶部按钮(back to top)
Mar 02 Javascript
Chrome不支持showModalDialog模态对话框和无法返回returnValue问题的解决方法
Oct 30 Javascript
Node.js+ES6+dropload.js实现移动端下拉加载实例
Jun 01 Javascript
ajax请求data遇到的问题分析
Jan 18 Javascript
jQuery zTree插件使用简单教程
Aug 16 jQuery
js实现中文实时时钟
Jan 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
详解YII关联查询
2016/01/10 PHP
PHP爬虫之百万级别知乎用户数据爬取与分析
2016/01/22 PHP
PHP中用mysqli面向对象打开连接关闭mysql数据库的方法
2016/11/05 PHP
thinkPHP框架实现生成条形码的方法示例
2018/06/06 PHP
Javascript 表单之间的数据传递代码
2008/12/04 Javascript
Knockoutjs快速入门(经典)
2012/12/24 Javascript
jQuery实现鼠标滑过遮罩并高亮显示效果
2013/07/16 Javascript
Javascript中的几种URL编码方法比较
2015/01/23 Javascript
JavaScript 事件对象介绍
2015/04/13 Javascript
JavaScript+html5 canvas绘制的小人效果
2016/01/27 Javascript
最实用的jQuery分页插件
2016/10/09 Javascript
Javascript实现汉字和拼音互转的终极方案
2016/10/19 Javascript
JS正则表达式修饰符中multiline(/m)用法分析
2016/12/27 Javascript
Angular2搜索和重置按钮过场动画
2017/05/24 Javascript
浅谈Vue父子组件和非父子组件传值问题
2017/08/22 Javascript
Vue Element 分组+多选+可搜索Select选择器实现示例
2018/07/23 Javascript
nuxt框架中对vuex进行模块化设置的实现方法
2019/09/06 Javascript
解决pycharm双击但是无法打开的情况
2020/10/31 Javascript
Vue SPA 首屏优化方案
2021/02/26 Vue.js
Python编写生成验证码的脚本的教程
2015/05/04 Python
简单解决Python文件中文编码问题
2015/11/22 Python
PyQt5每天必学之QSplitter实现窗口分隔
2018/04/19 Python
解决pycharm无法调用pip安装的包问题
2018/05/18 Python
python树的同构学习笔记
2019/09/14 Python
pandas factorize实现将字符串特征转化为数字特征
2019/12/19 Python
Python yield的用法实例分析
2020/03/06 Python
Python-jenkins模块之folder相关操作介绍
2020/05/12 Python
浅谈pytorch 模型 .pt, .pth, .pkl的区别及模型保存方式
2020/05/25 Python
Virtualenv 搭建 Py项目运行环境的教程详解
2020/06/22 Python
CSS3效果:自定义“W”形运行轨迹实例
2017/03/29 HTML / CSS
英国知名小木屋定制网站:Tiger Sheds
2020/03/06 全球购物
工程采购员岗位职责
2014/03/09 职场文书
2014年房地产个人工作总结
2014/12/20 职场文书
Java并发编程必备之Future机制
2021/06/30 Java/Android
详解Python内置模块Collections
2022/03/22 Python
面试官问我Mysql的存储引擎了解多少
2022/08/05 MySQL