× 無料のユーザー登録をすると学習状況を管理することができるようになります

jQuery UI入門 (全19回)

jQueryをさらに拡張したjQuery UIを使えば、高度にインタラクティブなWebサービスのインターフェースを作ることができます。

このレッスンでは jQuery 1.8.0 / jQuery UI 1.8.23 を使用しています。

#01 jQuery UIとは何か?
2012年9月25日
jQuery UIのテーマを選択できるサイトはこちらです。ここから既存のテーマを選ぶこともできますし、各部品をカスタマイズしたあとにダウンロードすることも可能です。
http://jqueryui.com/themeroller/
2012年9月11日
jQuery UIの公式サイトはこちらです。
http://jqueryui.com/
#02 ひな形ファイルを作ろう
2015年1月25日
2015/1/25現在のjQuery UIでは動画のようなフォルダ構成になっておりません。
ダウンロードしたファイルからjquery-ui.js、jquery-ui.cssを読み込んでも良いですが、以下のようにjQueryのサイトから引っ張ってくることも可能です。
その場合はソースコードの6-8行を以下のように書き換えてください。

<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
2012年9月11日
jQuery UIはGoogleでもホストされているので次のコードで読み込むことが可能です。
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
詳細は以下から確認してください。
https://developers.google.com/speed/libraries/devguide?hl=ja#jquery-ui

ただし、これを読み込んだだけではThemeを使うWidgetsが利用できないので、それらを使いたい場合は公式サイトから必要なファイルを一式ダウンロードして使うのがいいでしょう。
逆にSortableやDraggableといったThemeを使わない機能だけ使いたい場合はGoogleから読み込む方が便利な場合もあるので覚えておきましょう。
#18 Tabsを使ってみよう
2013年9月9日
jQuery UI 1.10では「selected」が「active」に変更されています。正しく動作させるには次のようにしてください。
$(function() {
    $('#tabs').tabs({
        active: 1
    });
});
よく詳しくはAPIドキュメントを御覧ください。
http://api.jqueryui.com/tabs/
#19 Effectを使ってみよう
2012年10月31日
動画中で紹介されているEffectsの詳細オプションはこちらで見ることができます。
http://docs.jquery.com/UI/Effects
2012年9月5日
jQuery 標準の animate では色のアニメーションができませんが、jQuery UI を利用すると animate メソッドで背景色や文字色など、色のアニメーションができるようになります。

jQuery UI - Animate Demos & Documentation
http://jqueryui.com/demos/animate/