今回は,
jQuery UIってなに?
jQuery UIとは,
表1 jQuery UI 1.
ライブラリ | 説明 |
---|---|
Draggables | DOM要素をドラッグできるようにする |
Droppables | DraggableなDOM要素をドロップできるようにする |
Sortables | マウス操作でDOM要素の順番を入れ替えられるようにする |
Selectables | DOM要素をマウスで選択できるようにする |
Resizables | DOM要素の大きさをマウスで変更できるようにする |
Accordion | 折りたたみ可能な領域をサポートするコンポーネント |
Datepicker | 日付選択のためのコンポーネント |
Dialog | 高機能なダイアログコンポーネント |
Slider | スライダーコンポーネント |
Tabs | タブ機能を提供するコンポーネント |
詳細な解説とデモは,
- 参考
今回は,
準備
jQuery UI 1.
アーカイブの内容
アーカイブの内容は以下のようになっています。
表2 jQuery UI 1.
ディレクトリ/ | 説明 |
---|---|
datepicker/ | 「Datepicker」 |
demos/ | jQuery UI 1. |
themes/ | 標準で提供されるテーマ |
GPL-LICENSE. |
GNU General Public License Ver 2のテキスト |
jquery-1. |
jQuery 1. |
jquery. |
座標計算のためのプラグイン |
MIT-LICENSE. |
MIT Licenseのテキスト |
ui. |
「Accordion」 |
ui. |
「Dialog」 |
ui. |
「Draggables」 |
ui. |
「Draggables」 |
ui. |
「Droppables」 |
ui. |
「Droppables」 |
ui. |
マウス操作を管理するプラグイン |
ui. |
「Resizables」 |
ui. |
「Selectables」 |
ui. |
「Slider」 |
ui. |
「Sortables」 |
ui. |
「Sortables」 |
ui. |
「Tabs」 |
ui. |
「Tabs」 |
今回使用する
- themes/
- jquery-1.
2.3. min. js - jquery.
dimensions. js - ui.
mouse. js - ui.
resizable. js - ui.
dialog. js - ui.
draggable. js - ui.
draggable. ext. js - ui.
droppable. js - ui.
droppable. ext. js - ui.
sortable. ext. js - ui.
sortable. js
jQuery UI 1.
ライブラリの設定
ライブラリの各ファイルを,
リスト1 ライブラリファイルの設定
<script type="text/javascript" src="jquery-1.2.3.min.js"></script>
<script type="text/javascript" src="jquery.dimensions.js"></script>
<script type="text/javascript" src="ui.mouse.js"></script>
<script type="text/javascript" src="ui.resizable.js"></script>
<script type="text/javascript" src="ui.dialog.js"></script>
<script type="text/javascript" src="ui.draggable.js"></script>
<script type="text/javascript" src="ui.draggable.ext.js"></script>
<script type="text/javascript" src="ui.droppable.js"></script>
<script type="text/javascript" src="ui.droppable.ext.js"></script>
<script type="text/javascript" src="ui.sortable.js"></script>
<script type="text/javascript" src="ui.sortable.ext.js"></script>
テーマの設定
jQuery UIではテーマがサポートされ,
まず,
リスト2 Floraテーマcssファイルのリンク
<link rel="stylesheet" href="themes/flora/flora.all.css" type="text/css" media="screen" title="Flora" />
body要素にfloraクラスを設定します
リスト3 Floraテーマクラスの設定
<body class="flora">
これで準備は完了です。それでは実装をはじめましょう。