jquery.boxy彈出框(后隔N秒后自動隱藏/自動跳轉(zhuǎn))
更新時間:2013年01月15日 15:46:19 作者:
對于 Boxy彈出框的使用之前寫過一些文章(查看jquery.boxy基礎(chǔ)),今天主要是在解決一個需要之后,覺得值得把它記錄下來,所以就再寫一篇,主要功能是,在彈出對話框后,隔N秒后自動隱藏,還有就是自動跳轉(zhuǎn)
對于 Boxy彈出框的使用之前寫過一些文章(查看jquery.boxy基礎(chǔ)),今天主要是在解決一個需要之后,覺得值得把它記錄下來,所以就再寫一篇,主要功能是,在彈出對話框后,隔N秒后自動隱藏,還有就是自動跳轉(zhuǎn)!
效果如圖:
而所封裝的代碼如下:
// boxy對話框擴(kuò)展
var Boxy_Extensions = {
options: {
title: '藝吧提示',
closeText: 'x'
},
//彈出后N秒后隱藏
alertDelayFun: function (info, timer, options) {
options = $.extend(this.options, options || {});
new Boxy("<div style='padding-left:50px;padding-right:50px;text-align:center;font-size:14px;'>" + info + "</div>", $.extend({ behaviours: function () {
setTimeout('$(".boxy-wrapper").hide();', timer);
}
}, options));
},
//彈出后,自動跳轉(zhuǎn)
alertHrefFun: function (info, href, options) {
options = $.extend(this.options, options || {});
new Boxy("<div style='padding-left:50px;padding-right:50px;text-align:center;font-size:14px;'>" + info + "</div>", $.extend({ behaviours: function () {
location.href = href;
}
}, options));
}
}
因為options屬性是公用的,所以把它提了出現(xiàn),而每個方法有自己的options,如果在調(diào)用自己方法時傳遞了options,通過$.extend會把它
與類中options屬性的內(nèi)容進(jìn)行合并(覆蓋相關(guān)鍵的值,擴(kuò)展新的鍵值),看來寫JS也應(yīng)該遵循面向?qū)ο蟮脑瓌t呀,呵呵!
效果如圖:

而所封裝的代碼如下:
復(fù)制代碼 代碼如下:
// boxy對話框擴(kuò)展
var Boxy_Extensions = {
options: {
title: '藝吧提示',
closeText: 'x'
},
//彈出后N秒后隱藏
alertDelayFun: function (info, timer, options) {
options = $.extend(this.options, options || {});
new Boxy("<div style='padding-left:50px;padding-right:50px;text-align:center;font-size:14px;'>" + info + "</div>", $.extend({ behaviours: function () {
setTimeout('$(".boxy-wrapper").hide();', timer);
}
}, options));
},
//彈出后,自動跳轉(zhuǎn)
alertHrefFun: function (info, href, options) {
options = $.extend(this.options, options || {});
new Boxy("<div style='padding-left:50px;padding-right:50px;text-align:center;font-size:14px;'>" + info + "</div>", $.extend({ behaviours: function () {
location.href = href;
}
}, options));
}
}
因為options屬性是公用的,所以把它提了出現(xiàn),而每個方法有自己的options,如果在調(diào)用自己方法時傳遞了options,通過$.extend會把它
與類中options屬性的內(nèi)容進(jìn)行合并(覆蓋相關(guān)鍵的值,擴(kuò)展新的鍵值),看來寫JS也應(yīng)該遵循面向?qū)ο蟮脑瓌t呀,呵呵!
相關(guān)文章
jquery基于layui實(shí)現(xiàn)二級聯(lián)動下拉選擇(省份城市選擇)
本篇文章主要介紹了jquery基于layui實(shí)現(xiàn)二級聯(lián)動下拉選擇(省份城市選擇),具有一定的實(shí)用價值,需要的朋友可以參考下2017-06-06jquery+php后臺實(shí)現(xiàn)省市區(qū)聯(lián)動功能示例
這篇文章主要介紹了jquery+php后臺實(shí)現(xiàn)省市區(qū)聯(lián)動功能,涉及jQuery事件響應(yīng)及頁面元素屬性動態(tài)變換,以及ajax后臺動態(tài)交互相關(guān)操作技巧,需要的朋友可以參考下2019-05-05jQuery插件HighCharts繪制簡單2D折線圖效果示例【附demo源碼】
這篇文章主要介紹了jQuery插件HighCharts繪制簡單2D折線圖效果,結(jié)合完整實(shí)例形式分析了jQuery使用HighCharts插件繪制折線圖的實(shí)現(xiàn)步驟與相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03jQuery模擬360瀏覽器切屏效果幻燈片(附demo源碼下載)
這篇文章主要介紹了jQuery模擬360瀏覽器切屏效果幻燈片,涉及jQuery響應(yīng)鼠標(biāo)事件動態(tài)操作頁面元素樣式的相關(guān)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-01-01基于jQuery實(shí)現(xiàn)Tabs選項卡自定義插件
這篇文章主要為大家詳細(xì)介紹了基于jQuery實(shí)現(xiàn)Tabs選項卡自定義插件,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-11-11jQuery md5加密插件jQuery.md5.js用法示例
這篇文章主要介紹了jQuery md5加密插件jQuery.md5.js用法,結(jié)合實(shí)例形式簡單分析了jQuery md5加密插件jquery.md5.js的簡單使用技巧,需要的朋友可以參考下2018-08-08