jQuery EasyUI ウィンドウ -ダイアログの作成

ダイアログ（Dialog）は、上部のツールバーと下部のボタンを含むことができる特別なウィンドウ（window）です。デフォルトでは、ダイアログ（Dialog）のサイズは変更できませんが、ユーザーは resizable プロパティを true に設定することで、サイズを変更できるようにすることができます。

ダイアログ（Dialog）の作成

ダイアログ（Dialog）は非常にシンプルで、DIV タグから作成できます。次に示すとおりです：

    <div id="dd" class="easyui-dialog" style="padding:5px;width:400px;height:200px;"
            title="My Dialog" iconCls="icon-ok"
            toolbar="#dlg-toolbar" buttons="#dlg-buttons">
        Dialog Content.
    </div>

ツールバー（Toolbar）とボタン（Button）を準備する

    <div id="dlg-toolbar">
        <a href="../index.html" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="javascript:alert('Add')">Add</a>
        <a href="../index.html" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="javascript:alert('Save')">Save</a>
    </div>
    <div id="dlg-buttons">
        <a href="../index.html" class="easyui-linkbutton" iconCls="icon-ok" onclick="javascript:alert('Ok')">Ok</a>
        <a href="../index.html" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dd').dialog('close')">Cancel</a>
    </div>

上記のコードで、ツールバー（toolbar）とボタン（button）を備えたダイアログ（dialog）を作成しました。これは、ダイアログ（dialog）、ツールバー（toolbar）、コンテンツ（content）、ボタン（buttons）の標準構成です。

jQuery EasyUI サンプルをダウンロード

jeasyui-win-dlg1.zip