JQuery擴展對象方法操作示例
本文實例講述了JQuery擴展對象方法操作。分享給大家供大家參考,具體如下:
應(yīng)項目需求,對JQuery進(jìn)行了一個擴展,需求如下:
項目中需要在瀏覽器右下角提示操作錯誤和系統(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進(jìn)行擴展吧。
上面的擴展我用了 $.fn.extend
進(jìn)行了擴展,是對JQuery的原生對象進(jìn)行了方法的擴展,JQuery的擴展主要分為對JQuery本身類進(jìn)行擴展(JQuery.extend
)和對對象的進(jìn)行方法擴展($.fn.extend
)。下面分作說明:
1、用JQuery.extent
對JQuery本身進(jìn)行擴展:
JQuery.extend({ showInfor:function(0{ //do something } });
怎么用上面這個呢,看下面:
$.showInfor();//這樣就調(diào)用到了
2、用$.fn.extend
進(jìn)行方法擴展:
本文開始使用例子就是,下面直接看調(diào)用方法:
$("#messageBox").ShowMsg(230,100,"系統(tǒng)提示","提示信息");
說明:$.fn.extend
是給JQuery的所有對象進(jìn)行擴展方法,即只要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)文章
bootstrap table 服務(wù)器端分頁例子分享
這篇文章主要介紹了bootstrap table 服務(wù)器端分頁例子分享,需要的朋友可以參考下2015-02-02基于jquery實現(xiàn)的服務(wù)器驗證控件的啟用和禁用代碼
用戶點擊下一步時,不對Display=none的新增區(qū)域表單進(jìn)行驗證,需要在用戶點擊“取消增加時”,禁用服務(wù)器驗證控件。反之,啟用服務(wù)器驗證控件。2010-04-04一個簡單的jQuery插件ajaxfileupload.js實現(xiàn)ajax上傳文件例子
這篇文章主要介紹了一個簡單的jQuery插件ajaxfileupload.js實現(xiàn)ajax上傳文件例子,需要的朋友可以參考下2014-06-06jquery的ajax異步請求接收返回json數(shù)據(jù)實例
jquery的ajax異步請求接收返回json數(shù)據(jù)方法設(shè)置簡單,一個是服務(wù)器處理程序是返回json數(shù)據(jù),另一種就是ajax發(fā)送設(shè)置的datatype設(shè)置為jsonp格式數(shù)據(jù)或json格式都可以。這篇文章對此進(jìn)行了實例介紹,需要的朋友可以參考下2014-06-06jQuery實現(xiàn)可拖拽3D萬花筒旋轉(zhuǎn)特效
本文主要介紹了使用了CSS3立體效果的強大特效,本特效使用jQuery跟CSS3 transform來實現(xiàn)在用戶鼠標(biāo)按下拖動時,環(huán)形圖片墻可以跟隨鼠標(biāo)進(jìn)行3D旋轉(zhuǎn)動畫。下面跟著小編一起來看下吧2017-01-01使用jquery組件qrcode生成二維碼及應(yīng)用指南
這篇文章主要介紹了使用jquery組件qrcode生成二維碼及應(yīng)用指南,非常全面實用,需要的朋友可以參考下2015-02-02