修改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中DOM事件冒泡实例分析
Jun 13 Javascript
jquery.cookie.js的介绍与使用方法
Feb 09 Javascript
浅谈javascript的url参数parse和build函数
Mar 04 Javascript
Node.js发送HTTP客户端请求并显示响应结果的方法示例
Apr 12 Javascript
深入理解Javascript中的作用域链和闭包
Apr 25 Javascript
微信小程序实现给循环列表添加点击样式实例
Apr 26 Javascript
微信小程序实现的涂鸦功能示例【附源码下载】
Jan 12 Javascript
一种angular的方法级的缓存注解(装饰器)
Mar 13 Javascript
JavaScript使用享元模式实现文件上传优化操作示例
Aug 07 Javascript
微信小程序如何获取群聊的openGid以及名称详解
Jul 17 Javascript
JS代码实现页面切换效果
Jan 10 Javascript
uniapp开发小程序的经验总结
Apr 08 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
超神学院:鹤熙已踏入神圣领域,实力不比凯莎弱
2020/03/02 国漫
初级的用php写的采集程序
2007/03/16 PHP
自动生成文章摘要的代码[PHP 版本]
2007/03/20 PHP
php输出1000以内质数(素数)示例
2014/02/16 PHP
php实时倒计时功能实现方法详解
2017/02/27 PHP
PHP编程快速实现数组去重的方法详解
2017/07/22 PHP
理解Javascript_09_Function与Object
2010/10/16 Javascript
jQuery版仿Path菜单效果
2011/12/15 Javascript
animate动画示例(泪奔的小孩)及stop和delay的使用
2013/05/06 Javascript
js实现单行文本向上滚动效果实例代码
2013/11/28 Javascript
JS清空多文本框、文本域示例代码
2014/02/24 Javascript
JavaScript实现重置表单(reset)的方法
2015/04/02 Javascript
javascript自定义in_array()函数实现方法
2015/08/03 Javascript
JavaScript 模块的循环加载实现方法
2015/12/13 Javascript
Bootstrap编写一个兼容主流浏览器的受众门户式风格页面
2016/07/01 Javascript
简单分析javascript中的函数
2016/09/10 Javascript
用js实现简单算法的实例代码
2016/09/24 Javascript
vue2.0结合Element-ui实战案例
2019/03/06 Javascript
在vue中使用echars实现上浮与下钻效果
2019/11/08 Javascript
JavaScript实现省市区三级联动
2020/02/13 Javascript
《javascript设计模式》学习笔记四:Javascript面向对象程序设计链式调用实例分析
2020/04/07 Javascript
vue界面发送表情的实现代码
2020/09/11 Javascript
浅谈Vue使用Cascader级联选择器数据回显中的坑
2020/10/31 Javascript
Python lambda函数基本用法实例分析
2018/03/16 Python
pandas多级分组实现排序的方法
2018/04/20 Python
Pandas:DataFrame对象的基础操作方法
2018/06/07 Python
Python3爬虫之urllib携带cookie爬取网页的方法
2018/12/28 Python
详解Python传入参数的几种方法
2019/05/16 Python
Python中请不要再用re.compile了
2019/06/30 Python
python根据用户需求输入想爬取的内容及页数爬取图片方法详解
2020/08/03 Python
新加坡网上花店:FlowerAdvisor新加坡
2018/10/05 全球购物
软件测试常见笔试题
2012/02/04 面试题
女大学生个人求职信
2013/12/09 职场文书
大学信息公开实施方案
2014/03/09 职场文书
赞美老师的演讲稿
2014/05/22 职场文书
掌握一个领域知识,高效学习必备方法
2019/08/08 职场文书