[jQueryUI入門] 基本的なウィジットの使い方
ダウンロード
公式サイトから、カスタムダウンロードを行います。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ウィジット」を使う場合、次のようなファイル構成でロードします。
- <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
- <script type="text/javascript" src="jquery.ui.core.min.js"></script>
- <script type="text/javascript" src="jquery.ui.widget.min.js"></script>
- <script type="text/javascript" src="jquery.ui.tabs.min.js"></script>
- <!-- クッキーを使う場合 -->
- <script type="text/javascript" src="jquery.cookie.js"></script>
めんどくさい場合は、Googleなどから一括でロードする事も出来ます。
- <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
- <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
または
- <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
- <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ウィジット」を使う時のスタイルシートの個別ロードの方法です。
- <link rel="stylesheet" type="text/css" href="jquery.ui.core.css" />
- <link rel="stylesheet" type="text/css" href="jquery.ui.theme.css" />
- <link rel="stylesheet" type="text/css" href="jquery.ui.tabs.css" />
全てのスタイルを一括ロードする場合(テーマ名のついたディレクトリの中身は全部必要)
- <link rel="stylesheet" type="text/css" href="jquery.ui.all.css" />
基本的な使い方
基本の書式はjQueryMobileなどと同じで、HTML(body以下)にはdivブロックをベースに「id属性」と「class属性」を指定した中身を記述、ヘッダー内のjavascriptには初期化メソッドやウィジットの設定を行って記述します。(例)最低限の設定で、tabsウィジットを使用する場合
- // head内に記述 $(document).readyではなく普通に初期化
- <script type="text/javascript">
- $(function(){
- $('#foo').tabs();
- });
- </script>
- ----------------------------------------------------------------------------
- // body内に記述
- <div id="foo">
- <!-- タブの見出し -->
- <ul>
- <li><a href="#tab1">タブ1見出し</a></li>
- <li><a href="#tab2">タブ2見出し</a></li>
- <li><a href="#tab3">タブ3見出し</a></li>
- </ul>
- <!-- 各タブの内容 -->
- <div id="tab1">
- タブ1のコンテンツ
- </div>
- <div id="tab2">
- タブ2のコンテンツ
- </div>
- <div id="tab3">
- タブ3のコンテンツ
- </div>
- </div>
まとめ
UIウィジット機能を使うためには、ui.coreとui.widgetが必須です。それに加えて、位置判定や設定を必要とするウィジットならposition、マウスでの操作を必要とするウィジットならmouseが必須ファイルになります。あとは、各種ウィジット(アコーディオンやタブなど)のファイル、スタイルシートが必要です。
スタイルシートでは見た目を調節するために、ウィジットとして使うセレクタ(divやpなどのHTML要素)にクラス属性の指定を行います。(ui-widgetクラスや、ui-corner-allなど)初期の値で使う事も出来るし、自分で細かいカスタマイズをする事も可能です。
wordpressでロードした場合、必須ファイル(javascript)は自動読み込みしてくれます。ただしテーマは含まれないため、スタイルシートのみ自分で用意してから読み込む必要があります。
トラックバック送信先