修改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 设置某DIV区域内的checkbox复选框
Nov 30 Javascript
一个基于jquery的文本框记数器
Sep 19 Javascript
Node.js中的事件驱动编程详解
Aug 16 Javascript
javascript刷新父页面的各种方法汇总
Sep 03 Javascript
jQuery ajax方法传递中文时出现中文乱码的解决方法
Jul 25 Javascript
window.open不被拦截的简单实现代码(推荐)
Aug 04 Javascript
移动端点击态处理的三种实现方式
Jan 12 Javascript
微信小程序模板之分页滑动栏
Feb 10 Javascript
老生常谈js数据类型
Aug 03 Javascript
vue通过路由实现页面刷新的方法
Jan 25 Javascript
Node+OCR实现图像文字识别功能
Nov 26 Javascript
vue-resource 拦截器interceptors使用详解
Jan 18 Vue.js
基于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
让Nginx支持ThinkPHP的URL重写和PATHINFO的方法分享
2011/08/08 PHP
php网页版聊天软件实现代码
2016/08/12 PHP
总结PHP删除字符串最后一个字符的三种方法
2016/08/30 PHP
Laravel6.2中用于用户登录的新密码确认流程详解
2019/10/16 PHP
指定js可访问其它域名的cookie的方法
2007/09/18 Javascript
JavaScript 构造函数 面相对象学习必备知识
2010/06/09 Javascript
js replace 与replaceall实例用法详解
2013/08/03 Javascript
JavaScript语言核心数据类型和变量使用介绍
2013/08/23 Javascript
JS.elementGetStyle(element, style)应用示例
2013/09/24 Javascript
jQuery中prepend()方法用法实例
2014/12/25 Javascript
JavaScript实现16进制颜色值转RGB的方法
2015/02/09 Javascript
通过实例理解javascript中没有函数重载的概念
2015/06/03 Javascript
深入解析JavaScript中函数的Currying柯里化
2016/03/19 Javascript
详解JavaScript设计模式开发中的桥接模式使用
2016/05/18 Javascript
AngularJS使用ng-options指令实现下拉框
2016/08/23 Javascript
jQuery中的deferred使用方法
2017/03/27 jQuery
Three.js利用orbit controls插件(轨道控制)控制模型交互动作详解
2017/09/25 Javascript
微信小程序中进行地图导航功能的实现方法
2018/06/29 Javascript
vue中动态设置meta标签和title标签的方法
2018/07/11 Javascript
详解Nuxt.js部署及踩过的坑
2018/08/07 Javascript
小程序最新获取用户昵称和头像的方法总结
2019/09/23 Javascript
vue中get请求如何传递数组参数的方法示例
2019/11/08 Javascript
[58:12]Ti4第二日主赛事败者组 LGD vs iG 3
2014/07/21 DOTA
python基础教程之缩进介绍
2014/08/29 Python
Python入门篇之列表和元组
2014/10/17 Python
Python爬虫爬取一个网页上的图片地址实例代码
2018/01/16 Python
pycharm的console输入实现换行的方法
2019/01/16 Python
利用Python查看微信共同好友功能的实现代码
2019/04/24 Python
基于python实现生成指定大小txt文档
2020/07/20 Python
html5+css3实现一款注册表单实例
2013/04/17 HTML / CSS
服务生自我鉴定
2014/01/22 职场文书
艺术设计专业求职自荐信
2014/05/19 职场文书
星级党支部申报材料
2014/05/31 职场文书
2014年最新离婚协议书范本
2014/10/11 职场文书
毕业生自荐信范文
2015/03/05 职场文书
2015大学党建带团建工作总结
2015/07/23 职场文书