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