基本的なjQueryツールチッププラグインを作成する方法

公開: 2016-10-22

最近のWeb開発と関係がある場合は、 jQueryまたはjQueryプラグインのいずれかを紹介する必要はほとんどありません。実際、jQueryプラグインは非常に人気があり、インターネットの70％近くが何らかの方法でプラグインを利用しています。

初心者でもプロでも、Web開発の専門知識のレベルに関係なく、jQueryは間違いなく学習して習得するもののリストに含まれている必要があります。このことを念頭に置いて、このチュートリアルでは、基本的なjQueryツールチッププラグインを作成する方法を説明します。

だから、これは私たちが作成するものです：

jQueryツールチッププレビュースクリーンショット学習者

もう時間を無駄にすることなく、素晴らしいコーディングで手を汚して、jQueryプラグインの作成をマスターしましょう。

ファイル構造

jqueryToolTip.css –ツールチップのスタイルシート。
jqueryToolTip.js –実際のjQueryプラグインファイル。

プラグインが十分な柔軟性を備えていることを確認して、さまざまなユーザーやデバイス構成に手間をかけずにサービスを提供できるようにする必要があります。先に進む前に、これを達成するのに役立ついくつかのルールまたは概念を見ていきます。

jQueryプラグインを作成するためのルール

IDを一意に保つ–プラグイン要素のスタイル設定時に現在のページスタイルを上書きしないように、一意のidとclass名を設定することが非常に重要です。
行コメントを残す–行コメントを残すことは常に良い習慣です。これは、jQueryプラグインを扱う場合に不可欠です。ユーザーやプログラマーは、他の誰かが書いたコードの各行が何を意味するのかを理解するのが難しい場合があるため、amdがコメントなしでコードを解読しようとすると時間がかかる場合があります。
ソースコードの縮小– Webサイトを作成するために必要なのはプラグインだけではないため、エンドユーザーが使用するスペースと帯域幅をできるだけ少なくすることが重要です。

厳密なルールはありませんが、コーディング中は、コードを機能させる前に、個人的に設計部分を担当します。このチュートリアルでも同じモデルに従います。実際のjQueryツールチッププラグインのコードを作成する前に、まず必要なHTMLとCSSを作成します。

サンプルの.htmlファイルを作成し、それに次のコードを追加します。

 <div id = "jqueryToolTip_wrapper">
    <spanclass = "jqueryToolTip_text">ツールチップテキストはここに表示されます</ span>
    <span class = "jqueryToolTip_arrow"> </ span>
</ div> <！-jqueryToolTipを終了します->

次に、 jqueryToolTip.cssファイルを開き、その中に以下のCSSを貼り付けます。

 #jqueryToolTip_wrapper {
			背景：なし繰り返しスクロール0 0 rgba（0、0、0、0.8）;
			border-radius：4px 4px 4px 4px;
			-webkit-border-radius：4px 4px 4px 4px;
			-moz-border-radius：4px 4px 4px 4px;
			色：#FFFFFF;
			フォントサイズ：12px;
			フォントの太さ：太字;
			行の高さ：通常;
			パディング：5px;
			位置：絶対;
			z-index：999;
			font-family：Arial、 "MS Trebuchet"、sans-serif;
		}
		#jqueryToolTip_wrapper .jqueryToolTip_arrow {
			上：自動;
			表示ブロック;
			幅：0;
			高さ：0;
			border：solid 5px;
			border-color：transparenttransparent rgb（0,0,0）transparent;
			border-color：transparenttransparent rgba（0,0,0,0.8）transparent;
			位置：絶対;
			上：-10px;
			左：10px
		}
		#jqueryToolTip_wrapper .jqueryToolTip_arrow.arrow_down {
			border-color：rgb（0,0,0）transparenttransparent透明;
			border-color：rgba（0,0,0,0.8）transparenttransparent透明;
			top：auto;
			下：-10px;
		}

サンプルの.htmlファイル内に.cssファイルが含まれていることを確認してから、ブラウザーを使用して.htmlファイルを開きます。すべてがうまくいけば、下の画像と非常によく似た上向き矢印の付いた見栄えの良いツールチップを見ることができます。

jQueryツールチップのプレビュースクリーンショット

下矢印付きのツールチップ

同じツールチップに下向き矢印を追加するには、既存のクラス.jqueryToolTip_arrowのスパンにクラス.arrow_downを追加するだけです。

