Eyes, JAPAN Blog > jQuery UI

jQuery UI

makuta

この記事は1年以上前に書かれたもので、内容が古い可能性がありますのでご注意ください。

みなさん、こんにちは。
今回は、以前使って便利だと感じたjQuery UIについて紹介しようと思います。
jQuery UIのページ: http://jqueryui.com/
jQuery UIは、jQueryのユーザインタフェース用のライブラリです。自分の作ったHTMLにカレンダー、タブ、アコーディオン、スライダーなど多様なUIを簡単に導入することができます。

画面に動きをつけたいと思ったとき、Flashなどを使わないでクリックなどのマウスの操作でHTMLが動的に変化するものを自前で作ろうとすると結構大変です。また、画面に動きをつけるのにJavaScriptを使おうとすると、ブラウザやブラウザのバージョンによってはJavaScriptが動いたり動かなかったりするので、すべてに対応させるのは大変です。このような不便を解決してくれるのが、jQueryという、JavaScriptのライブラリです。ですが、「クリックすると動く」というような、動きのある画面(動的なコンテンツ)を作るには、プログラムに近いスクリプトを書く必要があり、プログラミングの技術や動的なコンテンツを完成させるのに相当な時間がかかってしまいます。
これはとても大変なので、簡単に入れることができるのがjQuery UIです。

jQuery UIは、自分の作ったHTMLに少し手を加えるだけで、かっこいい動作を簡単に入れることができます。また、様々なデザインのテンプレートが用意されていて、それを使うこともできますし、自分でカスタマイズしてオリジナルのものを作ることもできます。
サンプル:http://jqueryui.com/themeroller/

私がすごい、便利だと思ったもの

  • カレンダーでの日付入力:http://jqueryui.com/demos/datepicker/default.html
  • 並び替え:http://jqueryui.com/demos/sortable/default.html
  • アコーディオン(タイトルをクリックすると、本文が開く):http://jqueryui.com/demos/accordion/default.html

実際に私はjQuery UIを使って、カレンダーから日付を入力する機能を入れたのですが、とても簡単に、短時間で入れることができました。デザインのテンプレートもたくさんの種類があり、その中から選んで使うことができるので、自分好みのものを使うこともできると思います。

今回は、とても便利なjQuery UIの紹介でした。

  • このエントリーをはてなブックマークに追加

Comments are closed.