继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

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

程序员大阳
关注TA
已关注
手记 357
粉丝 1.5万
获赞 1523

本篇重点介绍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,表示原则网页中<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,然后记忆一些具体的属性设置就好了。

打开App,阅读手记
11人推荐
发表评论
随时随地看视频慕课网APP