対話型ユーザインターフェース

Draggable

要素をドラッグできるようにします。

リスト1. Draggable

jQuery('#Sample21').draggable();

実装例

ここをドラッグ
してください。

　

Droppable

要素にドロップできるようにします。

リスト2. Droppable

jQuery('#Sample22').droppable({
	drop:	function(evt, ui){
				alert('ドロップされました!!');
			}
});

実装例

上の青いBoxをここにドラッグしてください。
ここをドロップしてください。

　

Resizable

要素の大きさをマウスで変更できるようにします。

リスト3. Resizable

jQuery('#Sample23').resizable();

実装例

このBoxはサイズ変更可能です。

　

Selectable

要素をマウスで選択できるようにします。

リスト4. Selectable

jQuery('#Sample24').selectable();

実装例

1. 大阪府
2. 京都府
3. 兵庫県

※県名をクリックしてください。

　

Sortable

要素をマウスでドラッグして、入れ替えられるようにします。

リスト5. Sortable

jQuery('#Sample25').sortable();

実装例

1. 大阪府
2. 京都府
3. 兵庫県

※県名を入れ替えてください。

ウィジェット

Accordion

折りたたみ可能な領域をサポートします。

リスト6. Accordion

jQuery('#Sample26').accordion({
	header : 'h5'
});

実装例

見出し1

内容-1 内容がここに入ります。

見出し2

内容-2 内容がここに入ります。

見出し3

内容-3 内容がここに入ります。

　

Autocomplete

自動補完します。

リスト7. Autocomplete

jQuery('#inp27').autocomplete({
	source: prefectures
});

実装例

都道府県名:

※都道府県名を最初の漢字1文字を入力して「↓」を押してみてください。

　

Button

ボタン化します。

リスト8. Button

jQuery('#Sample28 *').button();

実装例

元々buttonです 実はリンクです。

ここはP要素です。

※上は要素が異なるのですが、全部ボタンになります。

　

Datepicker

日付選択のためのカレンダーウィジェットです。

リスト9. Datepicker

jQuery('#inp29').datepicker();

実装例

日付を選択してください:

　

Dialog

ダイアログウィジェットです。

リスト10. Dialog

jQuery('#Sample210').dialog({
	autoOpen : false,
	modal : true,
	buttons : {
		OK :	function(){
			jQuery(this).dialog('close');
				}
	}
});
jQuery('button.Sample210').click(function(){
	jQuery('#Sample210').dialog('open');
});

実装例

ここがダイアログです。

ここにダイアログの内容が入ります。
色もこのように変更できます。

リスト10の実行

　

Progressbar

処理の進捗状況を視覚的に表示するプログレスバーウィジェットです。

リスト11. Progressbar

jQuery('#Sample211').progressbar();
jQuery('button.Sample211').click(function(){
	var value = 0;
	var timer = setInterval(function(){
		if(value >= 100) {
			clearInterval(timer);
			value = 0;
		} else {
			value = value + 1;
		}
		$("#Sample211").progressbar("option", "value", value);
	}, 1000);
});

実装例

リスト11の実行

　

Slider

スライダーウィジェットです。

リスト12. Slider

jQuery('#Sample212').slider();

実装例

　

Tabs

タブ機能を提供します。

リスト13. Tabs

jQuery('#Sample213').tabs();

実装例

• タブ-1
• タブ-2
• タブ-3

タブ-1です。

ここにタブの内容が入ります。

タブ-2です。

ここにタブの内容が入ります。

タブ-3です。

ここにタブの内容が入ります。

ユーティリティ

Position

位置座標をサポートします。

エフェクト

視覚効果、アニメーション効果を加えます。
以下は、エフェクトのデモンストレーションです。