亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

JQuery擴(kuò)展對(duì)象方法操作示例

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

本文實(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本身類(lèi)進(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)容感興趣的讀者可查看本站專(zhuān)題：《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ì)有所幫助。

相關(guān)文章

最新評(píng)論