お客様が developerWorks に初めてサインインすると、プロフィールが作成されます。プロフィールで選択した情報は公開されますが、いつでもその情報を編集できます。お客様の姓名（非表示設定にしていない限り）とディスプレイ・ネームは、投稿するコンテンツと一緒に表示されます。

送信されたすべての情報は安全です。

developerWorks に初めてサインインするとプロフィールが作成されますので、その際にディスプレイ・ネームを選択する必要があります。ディスプレイ・ネームは、お客様が developerWorks に投稿するコンテンツと一緒に表示されます。

ディスプレイ・ネームは、3文字から31文字の範囲で指定し、かつ developerWorks コミュニティーでユニークである必要があります。また、プライバシー上の理由でお客様の電子メール・アドレスは使用しないでください。

送信されたすべての情報は安全です。

My developerWorks：

通知：

サイン・アウト

言語を選択する：

jQuery UI と jQuery プラグインを使用して優れた Web アプリケーションを作成する

Web ページと Web アプリケーションのルック・アンド・フィールを改善する

Christopher Michaelis, Developer, Consultant

Christopher Michaelis は Web ホスティング、Web アプリケーション、および GIS プログラミングを専門とする開発者です。彼は Utah State University と Idaho State University で教育を受け、コンピューター・サイエンスと地理情報科学を学びました。彼はさまざまな開発を経験しており、環境モデリング、教育、糖尿病データ分析、システム管理ツール、Web ホスティング、プラットフォーム統合、およびロケーション・ベースのサービスなどのアプリケーションを開発したことがあります。

概要： デスクトップ・アプリケーションの開発から、JavaScript と jQuery ライブラリーを使用した Web アプリケーションの開発に移行しようとしている開発者は、アプリケーションの基本的なルック・アンド・フィールについて考えることに慣れていません。というのは、これまではオペレーティング・システムが、ルック・アンド・フィールを処理してくれたからです。この記事では、jQuery をベースに構築された UI ツールキットである jQuery UI について説明します。jQuery UI を使用すると、見栄えの良いインターフェースを容易に作成することができます。また、jQuery のプラグインについてもいくつか説明します。これらのプラグインにより、Web 開発の時間を短縮することができ、おなじみのルック・アンド・フィールを持つ、滑らかで直感的な、そして柔軟なインターフェースを作成することができます。

タグを付ける!

日付： 2011年 6月 17日
レベル： 中級
この記事の原文： 英語
アクティビティー： 10204 ビュー
お気軽にご意見・ご感想をお寄せください：

はじめに

従来のデスクトップ・アプリケーション開発者が Web アプリケーションの開発に移行しようとする場合、おそらく HTML や CSS は難なく理解できるはずです。しかし、そのアプリケーションに見栄えの良いビジュアル・デザインを考え出そうとしても、そう簡単にはいきません。そこで、jQuery UI、およびさまざまな jQuery プラグインを使用すると、GUI の設計に費やす時間を最小限に抑えることができ、Web アプリケーションを短時間で構築する上で大いに役立ちます。

JavaScript と jQuery

これまで Web ページにある程度の動的コンテンツや対話性が必要な場合には、常に JavaScript が、Web ページ構築の本質的な部分を担ってきました。Web ページが表示されている状態で、JavaScript を使用せずにページを更新するには、ページを再読み込みする必要があります。しかし、これでは扱いにくいインターフェースになってしまいます。ここ数年、JavaScript の重要性が飛躍的に高まってきており、より多くのことが JavaScript によって実行され、Web アプリケーションはより強力になっています。さらに JavaScript は、サーバー・サイドの JavaScript エンジンである Node.js のような技術によって、サーバー・サイドでも採用されるようになっています。Node.js と JavaScript 全般について詳しく学びたい場合は、「参考文献」のリンクを参照してください。

