修改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 新节点的创建 删除 的步骤
Jul 04 Javascript
js设置cookie过期当前时间减去一秒相当于立即过期
Sep 04 Javascript
node.js中的http.response.removeHeader方法使用说明
Dec 14 Javascript
JS获得选取checkbox整行数据的方法
Jan 28 Javascript
json的使用小结
Jun 08 Javascript
AngularJS中$http服务常用的应用及参数
Aug 22 Javascript
Bootstrap 手风琴菜单的实现代码
Jan 20 Javascript
整理关于Bootstrap列表组的慕课笔记
Mar 29 Javascript
理解 Node.js 事件驱动机制的原理
Aug 16 Javascript
Vue 动态组件components和v-once指令的实现
Aug 30 Javascript
layui使用button按钮 点击出现弹层 弹层中加载表单的实例
Sep 04 Javascript
vue项目中监听手机物理返回键的实现
Jan 18 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 函数中使用static的说明
2012/06/01 PHP
Could not load type System.ServiceModel.Activation.HttpModule解决办法
2012/12/29 PHP
php的POSIX 函数以及进程测试的深入分析
2013/06/03 PHP
jquery+php+ajax显示上传进度的多图片上传并生成缩略图代码
2014/10/15 PHP
php去除字符串中空字符的常用方法小结
2015/03/17 PHP
Yii2创建表单(ActiveForm)方法详解
2016/07/23 PHP
摘自启点的main.js
2008/04/20 Javascript
javascript向flash swf文件传递参数值注意细节
2012/12/11 Javascript
js获取GridView中行数据的两种方法 分享
2013/07/13 Javascript
HTTP 304错误的详细讲解
2013/11/13 Javascript
JS实现转动随机数抽奖特效代码
2020/04/16 Javascript
css如何让浮动元素水平居中
2015/08/07 Javascript
JS添加删除DIV的简单实例
2016/07/08 Javascript
浅谈JavaScript中面向对象的的深拷贝和浅拷贝
2016/08/01 Javascript
vue开发心得和技巧分享
2016/10/27 Javascript
深入理解Node.js中通用基础设计模式
2017/09/19 Javascript
实用的 vue tags 创建缓存导航的过程实现
2020/12/03 Vue.js
python中的内置函数getattr()介绍及示例
2014/07/20 Python
状态机的概念和在Python下使用状态机的教程
2015/04/11 Python
Python面向对象编程基础解析(二)
2017/10/26 Python
python实现画圆功能
2018/01/25 Python
Python爬虫工程师面试问题总结
2018/03/22 Python
PyQt5每天必学之布局管理
2018/04/19 Python
解决python 3 urllib 没有 urlencode 属性的问题
2019/08/22 Python
python3 selenium自动化 frame表单嵌套的切换方法
2019/08/23 Python
Python3连接Mysql8.0遇到的问题及处理步骤
2020/02/17 Python
Omio美国:全欧洲低价大巴、火车和航班搜索和比价
2017/11/08 全球购物
Sneaker Studio波兰:购买运动鞋
2018/04/28 全球购物
美国球鞋寄卖网站:Stadium Goods
2018/05/09 全球购物
小学教师办公室制度
2014/02/03 职场文书
婚前协议书范本
2014/04/15 职场文书
2014党委书记四风问题对照检查材料思想汇报
2014/09/22 职场文书
2014年化验员工作总结
2014/11/18 职场文书
会计工作态度自我评价
2015/03/06 职场文书
2015年世界无烟日活动方案
2015/05/04 职场文书
辅导员学期工作总结
2015/08/14 职场文书