彩票走势图

jQuery EasyUI使用教程:自定义对话框工具栏和按钮

原创|使用教程|编辑:龚雪|2016-05-23 09:33:03.000|阅读 912 次

概述:您可以创建一个带有工具栏和按钮的对话框,可以使用HTML标记创建。本教程主要描述了如何将工具栏和按钮添加到对话框中,不需要任何的javascript代码。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接:

Kendo UI for jQuery——创建现代Web应用程序的最完整UI库!查看详情>>>

您可以创建一个带有工具栏和按钮的对话框,可以使用HTML标记创建。本教程主要描述了如何将工具栏和按钮添加到对话框中,不需要任何的javascript代码。

窗口和布局

创建对话框

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

创建工具栏

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

创建按钮

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

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

下载EasyUI示例:

购买正版授权的朋友可以点击""哦~~~

标签:HTML5jQueryUI界面HTML5/JS

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn

文章转载自:慧都控件网

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP