修改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小玩意 几个属性相加不能超过一个特定值.
Sep 29 Javascript
使用js实现数据格式化
Dec 03 Javascript
jQuery中:first选择器用法实例
Dec 30 Javascript
基于jQuery实现左右图片轮播(原理通用)
Dec 24 Javascript
jQuery中iframe的操作(点击按钮新增窗口)
Apr 20 Javascript
解析浏览器端的AJAX缓存机制
Jun 21 Javascript
jQuery模拟Marquee实现无缝滚动效果完整实例
Sep 29 Javascript
用jQuery实现优酷首页轮播图
Jan 09 Javascript
JS异步文件上传(兼容IE8+)
Apr 02 Javascript
基于node.js实现微信支付退款功能
Dec 19 Javascript
jquery ui 实现 tab标签功能示例【测试可用】
Jul 25 jQuery
antd日期选择器禁止选择当天之前的时间操作
Oct 29 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函数
2011/05/31 PHP
curl实现站外采集的方法和技巧
2014/01/31 PHP
PHP实现定时执行任务的方法
2014/10/05 PHP
php中使用base HTTP验证的方法
2015/04/20 PHP
Ecshop 后台添加新功能栏目及管理权限设置教程
2017/11/21 PHP
Laravel Eloquent ORM 实现查询表中指定的字段
2019/10/17 PHP
php 多进程编程父进程的阻塞与非阻塞实例分析
2020/02/22 PHP
Avengerls vs Newbee BO3 第一场2.18
2021/03/10 DOTA
实例:尽可能写友好的Javascript代码
2006/10/09 Javascript
jquery实现弹出层遮罩效果的简单实例
2014/03/03 Javascript
Javascript小技巧之生成html元素
2014/05/15 Javascript
Juery解决tablesorter中文排序和字符范围的方法
2015/05/06 Javascript
JS构造函数与原型prototype的区别介绍
2016/07/04 Javascript
Vue.js中extend选项和delimiters选项的比较
2017/07/17 Javascript
详解vue.js数据传递以及数据分发slot
2018/01/20 Javascript
JavaScript使用闭包模仿块级作用域操作示例
2019/01/21 Javascript
解决layui 表单元素radio不显示渲染的问题
2019/09/04 Javascript
Element InfiniteScroll无限滚动的具体使用方法
2020/07/27 Javascript
[02:12]DOTA2英雄基础教程 变体精灵
2013/12/16 DOTA
python使用Tkinter实现在线音乐播放器
2018/01/30 Python
PYTHON绘制雷达图代码实例
2019/10/15 Python
django实现用户注册实例讲解
2019/10/30 Python
python读取csv文件指定行的2种方法详解
2020/02/13 Python
Pandas的数据过滤实现
2021/01/15 Python
基于HTML5陀螺仪实现ofo首页眼睛移动效果的示例
2017/07/31 HTML / CSS
打印机墨盒:123Inkjets
2017/02/16 全球购物
goodhealth官方海外旗舰店:新西兰国民营养师
2017/12/15 全球购物
西班牙拥有最佳品牌的动物商店:Animalear.com
2018/01/05 全球购物
好军嫂事迹材料
2014/01/15 职场文书
群众路线组织生活会发言材料
2014/10/17 职场文书
公务员年度考核登记表个人总结
2015/02/12 职场文书
环卫个人总结
2015/03/03 职场文书
2016年政治理论学习心得体会
2016/01/25 职场文书
Logback 使用TurboFilter实现日志级别等内容的动态修改操作
2021/08/30 Java/Android
Winsows11性能如何? win11性能测评多核竟比Win10差了10%
2021/11/21 数码科技
USB TYPE-C 或将成为所有智能手机充电标准
2022/04/21 数码科技