JQuery拡張対象方法の操作例
本論文の実例は、JQuery拡張対象方法の動作について述べる。皆さんに参考にしてあげます。具体的には以下の通りです。
プロジェクトの需要に応じて、JQueryを拡張しました。需要は以下の通りです。
プロジェクトでは、ブラウザの右下に操作エラーとシステムヒントを表示し、スライド移動とオフの効果があるので、自分で効果を書いてもいいです。JQueryに方法ShowMsgを追加しました。
先にコードを付けます:
上の拡張は
1、JQuery自体を
本論文の使用例は、以下の直接的な呼び出し方法を参照してください。
jQuery関連の内容について興味がある読者は、当駅のテーマを調べてもいいです。「jQuery拡張テクニックのまとめ」、「jQuery常用プラグインと使い方のまとめ」、「jQuery切り替え特効とテクニックまとめ」、「jQueryはアルゴリズムとテクニックを遍歴して総括します。」、「jQueryよくある経典効果のまとめ」、「jQueryアニメーションと特効用法のまとめ」および「jqueryセレクタの使い方のまとめ」
ここで述べたように、皆さんの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プログラムの設計に役に立ちます。