JavaScript + Ajax 実践サンプル集 - Dialog Default Functionality (標準)

Dialog Default Functionality (標準)　《プログラマーがネットで副収入を得る方法とは》

説明補足説明コード関連書籍コメント投稿

このサンプルは、jQuery UIのdialog()プラグインを利用してヘルプ情報などのダイアログを表示します。 [Open dialog]ボタンをクリックするとダイアログが表示されます。ダイアログのヘッダーをドラッグすると任意の場所に移動することができます。ダイアログ右下のハンドラ（三角形）をドラッグするとリサイズすることができます。

このサンプルを編集して試してみる

IE6にも対応させるには、dialog()の引数に「bgiframe: true」を追加する必要があります。この場合、ダイアログをiframe上に表示します。IE6でselect要素がダイアログの上に表示される不具合をiframeで解決しています。

$('#dialog').dialog({
  bgiframe: true, // for IE6 
  autoOpen: false // hide dialog
});

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>jQuery UI dialog - Default functionality</title>
  <link href="jQuery/UI/ui.all.css" rel="stylesheet" type="text/css" />
  <link href="jQuery/UI/demos.css" rel="stylesheet" type="text/css" />
  <style type="text/css">
    #dialog p { color: #babaab;  }
		.ui-button { outline: 0; margin:0; padding: .4em 1em .5em; text-decoration:none;  !important; cursor:pointer; position: relative; text-align: center; }  
  </style>
  <script src="jQuery/jquery-1.3.1.js" type="text/javascript"></script>
  <script src="jQuery/UI/ui.core.js" type="text/javascript"></script>
  <script src="jQuery/UI/ui.draggable.js" type="text/javascript"></script>
  <script src="jQuery/UI/ui.resizable.js" type="text/javascript"></script>
  <script src="jQuery/UI/ui.dialog.js" type="text/javascript"></script>
  <script src="jQuery/external/bgiframe/jquery.bgiframe.js" type="text/javascript"></script>

$(function() {
	    $('#dialog').dialog({
	      bgiframe: true, // for IE6 
	      autoOpen: false // hide dialog
      });

$('#open-dialog').click(function() {
        $('#dialog').dialog('open');
      })
	    .hover(
		    function() {
		      $(this).addClass("ui-state-hover");
		    },
		    function() {
		      $(this).removeClass("ui-state-hover");
		    })
	    .mousedown(function() {
	      $(this).addClass("ui-state-active");
	    })
	    .mouseup(function() {
	      $(this).removeClass("ui-state-active");
	    });

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

<div id="dialog" title="Basic dialog">
    <p>
      これはヘルプ情報などを表示するためのデフォルトダイアログです。
      このダイアログは移動したり、リサイズすることができます。
      右上の[X]ボタンをクリックするとダイアログを閉じます。
    </p>
  </div>

<button id="open-dialog" type="button"
    class="ui-button ui-state-default ui-corner-all">Open Dialog</button>

<div class="hiddenInViewSource" style="padding:20px;">
    <a href="http://jsajax.com">jsajax.com</a>
    <form action="">
	    <input value="text input" /><br />
	    <input type="checkbox" />checkbox<br />
	    <input type="radio" />radio<br />
	    <select>
		    <option>select</option>
	    </select><br /><br />
	    <textarea>textarea</textarea><br />
    </form>
  </div>

</div>

</body>
</html>