本篇重点介绍EasyUI框架下的表单和表单元素使用。
在开始使用EasyUI之前，要认清楚一个原则，因为EasyUI是封装的CSS及JS库，所以在修改EasyUI组件的样式和功能时，最好是采用EasyUI封装后的CSS样式和JS方法，而不是自己去写CSS和JS，这样不容易引起冲突，样式统一性也得到了保证。别忘了，如果我们自己再去写很多样式和方法，还要用前端框架干啥？
那么我们怎么知道啥时候用前端框架提供的样式和方法，什么时候没有提供这样的样式和方法，需要我们自己去写呢，这个就是经验了，需要我们去学习，当然对于计算机编程来说，最好的学习办法莫过于多写多练了。
好的，先来看一个表单的示例：
代码如下，先结合图片看下代码，有个整体的印象，之后会详细解释代码是如何实现的。
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>formDemo.jsp</title>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
<script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="easyui/jquery.min.js"></script>
<script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="easyui/jquery.easyui.min.js"></script>
<style type="text/css">
.main_form{
margin:32px auto;
width:480px;
}
.input_container{
margin-bottom:32px;
}
</style>
</head>
<body>
<form class="main_form">
<div class="easyui-panel" title="用户注册" style="padding:30px 60px;">
<div class="input_container">
<input class="easyui-textbox" label="用户名：" labelPosition="top" data-options="prompt:'请输入用户名',iconCls:'icon-man'" style="width:100%;height:52px">
</div>
<div class="input_container">
<input class="easyui-textbox" label="密码：" labelPosition="top" data-options="prompt:'请输入密码',iconCls:'icon-lock'" style="width:100%;height:52px">
</div>
<div class="input_container">
<input class="easyui-textbox" label="邮箱：" labelPosition="top" data-options="prompt:'请输入邮箱',validType:'email'" style="width:100%;height:52px">
</div>
<div class="input_container">
<input class="easyui-textbox" label="个人简介：" labelPosition="top" multiline="true" style="width:100%;height:120px">
</div>
<div>
<a href="#" class="easyui-linkbutton" iconCls="icon-ok" style="width:100%;height:32px">注册</a>
</div>
</div>
</form>
</body>
</html>
OK，解释如下：
1，首先注意，这是一个.jsp文件，所以第一行有<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>，注意中文环境，猫哥建议使用utf-8编码。还是那句话，不管是网页、后端、数据库，统一编码是非常有必要的。
2，表单的样式为class=main_form，在上面的样式编辑区对应.main_form选择器。再提醒一下，#main_form表示选择id=main_form的网页元素，.main_form表示选择class=main_form的网页元素，那直接写的比如body，表示原则网页中<body>标签。
此处对应的样式代码为：margin:32px auto;width:480px;，表示宽度居中，有点上下边距，左右边距是自动，所以实现了整个form部分的宽度控制和居中显示。
3，现在需要一个标题栏了，提示用户现在的页面是用于登录的。此时有一个非常好用且常用的EasyUI组件，也是我们学习的第一个EasyUI组件，我们可以称之为panel，意思是面板。前面示意图中用户注册四个字所在的标题栏加上外面的一圈边框，就是我们使用的panel，仔细观察代码会发现其实本身就是一个<div class="easyui-panel" >
那么如何让一个普通的div或者其他网页元素变成EasyUI组件呢，很简单，通过class就能实现。只要给网页元素加上class="easyui-xxx"，这个元素就按easyui设定好的样式显示了。此处代码为：<div class="easyui-panel" title="用户注册" style="padding:30px 60px;">，easyui-panel将div的样式设置成了面板，然后title用户注册将面板的标题设置为了用户注册，最后还补充了style样式属性，设置了内边距。此处需要注意的是，如果一个网页元素应用了class=easyui-xxx，如果还想改变其样式，比如改变内边距，那就直接在style属性里面修改，不要去改动easyui-xxx的样式，因为那都是EasyUI框架封装好的，不要动。
4，有了面板之后，猫哥想往面板里面依次添加用户名、密码等输入框，为了使面板里面的输入框有固定的下边距，更加美观，在每个输入框外面设置了div，并编辑样式为：margin-bottom:32px;，这个比较简单，不再详述。
5，然后就是文本输入框了，使用easyui-textbox样式即可。需要重点注意data-options，该属性往往是补充了EasyUI组件的功能，里面的内容是以逗号分割的键值对。例如data-options="prompt:'请输入用户名',iconCls:'icon-man'"，意思就是文本框提示为请输入用户名，使用图标是icon-man。
6，要明白图标是怎么来的，很简单，在head区域我们引用了<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">，此时我们打开icon.css代码，发现：
.icon-man{
background:url('icons/man.png') no-repeat center center;
}这下，你应该懂得如果要自定义图标，该往哪个目录添加图片，又该如何定义class的名字跟图片产生关联了吧。
7，注意data-options的功能还是挺强的，比如validType:'email'，直接就验证了邮箱输入框格式是否正确，不正确的话还会自动提示，赞一个。
8，最后，<a href="#" class="easyui-linkbutton" iconCls="icon-ok" style="width:100%;height:32px">登录</a>，就很好理解了，easyui-linkbutton表示链接按钮，iconCls表示图标。
9，如果图标设计的好看而优雅，更换掉easyui默认图标后，最后出来的网页还是蛮有个性的。
最后总结下，学习EasyUI，在具备了较好的CSS和Javascript与jQuery基础后，其实就是记忆一些组件的名字easyui-xxx，然后记忆一些具体的属性设置就好了。
共同学习，写下你的评论
评论加载中...
作者其他优质文章
