jquery プラグインをカスタマイズする [マウスをホバーすると説明ラベルが表示されます]_jquery

私は最近 jquery を学習していますが、数日間それを観察した後、スキルを練習するために小さなものを作成することにしました。エントリーレベルのものをチェックしてください。

まず、この小さなものの機能を以下で見てみましょう。モデルがあると便利です。

機能: HTML 要素の上にマウスを置くと、ヘルプの説明ラベルが表示されます。

レンダリング:

オリジナル:

マウスが「Click Me 1」上にある場合:

マウスが「テキストボックス」上にある場合:

レンダリングを確認した後、興味があればコードを詳しく見てください。

html コード:

コードをコピー コードは次のとおりです:

type=" text/css">
a:hover
{
text-decoration:underline;
頭>
sクリックしてください
;





html コードの説明:
下線付きのものは、jquery プラグインを呼び出すときに渡されるパラメーターです。
赤い部分は一致に注意する必要がある場所です
パラメータの説明:
shelpText: "default help text", //ラベルを表示したいドキュメント

bgcolor: " red", //ラベルの背景色
ftcolor: " yellow", // ラベルの前景色
width: "200px", // ラベルの幅
tempLeft: "15", // ラベルの相対値Mouse 位置の左の値
tempTop: "15" //マウスの位置を基準としたラベルの上の値
jquery code[a1.query]




コードをコピー

コードは次のとおりです:

/*
* HelpTextFn
* 著作権 (c) 2011 yongbin zhang http://www.cnblogs.com/2814/
* 日付: 2011-6-27
* HTML 要素の上にマウスを置くと、ヘルプの説明ラベルが表示されます
*/
//次のコードは変更できません
// コメントはコードの説明です
/*
jquery プラグインを自分で定義したい場合、一般的なフレームワークは次のとおりです:
(function ($) {
$.fn.HelpTextFn = function (options) { //変更する必要があるのは HelpTextFn 、これは jquery 関数の名前です [HTML でこの関数を呼び出す場合は、この名前を使用する必要があります]、
//その他の変更は必要ありません。
vardefaults = { // vardefaults。 {これは関数のパラメータのデフォルト値です}
helpText: "default help text", //ラベルのドキュメントを表示したい
bgcolor: "red", //ラベルの背景色
ftcolor: " yellow", // ラベルの前景色
width: "200px", // ラベルの幅
tempLeft: "15", // マウス位置を基準としたラベルの左の値
tempTop : "15" //マウスの位置を基準としたラベルの最上位の値
}
var options = $.extend(defaults, options) //この文は無効です、これを呼び出すと言う意味ですHTML のプラグイン。渡されたパラメータの値がない場合は、
//defalut で定義されたパラメータを使用します。それ以外の場合は、渡されたパラメータの値を使用します。[ 注 ]:以下のパラメータを使用したい場合は、
// 次のような [options.parameter name] を使用する必要があります。 options.helpText
$(this).mousemove(function (e) { // この Mousemove イベントを追加します。つまり、どの HTML 要素がプラグインを呼び出すのかを示します。次に、それに Mousemove イベントを追加します。
});
$(this).mouseleave(function () { //この Mouseleave イベントを追加します。どの HTML 要素がプラグインを呼び出すかに、mouseleave イベントを追加します。
})(jQuery); //この文は修正されています
*/
(function ($) {
$.fn.HelpTextFn = function (オプション) {//
var defaults = {
helpText: "デフォルトのヘルプ テキスト",
bgcolor: "red" 、
ftcolor: " yellow"、
width: "200px"、
tempLeft: "15"、
tempTop: "15"
}
var options = $.extend(デフォルト、オプション);
var linkDivId = $(this).attr("id");
$(this).mousemove(function (e) {
if ($ ("#linkDiv" )) {
$("#linkDiv" linkDivId).remove();
}
var xx = e.originalEvent.x || e.originalEvent.layerX ||
var yy = e.originalEvent.y || e.originalEvent.layerY || 0;
var left = xx parseInt(options.tempLeft);
var top = yy parseInt(options.tempTop) ; "#" linkDivId).after("

" options.helpText "

");
$ ("#linkDiv" linkDivId ).show();
});
$(this).mouseleave(function () {
$("#linkDiv" linkDivId).remove();
}); >};
})(jQuery);