EasyUI 窗口 – 自定义带有工具条和按钮的对话框

🌙
手机阅读
本文目录结构

EasyUI 窗口 - 自定义带有工具条和按钮的对话框

您可以创建一个带有工具栏(toolbar)和按钮(button)的对话框(dialog),可以从 HTML 标记创建。这个教程描述如何添加工具栏(toolbar)和按钮(button)到对话框(dialog),没有任何的 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="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true">Edit</a>
                <a href="#" class="easyui-linkbutton" iconCls="icon-help" plain="true">Help</a>
            </td>
            <td style="text-align:right">
                <input></input><a href="#" 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"/>
            </td>
            <td style="text-align:right">
                <a href="#" class="easyui-linkbutton" iconCls="icon-save" onclick="javascript:alert('save')">Save</a>
                <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dd').dialog('close')">Close</a>
            </td>
        </tr>
    </table>
</div>

请注意,对话框(dialog)的工具栏(toolbar)和按钮(buttons)属性也可以通过 string 值指定,它将充当作为一个选择器去选择一个适当的 DIV 元素,并追加到工具栏(toolbar)或者按钮(buttons)的位置。


AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

目前重心已经放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>