See our environment setup and information on running tests. | In particular check out the Coding standards datepicker();を実行するだけでカレンダーができます。, そのほかのWidgetも、ほとんどが同じように要素を選択してメソッドを実行するだけで作成できるので非常に簡単です。, jQueryのアニメーション効果を拡張するのが、jQuery UIのEffectsです。show()、hide()のアニメーション効果などが追加されます。 このように、簡単にアニメーション効果つきのUIが作成できるのでjQuery UIは非常に便利です。 一方で、JavaScriptファイルの読み込みが増える、拡張がしにくいなどのデメリットもあるので、導入する時はさまざまな面から検討したほうが良いでしょう。, Copyright © Members Co.,Ltd. jQuery UI 主要分为3个部分：交互、微件和效果库。 交互（Interactions） 交互部件是一些与鼠标交互相关的内容，包括缩放（Resizable）, 拖动（Draggable）, 放置（Droppable）, 选择（Selectable）, 排序（Sortable）等。 小部件 Run the unit tests manually with appropriate browsers and any local web server. Stable (Themes) (1.12.1: for jQuery1.7+) You can createsortable lists, resizable elements, drag & drop behaviors and more with justa few lines of code. jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of jQuery. You can use the commit For more information, see the contributing page. jQuery UI逆引きリファレンス。jQuery UIの基本機能を目的別リファレンスの形式でまとめる連載スタート。jQuery UIで提供されているコンポーネントと、基本的な利用法を説明する。 GitHub is home to over 50 million developers working together to host and review code, manage projects, and build software together. jQuery License Draggable 2. If you're having trouble downloading a custom package or theme, please report the issue on GitHub. Interactions add basic mouse-based behaviors to any element. Sortable Interactions also make great building blocks for more complexwidgets and applications. jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of jQuery. The jQuery UI Widget Factory is an extensible base on which all of jQuery UI's widgets are built. and Commit Message Style Guide. 1. jQuery UIの基本機能を目的別リファレンスの形式でまとめる連載スタート。jQuery UIで提供されているコンポーネントと、基本的な利用法を説明する。, このシリーズでは、何回かにわたって、jQuery UIの基本機能を目的別リファレンスの形式でまとめていきます。, jQuery UIは、jQueryを拡張するライブラリ（プラグイン）の一種で、名前のとおり、ユーザー・インターフェイス（UI）に関わる機能を提供します。プラグインとはいえ、開発チームにはjQuery本家のメンバーも参加しているオフィシャルな存在であり、jQueryベースでリッチなUIを持ったWebアプリを開発するならば、まずjQuery UIの利用を検討することをお勧めします。, jQuery UIのコンポーネントは、大きくInteractions（インタラクション： マウスによる汎用的な対話処理）、Widgets（ウィジェット： 定型的なUI部品）、Effects（エフェクト： jQueryのアニメーション拡張）に分類できます。, jQuery UIで提供されているコンポーネントには、以下のようなものがあります。, なお、jQuery本体については、別稿「＠IT Insider.NET： jQuery逆引きリファレンス」でも解説しています。併せてご利用ください。, jQuery UIでは、動作に必要なライブラリ／スタイルシートをCDN（Content Delivery Network）で提供しています。「事前準備が不要」「（一般的には）パフォーマンスに優れる」という理由から、まずはこちらでの利用をお勧めします。, 冒頭述べたように、jQuery UIはjQueryのプラグインですので、ライブラリをインポートするに当たっては、jQuery→jQuery UIの順番で記述します。, また、要素の太字部分は、テーマの名前を表しています（ここでは「cupertino」）。テーマとは、ウィジェットのスタイルを決めるためのスタイルシートと関連する画像リソースの集合のことです。jQuery UIでは標準で24のテーマを用意しており、これらを差し替えることで自在にウィジェットのデザインを変更できます。利用するテーマは、以下の表の中から選択できます。, もちろん、あらかじめダウンロードしたライブラリをインポートすることで、オフライン環境でjQuery UIを利用することもできます。ダウンロード・ページは、以下です。, 利用する機能があらかじめ特定できる場合には、不要な機能のチェックを外すことで、ライブラリのサイズを抑えることも可能です。特定の機能をチェックすると、関連する機能には強制的にチェックが入りますので、コンポーネント同士の依存関係を気にする必要はありません。もちろん、慣れないうちは無条件に全てのコンポーネントをダウンロードしても構いません。, ダウンロードしたパッケージには、ドキュメントやデモなどが含まれていますが*2、動作に最低限必要となるのは、以下のファイルです。, これらのファイルを任意のフォルダーに配置したうえで、以下のようにライブラリ／スタイルシートをインポートします（パスは配置先に応じて読み替えてください）。, なお、ダウンロード・パッケージを利用するのは、オフライン環境の場合だけではありません。CDNに障害があってファイルを取得できなかった場合に備えて（フォールバック）、以下のようなコードを記述すると、より安全です。, これによって、window.jQuery／window.jQuery.uiが存在しない場合（＝CDNからのデータ取得に失敗して、jQuery／jQuery UIを利用できない場合）に、ローカルからライブラリをインポートできます。, 前述したようにテーマは標準で24種類が用意されており、CDNを利用するならばURLを変更することで、パッケージをダウンロードするならばダウンロード・ページ下の［Theme］欄から（次の画面を参照）、それぞれ選択できます。, もっとも、状況によっては「標準以外のデザインを用意したい」というケースもあるはずです。そのような場合のために、jQuery UIでは「Theme Roller」というブラウザ上で動作するアプリを用意しています（次の画面を参照）。ダウンロード・ページ下部の［design a custom theme］リンクから起動することもできます。, Theme Rollerでは、ページの左側のタブ・パネル（＝上の画面では黒い領域）から［Gallery］タブを選択することで、まず標準のテーマを選択し、カスタマイズしていくのが一般的です（一からデザインしても構いませんが、イメージに近いものをカスタマイズした方が作業は容易です）。, 細かなデザイン（部位ごとのフォントやカラーリング、角丸など）は、［Roll Your Own］タブから指定できます。ここで指定した内容は、ページの中央～右側に配置されたサンプル・ウィジェットにリアルタイムで反映されますので、見栄えを確認しながら作業を進められます。, デザインが完了したら、［Download theme］ボタンをクリックすることで、元のダウンロード・ページに戻りますので、ファイル一式をダウンロードしてください。, ※以下では、本稿の前後を合わせて5回分（第1回～第5回）のみ表示しています。 連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。, 日付選択ボックスを実装するためのjQuery UIウィジェット「DatePicker」の基本的な使い方を説明。オプションにより、挙動や見栄えをさまざまにカスタマイズできる。, パネルの端に配置されたタブで内容を切り替えられるタブ・パネルを簡単に実装できる、jQuery UIのTabsウィジェットの基本的な使い方を説明する。, Tabsウィジェットのイベントやメソッドを利用しながら、タブ・パネルのさまざまな制御方法を紹介する。, 指定された要素配下の子要素群をドラッグ操作で並べ替え可能にするSortableウィジェットの基本的な使い方を説明する。, CDNの障害時にローカルからのインポートに切り替えるより安全なコード例（HTML）, "http://code.jquery.com/ui/1.10.3/themes/, "http://code.jquery.com/jquery-1.9.1.min.js", "http://code.jquery.com/ui/1.10.3/jquery-ui.min.js", "css/smoothness/jquery-ui-1.10.3.custom.min.css", '