jQueryはネットに落ちている様々なプラグインを使って、自分では難しいコードを書くことなく、まさざまな機能を簡単に導入できるという点が魅力の一つですが、世界中の有志の方々が提供しているプラグイン以外にも、jQuery公式のユーザインターフェース(UI)用ライブラリ「jQueryUI」があります。
jQueryUIはいろいろなUIを簡単に導入できる便利なライブラリ(というかプラグイン群)です。
有志の方々によるjQueryプラグインをダウンロードすると、jQueryライブラリとともにこのjQueryUIがセットになっている場合もあります。
具体的に何ができるかといえば、たとえば、アコーディオンやタブなどのUI、アニメーションのエフェクト、ドラッグ&ドロップなどの動きの効果を利用できるようになります。
何種類かテーマ(色の組み合わせなど)があって、特にデザインしなくても、それっぽいページを作ろうと思えば作れたりします。
さて、jQueryUIの使い方ですが、解説を始めるとかなり長くなるので、詳しい説明は割愛します。
その代り、どうやって利用したらいいのか、やりたいことを実現するための方法をどうやって調べたらいいのか、とっかかりになりそうなことを説明しておきます。
jQuery UI Download Builderからjquery-ui-x.x.x.custom.zip(xはバージョン番号・・・最新バージョンが妥当)をダウンロードし、展開したら、必要なファイルを適切なディレクトリに格納してください。
使いたい機能に対応したファイルのみでよいですが、読み込む順番とかいろいろめんどくさかったり、良くわからない場合はjQuery UI Download Builderの最新バージョンでComponentsで全部チェックが入っている状態でダウンロードしてください。→参考
xは正の整数でバージョン番号を表す(2015/06現在、最初のxは1のみ)。
もちろん、jQueryライブラリも必須です。
jQueryUIのバージョンによっては古いjQueryだとうまく動作しない場合もあるので、バージョンの組み合わせに注意してください。
ダウンロード方法によって、バージョン番号とかが付いていないパターンもあります。minは改行などをなくしてファイルサイズを小さくしているタイプのファイルです。
そして、headタグ内でファイルを読み込みます。以下はその例です。
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" /> <script src="http://code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script> <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js" type="text/javascript"></script>
この例では、jqueryのサイトから直接ファイルを読み込む方法で記述していますが、ディレクトリに格納した場合はファイルパスは適宜修正してください。
バージョンおよびその組合せは、この限りではないです。
cssファイルを読み込んでいることからわかるように、jQueryUIではある程度デザインが設定されています。
何種類かテーマ(色の組み合わせなど)があるので、うまく利用してください。
細かいデザインの変更は、別途独自のcssファイルを用意して、カスタマイズします。
入門解説サイトとか、チュートリアルがネットに落ちているので、google先生に訊いてください。
以下は代表的なものです。
jQueryUIのバージョンが古いもので解説されているものもあります。
その場合は、最新のものと若干使い方が違っていたりするので、解説通りにやってもうまくいかないことがあります。
何度トライしてもうまくいかないときは、google先生に訊いてみてください(以下のリファレンスも同様です)。
最初のリンクのものが、見やすくて使い勝手がよいかなーと思います。
jQueryUIは、jQuery(js)と同様な感じで記述できるので、それほど難しくないと思います。
オプションとかはよくわからなかったりするかもしれませんが、ためしにいろいろやってみると、わかるようになるのではないかな・・・。