jQuery UI Dialog

今回は、jQuery UIのDialogについて書きます。

Dialogは、このようなものです↓
f:id:gupuru:20140219233129p:plain
メッセージを表示するものです。

このように書きます。(ボタンを押して、Dialogを表示します)

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>jQuery ui</title>
	<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
	<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
	<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
	
		<button>押して！</button>

		<div id="msg">はろー</div>

<script>
$(function(){

	$('button').click(function() {
			$('#msg').dialog('open');
	 });

	$('#msg').dialog({
		autoOpen:false
	});

});
</script>
</body>
</html>

実行結果↓
f:id:gupuru:20140219233017p:plain

ボタンを押すと、ダイアログ(dialog)が表示するようになっています↓

$('button').click(function() {
			$('#msg').dialog('open');
	 });

こちらで、ダイアログ(dialog)の設定をしています。「autoOpen」とすると、ボタンを押さない限り、表示されないようにしています。

$('#msg').dialog({
		autoOpen:false
	});

ダイアログ(dialog)には、他にも機能があります。
いくつかを紹介します。

①
「title」とすると、タイトルが付けれます。

$('#msg').dialog({
		autoOpen:false,
		title:"タイトル",
	});

f:id:gupuru:20140219234055p:plain

②

$('#msg').dialog({
		autoOpen:false,
		title:"タイトル",
                modal: false
	});

「 modal」とすると、ダイアログ以外が選択できなくなります。背景色も変わります。 f:id:gupuru:20140219234203p:plain

③

	$('#msg').dialog({
		autoOpen:false,
		title:"タイトル",
		modal: false,
		buttons:{
			"OK":function(){
				$(this).dialog('close');
			}
		}
	});

「buttons」とすると、ボタンが付けれます。
f:id:gupuru:20140219233129p:plain

④

$('#msg').dialog({
		autoOpen:false,
		title:"タイトル",
		modal: false,
		buttons:{
			"OK":function(){
				$(this).dialog('close');
			}
		},
		show: {
                    effect: "blind",
                    duration: 1000
                 },
                hide: {
                    effect: "explode",
                    duration: 1000
               }
      
	});