jQuery EasyUI Window -Personnalisation des boîtes de dialogue avec barre d'outils et boutons

Vous pouvez créer une boîte de dialogue avec une barre d'outils et des boutons, qui peuvent être créés à partir d'un balisage HTML. Ce tutoriel décrit comment ajouter une barre d'outils et des boutons à une boîte de dialogue, sans aucun code JavaScript.

Créer une boîte de dialogue

    <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>

Créer une barre d'outils

    <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>

Créer des boutons

    <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>

Veuillez noter que les propriétés toolbar et buttons de la boîte de dialogue peuvent également être spécifiées par une valeur de chaîne, qui agira comme un sélecteur pour sélectionner un élément DIV approprié et l'ajouter à la position de la barre d'outils ou des boutons.

Télécharger les exemples jQuery EasyUI

jeasyui-win-dlg2.zip