読者です 読者をやめる 読者になる 読者になる

TechNote

とあるエンジニアのただのメモ

jQuery UI を無駄なく使いこなすために必要な知識まとめ(各ファイルの役割など)

jQuery UIは、インタラクティブなWebサイトを開発するために使用されるjQueryベースのUIライブラリです。このため、多くのサイトで「簡単」「手軽」などというキャッチを用いて紹介されています。


ところが、どのファイルがどのような役割を持っているかを正しく知っておかないと、どれをダウンロードしたらよいかもわからないし、ページ内で読み込まなくてよいファイルまで読み込んでしまったりするという無駄が生じてしまいがちです。


使用方法が簡単な故にか、多くのサイトで詳しい説明がなされていないようですので、ここらへんで一度自分の備忘録も兼ねて、フォルダ構造や各フォルダやファイルの役割を整理しておきたいと思います。


サマリー

1.jQuery UI のダウンロード方法
2.知っておくべき各機能のこと(uiフォルダ内の説明)
3.その他知っておくべき各フォルダやファイルの役割



1.jQuery UI のダウンロード方法


ココからStable Versionあたりをダウンロードします。
Stable Versionというのは、読んだままですが「安定版」という意味です。

f:id:kojikoji75:20130913171635j:plain


ダウンロード時に、実際に使用する機能だけを選択することができます。各機能は2で説明します。

f:id:kojikoji75:20130913171649j:plain


