jQuery EasyUI ウィンドウ -ツールバーとボタンを持つカスタムダイアログ

ツールバーとボタンを持つダイアログを作成できます。HTMLマークアップから作成できます。このチュートリアルでは、JavaScriptコードなしでツールバーとボタンをダイアログに追加する方法を説明します。

ダイアログ（Dialog）の作成

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

ツールバー（Toolbar）の作成

    <div id="dlg-toolbar">
        <table cellpadding="0" cellspacing="0" style="width:100%">
            <tr>
                <td>
                    <a href="../index.html" class="easyui-linkbutton" iconCls="icon-edit" plain="true">Edit</a>
                    <a href="../index.html" class="easyui-linkbutton" iconCls="icon-help" plain="true">Help</a>
                </td>
                <td style="text-align:right">
                    <input></input><a href="../index.html" class="easyui-linkbutton" iconCls="icon-search" plain="true"></a>
                </td>
            </tr>
        </table>
    </div>

ボタン（Buttons）の作成

    <div id="dlg-buttons">
        <table cellpadding="0" cellspacing="0" style="width:100%">
            <tr>
                <td>
                    <img src="email.gif.html"/>
                </td>
                <td style="text-align:right">
                    <a href="../index.html" class="easyui-linkbutton" iconCls="icon-save" onclick="javascript:alert('save')">Save</a>
                    <a href="../index.html" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dd').dialog('close')">Close</a>
                </td>
            </tr>
        </table>
    </div>

ダイアログのツールバーとボタンのプロパティは、文字列値で指定することもできます。これは、適切なDIV要素を選択するセレクタとして機能し、ツールバーまたはボタンの位置に追加されます。

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

jeasyui-win-dlg2.zip