• twitter
  • Facebook
  • はてなブックマーク
2012年05月18日(金)

[jQueryUI入門] 基本的なウィジットの使い方

jQueryUIのウィジット概要です。カスタムダウンロードの方法と、テーマの利用方法について解説しています。jQueryUIは「jQuery」をベースに、スタイルシートで外観を調整し、javascriptでイベントを管理してインタラクティブなUIを作成するための機能を持っています。ウィジットは「ui.core.js」「ui.widget.js」「ui.mouse.js」「ui.position.js」の4つのファイルを中心に、固有の機能を持ったウィジットファイルをロードして使用します。(version1.8以上)一番簡単な方法は、全部のUIファイルとテーマ用スタイルシートをダウンロードして一括でロードする方法だと思いますが、個別ロードにも対応しているためサイトパフォーマンスを考慮するか、好きな方法で使うと良いと思います。

ダウンロード

公式サイトから、カスタムダウンロードを行います。http://jqueryui.com/downloadから、全てのボックスにチェックして、スタイルシートのテーマのみ使いたいものを選択して一括ダウンロードしておくと後から便利です。(テーマやスタイルのみ後からでも変更可能)もし1つのウィジットしか利用せず、他の機能を一切必要としない場合は、チェックを全て外して、使いたいwidgetにだけチェックを入れると、必要なファイルを自動で選択してカスタムダウンロードしてくれます。(スタイルテーマも同様に、必要なスタイルだけを1つにまとめたcssを出力してくれます)

解凍したディレクトリ

解凍したら、このようなファイル構成になっているので、development-bundleの中から、使いたいファイルを選択してロードしていきます。jquery.cookie.jsなどの付加機能もexternalにバンドルされています。

javascriptについて

widgetの機能を利用する場合は、development-bundleの中の、ui»minifiedの中にある、「jquery.ui.core.min.js」と「jquery.ui.widget.min.js」は必須です。読み込む順番にも気をつけます。また、jQuery本体のバージョンは1.7が梱包されているので、一番最初にロードしておきます。例えば「tabsウィジット」を使う場合、次のようなファイル構成でロードします。

  1. <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
  2. <script type="text/javascript" src="jquery.ui.core.min.js"></script>
  3. <script type="text/javascript" src="jquery.ui.widget.min.js"></script>
  4. <script type="text/javascript" src="jquery.ui.tabs.min.js"></script>
  5. <!-- クッキーを使う場合 -->
  6. <script type="text/javascript" src="jquery.cookie.js"></script>
 めんどくさい場合は、Googleなどから一括でロードする事も出来ます。
  1. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  2. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
 または
  1. <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
  2. <script type="text/javascript" src="jquery-ui-1.8.20.custom.js"></script>

一括ロードする方法だとjQueryUIの全ての機能が含まれているため、使わない機能もロードされてしまいます。

スタイルシートとテーマ

スタイルシートは、development-bundleの中の、themes»テーマファイル名の中にある、「jquery.ui.core.css」が必須です。各テーマに対応したスタイルシートは「jquery.ui.theme.css」になります。また、テーマに対応したアイコンや背景画像は「images」の中にあります。個別widget対応のスタイルシートはまた別になります。

テーマローラを使うと、galleryでスタイリングされた配色を元に、文字色や背景の変更などをテーマローラ上でカスタマイズする事が出来ます。ウィジット単位でテーマを使い分けたり、オリジナルテーマを作成したり、scopeを設定して限定した範囲にだけスタイルを適用するなど、柔軟性のある使い方が出来ます。次の例では、「tabsウィジット」を使う時のスタイルシートの個別ロードの方法です。

  1. <link rel="stylesheet" type="text/css" href="jquery.ui.core.css" />
  2. <link rel="stylesheet" type="text/css" href="jquery.ui.theme.css" />
  3. <link rel="stylesheet" type="text/css" href="jquery.ui.tabs.css" />

全てのスタイルを一括ロードする場合(テーマ名のついたディレクトリの中身は全部必要)

  1. <link rel="stylesheet" type="text/css" href="jquery.ui.all.css" />

基本的な使い方

基本の書式はjQueryMobileなどと同じで、HTML(body以下)にはdivブロックをベースに「id属性」と「class属性」を指定した中身を記述、ヘッダー内のjavascriptには初期化メソッドやウィジットの設定を行って記述します。

(例)最低限の設定で、tabsウィジットを使用する場合

  1. // head内に記述 $(document).readyではなく普通に初期化
  2. <script type="text/javascript">
  3. $(function(){
  4. $('#foo').tabs();
  5. });
  6. </script>
  7. ----------------------------------------------------------------------------
  8. // body内に記述
  9. <div id="foo">
  10. <!-- タブの見出し -->
  11. <ul>
  12. <li><a href="#tab1">タブ1見出し</a></li>
  13. <li><a href="#tab2">タブ2見出し</a></li>
  14. <li><a href="#tab3">タブ3見出し</a></li>
  15. </ul>
  16. <!-- 各タブの内容 -->
  17. <div id="tab1">
  18. タブ1のコンテンツ
  19. </div>
  20. <div id="tab2">
  21. タブ2のコンテンツ
  22. </div>
  23. <div id="tab3">
  24. タブ3のコンテンツ
  25. </div>
  26. </div>

まとめ

UIウィジット機能を使うためには、ui.coreとui.widgetが必須です。それに加えて、位置判定や設定を必要とするウィジットならposition、マウスでの操作を必要とするウィジットならmouseが必須ファイルになります。あとは、各種ウィジット(アコーディオンやタブなど)のファイル、スタイルシートが必要です。

スタイルシートでは見た目を調節するために、ウィジットとして使うセレクタ(divやpなどのHTML要素)にクラス属性の指定を行います。(ui-widgetクラスや、ui-corner-allなど)初期の値で使う事も出来るし、自分で細かいカスタマイズをする事も可能です。

wordpressでロードした場合、必須ファイル(javascript)は自動読み込みしてくれます。ただしテーマは含まれないため、スタイルシートのみ自分で用意してから読み込む必要があります。

関連投稿記事

Comment:


トラックバック送信先