`
hm4123660
  • 浏览: 282496 次
  • 性别: Icon_minigender_1
  • 来自: 广州
博客专栏
Dea4ce76-f328-3ab2-b24a-fb268e1eeb75
数据结构
浏览量:70022
社区版块
存档分类
最新评论

人员登入2 ---登入页面

    博客分类:
  • J2EE
阅读更多

上一篇博客我们已经把jboss整合进开发工具eclipse里,并建立好了开发项目Person。今天我们就要开始项目的开发了。

 

今天主要讲用extjs4制作登入界面.

 

首先我们要把extjs的包导入到项目WenContent下

导入之前先设置项目

右键项目点击Properties



 

取消第一和第四个钩,不然检查验证extjs4的js文件会很久且会卡

导入后目录结构:(要用到的图片我也导入了在images里面)



 
打开已经建好index.html,修改为(代码有注释)

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户登入</title>

<!-- 导入extjs核心库 -->
<script type="text/javascript" src="Ext4.2/bootstrap.js"></script>
<script type="text/javascript" src="./Ext4.2/locale/ext-lang-zh_CN.js"></script>
<link rel="stylesheet" type="text/css" href="Ext4.2/resources/css/ext-all-neptune.css" />

<!-- extjs页面编写 -->
<script type="text/javascript" src="login.js"></script>


<style>
        #login_form{
            /*利用绝对定位实现*/
            position: absolute;
            width:450px;
            height:300px;
            /*使div左上的点居中*/
            left:50%;
            top:50%;
            /*使盒子往左上分别移动宽高的一半,实现居中*/
            margin-left:-225px;
            margin-top:-150px;
            background: #000000;

        }

    </style>
</head>

<body style="background: #0079d2;margin: 0;padding: 0;">
<div id="login_form">

</div>
</body>
</html>

 


 接下来就是用extjs编写登入窗口了,在WebContent下建立login.js文件

 

login.js文件代码:

Ext.onReady(function() {

    //使用表单提示
    Ext.QuickTips.init();
    Ext.form.Field.prototype.msgTarget = 'side';

    //创建表单
    var formPanel =Ext.create('Ext.form.Panel', {
        bodyStyle:"background-image:url('images/body.png')",
       
        renderTo: 'login_form',//根据id渲染到html页面
       
        title: '用户登入',
        width: 450,
        height: 300,
        bodyPadding: '40 0 0 0',//form内容的padding值
        buttonAlign: "center",//按钮居中

        frame: true,

        //文字靠右,文字宽度为50,缩小账号与输入框的距离
        fieldDefaults: {
            labelAlign: 'left',
            labelWidth: 50

        },

        items:[{
            xtype:'textfield',
            fieldLabel:'账&nbsp;号',//&nbsp;为空格
            name:'username',//表单提交参数
            //居中
            style:" margin:0 auto",
            width:250,
            height:25,
            emptyText: '请输入账号',
            allowBlank:false,
            blankText:'账号不能为空!',
            minLength:2,
            minLengthText:'账号的长度为大于1',
            maxLength:20,
            maxLengthText:'账号的长度为小于20'
        },{
            xtype:'textfield',
            inputType:"password",
            fieldLabel:"密&nbsp;码",
            //居中
            style: {
                margin:'0 auto',
                marginTop: '25px'
            },
            width:250,
            height:25,
            emptyText: '请输入密码',
            name:'password',
            allowBlank:false,
            blankText:'密码不能为空!',
            minLength:2,
            minLengthText:'密码的长度为大于1'

        }

        ],
        buttons:[{
            text:"登入",
            type:"submit",
            handler:login//处理函数
        },{
            text:"重置",

            handler:function(){
                //重置表单
                formPanel.form.reset();
            }
        }]

    });

    function login()
    {
        //用户登入方法
        Ext.MessageBox.alert("系统提示","登入成功");
    }


});
 

运行结果:


 

 

 对extjs代码作些说明:

1.Ext.onReady();

onReady正是用来注册在Ext框架及页面的html代码加载完,所要执行的函数。

 

2.信息提示

Ext.QuickTips.init();//初始化提示信息,没有他提示出不来
Ext.form.Field.prototype.msgTarget = '
side';msgTarget 有效值包括:

 

qtip:显示一个浮动的提示消息

title:显示一个浏览器浮动提示消息

under:在字段下面显示一个提示消息,使用under时要注意表单的高度

side:在字段右边显示一个提示消息,使用side是要注意表单的宽度

none:不显示提示消息

效果:


仔细一看,这个登入框的登入和重置字体太小导致模糊,我们来更改一下他们样式,用火狐查看他们的css

如图:



 

接下来我们在index.html里面重写这个样式:

 

在<style>标签里加上

 .x-btn-default-small .x-btn-inner{font-size: 13px}

 

把字体大小12px改成13px

最后结果:



 


 

这时我们的登入界面就做好了显示出来了。

 

下一篇博客就开始实现用户登入,完成前后台数据交互。

 下一篇博客地址:http://hm4123660.iteye.com/blog/2182962

  • 大小: 23.9 KB
  • 大小: 12.6 KB
  • 大小: 67.6 KB
  • 大小: 64.7 KB
  • 大小: 13.3 KB
  • 大小: 68.1 KB
分享到:
评论

相关推荐

    jsp-yuandaima.rar_登入界面

    2. **JSP动作指令(Action Directives)**:如`&lt;jsp:include&gt;`,`&lt;jsp:forward&gt;`等,用来处理用户提交的请求,并将页面导向不同的逻辑路径。 3. **JSP脚本元素**:包括脚本let、声明、表达式和脚本片段,用于在...

    用户登录过滤相关页面,过滤URL越权访问

    为了确保用户数据的安全以及提供一个良好的用户体验环境,开发人员常常需要实现一系列的安全措施。其中,“用户登录过滤相关页面,过滤URL越权访问”是一个常见的需求。本文将详细介绍如何使用Java EE中的过滤器...

    后台登录页面及功能

    2. CSS文件(如style.css):定义登录页面的样式和布局。 3. JavaScript文件(如script.js):实现Ajax登录功能,包括事件监听、数据封装、异步请求发送、接收并处理服务器响应等。 4. 可能还有Java文件(如...

    MindLinker迈聆会议系统电脑使用说明.pdf

    ###### 2.2.1 登入须知 - 在首次登录前,请确保企业的管理员已经添加了员工通讯录信息。 - 如果员工尚未加入企业,需要联系管理员创建企业账户及相应的通讯录。 ###### 2.2.2 登录方式 - **账号密码登录**:使用...

    jquery动态背景切换全屏登录插件

    开发人员或设计师可以通过下载提供的压缩包,将这些文件集成到自己的网站项目中,然后通过调整JavaScript配置和CSS样式来定制登录界面的外观和行为,以满足特定的设计需求和品牌风格。这不仅可以提升网站的整体视觉...

    php登入注册模块(包含邮件验证等功能)

    7. **响应式设计**:考虑到不同设备的使用场景,开发人员可能还需要使用响应式设计,使登录注册页面在手机、平板电脑和桌面电脑上都能正常显示和操作。 8. **错误处理与日志记录**:为了调试和优化,需要有良好的...

    Br20娱乐社区

    答:方法1:先打开论坛首页,用户管理员前台帐号进入前台(默认前后台帐号均为:adminadmin888)-----进入前台后,返回首页,在顶部导航栏------------点“管理”进入后台登入页面---输入后台管理员帐号-------进入...

    课程设计(论文)-基于SSH架构的班级人员信息展示毕业论文.docx

    基于 SSH 架构的班级人员信息展示系统主要功能是先登入一个用户登录系统,登录成功进入到班级信息展示页面,里面有每个人的信息,点击照片或者学号跳入到另外一个界面显示学生的个人详细信息,如果登录不成功,则两...

    基于JAVA毕业设计-JAVA班主任管理系统(源代码+论文).rar

    总的:用户登入后,在主页面的时间处每个模块统一要显示:姓名:×××,班级:××× (如果是学生处或者管理员则只显示姓名) 一、学生信息界面 “查找”按钮只有班主任可用,对班委和普通学生来说,此按钮灰色。 ...

    H5CS3登录注册模板

    这个模板以其酷炫的视觉效果和简洁的设计吸引用户,为Web开发人员提供了一个快速构建基本用户认证界面的基础。尽管模板在注册表单验证方面可能较为简单,但这并不意味着其无法进行扩展和优化。以下将详细解析这个...

    6种后台登陆界面HTML源码

    ASP(Active Server Pages)是微软的服务器端脚本环境,允许开发人员在Web服务器上创建动态网页。类似于JSP和PHP,ASP可以用来处理登录请求,验证用户凭据,并控制用户访问权限。ASP与.NET框架集成,可以利用其强大...

    统一运营系统操作手册(运维线).pdf

    手册详细说明了登入地址和登入页面的界面元素,指导用户如何正确输入用户名和密码,以及如何处理常见的登入问题,如密码遗忘或账户锁定等。此外,可能还涵盖了安全认证机制,如两步验证或身份验证服务。 三、功能...

    CISCO 无线AP配置方法

    **CISCO 无线AP配置方法** 在无线网络环境中,Cisco无线接入点(Access Point, AP)扮演着至关重要的角色,它允许设备通过无线方式连接到网络...对于复杂的网络环境,建议参考Cisco官方文档或寻求专业技术人员的帮助。

    5G CMP平台开通手册(电信受理人员使用)v1(1)

    5G CMP平台开通手册(电信受理人员使用)v1(1) 本资源摘要信息涵盖了5G CMP平台的开通手册,旨在指导电信受理人员快速掌握5G CMP平台的开通流程。手册分为两个部分,第一部分介绍了物联网CRM的开通流程,第二部分...

    医院信息化管理系统后台模板

    2. 医疗资源管理:涵盖医生、护士、设备等资源的调度与分配,优化医疗服务流程。 3. 诊疗管理:支持医生开处方、检查申请、检验报告管理,实现医疗过程的标准化和自动化。 4. 财务管理:提供收费、报销、结算等功能...

    Umbraco users guide

    - **目标读者**:本书面向希望使用Umbraco构建网站的技术人员和非技术人员,无论是初次接触Umbraco还是已经有一定经验的用户都能从中受益。 #### 二、Umbraco基础知识 - **安装与配置**(第1章): - 安装Umbraco...

    JAVA班主任管理系统(源代码+lw).zip

    总的:用户登入后,在主页面的时间处每个模块统一要显示:姓名:×××,班级:××× (如果是学生处或者管理员则只显示姓名) 一、学生信息界面 “查找”按钮只有班主任可用,对班委和普通学生来说,此按钮灰色。...

    美化的后台登录

    综上所述,这个“美化的后台登录”可能涵盖了后台系统设计、界面美学、用户体验、前端开发、字符编码和安全性等多个IT领域的知识点,对于开发和设计人员来说,理解和掌握这些内容是至关重要的。

    Shopnc b2b2c 好商城V5 33hao-V5完整源码.zip

    API开放接口 √ 开放接口供所需人员使用 物流跟踪接口 √ 支持快递100/快递鸟物流数据接口 第三方登入 √ 支持QQ/微信/新浪第三方接口登入 ERP对接 √ 支持其它ERP平台接口对接(需额外付费) 极验验证 √ 支持...

Global site tag (gtag.js) - Google Analytics