最近计划做一个非框架的物业管理系统前端使用bootstrap js jquery 等希望各位指点一下共同学习
---前端登录页面------
这个页面的输入框组用的bootstrap的，我设置了几张背景轮询切换（js控制）。
div背景设置了透明（background: rgba(255,255,255, 0.2)）
bootstrap输入框组是全部放入div中的，我用css设置的width,height，用js获取到用户屏幕的宽和高。其中有一种获取到的高度是除去任务栏以后的高度
（其实我非常喜欢这种简约风格）
稍微实现了一下后台输错密码将信息显示在弹出框中 如图：
因为我只是测试了一下前台页面所有后台只是判断账号空就提示错误信息
下面是注册
我把注册写在了登录页面只是注册用bootstrap的模态框实现(因为我想换一种风格)
点击注册按钮时候弹出（这里会有个问题模态框并没有居中，这个是bootstrap的问题，我想让模态框水平垂直居中。试了几种办法，结果都不理想）
注册用js正则判断了一下（用的也是上图那种弹出框）
简单总结一下 ：
做这个页面有许多小细节的地方
1）弹出框弹出提示信息时候，如果点击其他页面或者说失去焦点以后。弹出框并没有消失。这个需要注意一下（手动设置）$(element).popover("hide");
2）上面也提过了 bootstrap的模态框并不是完全居中 要设置的话得修改bootstrap的底层(修改模态框的位置我目前只知道这种办法)
下面是我写的代码，css和js写在了html中方便开发（就我一个人在写。也就无所谓了）。做完以后提出到对应的文件中
代码有些冗余（我计划下礼拜做完如果做的快就把代码优化一下）html的格式也在写的过程中出现了问题（后面会修改）
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@ page isELIgnored="false" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>系统登录</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="access/jquery/jquery-1.12.3.js"></script>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="access/css/bootstrap.min.css">
<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="access/js/bootstrap.min.js"></script>
<script type="text/javascript">
var count = 1;
function setBackground(){
var _body = document.querySelector("body");
_body.background = "access/images/bg/"+count+".jpg";
count ++;
if(count>3){
count = 1;
}
}
function checkData(_this){
var reg=/^[a-zA-Z][\w_]{5,13}$/;
var reg= new RegExp(reg);
var result = reg.test(_this.value);
eval("var firstCheck="+_this.getAttribute("firstCheck"));
if(firstCheck){
checkMessage(_this,"show");
_this.setAttribute("firstCheck","false");
}
if(result){
checkMessage(_this,"hide");
_this.setAttribute("firstCheck","true");
}
}
function count_(){
setInterval("setBackground()",3000);
setAdd();
(function (){
var lusername = document.querySelector("#lusername");
var error = lusername.getAttribute("error");
if("true"===(error)){
$("#lusername").popover("show");
}
})()
}
function checkMessage (_this,str) {
$(_this).popover(str);
}
function setAdd(){
var height = screen.availHeight;
var width = screen.availWidth;
var mLabel = document.querySelector("#Label");
var labelWidth = mLabel.clientHeight;
var labelHeight = mLabel.clientWidth;
mLabel.setAttribute("style","margin-top:"+((height-labelHeight-100)/2)+"px"+";margin-left:"+((width-labelWidth)/2)+"px");
}
function hidePopover(_this){
if(_this){
$(_this).popover("hide");
}else{
$("#lusername").popover("hide");
}
}
</script>
<style type="text/css">
#Label{
padding-top: 20px;
border-radius: 7px;
width:420px;
height:420px;
background-color:#eeeeee;
background: rgba(255,255,255, 0.2)
}
#myModal{
background: rgba(255,255,255, 0.2);
}
#mLabel{
background: rgba(255,255,255, 0.2);
padding-top: 20px;
border-radius: 7px;
width:455px;
height:500px;
background-color:#eeeeee;
}
#code_{
}
</style>
</head>
<body >
<div id="Label" style="">
<div class="col-sm-10 col-xs-10 col-lg-10 col-md-offset-1">
<div class="form-group opacity10">
<div class="h2 text-center">系统登录</div>
</div>
<form action="loginController" method="get">
<div class="form-group form-group-lg">
<input id=‘lusername‘ name="username" type="text" value="${username }"
class=" form-control" id="exampleInputEmail1" placeholder="账号"
error="${popover==null?false:true }"
onclick="hidePopover(this)"
data-toggle="popover" data-placement="right"
data-container="body" data-html="true"
data-content="<p>账号或密码错误</p>"
data-trigger="manual"
class=" form-control"
id="exampleInputPassword1" placeholder="密码">
</div>
<div class="form-group form-group-lg">
<input type="password" name="password" class="form-control" value="${password }" id="exampleInputPassword1" placeholder="密码">
</div>
<div class="input-group form-group-lg">
<span class="input-group-addon" id="basic-addon1"><img alt="验证码预留" id="code_" src="1222" title="看不清？换一张"></span>
<input type="text" class="form-control" placeholder="验证码" aria-describedby="basic-addon1">
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="remember" value="true"> 记住密码
</label>
</div>
<div class="btn-group btn-group-justified" role="group">
<div class="btn-group" role="group">
<button type="submit" class="btn btn-default btn-lg btn-primary">登录</button>
</div>
</div>
</form>
<br/>
<div class="form-group text-center">
<i class="">还没有账号？
<a href="#" data-toggle="modal" onclick="hidePopover()" data-target="#myModal">注册</a>
</i>
</div>
<form>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<div class="row">
<div class="row">
<div id="mLabel">
<div class="col-lg-10 col-md-offset-1">
<br/>
<div class="form-group form-group-lg">
<div class="h2 text-center">账号注册</div>
</div>
<br/>
<div class="form-group form-group-lg">
<input id=‘username‘ name="username" type="text"
firstCheck="true"
data-toggle="popover" data-placement="right"
data-container="body" data-html="true"
data-trigger="manual" onkeyup="checkData(this)"
data-content="<p>用户名由字母数字下划线组成</p><p>数字不能作为开头</p><p>用户名长度不能超过10字符个长度</p>"
class=" form-control" id="exampleInputEmail1"
placeholder="账号">
</div>
<div class="form-group form-group-lg">
<input type="password" name="password" class="form-control"
firstCheck="true" onkeyup="checkData(this)"
data-toggle="popover" data-placement="right"
data-container="body" data-html="true"
data-trigger="manual"
data-content="<p>密码由字母数字下划线组成</p><p>密码长度不能超过13字符个长度</p>"
id="exampleInputPassword1" placeholder="密码">
</div>
<div class="form-group form-group-lg">
<input type="password" class="form-control"
firstCheck="true" onkeyup="checkData(this)"
data-toggle="popover" data-placement="right"
data-container="body" data-html="true"
data-trigger="manual"
data-content="<p>两次输入密码不一致</p>"
id="exampleInputPassword1" placeholder="确认密码">
</div>
<div class="input-group form-group-lg">
<span class="input-group-addon" id="basic-addon1"><img alt="验证码预留" id="code_" src="1222" title="看不清？换一张"></span>
<input type="text" class="form-control" placeholder="验证码" aria-describedby="basic-addon1">
</div>
<br/>
<br/>
<div class="btn-group btn-group-justified" role="group">
<div class="btn-group" role="group">
<button type="submit" class="btn btn-default btn-lg btn-primary">注册</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
时间： 2024-08-29 15:04:30