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

[jQueryUI入門] 種類とテーマ作成

jQueryにも様々なプラグインがありますが、jQueryUIを使ってユーザーインターフェースを作成する方法をご紹介します。まとめて1つのパッケージとして使ったり、個別にダウンロードして必要な機能だけを使い分けすることもできます。また、カラーテーマを使って適用スタイルを自作したり、元々あるスタイルテーマを後から少し変更して文字色だけ変更するなど、テーマサポートが充実しています。

WordPressの場合、WordPressインストールディレクトリ » wp-includes » js » jquery » uiの中にjQueryUIのminファイルが格納されています。スタイルシートだけ用意すればすぐに使う事が出来ます。

jQueryUIの基礎パーツ
corejQueryUIのUIを管理するための基礎クラスが定義されています。UIウィジットを使う場合、必須です。
widgetウィジットを作成するための基礎クラスが定義されています。UIウィジットを使う場合、必須です。
mouseマウススクロールやドラッグ&ドロップなどの動作を制御するために必要なライブラリです。ウィジットによっては必須です。
positionブロック要素などの位置情報を取得するために必要なライブラリです。位置情報が関係するウィジットを使う場合、必須です。
jQueryUIのサポート機能
draggableマウスによるドラッグ機能を実装します。divブロックをドラッグして位置を変更する事が出来るウィジットです。
droppabledraggbaleと組み合わせて、指定したブロック要素内にドラッグアイテムをドロップします。組み合わせるとカート作成などに便利です。
resizableボックスのサイズを可変サイズにします。ブラウザによってはtextareaなどのサイズを変更できるものなどがありますが、そういったかんじの機能です。
selectableaタグ以外の要素に対しても選択可能にできる機能を提供します。選択したままの状態や、複数選択を行ってフォーム作成する際に便利です。
sortableリストなどのアイテムを自動スクロール表示したり、順番を入れ替えたりする機能を提供します。ドラッグ&ドロップの機能を縦方向(または横方向)に限定したようなかんじです。
jQueryUIのWidget一覧
accordionブロックを要素をアコーディオンで表示します。タイトルをクリックすると、トグルで表示項目が切り替わります。
tabsタブをクリックすると中のコンテンツが切り替わるウィジットです。タブを追加したり、オープン状態をクッキー保存する事もできます。
auto completeinputのテキストに対して、何か文字を入力した時に、入力予測機能を実装するためのものです。単語はあらかじめ登録しておく必要があります。
buttonボタンを作成します。buttonタグやinputタグでない要素も、トグル状態にしたり、clickイベントを発生して動作を自由に設定できます。
date pickerカレンダーを表示して、選択した日付をフォームなどで利用することができます。多言語に対応しています。
dialogダイアログとして、DOMエレメントをオーバーレイ表示します。中のメッセージにはiframeやformなども利用でき、メッセージ以外にも使い道があります。
progressbarプログレスバー(進捗状況)を表示します。0~100%の間でバーの長さを設定でき、値を更新することもできます。
slider横スクロールバーを作成します。タブによって左右に値を調整でき、たとえば音量調整のボリュームコントローラーなどに利用できます。

jQueryUIのテーマローラー

jQueryUIはベースとなるスタイルと、ウィジットごとにスタイルが定義されています。ThemeRollerを使うと、配色を自由に選んだり、カスタマイズしたファイルを後からテーマ―ローラーに読み込ませて変更したり、色々な事ができるようになります。タイトルなどはテクスチャにも対応しており、アイコン画像の色も変更する事が可能です。
テーマローラーの公式サイト
URL: http://jqueryui.com/themeroller/

WordPressでのロード

事前に登録されたjavascriptスクリプトを、ハンドル名を指定してロードする方法です。jQueryUI系のファイルは$wp_scriptsに事前登録されているため、functions.phpに次のように記述するだけで読み込み出来ます。
  1. <?php
  2. function load_jquery_ui(){
  3. if(is_admin()) return;
  4. // tabsウィジットを使う場合
  5. //wp_print_scripts('jquery');
  6. //wp_print_scripts('jquery-ui-core');
  7. //wp_print_scripts('jquery-ui-widget');
  8. wp_print_scripts('jquery-ui-tabs');
  9. }
  10. add_action('wp_head', 'load_jquery_ui');
  11. ?>

関連投稿記事

Comment: