EasyUI–表单 文本框 按钮

本篇重点介绍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" src="easyui/jquery.min.js"></script>
	<script type="text/javascript" src="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,表示原则网页中标签。

此处对应的样式代码为: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,然后记忆一些具体的属性设置就好了。


如有问题请扫码联系我
在这里插入图片描述

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页