JQuery擴(kuò)展對(duì)象方法操作示例
本文實(shí)例講述了JQuery擴(kuò)展對(duì)象方法操作。分享給大家供大家參考,具體如下:
應(yīng)項(xiàng)目需求,對(duì)JQuery進(jìn)行了一個(gè)擴(kuò)展,需求如下:
項(xiàng)目中需要在瀏覽器右下角提示操作錯(cuò)誤和系統(tǒng)提示內(nèi)容,并有滑動(dòng)移出和關(guān)閉的效果,所以自己寫(xiě)了一個(gè)效果還可以的彈出框來(lái)。就是給JQuery添加了一個(gè)方法ShowMsg。
先上代碼:
$.fn.extend({
ShowMsg: function (width, height, msgTitle_, msgContent_) {
var TopY = 0; //初始化元素距父元素的距離
$("#messageTitle").html(msgTitle_);
$("#messageResDes").html(msgContent_);
$(this).css("width", width + "px").css("height", height + "px"); //設(shè)置消息框的大小
$(this).slideDown(1000); //彈出
$("#messageTool").css("margin-top", -height); //為內(nèi)容部分創(chuàng)建高度 溢出
$("#message_close").click(function () {//當(dāng)點(diǎn)擊關(guān)閉按鈕的時(shí)候
if (TopY == 0) {
$("#message").slideUp(1000); //這里之所以用slideUp是為了兼用Firefox瀏覽器
}
else {
$("#message").animate({ top: TopY + height }, "slow", function () { $("#message").hide(); }); //當(dāng)TopY不等于0時(shí) ie下和Firefox效果一樣
}
return false;
});
$(window).scroll(function () {
$("#message").css("top", $(window).scrollTop() + $(window).height() - $("#message").height()); //當(dāng)滾動(dòng)條滾動(dòng)的時(shí)候始終在屏幕的右下角
TopY = $("#message").offset().top; //當(dāng)滾動(dòng)條滾動(dòng)的時(shí)候隨時(shí)設(shè)置元素距父原素距離
});
setTimeout(function () {
if (TopY == 0) {
$("#message").slideUp(1000); //這里之所以用slideUp是為了兼用Firefox瀏覽器
}
else {
$("#message").animate({ top: TopY + height }, "slow", function () { $("#message").hide(); }); //當(dāng)TopY不等于0時(shí) ie下和Firefox效果一樣
}
return false;
}, 8000); //8s后自動(dòng)滑動(dòng)關(guān)閉
}
})
代碼一目了然,注釋很清楚。下面呢,主要說(shuō)下怎樣對(duì)JQuery進(jìn)行擴(kuò)展吧。
上面的擴(kuò)展我用了 $.fn.extend進(jìn)行了擴(kuò)展,是對(duì)JQuery的原生對(duì)象進(jìn)行了方法的擴(kuò)展,JQuery的擴(kuò)展主要分為對(duì)JQuery本身類進(jìn)行擴(kuò)展(JQuery.extend)和對(duì)對(duì)象的進(jìn)行方法擴(kuò)展($.fn.extend)。下面分作說(shuō)明:
1、用JQuery.extent對(duì)JQuery本身進(jìn)行擴(kuò)展:
JQuery.extend({
showInfor:function(0{
//do something
}
});
怎么用上面這個(gè)呢,看下面:
$.showInfor();//這樣就調(diào)用到了
2、用$.fn.extend進(jìn)行方法擴(kuò)展:
本文開(kāi)始使用例子就是,下面直接看調(diào)用方法:
$("#messageBox").ShowMsg(230,100,"系統(tǒng)提示","提示信息");
說(shuō)明:$.fn.extend是給JQuery的所有對(duì)象進(jìn)行擴(kuò)展方法,即只要JQuery可以定位到的對(duì)象,都可以使用這個(gè)方法。所以只要先定位到改對(duì)象,直接調(diào)用即可。
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery切換特效與技巧總結(jié)》、《jQuery遍歷算法與技巧總結(jié)》、《jQuery常見(jiàn)經(jīng)典特效匯總》、《jQuery動(dòng)畫(huà)與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
- 原生js實(shí)現(xiàn)復(fù)制對(duì)象、擴(kuò)展對(duì)象 類似jquery中的extend()方法
- 淺談jQuery中的$.extend方法來(lái)擴(kuò)展JSON對(duì)象
- 基于jQuery的一個(gè)擴(kuò)展form序列化到j(luò)son對(duì)象
- 模仿JQuery.extend函數(shù)擴(kuò)展自己對(duì)象的js代碼
- 擴(kuò)展jQuery對(duì)象時(shí)如何擴(kuò)展成員變量具體怎么實(shí)現(xiàn)
- JQuery 動(dòng)態(tài)擴(kuò)展對(duì)象之另類視角
- jQuery.extend()、jQuery.fn.extend()擴(kuò)展方法示例詳解
- Jquery 的擴(kuò)展方法總結(jié)
- Jquery中擴(kuò)展方法extend使用技巧
- 修改或擴(kuò)展jQuery原生方法的代碼實(shí)例
- JavaScript自執(zhí)行函數(shù)和jQuery擴(kuò)展方法詳解
相關(guān)文章
jQuery實(shí)現(xiàn)單擊按鈕遮罩彈出對(duì)話框效果(1)
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)單擊按鈕遮罩彈出對(duì)話框,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02
jQueryPad 實(shí)用的jQuery測(cè)試工具(支持IE,chrome,FF)
這個(gè)jQueryPad也是我無(wú)意中在網(wǎng)上看頁(yè)面的時(shí)候看到的,下載下來(lái)試用了下,感覺(jué)很好,這個(gè)軟件是使用WPF開(kāi)發(fā)的(不過(guò)不開(kāi)源,需要安裝.NET Framework 3.5),整體界面很簡(jiǎn)潔。2010-05-05
jquery實(shí)現(xiàn)二級(jí)導(dǎo)航下拉菜單效果
這篇文章主要介紹了jquery實(shí)現(xiàn)二級(jí)導(dǎo)航下拉菜單效果,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-12-12
動(dòng)態(tài)標(biāo)簽 懸停效果 延遲加載示例代碼
懸停效果、延遲加載想必大家都有見(jiàn)到過(guò)吧,在本文將為大家介紹下是如何實(shí)現(xiàn)的,感興趣的朋友不要錯(cuò)過(guò)2013-11-11
無(wú)需 Flash 使用 jQuery 復(fù)制文字到剪貼板
需要做的只是引入其腳本,在HTML標(biāo)簽上賦一個(gè)“data-clipboard-target”屬性然后寫(xiě)一小段JavaScript片段。為了演示假定有一個(gè)貨幣轉(zhuǎn)換應(yīng)用,在一個(gè)文本框中輸入數(shù)值時(shí)同時(shí)將兌換結(jié)果顯示在另一個(gè)文本框中,當(dāng)點(diǎn)擊文本框時(shí),會(huì)觸發(fā)事件將其復(fù)制到剪貼板然后顯示一條消息。2016-04-04
jquery 模擬類搜索框自動(dòng)完成搜索提示功能(改進(jìn))
改進(jìn)版,支持多個(gè)輸入框!前面因?yàn)槎鄠€(gè)輸入框信息不好保存所以只能支持一個(gè),現(xiàn)在用輸入框的alt屬性來(lái)保存修改前的內(nèi)容,所以能支持多個(gè)輸入框了.初步測(cè)試沒(méi)發(fā)現(xiàn)問(wèn)題,歡迎大家一起測(cè)試改進(jìn)!!!2010-05-05
jQuery中innerWidth()方法用法實(shí)例
這篇文章主要介紹了jQuery中innerWidth()方法用法,實(shí)例分析了innerWidth()方法的功能、定義及獲取第一個(gè)匹配元素內(nèi)部區(qū)域?qū)挾鹊氖褂眉记?需要的朋友可以參考下2015-01-01
利用jQuery的deferred對(duì)象實(shí)現(xiàn)異步按順序加載JS文件
如果你現(xiàn)在對(duì)jQuery中的deferred還不了解,jQuery的deferred對(duì)象詳解一文接下來(lái)介紹deferred對(duì)象如何實(shí)現(xiàn)異步順序加載JS文件,感興趣的你可以參考下哈2013-03-03