デフォルト(全てチェック状態)でダウンロードしたzipファイルを解凍すると、下記のようなフォルダ構成となっています。

  • jquery-ui
    • demos(各機能ごとのhtmlが用意されておりdemoが見れる)
      • accordeion
      • addClass
      • animate
      • autocomplete
      • button
    • external
    • tests
    • themes(機能ごとに用意されたcss
      • images
      • minified(cssのminified版)
    • ui(機能ごとに用意されたjs)
      • i18n(datepicker関連)
      • minified(jsのminified版)

2.知っておくべき各機能のこと(uiフォルダ内の説明)


各機能は以下のような分類となります。
(uiフォルダ配下の各jsファイルの説明と同じことになります。)

ウィジット系

ファイル名 機能
jquery.ui.datepicker.js 日付選択
jquery.ui.dialog.js ダイアログボックス
jquery.ui.menu.js ネストメニュー
jquery.ui.progressbar.js プログレスバー
jquery.ui.slider.js スライダー
jquery.ui.tabs.js タブを要素に追加
jquery.ui.tooltip.js ツールチップ(吹き出し)
jquery.ui.accordion.js アコーディオン
jquery.ui.autocomplete.js 入力候補を表示
jquery.ui.button.js ボタン、チェックボックスラジオボタン
jquery.ui.spinner.js アップダウン・ボタンを伴う数値入力ボックス

エフェクト系

ファイル名 機能
jquery.ui.effect.js
jquery.ui.effect-blind.js
jquery.ui.effect-bounce.js
jquery.ui.effect-clip.js
jquery.ui.effect-drop.js
jquery.ui.effect-explode.js
jquery.ui.effect-fade.js
jquery.ui.effect-fold.js
jquery.ui.effect-highlight.js
jquery.ui.effect-pulsate.js
jquery.ui.effect-scale.js
jquery.ui.effect-shake.js
jquery.ui.effect-slide.js
jquery.ui.effect-transfer.js

インタラクション系

ファイル名 機能
jquery.ui.resizable.js 要素のリサイズ
jquery.ui.selectable.js 複数要素を選択
jquery.ui.sortable.js 要素のソート
jquery.ui.draggable.js ドラッグ機能
jquery.ui.droppable.js ドロップ機能

ほか

jquery.ui.mouse.js dialog.js、draggable.js、droppable.js、resizable.js、selectable.js、slider.js、sortable.jsの依存ファイル
jquery.ui.widget.js accordion.js、autocomplete.js、button.js、dialog.js、draggable.js、droppable.js、menu.js、mouse.js、progressbar.js、resizable.js、selectable.js、slider.js、sortable.js、spinner.js、tabs.js、tooltip.jsの依存ファイル
jquery.ui.position.js autocomplete.js、dialog.js、menu.js、tooltip.jsの依存ファイル
jquery.ui.core.js accordion.js、autocomplete.js、button.js、datepicker.js、dialog.js、draggable.js、droppable.js、menu.js、progressbar.js、resizable.js、selectable.js、slider.js、sortable.js、spinner.js、tabs.js、tooltip.jsの依存ファイル

オールインワン

ファイル名 機能
jquery-ui.js 上記を全て含みます。従って面倒なことを考えたくない場合はこれだけを読み込みます。jquery-ui.jsのコードを見るとわかりますが、上記の各functionが寄せ集められただけの状態です。

3.その他知っておくべき各フォルダやファイルの役割

i18nについて

i18nフォルダへは、日付選択ダイアログを実装するためのdatepicker.jsを使用した際に、各国の言語を指定できるファイルが含まれている。
例えば日本だとjquery.ui.datepicker-ja.jsを読み込むことで「○月○日」や「日月火水木金土」の表示がきちんと日本語で表示される。

datepicker.jsについては「jQueryUI の Datepicker によるカレンダー機能実装が簡単便利」に詳しく書いているので参照ください。

ちなみにi18nフォルダへは

jquery.ui.datepicker-ja.js
jquery.ui.datepicker-en-AU.js
jquery.ui.datepicker-ca.js
jquery.ui.datepicker-cs.js
 :
 :

と多くのファイルが含まれていますが、これらは全て「jquery-ui-i18n.js」というファイルにも含有されています。


minifiedフォルダについて

jQueryUIでは、jsファイルとcssファイルにおいてそれぞれminifiedという軽量なファイル群が用意されています。軽量といっても機能は全く同じであるため、理由がなければminified版を使いましょう。通常の非圧縮版(Uncompressed版)はプログラマがメンテナンスがしやすいようなコードが書かれているため、重たいファイルとなっています。

minifiedファイルも

jquery.ui.accordion.min.js
jquery.ui.autocomplete.min.js
jquery.ui.button.min.js
jquery.ui.core.min.js
 :
 :

と多く(Uncompressed版と同量)のjsファイルがありますが、同フォルダ内のjquery-ui.min.jsが全て含有していますので、面倒な場合はこちらを読み込みましょう。



demosフォルダ

各機能のhtmlファイルが用意されているため、一度こちらで動作を見てながら使い方を学ぶのが一番の近道かと思われます。



以上、jQuery UIのフォルダ構成や役割についてまとめてみましたが、間違いなどございましたらご指摘願います。

あわせて読みたい

jQueryでオシャレかつ機能的なフォーム画面を実装 formly.js - TechNotejQueryでオシャレかつ機能的なフォーム画面を実装 formly.js - TechNote

社内システムだったら必ずフォームのPost送信は多用するし、Webサイトであっても入力画面が存在するところには必ずフォームは必要となる。そんなとき、簡単にオシャ...

jQueryでスライダー機能を実装 - 横幅いっぱいのスライダーFullWideSlider - TechNotejQueryでスライダー機能を実装 - 横幅いっぱいのスライダーFullWideSlider - TechNote

以前のエントリーjQueryでスライダー機能&#...

BootStrap 向けのdatepickerによるカレンダー実装は簡単便利 だけどieには不向きか - TechNoteBootStrap 向けのdatepickerによるカレンダー実装は簡単便利 だけどieには不向きか - TechNote

BootStrap向けのdatepickerによるカレンダー実装が簡単かつ便利だったので使用方法をメモ。1.ダウンロード現在はちゃんと日本語対応版も出ているよう...

コアjQuery+プラグイン/jQuery UI 開発実践技法 (Programmer’s SELECTION)

コアjQuery+プラグイン/jQuery UI 開発実践技法 (Programmer’s SELECTION)

jQuery UI+厳選プラグイン41 実践サンプル集

jQuery UI+厳選プラグイン41 実践サンプル集