jquery.boxy插件的iframe扩展代码


Posted in Javascript onJuly 02, 2010
/* 
<a href="a.html" onclick="return $.qbox(this);" > 
<a href="a.html" onclick="return qBox.iFLoad(this);" > 
<a href="a.html" onclick="return qBox.iFrame({src:'b.html'})" > Boxy属性不变 新增 w、h、src 属性 
qBox.Close();关闭当前窗口 
qBox.iFSrc({}); 改变当前窗口的属性及指向 Boxy属性不变 新增 w、h、src 属性 
*/ //Boxy插件的扩展 
jQuery.fn.qbox=function(options){ 
var node = this.get(0).nodeName.toLowerCase(); 
var self=this; 
if (node == 'a') { 
$(this).attr('onclick','').unbind('click').click(function(){return false;}); 
options = $.extend(options||{},{src:this.get(0).getAttribute('href'),beforeUnload:function(){ $(self).unbind('click').click(function(){return $(this).qbox(options);});}}); 
} 
qBox.iFLoad(options); 
return false; 
} 
var qBox=function(){}; 
jQuery.extend(qBox,{ 
aDgs:[], 
iFrame:function(op){ 
op = jQuery.extend({title:'提示',w:320,h:200,src:'about:blank',modal:false,fixed:false,unloadOnHide:true},op),fm=parseInt(Math.random()*(1000*987));// 
var dialog = new Boxy("<b id=\"ld"+fm+"\">正在加载,请稍后....</b><iframe id=\"_"+fm+"\" style=\"width:0;height:0;display:none;padding:0;\" src="+op.src+" frameborder=\"0\" scrolling=\"no\"></iframe>",op); 
jQuery("#_"+fm).load(function(){ 
dialog.resize(op.w,op.h,function(){}); 
jQuery("#ld"+fm).remove(); 
jQuery("#_"+fm).css({'padding':'15px','display':''}); 
}); 
qBox.aDgs.push(dialog); 
return false; 
}, 
Close:function(){ 
qBox.aDgs[qBox.aDgs.length-1].hide(); 
return false 
}, 
iFSrc:function(op){ 
op = jQuery.extend({w:320,h:200,src:'about:blank'},op); 
qBox.aDgs[qBox.aDgs.length-1].getContent().attr("src","about:blank"); 
qBox.aDgs[qBox.aDgs.length-1].setTitle(op.t); 
qBox.aDgs[qBox.aDgs.length-1].tween(op.w,op.h,function(){qBox.aDgs[qBox.aDgs.length-1].getContent().attr("src",op.src).css({width:op.w,height:op.h});}); 
return false; 
}, 
iFLoad:function(options){ 
var sr= jQuery(this).attr("href"); 
var op = jQuery.extend({src:sr},options); 
qBox.iFrame(op); 
return false; 
} 
});

出处 cn795.cnblogs.com
Javascript 相关文章推荐
给artDialog 5.02 增加ajax get功能详细介绍
Nov 13 Javascript
浅析ajax请求json数据并用js解析(示例分析)
Jul 13 Javascript
老生常谈JQuery data方法的使用
Sep 09 Javascript
React创建组件的三种方式及其区别
Jan 12 Javascript
webpack进阶——缓存与独立打包的用法
Aug 02 Javascript
详解如何让InstantClick兼容MathJax、百度统计等
Sep 12 Javascript
vue中动态添加class类名的方法
Sep 05 Javascript
浅谈在不使用ssr的情况下解决Vue单页面SEO问题(2)
Nov 08 Javascript
three.js实现圆柱体
Dec 30 Javascript
express框架中使用jwt实现验证的方法
Aug 25 Javascript
解决layui laydate 时间控件一闪而过的问题
Sep 28 Javascript
js实现右键弹出自定义菜单
Sep 08 Javascript
JQuery AJAX提交中文乱码的解决方案
Jul 02 #Javascript
IE本地存储userdata的一个bug说明
Jul 01 #Javascript
UserData用法总结 lanyu出品
Jul 01 #Javascript
javascript 函数调用的对象和方法
Jul 01 #Javascript
this和执行上下文实现代码
Jul 01 #Javascript
jquery.validate使用攻略 第五步 正则验证
Jul 01 #Javascript
jquery validate使用攻略 第四步
Jul 01 #Javascript
You might like
php基于双向循环队列实现历史记录的前进后退等功能
2015/08/08 PHP
PHP使用第三方即时获取物流动态实例详解
2017/04/27 PHP
php使用redis的几种常见操作方式和用法示例
2020/02/20 PHP
javascript脚本编程解决考试分数统计问题
2008/10/18 Javascript
ExtJS 2.0实用简明教程 之ExtJS版的Hello
2009/04/29 Javascript
动态加载jquery库的方法
2014/02/12 Javascript
学习javascript面向对象 实例讲解面向对象选项卡
2016/01/04 Javascript
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
2016/05/25 Javascript
js获取时间函数及扩展函数的方法
2016/10/30 Javascript
Bootstrap实现的标签页内容切换显示效果示例
2017/05/25 Javascript
VUE axios上传图片到七牛的实例代码
2017/07/28 Javascript
angular实现input输入监听的示例
2018/08/31 Javascript
bootstrap tooltips在 angularJS中的使用方法
2019/04/10 Javascript
JavaScript实现答题评分功能页面
2020/06/24 Javascript
微信小程序调用后台service教程详解
2020/11/06 Javascript
js数组的基本使用总结
2021/01/18 Javascript
[00:56]2014DOTA2国际邀请赛 DK、iG 赛前探访
2014/07/10 DOTA
[08:53]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS 选手采访
2021/03/11 DOTA
使用Python编写一个最基础的代码解释器的要点解析
2016/07/12 Python
python导出chrome书签到markdown文件的实例代码
2017/12/27 Python
使用Eclipse如何开发python脚本
2018/04/11 Python
Python3+django2.0+apache2+ubuntu14部署网站上线的方法
2018/07/07 Python
python文件操作的简单方法总结
2019/11/07 Python
Python实现隐马尔可夫模型的前向后向算法的示例代码
2019/12/31 Python
pytorch: Parameter 的数据结构实例
2019/12/31 Python
完美解决pycharm 不显示代码提示问题
2020/06/02 Python
canvas进阶之如何画出平滑的曲线
2018/10/15 HTML / CSS
美国设计师精美珠宝购物网:Netaya
2016/08/28 全球购物
勤俭节约演讲稿
2014/05/08 职场文书
文化建设工作方案
2014/05/12 职场文书
关于护士节的演讲稿
2014/05/26 职场文书
2014年国庆标语
2014/06/30 职场文书
个人房屋买卖协议书(范本)
2014/10/04 职场文书
股权转让协议范本
2014/12/07 职场文书
2016公司年会主持词
2015/07/01 职场文书
CSS3新特性详解(五):多列columns column-count和flex布局
2021/04/30 HTML / CSS