JQuery拡張対象方法の操作例

3612 ワード

本論文の実例は、JQuery拡張対象方法の動作について述べる。皆さんに参考にしてあげます。具体的には以下の通りです。
プロジェクトの需要に応じて、JQueryを拡張しました。需要は以下の通りです。
プロジェクトでは、ブラウザの右下に操作エラーとシステムヒントを表示し、スライド移動とオフの効果があるので、自分で効果を書いてもいいです。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"); //        
      $(this).slideDown(1000); //  
      $("#messageTool").css("margin-top", -height); //            
      $("#message_close").click(function () {//          
        if (TopY == 0) {
          $("#message").slideUp(1000); //      slideUp     Firefox   
        }
        else {
          $("#message").animate({ top: TopY + height }, "slow", function () { $("#message").hide(); }); // TopY   0  ie  Firefox    
        }
        return false;
      });
      $(window).scroll(function () {
        $("#message").css("top", $(window).scrollTop() + $(window).height() - $("#message").height()); //                  
        TopY = $("#message").offset().top; //                     
      });
      setTimeout(function () {
        if (TopY == 0) {
          $("#message").slideUp(1000); //      slideUp     Firefox   
        }
        else {
          $("#message").animate({ top: TopY + height }, "slow", function () { $("#message").hide(); }); // TopY   0  ie  Firefox    
        }
        return false;
      }, 8000); //8s       
    }
})

コードは一目瞭然で、コメントはよく分かります。以下は、JQueryをどのように拡張しますか?
上の拡張は$.fn.extendを使って拡張しました。JQueryの元のオブジェクトに対して方法の拡張を行ったのです。JQueryの拡張は主にJQuery自身の種類を拡張することと対象の進行方法を拡張することに分けられます。以下で説明します。
1、JQuery自体をJQuery.extendで拡張する:

JQuery.extend({
  showInfor:function(0{
      //do something
  }
});

上のこれはどう使いますか?下を見てください。

$.showInfor();//       

2、$.fn.extendで方法拡張を行う:
本論文の使用例は、以下の直接的な呼び出し方法を参照してください。

$("#messageBox").ShowMsg(230,100,"    ","    ");

説明:JQuery.extentはJQueryのすべてのオブジェクトを拡張する方法であり、JQueryが特定できるオブジェクトであれば、この方法が使えます。ですから、まず変更対象に位置してから、直接呼び出してもいいです。
jQuery関連の内容について興味がある読者は、当駅のテーマを調べてもいいです。「jQuery拡張テクニックのまとめ」、「jQuery常用プラグインと使い方のまとめ」、「jQuery切り替え特効とテクニックまとめ」、「jQueryはアルゴリズムとテクニックを遍歴して総括します。」、「jQueryよくある経典効果のまとめ」、「jQueryアニメーションと特効用法のまとめ」および「jqueryセレクタの使い方のまとめ
ここで述べたように、皆さんのjQueryプログラムの設計に役に立ちます。