前：

 <span class = "jqueryToolTip_arrow"> </ span>

後：

 <span class = "jqueryToolTip_arrow arrow_down"> </ span>

要件

HTMLとCSSの部分が完了したので、プラグインのコードを実際に作成する前に、要件を理解するのに少し時間がかかる場合があります。

ターゲットとする要素を見つける必要があります（すべてのアンカーリンクにツールチップを表示できるわけではないため）。
ホバー状態の現在のアンカーリンクのX軸とY軸を取得する必要があります。
最後に、ツールチップdivをホバー状態の現在のアンカーリンクに再配置する必要があります。

これは複雑に見えるかもしれませんが、jQueryフィルターとCSSターゲティング要素により、作業がはるかに簡単になります。

jQueryプラグインの基本

まとめコード：

 （関数（$）{
			$ .fn.jqueryToolTip = function（toolTipOptions）{
			}
			}
		}）（jQuery）;

上記のコードは、プラグインを最初から作成し始めるたびに使用する必要があるものです。ここで、 jqueryToolTipはプラグイン名であり、任意の名前に置き換えることができます。同じ名前の2つのプラグインは大きな混乱を引き起こす可能性があるため、一意に保つようにしてください。

デフォルトの設定：

 var toolTipDefaults = {
			位置：「下」
		}、

プラグインによっては、いくつかのデフォルト設定が必要になる場合があります。たとえば、チュートリアルでは、位置は注意が必要なものです（つまり、ツールチップを要素の上に表示するか、要素の下に表示するか）。

デフォルトのオーバーライド：

 toolTipSettings = $ .extend（{}、toolTipDefaults、toolTipOptions）;

エンドユーザーが必要に応じてデフォルト設定を上書きできるようにすることは、常に良い習慣です。この例では、ツールチップをデフォルトで下部に設定しています。これで、エンドユーザーが一番上に表示したい場合、上記のコードは、エンドユーザーが指定したオプションでデフォルト設定を上書きします。

上で説明したことを除けば、他のすべてはプレーンなjQueryコードです。これで、開始できます。 jqueryToolTip.jsファイルを開き、その中に次のコードを配置するだけです。

 （関数（$）{
			$ .fn.jqueryToolTip = function（toolTipOptions）{
				var toolTipDefaults = {
					位置：「下」
				}、
				toolTipSettings = $ .extend（{}、toolTipDefaults、toolTipOptions）;
				var toolTipTemplate = '<div id = "jqueryToolTip_wrapper"> <span class = "jqueryToolTip_text"> </ span> <span class = "jqueryToolTip_arrow"> </ span> </ div> <！-end jqueryToolTip->' ;
				$（ 'body'）。append（toolTipTemplate）;
			}
		}）（jQuery）;

jQueryToolTipプラグインのHTMLマークアップを含むtoolTipTemplateという変数を作成しました。その後、HTMLマークアップをWebページの本文に追加します。

 $（this）.each（function（）{
			$（this）.hover（function（）{
				//リンクにカーソルを合わせた後に発生するアクションのコードを次に示します
			}）;
		}）;

