极客教程EasyUI的jQuery表单小部件
EasyUI是一个HTML5框架，用于使用基于jQuery、React、Angular和Vue技术的用户界面组件。它有助于为交互式网络和移动应用程序构建功能，为开发者节省大量时间。
在这篇文章中，我们将学习如何使用jQuery EasyUI来设计表单。表单提供了各种方法来执行表单字段的操作，如ajax提交，加载，清除等。
EasyUI for jQuery的下载：
https://www.jeasyui.com/download/index.php
语法:
<form>
<form element>
</form>
属性:
- novalidate: 它被设置为false以验证表单字段。
- iframe。它定义了表单是否使用iframe模式提交。
- ajax。它定义了表单是否用Ajax提交。
- dirty:它定义了表单是否只提交已更改的字段。
- queryParams。这些是发布表单时将被发送到服务器的额外参数。
- URL。这是要提交的表单动作URL。
事件:
- onSubmit:提交前发生的事件。
- onProgress。当上传进度数据可用时触发的事件。
- success。当表单成功提交时触发的事件。
- onBeforeLoad: 在请求加载数据之前发生的事件。
- onLoadSuccess:当表单数据被加载时触发的事件。
- onLoadError。当加载表单数据时发生一些错误时触发的事件。
- onChange。当字段的值发生变化时发生的事件。
方法:
- clear: 清除表单数据。
- reset。重置表格数据。
- validate：做表单字段的验证。
- enableValidation:启用验证。
- disableValidation:禁用验证。
- resetValidation。重置验证。
- resetDirty。重置脏污标志。
步骤:
- 首先，添加你的项目所需的jQuery Easy UI脚本。
<script type=”text/javascript” src=”jquery.min.js”> </script>
<!–jQuery libraries of EasyUI –>
<script type=”text/javascript” src=”jquery.easyui.min.js”> </script>
<!–jQuery library of EasyUI Mobile –>
<script type=”text/javascript” src=”jquery.easyui.mobile.js”> </script>
示例 1:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,
maximum-scale=1.0, user-scalable=no">
<!-- EasyUI specific stylesheets-->
<link rel="stylesheet" type="text/css"
href="themes/metro/easyui.css">
<link rel="stylesheet" type="text/css"
href="themes/mobile.css">
<link rel="stylesheet" type="text/css"
href="themes/icon.css">
<!--jQuery library -->
<script type="text/javascript" src="jquery.min.js">
</script>
<!--jQuery libraries of EasyUI -->
<script type="text/javascript"
src="jquery.easyui.min.js">
</script>
<!--jQuery library of EasyUI Mobile -->
<script type="text/javascript"
src="jquery.easyui.mobile.js">
</script>
<script type="text/javascript">
(document).ready(function (){
('#gfg').form({
novalidate: true
});
});
</script>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>EasyUI jQuery form widget</h3>
<div class="easyui-panel" title="New Topic"
style="width:100%;max-width:400px;padding:30px 60px;">
<form id="gfg" method="post">
<div style="margin-bottom:20px">
<input class="easyui-textbox" name="name" style="width:100%"
data-options="label:'Name:'">
</div>
<div style="margin-bottom:20px">
<input class="easyui-textbox" name="email" style="width:100%"
data-options="label:'Email:'">
</div>
<div style="margin-bottom:20px">
<input class="easyui-textbox" name="subject" style="width:100%"
data-options="label:'Subject:'">
</div>
<div style="text-align:center;padding:5px 0">
<a href="javascript:void(0)" class="easyui-linkbutton"
onclick="submitForm()" style="width:80px">Submit</a>
<a href="javascript:void(0)" class="easyui-linkbutton"
onclick="clearForm()" style="width:80px">Clear</a>
</div>
</form>
</div>
</body>
</html>
输出:
form widget