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 相关文章推荐
js正则表达式的使用详解
Jul 09 Javascript
jQuery实用函数用法总结
Aug 29 Javascript
Node.js实现的简易网页抓取功能示例
Dec 05 Javascript
DOM 事件流详解
Jan 20 Javascript
常用的JavaScript WEB操作方法分享
Feb 28 Javascript
jquery使整个div区域可以点击的方法
Jun 24 Javascript
html+js+highcharts绘制圆饼图表的简单实例
Aug 04 Javascript
jQuery Mobile和HTML5开发App推广注册页
Nov 07 Javascript
JavaScript利用Date实现简单的倒计时实例
Jan 12 Javascript
JS实现图片放大缩小的方法
Feb 15 Javascript
vue 组件使用中的一些细节点
Apr 25 Javascript
Vue列表如何实现滚动到指定位置样式改变效果
May 09 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内置函数使用指南
2014/11/27 PHP
PHP将进程作为守护进程的方法
2015/03/19 PHP
PHP的Yii框架的常用日志操作总结
2015/12/08 PHP
PHP 判断字符串是中文还是英文, 或者是中英混合
2021/03/09 PHP
基于jQuery图片平滑连续滚动插件
2009/04/27 Javascript
用JQuery模仿淘宝的图片放大镜显示效果
2011/09/15 Javascript
将nodejs打包工具整合到鼠标右键的方法
2013/05/11 NodeJs
javascript页面动态显示时间变化示例代码
2013/12/18 Javascript
JavaScript不刷新实现浏览器的前进后退功能
2014/11/05 Javascript
node.js中的console.time方法使用说明
2014/12/09 Javascript
javascript随机显示背景图片的方法
2015/06/18 Javascript
轻松实现js弹框显示选项
2016/09/13 Javascript
JS使用贪心算法解决找零问题示例
2017/11/27 Javascript
详解最新vue-cli 2.9.1的webpack存在问题
2017/12/16 Javascript
Bootstrap标签页(Tab)插件切换echarts不显示问题的解决
2018/07/13 Javascript
Vue-Router的使用方法
2018/09/05 Javascript
layui禁用侧边导航栏点击事件的解决方法
2019/09/25 Javascript
jQuery实现全选、反选和不选功能的方法详解
2019/12/04 jQuery
微信小程序跨页面传递data数据方法解析
2019/12/13 Javascript
python实现网页链接提取的方法分享
2014/02/25 Python
python提取内容关键词的方法
2015/03/16 Python
Python中文件操作简明介绍
2015/04/13 Python
python写日志封装类实例
2015/06/28 Python
各个系统下的Python解释器相关安装方法
2015/10/12 Python
python opencv之分水岭算法示例
2018/02/24 Python
numpy 进行数组拼接,分别在行和列上合并的实例
2018/05/08 Python
Python3自带工具2to3.py 转换 Python2.x 代码到Python3的操作
2021/03/03 Python
CSS3线性渐变简单实现以及该属性在浏览器中的不同
2012/12/12 HTML / CSS
纯css3实现的竖形无限级导航
2014/12/10 HTML / CSS
纯CSS3单页切换导航菜单界面设计的简单实现
2016/08/16 HTML / CSS
西班牙网上书店:Casa del Libro
2016/11/01 全球购物
法国最大电子商务平台:Cdiscount
2018/03/13 全球购物
墨尔本复古时尚品牌:Dangerfield
2018/12/12 全球购物
年终工作总结范文2014
2014/11/27 职场文书
Python爬虫实战之爬取携程评论
2021/06/02 Python
MySQL之MyISAM存储引擎的非聚簇索引详解
2022/03/03 MySQL