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

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

您可以创建一个带有工具栏(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" "javascript:alert('save')">Save</a>
                    <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" "javascript:$('#dd').dialog('close')">Close</a>
                </td>
            </tr>
        </table>
    </div>

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


目录
相关文章
|
7月前
|
前端开发
10EasyUI 菜单与按钮- 创建链接按钮(Link Button)
10EasyUI 菜单与按钮- 创建链接按钮(Link Button)
52 0
|
7月前
|
JavaScript 前端开发
12EasyUI 菜单与按钮- 创建分割按钮(Split Button)
12EasyUI 菜单与按钮- 创建分割按钮(Split Button)
38 0
|
6月前
|
JavaScript
EasyUI的datagrid每行数据添加操作按钮的方法
EasyUI的datagrid每行数据添加操作按钮的方法
143 0
|
7月前
48EasyUI 窗口- 创建对话框
48EasyUI 窗口- 创建对话框
17 0
|
7月前
|
JavaScript 前端开发
11EasyUI 菜单与按钮- 创建菜单按钮(Menu Button)
11EasyUI 菜单与按钮- 创建菜单按钮(Menu Button)
22 0
|
7月前
09EasyUI 菜单与按钮- 创建简单的菜单
09EasyUI 菜单与按钮- 创建简单的菜单
15 0
EasyUI–消息框、对话框和窗体详解
本篇主要介绍信息提示框、对话框及窗体相关控件,这些都是最常用的页面弹出控件,使用一个详细的例子描述。 按惯例献上案例的示意图:
503 0
EasyUI–消息框、对话框和窗体详解
|
数据安全/隐私保护
EasyUI–常用控件之按钮/搜索框/密码框/文件框/数字框/日期时间选择框
本篇主要介绍跟后台数据绑定相关度不大的简单控件,直接写了一个详细的例子,需要说明的东西都在注释里面。
566 0
EasyUI–常用控件之按钮/搜索框/密码框/文件框/数字框/日期时间选择框
|
前端开发 JavaScript Java
EasyUI–表单 文本框 按钮
本篇重点介绍EasyUI框架下的表单和表单元素使用。
479 0
EasyUI–表单 文本框 按钮