jQuery EasyUI 窗口 - 创建对话框
jQuery EasyUI 窗口 - 创建对话框
概述
jQuery EasyUI 是一款基于 jQuery 的 UI 插件集合,其中包括了窗口相关的插件,如对话框、模态窗口等。本文将详细介绍如何使用 EasyUI 创建对话框。
创建对话框
EasyUI 提供了两种方式创建对话框,一种是使用 HTML 标签,另一种是使用 JavaScript。
使用 HTML 标签
在 HTML 页面中添加如下代码:
<div id="dlg" class="easyui-dialog" style="width:400px;height:200px;padding:10px;">
<form id="fm" method="post">
<div class="fitem">
<label>名称:</label>
<input name="name" class="easyui-textbox" required="true">
</div>
<div class="fitem">
<label>邮箱:</label>
<input name="email" class="easyui-textbox" validType="email">
</div>
</form>
<div class="dialog-button">
<a href="#" class="easyui-linkbutton" onclick="saveUser()">保存</a>
<a href="#" class="easyui-linkbutton" onclick="javascript:$('#dlg').dialog('close')">取消</a>
</div>
</div>
其中,id="dlg"
定义了对话框的 ID,它会在 JavaScript 中使用到。class="easyui-dialog"
表示这是一个 EasyUI 的对话框组件,style
属性定义了对话框的宽度、高度、内边距等样式。<form>
元素中是对话框要展示的内容,name
属性为 name
和 email
输入框定义了一个唯一的名称。<div class="dialog-button">
定义了对话框下方的按钮,使用 EasyUI 提供的 easyui-linkbutton
实现了按钮样式。
在 JavaScript 中,使用如下代码打开对话框:
$('#dlg').dialog({
title: '添加用户',
modal: true
});
其中,$('#dlg')
表示获取 ID 为 dlg
的元素,dialog()
方法会初始化 EasyUI 对话框,并接收一个 JSON 对象作为参数,其中 title
表示对话框标题,modal
表示是否启用模态框,即禁止操作对话框之外的内容。
使用 JavaScript
使用 JavaScript 方式创建对话框,代码如下:
$('<div/>').dialog({
href: '/user/addUser.html',
title: '添加用户',
width: 400,
height: 200,
modal: true,
buttons: [{
text: '保存',
handler: function() {
$('#fm').form('submit', {
url: '/user/addUser',
onSubmit: function() {
return $(this).form('validate');
},
success: function(result) {
var data = $.parseJSON(result);
if (data.success) {
$('#dlg').dialog('close');
$('#dg').datagrid('reload');
} else {
$.messager.alert('Error', data.msg, 'error');
}
}
});
}
}, {
text: '取消',
handler: function() {
$('#dlg').dialog('close');
}
}]
});
在代码中,首先创建一个 <div>
元素,使用 dialog()
方法初始化 EasyUI 对话框。其中,href
属性定义了对话框的内容页面 URL,title
属性定义了对话框标题,width
和 height
定义了对话框宽度和高度。buttons
是一个数组,定义了对话框下方的按钮,使用 handler
属性定义按钮被点击时的处理函数。
在对话框中,使用 <form id="fm" method="post">
创建了一个表单,使用 $('#fm').form('submit', ...)
函数在表单提交时向服务器发送数据,onSubmit
函数在提交前进行表单验证。success
函数接收服务器返回的数据,使用 $.parseJSON()
解析 JSON 数据,根据返回值执行相应操作。
总结
本文主要介绍了如何使用 EasyUI 的对话框组件创建对话框,包括使用 HTML 标签和 JavaScript 两种方式,其中,HTML 标签方式简单易用,JavaScript 方式更为灵活,可以根据需要对对话框进行更详细的设置。熟练掌握 EasyUI 提供的窗口组件,可以大大提高 Web 开发效率。