本篇重点介绍EasyUI框架下的表单和表单元素使用。

在开始使用EasyUI之前，要认清楚一个原则，因为EasyUI是封装的CSS及JS库，所以在修改EasyUI组件的样式和功能时，最好是采用EasyUI封装后的CSS样式和JS方法，而不是自己去写CSS和JS，这样不容易引起冲突，样式统一性也得到了保证。别忘了，如果我们自己再去写很多样式和方法，还要用前端框架干啥？

那么我们怎么知道啥时候用前端框架提供的样式和方法，什么时候没有提供这样的样式和方法，需要我们自己去写呢，这个就是经验了，需要我们去学习，当然对于计算机编程来说，最好的学习办法莫过于多写多练了。

好的，先来看一个表单的示例：

代码如下，先结合图片看下代码，有个整体的印象，之后会详细解释代码是如何实现的。




  
formDemo.jsp




        
            
                

            
                

            
                

            
                

            
                注册

OK，解释如下：

1，首先注意，这是一个.jsp文件，所以第一行有，注意中文环境，猫哥建议使用utf-8编码。还是那句话，不管是网页、后端、数据库，统一编码是非常有必要的。

2，表单的样式为class=main_form，在上面的样式编辑区对应.main_form选择器。再提醒一下，#main_form表示选择id=main_form的网页元素，.main_form表示选择class=main_form的网页元素，那直接写的比如body，表示原则网页中

标签。

此处对应的样式代码为：margin:32px auto;width:480px;，表示宽度居中，有点上下边距，左右边距是自动，所以实现了整个form部分的宽度控制和居中显示。

3，现在需要一个标题栏了，提示用户现在的页面是用于登录的。此时有一个非常好用且常用的EasyUI组件，也是我们学习的第一个EasyUI组件，我们可以称之为panel，意思是面板。前面示意图中用户注册四个字所在的标题栏加上外面的一圈边框，就是我们使用的panel，仔细观察代码会发现其实本身就是一个

 那么如何让一个普通的div或者其他网页元素变成EasyUI组件呢，很简单，通过class就能实现。只要给网页元素加上class="easyui-xxx"，这个元素就按easyui设定好的样式显示了。此处代码为：
，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区域我们引用了，此时我们打开icon.css代码，发现：
 .icon-man{
    background:url('icons/man.png') no-repeat center center;
}
 这下，你应该懂得如果要自定义图标，该往哪个目录添加图片，又该如何定义class的名字跟图片产生关联了吧。
 7，注意data-options的功能还是挺强的，比如validType:'email'，直接就验证了邮箱输入框格式是否正确，不正确的话还会自动提示，赞一个。
 8，最后，登录，就很好理解了，easyui-linkbutton表示链接按钮，iconCls表示图标。
 9，如果图标设计的好看而优雅，更换掉easyui默认图标后，最后出来的网页还是蛮有个性的。
 最后总结下，学习EasyUI，在具备了较好的CSS和Javascript与jQuery基础后，其实就是记忆一些组件的名字easyui-xxx，然后记忆一些具体的属性设置就好了。

ITPub博客

使用EasyUI开发银行业绩统计系统[4]-EasyUI表单

最新文章