欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JQuery擴展對象方法操作示例

 更新時間:2018年08月21日 10:38:12   作者:咕咚蘿卜  
這篇文章主要介紹了JQuery擴展對象方法操作,結(jié)合實例形式簡單分析了jQuery使用$.fn.extend方法擴展對象方法的相關(guān)操作技巧,需要的朋友可以參考下

本文實例講述了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è)計有所幫助。

相關(guān)文章

最新評論