修改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下有关dom以及xml节点访问兼容问题
Nov 26 Javascript
JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
Jan 12 Javascript
javascript学习笔记(十六) 系统对话框(alert、confirm、prompt)
Jun 20 Javascript
Js日期选择自动填充到输入框(界面漂亮兼容火狐)
Aug 02 Javascript
javascript制作幻灯片(360度全景图片)
Jul 28 Javascript
JavaScript驾驭网页-获取网页元素
Mar 24 Javascript
JavaScript中原型链存在的问题解析
Sep 25 Javascript
JS回调函数简单用法示例
Feb 09 Javascript
js微信应用场景之微信音乐相册案例分享
Aug 11 Javascript
javascript实现Java中的Map对象功能的实例详解
Aug 21 Javascript
vue实现与安卓、IOS交互的方法
Nov 02 Javascript
Vue中跨域及打包部署到nginx跨域设置方法
Aug 26 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中显示格式化的用户输入
2006/10/09 PHP
实例讲解PHP表单验证功能
2019/02/15 PHP
javascript来定义类的规范小结
2010/11/19 Javascript
JQuery模板插件 jquery.tmpl 动态ajax扩展
2011/11/10 Javascript
javascript当中的代码嗅探扩展原生对象和原型(prototype)
2013/01/11 Javascript
js实现点击后将文字或图片复制到剪贴板的方法
2014/08/04 Javascript
jQuery中position()方法用法实例
2015/01/16 Javascript
javascript实现随机生成DIV背景色
2016/06/20 Javascript
JavaScript制作简易计算器(不用eval)
2017/02/05 Javascript
jQuery使用unlock.js插件实现滑动解锁
2017/04/04 jQuery
AngularJS实现进度条功能示例
2017/07/05 Javascript
vue.js实现备忘录功能的方法
2017/07/10 Javascript
原生js实现仿window10系统日历效果的实例
2017/10/31 Javascript
vue+axios 前端实现登录拦截的两种方式(路由拦截、http拦截)
2018/10/24 Javascript
react组件从搭建脚手架到在npm发布的步骤实现
2019/01/09 Javascript
微信小程序实现提交input信息到后台的方法示例
2019/01/19 Javascript
详解JavaScript中分解数字的三种方法
2021/01/05 Javascript
[57:55]完美世界DOTA2联赛PWL S3 Magma vs Phoenix 第二场 12.12
2020/12/16 DOTA
[03:13]DOTA2-DPC中国联赛1月25日Recap集锦
2021/03/11 DOTA
[32:30]夜魇凡尔赛茶话会 第一期01:谁是卧底
2021/03/11 DOTA
在Python的Flask框架中使用日期和时间的教程
2015/04/21 Python
Python数据结构与算法之常见的分配排序法示例【桶排序与基数排序】
2017/12/15 Python
Python创建普通菜单示例【基于win32ui模块】
2018/05/09 Python
使用python获取(宜宾市地震信息)地震信息
2019/06/20 Python
HTML5中使用json对象的实例代码
2018/09/10 HTML / CSS
Canvas实现贝赛尔曲线轨迹动画的示例代码
2019/04/25 HTML / CSS
Harman Audio官方商店:购买JBL、Harman Kardon、Infinity和AKG
2019/12/05 全球购物
澳大利亚在线购买葡萄酒:The Wine Collective
2020/02/20 全球购物
车间副主任岗位职责
2013/12/24 职场文书
开学典礼感言
2014/02/16 职场文书
社区科普工作方案
2014/06/03 职场文书
幼儿园六一亲子活动方案
2014/08/26 职场文书
班主任2015新年寄语
2014/12/08 职场文书
圣贤教育改变命运观后感
2015/06/16 职场文书
给numpy.array增加维度的超简单方法
2021/06/02 Python