Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

jQuery UIのインタラクションを使ってみよう

jQuery UI/プラグインの活用(1)

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2010/07/27 14:00

 本記事では、JavaScriptライブラリの中でも人気が高まりつつある「jQuery UI」のインストールから、要素のドラッグ&ドロップ、リサイズ、並べ替えについて取り上げます。

目次

はじめに

 JavaScriptライブラリの中でも人気が高まっているjQueryは、本体に機能追加できる手段が標準で備わっており、「プラグイン」という拡張スクリプトが提供されています。

 jQuery Plugin公式サイトではアニメーション効果やフォーム操作補助、メディアの操作についてなどの1,000を超えるプラグインが公開されており、自作したプラグインを登録することも可能です。また、jQueryの機能を拡張し、マウス操作やアニメーション機能などユーザインタフェースに特化したライブラリであるjQuery UIがあります。jQuery PluginもjQuery UIも、jQueryに加え、別途ダウンロードおよびインストールする必要があります。

 jQuery UIで提供されている機能を、大きく分類すると表1のようになります。

表1:jQuery UIの分類
分類名 内容
インタラクション ドラッグ&ドロップ、リサイズなど
ウィジェット アコーディオン、ダイアログ、タブなど
ヴィジュアル効果 アニメーション機能、エフェクト機能の強化など

 第1回では、jQuery UIのインストールからインタラクションにあたる要素のドラッグ&ドロップ、リサイズ、並べ替えについて取り上げます。

対象読者

  • jQuery UIに興味があり、使ってみたいと思っている方

必要な環境と準備

jQuery UIのダウンロード

 執筆時点のjQuery UIの最新版は、1.8.2です。jQuery UIのサイトからダウンロードしてください。

 jQuery UI 1.8.2はjQuery 1.4.Xに対応しています。ダウンロードしたファイル(jquery-ui-1.8.2.custom.zip)を展開すると、以下のようなフォルダおよびファイルが作成されます。

表2:jquery-ui-1.8.1.custom.zipの展開後
フォルダ/ファイル名 概要
css テーマに関連するスタイルシートと画像が含まれている
development-bundle 開発者向けのドキュメントやデモ、非圧縮のライブラリなどが含まれている
js jQueryとjQuery UIの本体が含まれている
index.html jQurey UIのサンプル一覧

jQuery UIの使い方

 jQuery UIを利用するには、「js」と「css」のフォルダをドキュメントルート内にコピーし、以下の3種類のファイルをロードします。

  1. jQueryライブラリ
  2. jQuery UIライブラリ
  3. jQuery UIのテーマのスタイルシート(必要時のみ)

 本稿では取り上げませんが、jQuery UIでは標準で提供されているコンポーネントに対して、フォントのスタイルやテーマなどをカスタマイズすることが可能です。詳しくはjqueryui.comを参照してください。

[リスト1]jQuery UIの利用方法
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.2.custom.min.js"></script>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.2.custom.css" rel="stylesheet" />

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

著者プロフィール

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

  • WINGSプロジェクト asa(asa)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2017年5月時点での登録メンバは52名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂き...

バックナンバー

連載:jQuery UI/プラグインの活用

もっと読む

All contents copyright © 2005-2018 Shoeisha Co., Ltd. All rights reserved. ver.1.5