修改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现实多行信息
Aug 26 Javascript
JQuery循环滚动图片代码
Dec 08 Javascript
js制作的鼠标悬浮时产生的下拉框效果
Oct 27 Javascript
Jquery attr(&quot;checked&quot;) 返回checked或undefined 获取选中失效
Oct 10 Javascript
Kendo Grid editing 自定义验证报错提示的解决方法
Nov 18 Javascript
基于vue实现分页/翻页组件paginator示例
Mar 09 Javascript
vue router下的html5 history在iis服务器上的设置方法
Oct 18 Javascript
原生JavaScript实现remove()和recover()功能示例
Jul 24 Javascript
vue-router 起步步骤详解
Mar 26 Javascript
在vue中使用setInterval的方法示例
Apr 16 Javascript
Vue中的循环及修改差值表达式的方法
Aug 29 Javascript
简单了解JavaScript sort方法
Nov 25 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
简单采集了yahoo的一些数据
2007/02/14 PHP
php获取mysql版本的几种方法小结
2008/03/25 PHP
php 全局变量范围分析
2009/08/07 PHP
PHP实现移除数组中为空或为某值元素的方法
2017/01/07 PHP
js下通过prototype扩展实现indexOf的代码
2010/12/08 Javascript
javascript 文本框水印/占位符(watermark/placeholder)实现方法
2012/01/15 Javascript
select标签模拟/美化方法采用JS外挂式插件
2013/04/01 Javascript
JavaScript输出当前时间Unix时间戳的方法
2015/04/06 Javascript
js获取当前日期时间及其它操作汇总
2015/04/17 Javascript
浅谈javascript的Touch事件
2015/09/27 Javascript
js检查是否关闭浏览器的方法
2016/08/02 Javascript
微信小程序 Storage API实例详解
2016/10/02 Javascript
javascript判断回文数详解及实现代码
2017/02/03 Javascript
源码分析Vue.js的监听实现教程
2017/04/23 Javascript
VUE实现表单元素双向绑定(总结)
2017/08/08 Javascript
微信小程序tabBar底部导航中文注解api详解
2017/08/16 Javascript
Angular6 正则表达式允许输入部分中文字符
2018/09/10 Javascript
微信小程序实现时间预约功能
2018/11/27 Javascript
如何获取vue单文件自身源码路径
2019/05/06 Javascript
js校验开始时间和结束时间
2020/05/26 Javascript
Openlayers实现图形绘制
2020/09/28 Javascript
react使用antd表单赋值,用于修改弹框的操作
2020/10/29 Javascript
vue 在服务器端直接修改请求的接口地址
2020/12/19 Vue.js
朴素贝叶斯分类算法原理与Python实现与使用方法案例
2018/06/26 Python
python set内置函数的具体使用
2019/07/02 Python
python运用sklearn实现KNN分类算法
2019/10/16 Python
解决python 执行sql语句时所传参数含有单引号的问题
2020/06/06 Python
解决Keras使用GPU资源耗尽的问题
2020/06/22 Python
饿了么订餐官网:外卖、网上订餐
2019/06/28 全球购物
Vrbo英国:预订度假屋
2020/08/19 全球购物
初中班主任评语大全
2014/04/24 职场文书
质量月活动总结
2014/08/26 职场文书
乡镇四风对照检查材料
2014/08/31 职场文书
运动会广播稿100字
2014/09/14 职场文书
起诉意见书范文
2015/05/19 职场文书
Java反应式框架Reactor中的Mono和Flux
2021/07/25 Java/Android