ホーム > dialog (全3件)
  • ダイアログボックスのサイズを調整する

    初期化時にダイアログボックスのサイズを設定する。

    /* 幅（省略時は300）と高さ（省略時は'auto'）を指定 */
$( '#dialog1' ).dialog( { width: 500, height: 400 } );

/* 最小幅（省略時は150）と最少高さ（省略時は150）を指定 */
$( '#dialog1' ).dialog( { minWidth: 400, minHeight: 200 } );

/* 最大幅（省略時はfalse）と最大高さ（省略時はfalse）を指定 */
$( '#dialog1' ).dialog( { maxWidth: 800, maxHeight: 600 } );

/* リサイズ不可（省略時はtrue（リサイズ可））に設定 */
$( '#dialog1' ).dialog( { resizable: false } );

    jQuery UIのダイアログボックスで、サイズに関連するプロパティはこの7種類。幅および高さで指定する値はピクセル値（数値だけでよい）、resizableにはtrueまたはfalseを指定する。

    キーワード:
  • ダイアログボックスをクローズする

    ダイアログボックス表示している内容を非表示にする。

    $( '.ui-dialog-content' ).dialog( "close" );

    表示しているダイアログボックスをクルーズする場合は、全体のdiv要素であるui-dialogクラスではなく、表示した時と同じdiv要素となる。ここではui-dialog-contentクラスで検索しているが、IDでも構わない。

    キーワード:
  • ダイアログボックス（ポップアップ）を表示する

    idがdialog1のdiv要素をダイアログボックスのようにポップアップ表示する。

    $( '#dialog1' ).dialog( { modal: true } );

<!-- div要素 -->
<div id="dialog1" title="ここにタイトル" style="display: none;">
ここに内容
</div>

    表示するdiv要素は非表示状態で用意し、title属性にはダイアログボックスのタイトルバーのテキストを指定すること。表示しているダイアログボックスは、ui-dialogクラスのdiv要素で、その中にはタイトルバーを表示するui-dialog-titlebarクラスのdiv要素と、中身のui-dialog-contentクラスのdiv要素が含まれる。

    キーワード:
 
 
ツールバーへスキップ