本文實(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ì)有所幫助。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
