jQuery EasyUI ウィンドウプラグイン -Dialog ダイアログ

jQuery EasyUI 插件jQuery EasyUI プラグイン

$.fn.window.defaults から拡張されています。$.fn.dialog.defaults でデフォルトの defaults を上書きします。

ダイアログは特別なタイプのウィンドウで、上部にツールバー、下部にボタンバーがあります。デフォルトでは、ダイアログにはヘッダー右側に表示される閉じるツールが1つだけあります。ユーザーはダイアログの動作を設定して、他のツールを表示できます（例: 折りたたみ可能 collapsible、最小化可能 minimizable、最大化可能 maximizable など）。

依存

  • window
  • linkbutton

使用法

マークアップを使用して既存の DOM ノードからダイアログを作成します。次の例では、サイズ変更可能なモーダルダイアログを示しています。

<div id="dd" class="easyui-dialog" title="My Dialog" style="width:400px;height:200px;"
    data-options="iconCls:'icon-save',resizable:true,modal:true">
    Dialog Content.
</div>

JavaScript を使用してダイアログを作成します。ここではモーダルダイアログを作成し、'refresh' メソッドを呼び出して ajax でその内容を読み込みます。

<div id="dd">Dialog Content.</div>

$('#dd').dialog({
    title: 'My Dialog',
    width: 400,
    height: 200,
    closed: false,
    cache: false,
    href: 'get_content.php',
    modal: true
});
$('#dd').dialog('refresh', 'new_content.php');

プロパティ

このプロパティはウィンドウ（window）から拡張されています。以下はダイアログ（dialog）のために上書きされたプロパティです。

名前 型 説明 デフォルト値
title string ダイアログのタイトルテキスト。 New Dialog
collapsible boolean 折りたたみボタンを表示するかどうかを定義します。 false
minimizable boolean 最小化ボタンを表示するかどうかを定義します。 false
maximizable boolean 最大化ボタンを表示するかどうかを定義します。 false
resizable boolean ダイアログのサイズを変更できるかどうかを定義します。 false
toolbar array,selector ダイアログの上部ツールバー。可能な値：
1. 配列。各ツールのオプションはリンクボタン（linkbutton）と同じです。
2. セレクタ。ツールバーを指定します。

ダイアログツールバーは <div> タグ内で宣言できます：
<div class="easyui-dialog" style="width:600px;height:300px"
        data-options="title:'My Dialog',toolbar:'#tb',modal:true">
    Dialog Content.
</div>
<div id="tb">
<a href="../index.html" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"/a>
<a href="../index.html" class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true"/a>
</div>
ダイアログツールバーは配列で定義することもできます：
<div class="easyui-dialog" style="width:600px;height:300px"
        data-options="title:'My Dialog',modal:true,
            toolbar:[{
                text:'Edit',
                iconCls:'icon-edit',
                handler:function(){alert('edit')}
            },{
                text:'Help',
                iconCls:'icon-help',
                handler:function(){alert('help')}
            }]">
    Dialog Content.
</div>
null
buttons array,selector ダイアログの下部ボタン。可能な値：
1. 配列。各ボタンのオプションはリンクボタン（linkbutton）と同じです。
2. セレクタ。ボタンバーを指定します。

ボタンは <div> タグ内で宣言できます：
<div class="easyui-dialog" style="width:600px;height:300px"
        data-options="title:'My Dialog',buttons:'#bb',modal:true">
    Dialog Content.
</div>
<div id="bb">
    <a href="../index.html" class="easyui-linkbutton">Save</a>
    <a href="../index.html" class="easyui-linkbutton">Close</a>
</div>
ボタンは配列で定義することもできます：
<div class="easyui-dialog" style="width:600px;height:300px"
        data-options="title:'My Dialog',modal:true,
            buttons:[{
                text:'Save',
                handler:function(){...}
            },{
                text:'Close',
                handler:function(){...}
            }]">
    Dialog Content.
</div>
null

イベント

このイベントはパネル（panel）から拡張されています。

メソッド

このメソッドはウィンドウ（window）から拡張されています。以下はダイアログ（dialog）に追加されたメソッドです。

名前 パラメータ 説明
dialog none 外部ダイアログ（dialog）オブジェクトを返します。
jQuery EasyUI 插件jQuery EasyUI プラグイン その他の拡張