修改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 相关文章推荐
JS Range HTML文档/文字内容选中、库及应用介绍
May 12 Javascript
js使用函数绑定技术改变事件处理程序的作用域
Dec 26 Javascript
js通过元素class名字获取元素集合的具体实现
Jan 06 Javascript
js获取元素外链样式的方法
Jan 27 Javascript
JavaScript中的bold()方法使用详解
Jun 08 Javascript
JavaScript中使用指数方法Math.exp()的简介
Jun 15 Javascript
网页瀑布流布局jQuery实现代码
Oct 21 Javascript
inner join 内联与left join 左联的实例代码
Sep 18 Javascript
基于BootStrap的文本编辑器组件Summernote
Oct 27 Javascript
详解从买域名到使用pm2部署node.js项目全过程
Mar 07 Javascript
浅谈layui使用模板引擎动态渲染元素要注意的问题
Sep 14 Javascript
js刷新页面location.reload()用法详解
Dec 09 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中配置文件操作 如config.php文件的读取修改等操作
2012/07/07 PHP
php遍历目录与文件夹的多种方法详解
2013/11/14 PHP
PHP制作万年历
2015/01/07 PHP
php对数组内元素进行随机调换的方法
2015/05/12 PHP
PHP中foreach()用法汇总
2015/07/02 PHP
PHP实现的常规正则验证helper公共类完整实例
2017/04/27 PHP
PHP日志LOG类定义与用法示例
2018/09/06 PHP
Laravel推荐使用的十个辅助函数
2019/05/10 PHP
javascript css在IE和Firefox中区别分析
2009/02/18 Javascript
DEDECMS如何为文章添加HOT NEW标志图片
2015/08/14 Javascript
jQuery实现多级下拉菜单jDropMenu的方法
2015/08/28 Javascript
js实现iframe框架取值的方法(兼容IE,firefox,chrome等)
2015/11/26 Javascript
JavaScript代码判断点击第几个按钮
2015/12/13 Javascript
JavaScript中的toString()和toLocaleString()方法的区别
2017/02/15 Javascript
Vue 仿百度搜索功能实现代码
2017/02/16 Javascript
jQuery实现div跟随鼠标移动
2020/08/20 jQuery
Angular 4依赖注入学习教程之InjectToken的使用(八)
2017/06/04 Javascript
基于node搭建服务器,写接口,调接口,跨域的实例
2018/05/13 Javascript
详解Vue.directive 自定义指令
2019/03/27 Javascript
layer.prompt输入层的例子
2019/09/24 Javascript
详解element-ui动态限定的日期范围选择器代码片段
2020/07/03 Javascript
详解vue中v-on事件监听指令的基本用法
2020/07/22 Javascript
Python 解析XML文件
2009/04/15 Python
Python中列表、字典、元组数据结构的简单学习笔记
2016/03/20 Python
Python拼接字符串的7种方法总结
2018/11/01 Python
Python使用itchat模块实现群聊转发,自动回复功能示例
2019/08/26 Python
Python通过字典映射函数实现switch
2020/11/06 Python
Python tkinter之Bind(绑定事件)的使用示例
2021/02/05 Python
CSS3模拟动画下拉菜单效果
2017/04/12 HTML / CSS
纯HTML5+CSS3制作生日蛋糕(代码易懂)
2016/11/16 HTML / CSS
新西兰廉价汽车租赁:Snap Rentals
2018/09/14 全球购物
社区学雷锋活动策划方案
2014/01/30 职场文书
集体婚礼策划方案
2014/02/22 职场文书
幼儿园亲子活动总结
2014/04/26 职场文书
语文教育专业求职信
2014/06/28 职场文书
幼儿园老师新年寄语
2015/08/17 职场文书