jQuery は、主にクライアント・サイドの JavaScript コードに使用されるライブラリーです。jQuery には多くの日常的なアクションに対するショートカットが用意されているため、jQuery を使用することで、UI コードの作成に必要な時間を大幅に短縮することができます。また jQuery には、動的なインターフェースの作成に便利で、既にクロス・ブラウザーに対応している、柔軟な Ajax ライブラリーも含まれています。jQuery ライブラリーの詳細については、「参考文献」のリンクを参照してください。このリンクには、開発用と本番用の jQuery ライブラリーがダウンロードできるリンクも含まれています。本番コードは「縮小化」されており、不必要なホワイト・スペースやコメントはすべて削除されています。jQuery ライブラリーの内部を調べたい場合は、読みやすくなっている開発用をお使いになることを特にお薦めします。サード・パーティーのライブラリーの場合は、使用する前にその品質と機能の両方を理解し、必要と思えるかどうかを調べてみても損にはなりません。

jQuery UI

jQuery UI というのは、一般的なタスクを実行するために事前にパッケージ化された一連の UI ウィジェットと CSS スタイルのことです。タスクの例としては、従来のポップアップ・ウィンドウではなく、JavaScript と CSS を使用した、ユーザーに情報を提示するカスタム・ウィンドウのセットアップなどがあります。jQuery UI の Web サイト (「参考文献」のリンクを参照) を訪れても、直接ダウンロードできるオプションはないことがわかります。その代わりに、「Build custom download (カスタムのダウンロードをビルド)」というリンクがあります。このリンクをクリックすると、パーソナライズされた独自のパッケージを作成することができます。このパッケージでは、使用予定がないコンポーネント (例えば「Accordion (アコーディオン)」ウィジェットや「Datepicker (デートピッカー)」ウィジェットなど) をすべて削除し、ライブラリーのサイズを小さくすることができます。

jQuery UI パッケージをダウンロードすると、かなりの数のファイルが含まれていることがわかります。development-bundle ディレクトリーには demonstrations と documentation が含まれています。これらは役に立ちますが、本番のデプロイメントには必要ありません。しかし、css ディレクトリーと js ディレクトリーの中にあるファイルは、Web アプリケーションにデプロイする必要があります。js ディレクトリーには jQuery ライブラリーと jQuery UI ライブラリーの両方が含まれており、css ディレクトリーには CSS ファイルと、ウィジェットやスタイルの作成に使用されるすべての画像が含まれています。

コンテンツのテーマとスキン

jQuery UI のメイン・ページから jQuery UI をダウンロードする際には、独自のダウンロードを作成する過程で、特定のテーマを使用する選択をすることもできます。時間を節約できるように、jQuery UI のページには、利用可能なさまざまなテーマをその場で表示するツールが用意されています。あるいは、この Web サイトを利用して好みの色を指定し、独自のテーマを作成することもできます。つまりこれらの機能を利用すると、必要な CSS 設定が自動的に作成されるので、いくらか時間を節約することができるのです。例えば図 1 では、Humanity テーマ (上部) と Start テーマ (下部) を比較しています。各テーマには、そのテーマに合ったフルセットのアイコンが含まれています。

図 1. Humanity テーマと Start テーマの比較
このスクリーン・ショットでは Humanity テーマと Start テーマを比較しており、その主な違いは色です。

テーマを利用すると、見栄えの良い UI コンポーネントをフルセットで手軽に利用できるようになり、CSS の値の調整や、静止画像の要素を画像エディターで作成するために、膨大な時間を費やす必要がなくなります。この記事の例では Humanity テーマを使用します。しかし、スキンを使用したからといって、独自の CSS を jQuery UI の CSS と一緒に使用したり、jQuery UI の CSS よりも優先させたりすることができないわけではありません。リスト 1 に、基本的な HTML テンプレートを示します。このテンプレートは jQuery と jQuery UI を読み込みますが、さらにカスタムの CSS ファイル (app.css) も読み込みます。この app.css により、ボタン内のテキストの周囲に表示されるパディングの量を変更します。またこのテンプレートでは、アプリケーション専用の JavaScript コードが含まれている app.js も読み込んでいます。

リスト 1. jQuery UI をロードする基本的な HTML テンプレート


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<link rel="stylesheet" type="text/css" href="css/humanity/jquery-ui-1.8.10.custom.css" />
<link rel="stylesheet" type="text/css" href="css/app.css" />
<script src="js/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.10.custom.min.js" type="text/javascript"></script>
<script src="js/app.js"></script>
<body>
</body>
</html>

app.css:
body {
        font-size: smaller;
}

