jquery.boxy插件的iframe擴展代碼
更新時間:2010年07月02日 23:58:48 作者:
jquery.boxy插件的iframe擴展
復(fù)制代碼 代碼如下:
/*
<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();關(guān)閉當(dāng)前窗口
qBox.iFSrc({}); 改變當(dāng)前窗口的屬性及指向 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
您可能感興趣的文章:
- jQuery插件擴展實例【添加回調(diào)函數(shù)】
- jQuery插件擴展extend的簡單實現(xiàn)原理
- jQuery插件擴展測試實例
- jQuery插件formValidator自定義函數(shù)擴展功能實例詳解
- jQuery插件kinMaxShow擴展效果用法實例
- jquery事件機制擴展插件 jquery鼠標(biāo)右鍵事件
- JQuery模板插件 jquery.tmpl 動態(tài)ajax擴展
- boxy基于jquery的彈出層對話框插件擴展應(yīng)用 彈出層選擇器
- jQuery下擴展插件和拓展函數(shù)的寫法(匿名函數(shù)使用的典型例子)
- jQuery autocomplate 自擴展插件、自動完成示例代碼
- 利用jQuery插件擴展識別瀏覽器內(nèi)核與外殼的類型和版本的實現(xiàn)代碼
- jQuery插件擴展操作入門示例
相關(guān)文章
分享33個jQuery與CSS3實現(xiàn)的絢麗鼠標(biāo)懸停效果
今天整理了33個使用jQuery與CSS3實現(xiàn)絢麗的鼠標(biāo)懸停效果,有些是純CSS3的,這些效果你完全可以用在你的網(wǎng)頁上,讓網(wǎng)站獲得更好的體驗2014-12-12使用jQuery判斷Div是否在可視區(qū)域的方法 判斷div是否可見
這篇文章主要介紹了使用jQuery判斷Div是否在可視區(qū)域的方法 判斷div是否可見2016-02-02詳解JavaScript中jQuery和Ajax以及JSONP的聯(lián)合使用
這篇文章主要介紹了詳解JavaScript中jQuery和Ajax以及JSONP的聯(lián)合使用,jQuery庫和Ajax異步結(jié)構(gòu)以及JSON數(shù)據(jù)傳輸也是JS日常編程中最常用到的東西,需要的朋友可以參考下2015-08-08Jquery+CSS 創(chuàng)建流動導(dǎo)航菜單 Fluid Navigation
有時,一個網(wǎng)站的導(dǎo)航菜單文字不能提供足夠的信息,來表達(dá)當(dāng)前菜單按鈕的內(nèi)容,一般的解決辦法是使用提示信息ToolTip,那么本文介紹的流動導(dǎo)航菜單Fluid Navigation也可以解決此問題,同時也為網(wǎng)站設(shè)計的添加了一些時尚而又動感元素。2010-02-02