修改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 相关文章推荐
jQuery+CSS实现菜单滑动伸展收缩(仿淘宝)
Mar 22 Javascript
jQuery 网易相册鼠标移动显示隐藏效果实现代码
Mar 31 Javascript
js计算精度问题小结
Apr 22 Javascript
jquery图片轮播特效代码分享
Apr 20 Javascript
bootstrap paginator分页前后台用法示例
Jun 17 Javascript
Angular自定义组件实现数据双向数据绑定的实例
Dec 11 Javascript
解决angularjs WdatePicker ng-model的问题
Sep 13 Javascript
vue项目刷新当前页面的三种方法
Dec 04 Javascript
Vue Echarts实现可视化世界地图代码实例
May 07 Javascript
浅谈VUE防抖与节流的最佳解决方案(函数式组件)
May 22 Javascript
JS实现压缩上传图片base64长度功能
Dec 03 Javascript
vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决
Sep 28 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
使用Smarty 获取当前日期时间和格式化日期时间的方法详解
2013/06/18 PHP
phpQuery占用内存过多的处理方法
2013/11/13 PHP
使用PHP备份MySQL和网站发送到邮箱实例代码
2013/11/28 PHP
PHP防止注入攻击实例分析
2014/11/03 PHP
PHP遍历数组的方法汇总
2015/04/30 PHP
PHP简单实现合并2个数字键数组值的方法
2017/05/30 PHP
详解PHP多个进程配合redis的有序集合实现大文件去重
2019/03/06 PHP
JavaScript 精粹读书笔记(1,2)
2010/02/07 Javascript
js定时器的使用(实例讲解)
2014/01/06 Javascript
jquery.idTabs 选项卡使用示例代码
2014/09/03 Javascript
js获取及修改网页背景色和字体色的方法
2015/12/29 Javascript
etmvc+jQuery EasyUI+combobox多值操作实现角色授权实例
2016/11/09 Javascript
js如何获取网页所有图片
2017/05/12 Javascript
浅析Vue实例以及生命周期
2018/08/14 Javascript
vue-router命名路由和编程式路由传参讲解
2019/01/19 Javascript
vue store之状态管理模式的详细介绍
2019/06/13 Javascript
vue自定义正在加载动画的例子
2019/11/14 Javascript
python中os和sys模块的区别与常用方法总结
2017/11/14 Python
Python基于Logistic回归建模计算某银行在降低贷款拖欠率的数据示例
2019/01/23 Python
python基于paramiko将文件上传到服务器代码实现
2019/07/08 Python
使用Python的datetime库处理时间(RPA流程)
2019/11/24 Python
python 二维矩阵转三维矩阵示例
2019/11/30 Python
python随机模块random使用方法详解
2020/02/14 Python
解决Python数据可视化中文部分显示方块问题
2020/05/16 Python
使用phonegap获取设备的一些信息方法
2017/03/31 HTML / CSS
Myprotein法国官网:欧洲第一运动营养品牌
2019/03/26 全球购物
Bose英国官方网站:美国知名音响品牌
2020/01/26 全球购物
荷兰DOD药房中文官网:DeOnlineDrogist
2020/12/27 全球购物
C#中的验证控件有几种
2014/03/08 面试题
教师自荐书
2013/10/08 职场文书
舞蹈教育学专业推荐信
2013/11/27 职场文书
cf收人广告词
2014/03/14 职场文书
教育合作协议范本
2014/10/17 职场文书
男方婚前保证书
2015/02/28 职场文书
党员反邪教心得体会
2016/01/15 职场文书
Spring-cloud Config Server的3种配置方式
2021/09/25 Java/Android