/* Override jQuery UI theme's padding on buttons: */
.ui-button-text-only .ui-button-text {
        padding: 0.2em 0.5em;
}

インターフェースの改善: 「Dialog (ダイアログ)」ウィジェット

多くの Web 開発者は、alert 関数または confirm 関数を頻繁に使用して、サイト訪問者にメッセージを表示します (あるいはサイト訪問者からメッセージを取得します)。これらのメッセージは、どうひいき目にみてもセンスがありません。特に、「The page at www.yoursite.com says... (www.yoursite.com のページには以下の内容が表示されています)」のような、実に機械的なタイトルが含まれていることが多いからです。よく使用される別の方法は、ポップアップ・ウィンドウを開く方法です。この方法はポップアップ・ブロッカーによって引き起こされる問題のため、あまり使用されなくなりつつありますが、やはり、あまり趣味が良いとは言えません。

サイト訪問者とやり取りする必要がある場合、jQuery UI の Dialog 機能を使用すると、display: none によって非表示になっている任意のコンテンツ、またはあらかじめ定義された <div> タグを表示することができます。図 2 に、この機能によって全体的なルック・アンド・フィールがどう違ってくるかを示します。

図 2. 単純なアラート・ウィンドウと jQuery UI の「Dialog (ダイアログ)」ウィジェットを比較する
このスクリーン・ショットでは、単純なアラート・ウィンドウと jQuery UI の Dialog ウィジェットを示しています。

「Dialog (ダイアログ)」ウィジェットを最も簡単に使用する方法は、表示対象のコンテンツを保持する文書内に、別の <div> タグを用意することです。一般的には、ダイアログ・ボックス用に再利用する空の <div> タグを 1 つ用意するとうまく動作します。リスト 2 に示すように、最初にコンテンツを設定し、次にダイアログ・ボックスを表示します。

リスト 2. jQuery UI の「Dialog (ダイアログ)」ウィジェットを表示する


<div style="display: none;" id="dialogHolder"><p id="dialogContent"></p></div>

