ポップアップウィンドウの例
jQueryは実用的なUI機能の作成にも役立ちます。次に示す例では、ポップアップウィンドウを追加することにより、ページ全体にわたってマッチした要素を強調表示するセレクタを動的に入力できるようにします。最終結果を図4に示します。
ユーザーは［Show Query Dialog］をクリックすることで「ダイアログ」をポップアップさせます。これでダイアログがページの最上部から「滑り込み」、ページコンテンツの最上部に半透明の背景と共に表示されます。ダイアログが表示されたら、テキスト領域に何かのjQueryセレクタを入力して、ドキュメントに適用することができます。ボタンをクリックすると、選択した要素がドキュメント内で暗赤色で強調され、数秒後に強調が除去されます。
このダイアログは、マークアップで次のように見える単純なスタイルの<div>要素としてページに格納されます。
<div id="divjQueryDialog"
class="blackborder">
<div class="gridheader">
Enter a jQuery Expression</div>
<div class="containercontent">
Expression:
<span id="lblExpressonMsg">
</span><br />
<textarea id="txtExpression"
style="width: 300px; height: 60px;">
</textarea>
<input type="button" value="Show"
id="btnExpression" />
</div>
</div>
ダイアログを透明にしたり、初期状態で非表示にしたり、ページ上の位置を絶対位置にしたりするCSSスタイルもあります。
#divjQueryDialog
{
width: 380px;
position: absolute;
left: 100px;
top: 70px;
display: none;
}
パネルを可視にし、不透明度を適用し、マッチングと選択を処理するコードは比較的単純です（リスト2を参照）。
function showQueryDialog()
{
var dialog = $("#divjQueryDialog");
dialog.hide()
.slideDown("slow")
.css("opacity",.90);
$("#btnExpression").bind("click", function(event)
{
// Grab the selector entered as text
var exp = $("#txtExpression").val();
// Execute the selector through jQuery
var matches = $(exp);
// *** check result
var len = matches.length;
if ( len < 1)
{
$("#lblExpressionMsg").text("No matching elements");
showStatus("No matches",3000,true);
return;
}
showStatus( len.toString() + " matches",3000,true);
// No errors clear error message
$("#lblExpressionMsg").text("");
// Highlight all matches
matches.addClass("selectionhighlight");
// Set up timer to remove the highlight
setTimeout(function()
{
$(exp).removeClass("selectionhighlight");
},5000);
// Unbind event and hide dialog
$("#btnExpression").unbind("click");
dialog.slideUp();
});
}
このコードでは初めにdivを可視にし、不透明度を適用します。それからクリック操作を処理するためにクリックハンドラをボタンと無名関数にフックします。そして入力テキストを取り込み、jQueryを使ってセレクタを「評価」し、マッチセットに対して特別な強調クラスを適用します。さらにタイムアウトも設定して、5秒後に強調クラスが除去されるようにします。
前に無名関数のネストに言及しましたが、リスト2のコードはもう1つの例を示しています。これはまったく非同期ですが、コンテキストが保たれた単一のコードブロックに書かれています。内部のクリックハンドラはダイアログを再選択しなくてもアクセスできます。これはネストしたクロージャまたは関数ブロックに対するJavaScriptの処理の仕方によるもので、たとえコードが非同期でも、関数定義スタックの上部で定義されたプライベート変数を見ることができるからです。この例ではこれは簡単ですが、フェードアウトコード（または「クラス」）に含まれている状態が多ければ、親クロージャの内部で宣言されているというだけで、その状態がハンドラに渡されるとかなり便利です。この種のコーディングは、関連のあるロジックを一か所にまとめると容易になることが多いようです。
ここで強調するものはまだ2つあります。ダイアログを透明にするコードに注目してください。
dialog.hide()
.slideDown("slow")
.css("opacity",.90);
jQueryはブラウザによって扱いが異なる一部のCSSタグ（opacityなど）をうまく処理します。Internet Explorerはopacityスタイルをサポートしていませんが（opacityは公式にCSS 2.1標準に含まれているわけではないため）、jQueryは自動的に適切な処置を行い、Internet Explorer用のフィルタスタイルを適用します。jQueryは他のCSSプロパティと一部の関数についても同じようなルールを適用します。例えば、.text()はテキストを一貫して取得しますし、.scrollLeft/Topはスクロール位置を無事に取得します。そういうわけで、jQueryは異なるブラウザ実装の間での正規化機構として機能するのです。
ウィンドウをドラッグ可能にして、ユーザーがページ上であちこち移動できるようにしたければ、jQuery UIのdraggableプラグインを使って簡単に実現できます。このプラグインを使用するには、jQuery UIをダウンロードし、ライブラリをscriptsフォルダにダンプします。それから次のスクリプトをページに追加します。
<script src="scripts/ui.core.js" type="text/javascript"></script> <script src="scripts/ui.draggable.js" type="text/javascript"></script>
そして次のコードを書きます。
var dialog = $("#divjQueryDialog");
dialog.draggable();
これで終わりです。draggableプラグインを追加し、2行のコードを書いたことで、元の「ウィンドウ」がずっとウィンドウらしくなりました。draggableに適用できるオプションはいくつもあります。例えば、ドラッグハンドルをウィンドウのヘッダーに設定するとすれば、次のものを使用できます。
dialog.draggable({ handle:
$("div.gridheader") });
これを行うと、ヘッダーでしかドラッグ操作が開始されなくなり、ウィンドウの動作がより自然なものになります。
UI機能はクライアントサイドで最もよく使われる操作なので、jQueryチームは独立していた数々のUIコンポーネントをベースにして標準UIライブラリを作成することにしました。それがjQuery UIです。jQuery UIは小さいながら有用なUIライブラリです。現在、jQueryチームが保守しています。
jQuery UIには次のものが含まれています。Draggables、Droppables、Sortables、Resizables、Accordion、Slider。DatePicker、Dialog、Tab、エフェクト一式（トランジション、カラーアニメーション、イージング関数など）。
jQuery UIのコンポーネントはモジュール化されているので、必要なものだけを選べばダウンロードサイズを抑えることができます。
