JavaScript関数を確認する
getAscendingLefts
関数とgetAscendingTops
関数は、4Guysで以前に発表した記事でも使用しました。例えば、以前の記事『親子データを表示するタブ付きインターフェイスの作成』では、次のように説明しました。
詳細情報を含む<div>
の上座標と左座標を求めるには、2つの再帰関数getAscendingTops(element)
とgetAscendingLefts(element)
を使います。これらの関数は、渡された要素に含まれるHTML要素の集合を調べ、それぞれ上オフセットと左オフセットを足し合わせていくものです。この手法の詳細については、『Determining the Location of a Nonpositioned Element』を参照してください。私が提供しているフリーのオープンソース部品、ASP.NETメニューコントロールskmMenuでは、この手法を利用しています。
これらの関数の完全なコードは、ライブデモに含まれています。この記事のダウンロードサンプルにも収録されています。
getAscendingLefts
とgetAscendingTops
の説明はこれで終わりにして、次に最初の2つのJavaScript
関数について説明します。showHelpFloatWindow
関数では、渡されたwindowID
要素をまず参照して、CSS設定を更新します。getAscendingLefts
関数とgetAscendingTops
関数を使って上端と左端の絶対ピクセル位置を決定し、状況依存領域の左上隅の座標、縦と横の間隔の広さ、ウィンドウを領域の右と左のどちらに表示するかに基づいて、ヘルプウィンドウのleft
とtop
を設定します。
function showHelpFloatWindow(windowID, obj, horizPadding, vertPadding, goRight) { var w = document.getElementById(windowID); if (w != null) { w.style.display = 'block'; w.style.visibility = 'visible'; w.style.top = getAscendingTops(obj) + vertPadding; if (getAscendingTops(obj) + vertPadding < 0) w.style.top = 0; if (goRight == true) w.style.left = getAscendingLefts(obj) + obj.offsetWidth + horizPadding; else { w.style.left = getAscendingLefts(obj) - horizPadding; if ((getAscendingLefts(obj) - horizPadding) < 0) w.style.left = getAscendingLefts(obj) + obj.offsetWidth + horizPadding; } } }
hideHelpFloatWindow
関数では、位置関連のCSS設定を初期値にリセットします。その結果、ヘルプウィンドウは非表示になります。
function hideHelpFloatWindow(windowID) { var w = document.getElementById(windowID); if (w != null) { w.style.display = 'none'; w.style.visibility = 'hidden'; w.top = -999; w.left = -999; } }
全体を組み立てる
以上のJavaScriptスクリプトをWebページに追加し(単体のJavaScriptファイルに格納すればさらに良い)、ヘルプウィンドウをポップアップするための<div>
要素を追加した後で、状況依存ヘルプ領域に戻ってonmouseover
属性とonmouseout
属性を次のように完成させます。
<input type="button" value="Submit"
onmouseover="showHelpFloatWindow('MyHelpWindow', this, 10, 20, false);"
onmouseout="hideHelpFloatWindow('MyHelpWindow');" />
どちらの関数も、最初の入力パラメータとして値「MyHelpWindow」を渡します。<div>
要素のid
属性が「MyHelpWindow」だからです。また、それ自身への参照(this
)を渡すのは、ヘルプウィンドウを表示する位置の基点となる要素が自分自身だからです。このスクリプトの動作を確認するには、ライブデモを表示してください。
次のステップ
この段階の状況依存ヘルプシステムは、かなり単純で、欠点があります。第一の欠点は、すべてのヘルプが静的なマークアップで処理されることです。新しいヘルプウィンドウを追加するためには、適切な<div>
タグおよび<iframe>
タグと、onmouseover
文およびonmouseout
文を状況依存の領域に追加する必要があります。多くの場合は、この方法よりも、ASP.NETのデータWebコントロールのテンプレートまたは分離コードクラス自体からプログラム的に各ヘルプウィンドウを取得するというアプローチを採用した方が良いでしょう。また、このコードをダウンロードして試したときに、ヘルプウィンドウの高さが足りなくて、ヘルプテキストの最後の方が見えなくなるかもしれません。<iframe>
にはスクロールバーが表示されますが、マウスをスクロールバー上に移動するとonmouseout
イベントが発生してウィンドウが消えてしまうので、テキストをスクロールできません。これと同様に、ヘルプウィンドウ内にハイパーリンクがあってもマウスでクリックできません。マウスがヘルプ領域を去ると、ヘルプウィンドウがすぐに消えるからです。
このような問題点については、記事『Programmatically Creating Context-Sensitive Help on a Web Page』で解説します。
このような操作性の問題点に加えて、この状況依存ヘルプシステムは、ページの開発者にとってもユーザーフレンドリではありません。すべてのスクリプトおよび
<div>
要素と<iframe>
要素を手動でWebページに追加して、ヘルプウィンドウと、ヘルプ領域のonmouseover
イベントハンドラとonmouseout
イベントハンドラを定義する必要があるからです。開発の手間という面から考えれば、必要なすべてのスクリプトとマークアップを、ASP.NET分離コードクラスの1行のコードで追加できるのが理想的です。記事『Programmatically Creating Context-Sensitive Help on a Web Page』では、これらの欠点を解消する方法を説明します。
結論
HTMLのtitle
属性を使って、各種のHTML要素にツールヒントを追加すれば、状況依存ヘルプを作成できます。ただし、ツールヒントで表示できるテキストメッセージの文字数には限りがあり、複雑な書式設定、イメージ、色なども表示できません。この記事では、事前に定義した画面上の領域にマウスが移動したときに複雑なヘルプウィンドウを表示できる、ツールヒント型のヘルプシステムを独自に作る方法を説明しました。
それでは、ハッピープログラミング!