Warning: include_once(): http:// wrapper is disabled in the server configuration by allow_url_include=0 in /home/users/2/moriya-h5/web/confrage/jQuery/jquery3001.html on line 2

Warning: include_once(http://www.confrage.com/bin/header.php): failed to open stream: no suitable wrapper could be found in /home/users/2/moriya-h5/web/confrage/jQuery/jquery3001.html on line 2

Warning: include_once(): Failed opening 'http://www.confrage.com/bin/header.php' for inclusion (include_path='.:/usr/local/php/5.6/lib/php') in /home/users/2/moriya-h5/web/confrage/jQuery/jquery3001.html on line 2
jQuery UIとプラグインライブラリ | 株式会社CONFRAGE
Warning: include_once(/home/sites/heteml/users/m/o/r/moriya-h5/web/confrage/bin/menu.php): failed to open stream: No such file or directory in /home/users/2/moriya-h5/web/confrage/jQuery/jquery3001.html on line 22

Warning: include_once(): Failed opening '/home/sites/heteml/users/m/o/r/moriya-h5/web/confrage/bin/menu.php' for inclusion (include_path='.:/usr/local/php/5.6/lib/php') in /home/users/2/moriya-h5/web/confrage/jQuery/jquery3001.html on line 22
プラグインライブラリ
本サイトでご紹介したjQueryは、基本的な使い方です。
スタイルシートやAjaxを駆使することで、より高度なWEBアプリケーションを作成することも可能です。
また、高度な処理を「プラグイン」としてまとめ、別のWEBアプリケーションで利用することが可能です。
この「プラグイン」を実現するため、「jQueryオブジェクト 独自メソッドの拡張」には関数が用意されています。
また「プラグイン」の多くは、ライブラリとして公開されています。
jQuery Plugins(英語)
また、その中でもUI(ユーザーインターフェース)に特化したプラグインが存在します。
以下は、このjQuery UIプラグインをご紹介します。
jQuery UI
jQuery UIは、ユーザーインターフェースに特化したプラグインです。
ここでは、主なユーザーインターフェースを簡単にご紹介します。
jQuery UIは、以下のサイトからダウンロード可能です。
jQuery UI(英語)
※仕様が変わる場合がございますので、詳細は上記でご確認ください。
対話型ユーザインターフェース
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();

実装例

実はリンクです。

ここは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');
});

実装例

ここがダイアログです。

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

 
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);
});

実装例

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

リスト12. Slider

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

実装例

 
Tabs
タブ機能を提供します。

リスト13. Tabs

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

実装例

タブ-1です。

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

タブ-2です。

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

タブ-3です。

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

ユーティリティ
Position
位置座標をサポートします。
エフェクト

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

エフェクト

ここが動きます。

エフェクトの種類:

エフェクトの実行

Back to top

Information

Warning: include_once(/home/sites/heteml/users/m/o/r/moriya-h5/web/confrage/bin/side_bar.php): failed to open stream: No such file or directory in /home/users/2/moriya-h5/web/confrage/jQuery/jquery3001.html on line 410

Warning: include_once(): Failed opening '/home/sites/heteml/users/m/o/r/moriya-h5/web/confrage/bin/side_bar.php' for inclusion (include_path='.:/usr/local/php/5.6/lib/php') in /home/users/2/moriya-h5/web/confrage/jQuery/jquery3001.html on line 410

Warning: include_once(/home/sites/heteml/users/m/o/r/moriya-h5/web/confrage/bin/seo.php): failed to open stream: No such file or directory in /home/users/2/moriya-h5/web/confrage/jQuery/jquery3001.html on line 685

Warning: include_once(): Failed opening '/home/sites/heteml/users/m/o/r/moriya-h5/web/confrage/bin/seo.php' for inclusion (include_path='.:/usr/local/php/5.6/lib/php') in /home/users/2/moriya-h5/web/confrage/jQuery/jquery3001.html on line 685