修改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 哈希表(hashtable)的简单实现
Jan 20 Javascript
jquery在Chrome下获取图片的长宽问题解决
Mar 20 Javascript
JQuery为页面Dom元素绑定事件及解除绑定方法
Apr 23 Javascript
Javascript中实现trim()函数的两种方法
Feb 04 Javascript
JS控制网页动态生成任意行列数表格的方法
Mar 09 Javascript
JS给swf传参数的实现方法
Sep 13 Javascript
angularJS Provider、factory、service详解及实例代码
Sep 21 Javascript
Html5 js实现手风琴效果
Apr 17 Javascript
angularJs中datatable实现代码
Jun 03 Javascript
vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法
Sep 05 Javascript
JavaScript制作3D旋转相册
Aug 02 Javascript
vue axios封装httpjs,接口公用配置拦截操作
Aug 11 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
利用phpexcel把excel导入数据库和数据库导出excel实现
2014/01/09 PHP
laravel实现查询最后执行的一条sql语句的方法
2019/10/09 PHP
Tips 带三角可关闭的文字提示
2010/10/06 Javascript
jQuery EasyUI API 中文文档 - Spinner微调器使用
2011/10/21 Javascript
js获取指定日期周数以及星期几的小例子
2014/06/27 Javascript
用Move.js配合创建CSS3动画的入门指引
2015/07/22 Javascript
JavaScript实现将文本框的值插入指定位置的方法
2015/08/13 Javascript
关于backbone url请求中参数带有中文存入数据库是乱码的快速解决办法
2016/06/13 Javascript
AngularJS 输入验证详解及实例代码
2016/07/28 Javascript
jQuery实现模拟flash头像裁切上传功能示例
2016/12/11 Javascript
JavaScript中String对象的方法介绍
2017/01/04 Javascript
jQuery实现一个简单的轮播图
2017/02/19 Javascript
JS中LocalStorage与SessionStorage五种循序渐进的使用方法
2017/07/12 Javascript
ReactNative页面跳转Navigator实现的示例代码
2017/08/02 Javascript
微信小程序-滚动消息通知的实例代码
2017/08/03 Javascript
node.js基础知识小结
2018/02/26 Javascript
浅谈Vue组件及组件的注册方法
2018/08/24 Javascript
javascript对HTML字符转义与反转义
2018/12/13 Javascript
jQuery表单元素过滤选择器用法实例分析
2019/02/20 jQuery
Vuex mutitons和actions初使用详解
2019/03/04 Javascript
详解使用React.memo()来优化函数组件的性能
2019/03/19 Javascript
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
2019/05/27 jQuery
[04:03]辉夜杯主赛事 12月25日RECAP精彩回顾
2015/12/26 DOTA
[01:16:01]VGJ.S vs Mski Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
浅谈Python基础之I/O模型
2017/05/11 Python
python监测当前联网状态并连接的实例
2018/12/18 Python
Python对HTML转义字符进行反转义的实现方法
2019/04/28 Python
PyQt5响应回车事件的方法
2019/06/25 Python
Pandas0.25来了千万别错过这10大好用的新功能
2019/08/07 Python
python实现简单贪吃蛇游戏
2020/09/29 Python
Java平台和其他软件平台有什么不同
2015/06/05 面试题
动画设计系毕业生求职信
2014/07/15 职场文书
党员目标管理责任书
2014/07/25 职场文书
学校周年庆活动方案
2014/08/22 职场文书
2016元旦文艺汇演主持词(开场白+结束语)
2015/12/03 职场文书
草系十大最强宝可梦,纸片人上榜,榜首大家最熟悉
2022/03/18 日漫