トップ  >  2011年  >  2011.10.15 [jQuery] jQuery UI でダイアログ
features
[jQuery] jQuery UI でダイアログ
2011.10.15記
ダイアログが使いたかったので試してみた

HTML

<input type="button" id="dialogOpen" value="ダイアログを表示" />
<div id="dialogTEST">
  名前:<input type="text" />
  <input type="button" value="ボタン" />
</div>

head部への記述

<link rel="stylesheet" type="text/css" media="all" href="./files/jquery-ui-1.8.16.custom.css" />
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("jquery", "1");
  google.load("jqueryui", "1");

  $(function(){
    $('#dialogTEST').dialog({
      modal:true,
      autoOpen:false,
      title:'テスト',
      closeOnEscape: false,
      buttons: {
          '* 注意 *': function() {
              alert('注意');
          }
      }
    });
    $('#dialogOpen').click(function(){
      $('#dialogTEST').dialog('open');
    });
  });
</script>
$(要素).dialog(オプション); でダイアログを作成し、$(要素).dialog('open');(autoOpen:trueの場合はなくてもよいですね) で表示させます。

オプションについて(「...」デフォルト)
draggable ドラック&ドロップの可能, 「true」,flase
autoOpen ページ表示時にダイアログを開く, 「true」,flase
resizable リサイズの可能, 「true」,flase
width 幅, 「300」
height 高さ, 「'auto'」
modal ダイアログ以外のコントロールを不可, true, 「false」
title タイトル, 「''」
position 表示位置, 「'center'」, 'left', 'right', 'top', 'bottom', 配列['right','top'], 配列[数値x,y]左上からピクセル指定
buttons ボタンアクション, ボタン名と動作function()を指定
closeOnEscape ESCキーでダイアログを閉じる, 「true」,false
ダイアログで書き込んだデータの取得は、formタグ使った場合は送信してしまえばよいけど、ページ遷移なしで JavaScript での取得などを考える場合は、もう少し考える必要がある
前
2011.09.15 JavaScript WYSIWYG HTML Editor
カテゴリートップ
2011年
次
2011.08.15 Tour de France 2011 #98

PAGE TOP 
メニュー
サイト内検索
ログイン
ユーザ名:

パスワード:


パスワード紛失

新規登録
Copyright(C) 1999-2017 keibunsya all right reserved.