$(this)は、プラグインを開始する要素への参照です。エンドユーザーのカーソルが必要な要素にカーソルを合わせるたびに、ツールチップが表示され、その中のテキストがリンクのタイトルattrに変更されます。

 $（this）.each（function（）{
			//ホバー関数について
			$（this）.hover（function（）{
				var toolTipTitle = $（this）.attr（ "title"）; //現在のリンクタイトルを取得します
				var toTop = $（this）.offset（）。top; //現在のリンクのY軸を取得します
				var toLeft = $（this）.offset（）。left; //現在のリンクのX軸を取得します
				var toolTipHeight = $（ '＃jqueryToolTip_wrapper'）。css（ "height"）; //ツールチップの高さを取得
				var itemHeight = $（this）.css（ "height"）; //リンクの高さを取得

				if（toolTipSettings.position == 'top'）
				{{
					$（ '＃jqueryToolTip_wrapper'）。find（ '。jqueryToolTip_arrow'）。addClass（ 'arrow_down'）;
					var topFinal = parseInt（toTop）-parseInt（toolTipHeight）-10;
				}
				そうしないと
				{{
					var topFinal = parseInt（toTop）+ parseInt（itemHeight）+ 10;
				}

				$（ '。jqueryToolTip_text'）。html（toolTipTitle）; //ツールチップテキストを現在のリンクタイトルに変更します
				$（ '＃jqueryToolTip_wrapper'）。css（ "display"、 "block"）; //ツールチップ表示をブロックに設定
				$（ '＃jqueryToolTip_wrapper'）。css（{//ツールチップの左と上の位置を現在のリンク位置に設定します
					top：topFinal、
					左：toLeft
				}）;
			}、関数（）{
				$（ '＃jqueryToolTip_wrapper'）。css（ "display"、 "none"）; //ホバーが完了した後にツールチップを非表示にする
			}）;
		}）;

上記のコードでは、特定のコードが何をしようとしているのかをよりよく理解できるように、すべての行にコメントを付けています。

すべてを一緒に入れて

（関数（$）{
			$ .fn.jqueryToolTip = function（toolTipOptions）{

				//プラグインのデフォルト設定
				var toolTipDefaults = {
					位置：「下」
				}、

				//デフォルト設定を拡張します
				toolTipSettings = $ .extend（{}、toolTipDefaults、toolTipOptions）;

				//ツールチッププラグインのHTMLマークアップ
				var toolTipTemplate = '<div id = "jqueryToolTip_wrapper"> <span class = "jqueryToolTip_text"> </ span> <span class = "jqueryToolTip_arrow"> </ span> </ div> <！-end jqueryToolTip->' ;

				//マークアップを追加します
				$（ 'body'）。append（toolTipTemplate）;

				$（this）.each（function（）{
					//ホバー関数について
					$（this）.hover（function（）{
						var toolTipTitle = $（this）.attr（ "title"）; //現在のリンクタイトルを取得します
						var toTop = $（this）.offset（）。top; //現在のリンクのY軸を取得します
						var toLeft = $（this）.offset（）。left; //現在のリンクのX軸を取得します
						var toolTipHeight = $（ '＃jqueryToolTip_wrapper'）。css（ "height"）; //ツールチップの高さを取得
						var itemHeight = $（this）.css（ "height"）; //リンクの高さを取得

						if（toolTipSettings.position == 'top'）
						{{
							$（ '＃jqueryToolTip_wrapper'）。find（ '。jqueryToolTip_arrow'）。addClass（ 'arrow_down'）;
							var topFinal = parseInt（toTop）-parseInt（toolTipHeight）-10;
						}
						そうしないと
						{{
							var topFinal = parseInt（toTop）+ parseInt（itemHeight）+ 10;
							$（ '＃jqueryToolTip_wrapper'）。find（ '。jqueryToolTip_arrow'）。removeClass（ 'arrow_down'）;
						}

						$（ '。jqueryToolTip_text'）。html（toolTipTitle）; //ツールチップテキストを現在のリンクタイトルに変更します
						$（ '＃jqueryToolTip_wrapper'）。css（ "display"、 "block"）; //ツールチップ表示をブロックに設定
						$（ '＃jqueryToolTip_wrapper'）。css（{//ツールチップの左と上の位置を現在のリンク位置に設定します
							top：topFinal、
							左：toLeft
						}）;
					}、関数（）{
						$（ '＃jqueryToolTip_wrapper'）。css（ "display"、 "none"）; //ホバーが完了した後にツールチップを非表示にする
					}）;
				}）;
		}
		}）（jQuery）;

プラグインを呼び出す方法

jqueryToolTipプラグインの呼び出しは、他のjQueryプラグインと同じくらい簡単です。

JSファイルを含める：

[html type =” text / javascript” language =” <script”]

<p>スタイルシートを含める：</ p>

 <link rel = "stylesheet" href = "../ Documents / Unzipped / jqueryToolTipPluginTutorial / jqueryToolTipPluginTutorial / jqueryToolTip.css" />

title属性でアンカーリンクを作成します。

 <ahref="#"title="ツールチップデモ">ツールチップデモ</a>

プラグインの呼び出し（基本）：

 <script type = "text / javascript">
    $（function（）{
        $（ 'a'）。jqueryToolTip（）;
    }）
</ script>

プラグインの呼び出し（オプションの受け渡し）：

 <script type = "text / javascript">
    $（function（）{
        $（ 'a'）。jqueryToolTip（{
            位置：「上」
        }）;
    }）
</ script>

終了した！

jQueryツールチッププラグインチュートリアルのプレビュースクリーンショット

ライブデモダウンロードソースコード