首页
会员中心
到顶部
到尾部
jQuery EasyUI教程

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

时间:2020/11/2 21:29:05  作者:  来源:  查看:0  评论:0
内容摘要:pre {white-space: pre-wrap;}jQuery EasyUI 窗口 - 自定义带有工具条和按钮的对话框您可以创建一个带有工具栏(toolbar)和按钮(button)的对话框(dialog),可以从 HTML 标记创建。这个教程描述如何添加工具栏(toolb...

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

您可以创建一个带有工具栏(toolbar)和按钮(button)的对话框(dialog),可以从 HTML 标记创建。这个教程描述如何添加工具栏(toolbar)和按钮(button)到对话框(dialog),没有任何的 javascript 代码。

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

创建对话框(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)的位置。

下载 jQuery EasyUI 实例

jeasyui-win-dlg2.zip



相关评论
广告联系QQ:45157718 点击这里给我发消息 电话:13516821613 杭州余杭东港路118号雷恩国际科技创新园  网站技术支持:黄菊华互联网工作室 浙ICP备06056032号