jquery.boxy插件的iframe扩展代码_jquery

复制代码 代码如下:

/*
<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

时间: 2024-09-20 04:03:28

jquery.boxy插件的iframe扩展代码_jquery的相关文章

JQuery boxy插件在IE中边角图片不显示问题的解决_jquery

JQuery boxy插件很好用,但也会出现一些问题,比如弹出框的边角在IE中不能显示.本博文将来解决这个问题.将boxy插件引用到项目中后会有一个boxy.css文件和jquery.boxy.js文件.在boxy.css文件中有给弹出框设置四个角图片的样式,如下图: 不做任何修改在Chrome浏览器下没有问题,如下: 在网上查了一些资料,说将css文件中的图片路径给位全路径可以解决问题,如下: 发现这样修改后并没有作用,运行后效果仍然如下: 有效的解决方法 将上面css截图的下半部分注释掉,如

JQuery boxy插件在IE中边角图片不显示问题的解决

  这篇文章主要介绍了JQuery boxy插件在IE中边角图片不显示问题的解决方法,十分的简单实用,有需要的小伙伴可以参考下. JQuery boxy插件很好用,但也会出现一些问题,比如弹出框的边角在IE中不能显示.本博文将来解决这个问题.将boxy插件引用到项目中后会有一个boxy.css文件和jquery.boxy.js文件.在boxy.css文件中有给弹出框设置四个角图片的样式,如下图: 不做任何修改在Chrome浏览器下没有问题,如下: 在网上查了一些资料,说将css文件中的图片路径给

AspNet中使用JQuery boxy插件的确认框_jquery

JQuery有不少弹出框的插件,boxy应该算的上是功能和效果都还不错的一款了.先来看一张效果图吧. 在Web开发中经常会使用到Alert和Confirm弹出框,在Asp.Net中的删除按钮上我们常常会加上删除的确认提示,以避免误删除数据,就像上面图片那样.我们一般会写出这样的代码. <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>

AspNet中使用JQuery boxy插件的确认框

  Boxy是一个基于JQuery的弹出层插件,它有相对漂亮的外观,功能齐全,支持iframe,支持模式窗口但相对于同样的弹出层插件BlockUI它明显笨重,但使用不那么方便. 兼容浏览器:IE6+/Firefox/Google Chrome JQuery有不少弹出框的插件,boxy应该算的上是功能和效果都还不错的一款了.先来看一张效果图吧. 在Web开发中经常会使用到Alert和Confirm弹出框,在Asp.Net中的删除按钮上我们常常会加上删除的确认提示,以避免误删除数据,就像上面图片那样

DIY jquery plugin - tabs标签切换实现代码_jquery

Why DIY jquery tab 接触jquery 2,3个月了,一直都未动手写过插件.正好最近比较闲,就打算把一直看不顺眼的项目中现有的tab改造一番(现有的tab未能做成一个控件,copy,past的代码太多). 想着jQuery这么强大的库不可能没有tabs插件吧,赶紧搜了一下,哈,果然!jQuery tabs!心里一阵窃喜,赶紧load下来用用吧.可查看了一下它的用法,才发现不太适用现有的项目耶,我们的tab每一个都对应着一个完整的页面,是用iframe嵌入的.而jQuery tab

利用jQuery实现打字机字幕效果实例代码_jquery

实现效果: 实现原理: 把html里的代码读进来, 然后跳过"<"和">"之间的代码, 顺便保存了内容的格式, 然后一个定时器,逐个输出. 用到的基础知识: jQuery为开发插件提拱了两个方法,分别是:      jQuery.fn.extend(object);     jQuery.extend(object); jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法. jQuery.fn.extend(objec

jQuery封装的屏幕居中提示信息代码_jquery

本文实例讲述了jQuery封装的屏幕居中提示信息代码.分享给大家供大家参考,具体如下: function showLoad(tipInfo, type, autohide) { var pic = ""; switch (type) { case 0: // loading pic = "./Images/loading.gif"; break; case 1: // ok pic = "./Images/right.png"; break; c

基于jquery实现的树形菜单效果代码_jquery

本文实例讲述了基于jquery实现的树形菜单效果代码.分享给大家供大家参考.具体如下: 这是一款基于jquery实现的树形菜单代码,点击菜单项可以向下滑出对应的二级菜单,效果流畅自然. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-tree-style-show-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E

jquery 模式对话框终极版实现代码_jquery

页面滚动时随着滚动条固定在屏幕的中央,模式对话框中的内容为两种,一是iframe引入,一是HTML语句插入.在网站开发中十分常用,使用该插件十分的简单.来看一下运行效果.插件使用 1.首先引入样式文件,详细代码如下所示: <link href="images/blue/css.css" rel="stylesheet" type="text/css" id="showdialogcss" /> 着里面的id一定不要