in JavaScript code:
$('#dialogContent').html('Isn\'t this <b>cooler</b>?<br /><br />By setting 
   modal to true, you can require the user to dismiss this before interacting 
  with more of the page.');
$('#dialogHolder').dialog({
  autoOpen: true,
  title: 'Hello!',
  modal: true,
  buttons: {
    "Go Away": function() {
      $(this).dialog("close");
    }
  }
})

インターフェースの改善: アコーディオンとタブ

jQuery UI には「Accordion (アコーディオン)」というウィジェットが導入されています。「Accordion (アコーディオン)」ウィジェットを使用すると、複数のセクションにコンテンツを分けることができますが、通常は、(デフォルトでは) 1 つのセクションのみ表示されます。別のセクションをクリックすると、それまで表示されていたセクションはアニメーションを伴って非表示になり、新しいセクションが表示されます。アコーディオンのメリットの 1 つは、追加されるセクションが垂直に配置されるため、事実上セクションの数に制限がないことです。この機能により、滑らかでシンプルなインターフェースを実現することができます。

Web サイトを訪れる人の多くは、むしろ従来のタブ・スタイルのレイアウトに慣れているはずです。タブ・スタイルのレイアウトでは、現在選択されているタブの内容が表示され、他のタブの内容は非表示になります。しかし、この方式では水平方向の幅に制限があるため、事実上タブの数は制限されます。図 3 に、「Accordion (アコーディオン)」ウィジェット (上部) と「Tab (タブ)」ウィジェット (下部) を示します。

図 3. jQuery の「Accordion (アコーディオン)」ウィジェットと「Tab (タブ)」ウィジェット
このスクリーン・ショットは、jQuery の「Accordion (アコーディオン)」ウィジェットと「Tab (タブ)」ウィジェットを示しています。

アコーディオンは、そのアコーディオンを含む <div> を使用して作成され、その後に一連のセクションを続けます。各セクションは <h3> タグと <a> タグで始まり、次に各アコーディオン・セクションのコンテンツを保持するサブコンテナーである <div> を続けます。同様に、タブ・コントロールの場合には、そのタブ・コントロールを含む <div> を使用して作成され、その後に <ul> タグを使用してタブ自体を定義します。各 <li> の中で、アンカー (<a>) を使用して、タブとそのタブ内のコンテンツを含む <div> とをリンクさせます。次に、順不同リスト (<ul>) で定義された ID と一致する ID を持つ一連の <div> 要素により実際の内容が定義されます。これはリスト 3 を見た方がよく理解できます。いったん内容が定義されると、対応する <div> 要素用の jQuery セレクターで .accordion(); または .tab(); を呼び出すことにより、アコーディオン機能またはタブ機能が初期化されます。

リスト 3. 「Accordion (アコーディオン)」ウィジェットと「Tab (タブ)」ウィジェットを設定する


<div id="accordionDemo" style="width: 50%; margin-left: auto; margin-right: auto;">
  <h3><a href=#">Top Section</a></h3>
  <div>
    <p>Initial content for the first "tab" of the accordion goes here.</p>
  </div>
  <h3><a href=#">Next Section</a></h3>
  <div>
    <p>More content...</p>
  </div>
  <h3><a href=#">Last section</a></h3>
  <div>
    <p>You can have as many accordion sections as needed.</p>
  </div>
</div>

<div id="tabDemo" style="width: 50%; margin-left: auto; margin-right: auto;">
  <ul>
    <li><a href="#t1">First Tab</a></li>
    <li><a href="#t2">Middle Tab</a></li>
    <li><a href="#t3">Last Tab</a></li>
  </ul>
  <div id="t1">
    <p>First tab content goes here. The anchor href for the tab titles must 
       match the div for the content.</p>
  </div>
  <div id="t2">
    <p>Second Tab Content</p>
    <br />
    <img src="http://www.google.com/images/logos/ps_logo2.png" />
  </div>
  <div id="t3">
    <p>As with the Accordion, you can have as many tabs as you want, although 
       horizontal width places some practical limit there.</p>
  </div>
</div>

in JavaScript code:
$(document).ready(function() {
  $('#accordionDemo').accordion();
  $('#tabDemo').tabs();
}

ウィジェット: プログレスバー

jQuery UI には、実行の完了までに時間がかかる処理に便利な、「Progressbar (プログレスバー)」ウィジェットもあります。このウィジェットは、非常に簡単に使用することができます。ID が指定されている、空の <div> を定義し、この <div> で progressbar 関数を呼び出すだけです。例えば、$('#yourDiv').progressbar(); のように呼び出します。実際には、このウィジェットは Ajax 技術と組み合わせることで、処理の進行状況を反映させることができるようになります。

ウィジェット: デートピッカー

日付を特定のフォーマットで厳密に入力することを要求する Web サイトは、サイトの訪問者を困らせますが、それが (独自の日付フォーマットを持つ) さまざまな国からの訪問者である場合はなおさらのことです。また、フリーフォームの入力フィールドにするのも危険です。フリーフォームにしておくと、バックエンドでの検証が必要となるだけでなく、入力された日付を解析できない場合には、サイト訪問者に通知する手段が必要になります。この問題の簡単な解決策の 1 つは、jQuery UI に用意されているような「Datepicker (デートピッカー)」ウィジェットを使用することです。jQuery UI の「Datepicker (デートピッカー)」ウィジェットには、日付範囲の制限、(国際化のために) カレンダー上の日をリネームする機能など、多様な機能があります。このウィジェットの使用法は簡単です。まず、以下のように標準的なテキスト入力フィールドを作成します。

<input type="text" id="dateDemo" size="10">

次に、以下のコードを使用して、このフィールドをカレンダーに変換します。

$('#dateDemo').datepicker({ 'maxDate': '+4m'});

上記のコードでは、選択可能な最大の日付として、現在の日付 (この記事が執筆された 2011年 3月 5日) から 4 ヶ月後の日付を規定しています。これを反映したスクリーン･ショットを図 4 に示します。

図 4. jQuery UI の「Datepicker (デートピッカー)」ウィジェット
このスクリーン・ショットでは、jQuery UI の「Datepicker (デートピッカー)」ウィジェットのスクリーン･ショットを示しています。

jQuery のアニメーションを利用する

jQuery には、animate を使用して、任意の属性をある値から別の値へ遷移させるアニメーションを実行する機能が用意されています。この機能は独自のアニメーションを定義する場合に便利です。しかし、毎回独自のアニメーションを作成していては時間がかかります。そこで、jQuery UI には定義済みのアニメーションが追加されています。例えば、単独で動作するエフェクトとして Bounce、Highlight、Pulsate、Shake、Size、および Transfer が追加されており、Show および Hide エフェクトに追加されたエフェクトとして Blind、Clip、Drop、Explode、Fade、Fold、Puff、Slide、および Scale があります。これらのエフェクトは jQuery の通常の show 関数と hide 関数の中で使用されます。例えば、$('#googleLogo').show('slide', {}, 1000); や $('#googleLogo').hide('explode', {}, 2000); のように使用されます。

上に戻る

jQuery プラグイン

サード・パーティーにより、これまでに何十ものプラグインが jQuery 用に開発されています。通常、これらのプラグインは jQuery UI とは独立しており、jQuery UI を必要としませんが、jQuery 自体は必要です。特に便利なプラグインをいくつか調べてみましょう。

Simple Tree

Microsoft Windows にエクスプローラーが初めて登場して以来、ツリー・ベースのメニューが一般的になりました。ツリー・ベースのメニューにより、ドキュメントなどの一連の複雑なリソースを容易にナビゲートすることができます。jQuery の Simple Tree プラグインを使用することにより、メニュー項目をクリックすると、任意の JavaScript アクションが起動されるツリー･メニューを容易に実装することができます。必要であれば、このプラグインを使用してツリーの項目をドラッグ・アンド・ドロップし、ツリーを再構成することもできます。また、ドロップする際に関数を起動することもできます。(ダウンロード用のリンクは「参考文献」を参照してください。また、必要となるすべてのコンポーネントは、「ダウンロード」セクションのサンプル・コードから入手することができます。) 図 5 に、Simple Tree プラグインが使用されている様子を示します。

図 5. jQuery の Simple Tree プラグイン
このスクリーン・ショットでは、jQuery の Simple Tree プラグインのスクリーン･ショットを示しています。

ツリーの内容は、外側にある 1 つの <ul> 要素で定義され、この <ul> 要素の中には、ツリーを識別するための ID と、ツリーのスタイルを設定するための CSS 設定があります。この <ul> 要素の中で、<li> 要素によってルート項目が定義されます。この <li> 要素の中に別の <ul> 要素が配置され、さらにこの <ul> 要素の中にツリーの項目があります (各ツリー項目は、それぞれの <li> 要素の中にあります)。リスト 4 に、このレイアウトを示します。ツリーのレイアウトが完成すると、simpleTree 関数が呼び出され、ツリー機能が有効になります。

リスト 4. Simple Tree を使用してツリー・メニューを設定する


<head>
  <link rel="stylesheet" type="text/css" href="css/jquery.simple.tree.css" />
  <script src="js/jquery-1.5.1.min.js" type="text/javascript"></script>
  <script src="js/jquery.simple.tree.js" type="text/javascript"></script>
</head>
<body>
  <ul id="treeDemo" class="simpleTree">
    <li class="root"><span>Here are some items.</span>
      <ul>
        <li class="open" id="TopmostBranch"><span>Top Branch</span>
          <ul>
            <li id="SubItem1"><span>Sub items</span></li>
            <li id="SubItem2"><span>are in another</span></li>
            <li class="open" id="SubItem3"><span><ul> level.</span>
              <ul>
                 <li id="SubSubItem1"><span>like this!</span></li>
              </ul>
            </li>
          </ul>
        </li>
        <li id="AnotherBranch"><span>Another Branch</span></li>
        <li id="LastBranch"><span>Last Branch</span></li>
      </ul>
    </li>
  </ul>
</body>

in JavaScript code:
$(document).ready(function() {
  $('#treeDemo').simpleTree({
  autoclose: true,
  afterClick: function(node) {
    alert($('span:first',node).parent().attr('id') + " was clicked.");
  },
  animate: true,
  drag: false
  });
});

Uploadify

jQuery の Uploadify プラグインを使用すると、新しいページに対して POST 操作を行わなくても、皆さんのサイトにファイルをアップロードすることができ、またファイルのアップロード状況を示すプログレス・インジケーターを表示することができます。アップロード自体は Adobe Flash コンポーネントによって処理されます。Uploadify プラグインにより、許可されるファイル拡張子や、サイズの制限、複数ファイルを一度に選択できるかどうかといったことを指定するなど、アップロードを大幅にカスタマイズすることができます。1 つのファイルのアップロードが終了するごとに、onComplete 関数が呼び出され、すべてのファイルのアップロードが終了すると、onAllComplete 関数が呼び出されます。Uploadify に付属しているデフォルトのアップロード・ハンドラーは、アップロードされたファイルの名前をエコー・バックすることで応答しますが、このアップロード・ハンドラーは必要に応じて (例えば、フォーラムにファイルを投稿する、あるいは何か別のアクションを実行するなど)、容易にカスタマイズすることができます。リスト 5 に、Uploadify を使用したファイルのアップロードを設定する方法を示します。

リスト 5. 標準的なファイル入力を Uploadify アップローダーに変換する


<head>
  <script src="js/jquery-1.5.1.min.js" type="text/javascript"></script>
  <script src="uploadify/swfobject.js" type="text/javascript"></script>
  <script src="uploadify/jquery.uploadify.v2.1.4.min.js" type="text/javascript"></script>
</head>
<body>
  <div style="margin-left: auto; margin-right: auto; width: 200px">
    <b>Upload a file to test:</b> <input id="uploadifyDemo" 
       name="uploadifyDemo" type="file" />
  </div>
</body>

in JavaScript code:
$(document).ready(function() {
  $('#uploadifyDemo').uploadify({
    'auto': true,
    'folder': 'tmp',
    'cancelImg': 'uploadify/cancel.png',
    'script': 'uploadify/uploadify.php',
    'uploader': 'uploadify/uploadify.swf',
    onComplete: function(evt, id, file, resp, data) {
      alert('The file "' + file['name'] + '" with size "' + file['size'] + 
            '" was uploaded. (It will be deleted in a few minutes 
            automatically.)' + "\n\nThe upload script returned: " + resp);
    }
  });
});

皆さんのアップロード・ディレクトリーが、一般に公開されていないか、または十分に保護されているかを確認するのは良い習慣です。そうしないと、攻撃者が彼らのコードをアップロードし、そのコードを皆さんのサーバー上で実行することができてしまいます。上記の例では、この記事の例で使用しているディレクトリーの tmp/ にファイルを書き込んでいるので、.htaccess ルールを使用して、単純にすべてのサイト訪問者が tmp/ にアクセスできないようにしています。また、Web サーバーを実行しているユーザー (例えば、www-data や apache) が、アップロード・ディレクトリーに対する書き込み権限を持っていることを、確認しておくことも重要です。

Simpletip

デスクトップ・アプリケーションであれ、Web ベースのアプリケーションであれ、ユーザーにとって本当に使いやすいアプリケーションにするには、そのアプリケーション自体の中にアプリケーションの説明が含まれている必要があります。ツールチップは、これを実現する手軽な方法です。ツールチップが使用されるようになってから何十年も経過しているため、ほとんどの人は、画面上にそれが何であるかよくわからない項目がある場合には、無意識のうちにその項目の上にマウス・ポインターを置き、何らかのポップアップ・ヘルプが表示されるのを待つように、習慣づけられています。Simpletip プラグインを使うと、こうした動作を簡単に実現することができ、基本的なツールチップを作成したり、追加のオプションを使用してツールチップの配置を制御したりすることができます。ツールチップを表示したり非表示にしたりするためのエフェクトがサポートされていますが、これには JavaScript 関数によって定義されるカスタムのアニメーションも含まれます。ハードコーディングされたテキストや、ページに含まれるその他のコンテンツ (例えば、$('#elementId').html() を使用した、隠し <div> 要素など) を、ツールチップの内容として使用することができます。また、Ajax を使用してプログラムによってコンテンツを取得することや、$('#simpleTip3').simpletip({ content: getToolTip()}); のようなコードを使用して文書内の別のソースからコンテンツを取得することもできます。リスト 6 に、文の単語の上に表示される、異なるツールチップのスタイルをいくつか示します。

リスト 6. Simpletip を使用してツールチップを設定する


<head>
  <script src="js/jquery-1.5.1.min.js" type="text/javascript"></script>
  <script src="js/jquery.simpletip-1.3.1.min.js" type="text/javascript"></script>
</head>
<body>
  <p>
    SimpleTip lets you add <a id="simpleTip1">simple tooltips</a>, 
    including <a id="simpleTip2">more advanced</a> tooltips or even 
    <span id="simpleTip3">tooltips with effects</span> with a minimum of fuss.
  </p>

  <div id="simpleTip2Content" style="display: none;">
    <div class="ui-state-highlight ui-corner-all" style="padding: 5px;">
      <b>Fancy</b> content can be defined in a separate div.
    </div>
  </div>
</body>

in JavaScript code:
$(document).ready(function() {
  $('#simpleTip1').simpletip({
      content: 'A basic tooltip.',
      fixed: false
  });

  $('#simpleTip2').simpletip({
      content: $('#simpleTip2Content').html(),
      fixed: true,
      position: ['100', '0']
  });

  $('#simpleTip3').simpletip({
    content: 'Some content to animate',
    hideEffect: 'slide',
    showEffect: 'custom',
    showCustom: function() {
      $(this).css({
        display: 'block',
        fontSize: '0.3em',
        color: '#0000ff',
        backgroundColor: '#ffffff'
      });
      $(this).animate({
        color: '#ff0000',
        fontSize: '1em'
      }, 400);
    }
  });
});

上に戻る

まとめ

この記事で説明したツールを使用すると、Web アプリケーションのビジュアル・コンポーネントを短時間で作成することができ、開発者はサイトの実際の機能に集中できるようになります。ただし、このようなツールを使用する場合でも、Web アプリケーションの中で作成する各ページの自然なフローとユーザビリティーについては、やはり注意深く検討する必要があります。つまり jQuery UI やこれらのプラグインによって、注意深いページ設計が不要になるわけではありません。とは言え、このようなツールを使用すると、開発を迅速に行えるようになり、実装は容易になります。この記事で説明したすべてのサンプル・コードを含む完全な Web ページは、「ダウンロード」セクションを参照してください。皆さんのプロジェクトの出発点として、ぜひこのコードを活用してください。

上に戻る

ダウンロード

内容	ファイル名	サイズ	ダウンロード形式
Source code for examples	jQueryUIPluginsExamples.zip	234KB	HTTP

ダウンロード形式について

参考文献

学ぶために

JavaScript の初心者は、JavaScript tutorial (w3schools) から始めてください。
jQuery の Web サイトには、jQuery UI に必要な jQuery ライブラリーのためのダウンロードやドキュメントが用意されています。
jQuery UI の Web サイトを利用して、必要なツールのみを含むカスタムのダウンロードをビルドしてください。このサイトには優れたドキュメントやサンプルもあります。
jQuery UI の ThemeRoller を利用して、皆さん自身のテーマを作成してください。また、定義済みのテーマのプレビューを見てください。このサイトでは、一般的なコンポーネントの簡単な例を手軽に参照することができます。
developerWorks の Web development ゾーンには、Web ベースの多様なソリューションを解説した記事が豊富に用意されています。
developerWorks の Technical events and webcasts で最新情報を入手してください。
developerWorks On demand demos をご覧ください。初心者のための製品インストール方法やセットアップのデモから、上級開発者のための高度な機能に至るまで、多様な話題が解説されています。
developerWorks を Twitter でフォローしてください。

製品や技術を入手するために

サーバー・サイドの素晴らしい JavaScript エンジンである Node.js をダウンロードしてください。
jQuery の Simple Tree プラグインをダウンロードしてください。このプラグインを利用すると、容易にツリー構造のメニューを作成することができ、またオプションとしてドラッグ・アンド・ドロップをサポートすることもできます。
jQuery の Simpletip プラグインをダウンロードしてください。このプラグインを利用すると、Web ページ上の任意の要素に対し、ツールチップ・スタイルのポップアップ・ウィンドウを簡単に追加することができます。
Uploadify を利用すると、進行状況の表示を含め、すっきりとした方法でファイルをアップロードすることができ、POST 操作やページのリロードが必要なくなります。

議論するために