jQuery UIのダイアログを提供します。
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>jQuery UI Dialog - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="/resources/demos/external/jquery.bgiframe-3.0.0.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/demos/style.css" />
<script>
$(function() {
$( "#dialog" ).dialog();
});
</script>
</head>
<body>
<div id="dialog" title="基本的なダイアログ">
<p>
ダイアログで情報を表示する際に便利です。
ダイアログウインドウは移動とリサイズが可能で、また'x'アイコンで閉じることも出来ます。
</p>
</div>
</body>
</html>
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>jQuery UI Dialog - Animation</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="/resources/demos/external/jquery.bgiframe-3.0.0.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/demos/style.css" />
<script>
// increase the default animation speed to exaggerate the effect
$.fx.speeds._default = 1000;
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: "blind",
hide: "explode"
});
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
return false;
});
});
</script>
</head>
<body>
<div id="dialog" title="基本的なダイアログ">
<p>
ダイアログで情報を表示する際に便利です。
ダイアログウインドウは移動とリサイズが可能で、また'x'アイコンで閉じることも出来ます。
</p>
</div>
<button id="opener">ダイアログを開く</button>
</body>
</html>
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>jQuery UI Dialog - Basic modal</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="/resources/demos/external/jquery.bgiframe-3.0.0.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/demos/style.css" />
<script>
$(function() {
$( "#dialog-modal" ).dialog({
height: 140,
modal: true
});
});
</script>
</head>
<body>
<div id="dialog-modal" title="モーダルダイアログ">
<p>
モーダルオーバーレイが敷かれることで、
ページコンテンツが薄暗くなり、よりダイアログが目立つようになります。
</p>
</div>
<p>
テキストのサンプルです。 <a href="http://example.com">リンクのサンプル</a>です。
モーダルダイアログが開くと、オーバーレイの影響でページコンテンツに直接触れなくなります。
</p>
</body>
</html>
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>jQuery UI Dialog - Modal confirmation</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="/resources/demos/external/jquery.bgiframe-3.0.0.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/demos/style.css" />
<script>
$(function() {
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"全て削除": function() {
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
});
</script>
</head>
<body>
<div id="dialog-confirm" title="ゴミ箱を空にしますか？">
<p>
<span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>
削除すると元に戻すことは出来ません。よろしいですか？
</p>
</div>
<p>
テキストのサンプルです。 <a href="http://example.com">リンクのサンプル</a>です。
モーダルダイアログが開くと、オーバーレイの影響でページコンテンツに直接触れなくなります。
</p>
</body>
</html>
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>jQuery UI Dialog - Modal form</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="/resources/demos/external/jquery.bgiframe-3.0.0.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/demos/style.css" />
<style>
body { font-size: 62.5%; }
label, input { display:block; }
input.text { margin-bottom:12px; width:95%; padding: .4em; }
fieldset { padding:0; border:0; margin-top:25px; }
h1 { font-size: 1.2em; margin: .6em 0; }
div#users-contain { width: 350px; margin: 20px 0; }
div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
.ui-dialog .ui-state-error { padding: .3em; }
.validateTips { border: 1px solid transparent; padding: 0.3em; }
</style>
<script>
$(function() {
var name = $( "#name" ),
email = $( "#email" ),
password = $( "#password" ),
allFields = $( [] ).add( name ).add( email ).add( password ),
tips = $( ".validateTips" );
function updateTips( t ) {
tips
.text( t )
.addClass( "ui-state-highlight" );
setTimeout(function() {
tips.removeClass( "ui-state-highlight", 1500 );
}, 500 );
}
function checkLength( o, n, min, max ) {
if ( o.val().length > max || o.val().length < min ) {
o.addClass( "ui-state-error" );
updateTips( "Length of " + n + " must be between " +
min + " and " + max + "." );
return false;
} else {
return true;
}
}
function checkRegexp( o, regexp, n ) {
if ( !( regexp.test( o.val() ) ) ) {
o.addClass( "ui-state-error" );
updateTips( n );
return false;
} else {
return true;
}
}
$( "#dialog-form" ).dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"アカウント作成": function() {
var bValid = true;
allFields.removeClass( "ui-state-error" );
bValid = bValid && checkLength( name, "ユーザ名", 3, 16 );
bValid = bValid && checkLength( email, "メール", 6, 80 );
bValid = bValid && checkLength( password, "パスワード", 5, 16 );
bValid = bValid && checkRegexp( name, /^[a-z]([0-9a-z_])+$/i, "Username may consist of a-z, 0-9, underscores, begin with a letter." );
// From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
bValid = bValid && checkRegexp( email, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "eg. [email protected]" );
bValid = bValid && checkRegexp( password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9" );
if ( bValid ) {
$( "#users tbody" ).append( "<tr>" +
"<td>" + name.val() + "</td>" +
"<td>" + email.val() + "</td>" +
"<td>" + password.val() + "</td>" +
"</tr>" );
$( this ).dialog( "close" );
}
},
"キャンセル": function() {
$( this ).dialog( "close" );
}
},
close: function() {
allFields.val( "" ).removeClass( "ui-state-error" );
}
});
$( "#create-user" )
.button()
.click(function() {
$( "#dialog-form" ).dialog( "open" );
});
});
</script>
</head>
<body>
<div id="dialog-form" title="ユーザー新規登録">
<p class="validateTips">全て必須項目です。</p>
<form>
<fieldset>
<label for="name">名前</label>
<input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />
<label for="email">メール</label>
<input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />
<label for="password">パスワード</label>
<input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />
</fieldset>
</form>
</div>
<div id="users-contain" class="ui-widget">
<h1>登録済みユーザー:</h1>
<table id="users" class="ui-widget ui-widget-content">
<thead>
<tr class="ui-widget-header ">
<th>名前</th>
<th>メール</th>
<th>パスワード</th>
</tr>
</thead>
<tbody>
<tr>
<td>ジョン</td>
<td>[email protected]</td>
<td>johndoe1</td>
</tr>
</tbody>
</table>
</div>
<button id="create-user">ユーザーの新規登録</button>
</body>
</html>
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>jQuery UI Dialog - Modal message</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="/resources/demos/external/jquery.bgiframe-3.0.0.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/demos/style.css" />
<script>
$(function() {
$( "#dialog-message" ).dialog({
modal: true,
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
}
});
});
</script>
</head>
<body>
<div id="dialog-message" title="ダウンロード完了">
<p>
<span class="ui-icon ui-icon-circle-check" style="float: left; margin: 0 7px 50px 0;"></span>
ダンロードが完了しました。
</p>
<p>
現在ストレージを<b>36%使用中です。</b>.
</p>
</div>
<p>
ダイアログで情報を表示する際に便利です。
ダイアログウインドウは移動とリサイズが可能で、また'x'アイコンで閉じることも出来ます。
</p>
</body>
</html>
タイトルバーとコンテツ領域を持ったダイアログです。
このダイアログは次のような機能を提供します。
- マウスドラッグで移動
- ダイアログのサイズを、マウスドラッグで変更
- [☓]アイコンをクリックして、ダイアログを閉じる
- コンテンツ量に応じて、自動的にスクロールバーを表示
- 下部のボタンバーと、モーダル機能をオプションで設定可能
次のようにして、ダイアログを呼び出します。
<div id="dialog" title="ダイアログのタイトル">ダイアログの内容</div>
<script>
$( "#dialog" ).dialog( "open" );
</script>
すぐにダイアログを表示したくない場合は、下記のようにautoOpen:falseを指定します。
<button id="opener">ダイアログを開く</button>
<div id="dialog" title="ダイアログのタイトル">ダイアログの内容</div>
<script>
//すぐにダイアログが開かないようにautoOpen:falseを指定
$( "#dialog" ).dialog({ autoOpen: false });
//ボタンがクリックされたらダイアログを開く
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
</script>
ダイアログを閉じたい場合は、下記のように指定します。
$(foo).dialog('close');
依存関係
| オプション |
説明 |
| autoOpen |
型：Boolean
初期値：true
trueであれば、初期化時に自動的にダイアログが開きます。
falseを指定すると、.open()メソッドが呼ばれるまでダイアログは非表示になります。
|
| appendTo1.10追加 |
型：Selector
初期値："body"
ダイアログ(モーダル時のオーバーレイの要素も)を挿入する要素を指定します。
|
| buttons |
型：Object, Array
初期値：{}
ダイアログに表示されるボタンを指定します。
複数のボタンを指定可能で、ボタンが押下された際の処理をコールバック関数として設定可能です。
ボタンへのアクセスが必要な場合は、eventオブジェクトのtargetで利用することが出来ます。
$(".selector").dialog(
{buttons:[
{ //OKボタンの設定 --start--
text: "Ok",
click: function(){
$( this ).dialog( "close" );
}
} //OKボタンの設定 --end--
]}
);
|
| closeOnEscape |
型：Boolean
初期値：true
ダイアログフォーカス時にESCキーの押下でダイアログを閉じるか否かを決定します。
|
| closeText |
型：String
初期値："close"
ダイアログを閉じるボタンのテキストを指定します。
デフォルトのテーマでは、閉じるボタンは表示サれてないことに注意してください。
|
| dialogClass |
型：String
初期値：""
ダイアログに指定した任意のclass名を追加します。
|
| disabled |
型：Boolean
初期値：false
ダイアログの無効(true)、有効(false)の初期設定を行います。
|
| draggable |
型：Boolean
初期値：true
trueに設定すると、タイトルバーをドラッグしてダイアログを移動することが可能になります。
有効にするためには、
Draggableウィジット
を読み込んでおく必要があります。
|
| height |
型：Number or String
初期値："auto"
ダイアログの高さを決定します。
- Number
- 指定された数値で高さが決定されます。
- String
-
"auto"の文字列のみが指定可能です。
"auto"が指定された場合、コンテンツ量に応じて高さを決定します。
|
| hide |
型：Number or String or Object
初期値：null
hideアニメーションをどのようにするかを設定します。
- Number
-
指定した時間(ミリ秒)でフェードアウトアニメーションを行います。
- String
-
hideアニメーションをjQuery UIのエフェクト名で指定します。
- Object
-
effect, duration, easingのプロパティが提供されています。
effectはhideアニメーションをjQuery UIのエフェクト名(例:"blind")の文字列で指定します。
durationとeasingは省略可能で、省略された場合はデフォルト値が使用されます。
|
| maxHeight |
型：Number
初期値：false
ダイアログをリサイズ出来る高さの最大値(px)を指定します。
$( ".selector" ).dialog({ maxHeight: 600 });
|
| maxWidth |
型：Number
初期値：false
ダイアログをリサイズ出来る幅の最大値(px)を指定します。
$( ".selector" ).dialog({ maxWidth: 600 });
|
| minHeight |
型：Number
初期値：150
ダイアログをリサイズ出来る高さの最小値(px)を指定します。
|
| minWidth |
型：Number
初期値：150
ダイアログをリサイズ出来る幅の最小値(px)を指定します。
|
| modal |
型：Boolean
初期値：false
trueが設定されると、モーダルダイアログとなり、他の要素が無効化されます。
モーダルダイアログはすぐ下にオーバーレイを作成します。
|
| position |
型：Object or String or Array
初期値：{my: "center", at: "center", of: window}
ダイアログをどの場所に表示するかを指定します。
ダイアログは出来るだけ表示されるように調整を行います。
- Object
-
ダイアログを開いた際の位置を指定します。
デフォルトでは、相対位置はwindowですが別のものを指定することも可能です。
詳しくは
jQuery UI Position
を確認してください。
- String 1.10非推奨
-
位置を表す文字列を指定します。
"center", "left", "right", "top", "bottom"の値を指定可能です。
- Array 1.10非推奨
-
x,yのペアの配列を、top,leftからのピクセル位置で指定します。
$( ".selector" ).dialog({
position: {my: "left top", at: "left bottom", of: button}
});
※型にStringとArrayを使用するのは、1.10から非推奨になっています。
//古いAPIのコード(非推奨)
$( "#dialog" ).dialog({
position: "right bottom"
});
//新しいAPIのコード
$( "#dialog" ).dialog({
position: {
my: "right bottom",
at: "right bottom"
}
});
//古いAPIのコード(非推奨)
$( "#dialog" ).dialog({
position: [ 200, 100 ]
});
//新しいAPIのコード
$( "#dialog" ).dialog({
position: {
my: "left top",
at: "left+200 top+100"
}
});
|
| resizable |
型：Boolean
初期値：true
trueが設定された場合、ダイアログのリサイズが可能になります。
リサイズ処理には、
jQuery UI Resizable ウィジット
が読み込まれている必要があります。
|
| show |
型：Number or String or Object
初期値：null
showアニメーションをどのようにするかを指定します。
- Number
-
指定した時間(ミリ秒)でフェードインアニメーションを行います。
- String
-
showアニメーションをjQuery UIのエフェクト名で指定します。
- Object
-
effect, duration, easingのプロパティが提供されています。
effectはhideアニメーションをjQuery UIのエフェクト名(例:"blind")の文字列で指定します。
durationとeasingは省略可能で、省略された場合はデフォルト値が使用されます。
|
| stack1.10削除 |
型：Boolean
初期値：true
他のダイアログの重なりの一番上に表示するか否かを指定します。
ダイアログはフォーカスすると、一番上に表示されます。
|
| title |
型：String
初期値：null
ダイアログのタイトルを指定します。
1.9までは一部のHTMLも使用可能ですが、1.10からはセキュリティの観点からテキストのみとなりました。
HTMLを使用したい場合は、_title()メソッドをオーバーライドするカスタマイズが必要です。
また、nullであればダイアログのソースコードのtitle属性が使用されます。
|
| width |
型：Number
初期値：300
ダイアログの横幅を指定します。単位はpxになります。
|
| zindex1.10削除 |
型：Integer
初期値：1000
ダイアログの初期のzindex値を指定します。
$( ".selector" ).dialog({ zIndex: 20 });
|
| メソッド | 説明 |
| close() |
ダイアログを閉じます。
$( ".selector" ).dialog( "close" );
|
| destroy() |
ダイアログの機能を完全に削除します。
|
| disable() |
ダイアログを無効化します。
|
| enable() |
ダイアログを有効にします。
|
| isOpen() |
戻り値：Boolean
現在、ダイアログが開いているかどうかを調べます。
|
| moveToTop() |
ダイアログを他のダイアログの重なりの一番上に移動します。
|
| open() |
ダイアログを開きます。
|
| option( optionName ) |
戻り値：Object
optionNameに指定したオプションの現在の値を取得します。
- optionName
-
型：
String
取得したいオプションの名前を指定します。
|
| option() |
戻り値：PlainObject
オプションの各キーと値がペアとなったオブジェクトを返します。
|
| option( optionName, value ) |
引数のoptionNameのオプションに値を設定します。
- optionName
-
型：
String
設定したいオプションの名前を指定します。
- value
-
型：
Object
設定したい値を指定します。
|
| option( options ) |
オプションに設定したい各キーと値がペアとなったオブジェクトを指定します。
- option
-
型：
Object
設定したいオプションのキーと名前のペアを指定します。
|
| widget() |
生成されたもの(ダイアログ?)を含むjQueryオブジェクトを返します。
|
| イベント |
説明 |
| beforeClose( event, ui ) |
型：dialogbeforeclose
ダイアログが閉じられる直前にトリガされます。
もし、キャンセルされた場合、ダイアログは閉じられません。
$( ".selector" ).dialog({
beforeClose: function( event, ui ) {}
});
$( ".selector" ).on( "dialogbeforeclose", function( event, ui ) {} );
|
| close( event, ui ) |
型：dialogclose
ダイアログが閉じられた際にトリガされます。
|
| create( event, ui ) |
型：dialogcreate
ダイアログが生成された際にトリガされます。
|
| drag( event, ui ) |
型：dialogdrag
ダイアログがドラッグされている間、トリガされます。
- ui.position
-
ダイアログの現在のCSS position
- ui.offset
-
ダイアログの現在のoffset position
|
| dragStart( event, ui ) |
型：dialogdragstart
ダイアログのドラッグが開始される際にトリガされます。
- ui.position
-
ダイアログの現在のCSS position
- ui.offset
-
ダイアログの現在のoffset position
|
| dragStop( event, ui ) |
型：dialogdragstop
ダイアログのドラッグが終了した際にトリガされます。
- ui.position
-
ダイアログの現在のCSS position
- ui.offset
-
ダイアログの現在のoffset position
|
| focus( event, ui ) |
型：dialogfocus
ダイアログがフォーカスされた際にトリガされます。
|
| open( event, ui ) |
型：dialogopen
ダイアログが開かれた際にトリガされます。
|
| resize( event, ui ) |
型：dialogresize
ダイアログがリサイズされている間、トリガされます。
- originalPosition
-
ダイアログのリサイズ直前のCSS position
- position
-
現在のダイアログのCSS position
- originalSize
-
ダイアログのリサイズ直前のサイズ
- size
-
現在のダイアログのサイズ
|
| resizeStart( event, ui ) |
型：dialogresizestart
ダイアログのリサイズが開始される際に、トリガされます。
- orginalPosition
-
ダイアログのリサイズ直前のCSS position
- position
-
現在のダイアログのCSS position
- originalSize
-
ダイアログのリサイズ直前のサイズ
- size
-
現在のダイアログのサイズ
|
| resizeStop( event, ui ) |
型：dialogresizestop
ダイアログのリサイズが終了される際に、トリガされます。
- orginalPosition
-
ダイアログのリサイズ直前のCSS position
- position
-
現在のダイアログのCSS position
- originalSize
-
ダイアログのリサイズ直前のサイズ
- size
-
現在のダイアログのサイズ
|
Back to top