本文在前面封装Hibernate工具的基础上重点完成用户登录功能，目前系统页面展示的名称是在HTML中写死的，所以下面要做的事：若用户已登录则显示用户名；若用户未登录则点击进入登录页面。
一、修改登录名称缺省为“登录”
打开D:\medical\war\js\common\common.js文件，修改generateSystemMenu（）方法方法，修改后
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
/** * 生成系统公共菜单
*/
function generateSystemMenu()
{ var systemMenu = '<div class="system_menu">';
systemMenu += '<div class="system_menu_wrapper">';
systemMenu += '<div class="system_menu_search">';
systemMenu += '<input type="text" id="system_menu_searcher">';
systemMenu += '</div>';
systemMenu += '<div class="system_menu_item">';
systemMenu += '<ul>';
systemMenu += '<li><a href="#">下战书</a></li>';
systemMenu += '<li id="system_home_menu"><a href="#">首页</a></li>';
systemMenu += '<li id="system_expert_menu"><a href="#">专家</a></li>';
systemMenu += '</ul>';
systemMenu += '</div>';
systemMenu += '<div class="system_menu_user">';
systemMenu += '<div class="system_menu_user_wrapper">';
systemMenu += '<a href="login.act">';
systemMenu += '<i id="system_login_user_icon"></i>';
systemMenu += '<span id="system_login_user_name">登录</span>';
systemMenu += '</a>';
systemMenu += '</div>';
systemMenu += '<div class="system_menu_user_setting">';
systemMenu += '<ul>';
systemMenu += '<li><i class="system_menu_user_setting_set"></i><span>设置</span></li>';
systemMenu += '<li><i class="system_menu_user_setting_exit"></i><span>退出</span></li>';
systemMenu += '</ul>';
systemMenu += '</div>';
systemMenu += '</div>';
systemMenu += '</div>';
systemMenu += '</div>';
$(systemMenu).appendTo($("#system_navigation_menu"));
} |
在Eclipse中运行Tomcat，浏览器中输入http://localhost:8080/medical/index.act，系统菜单登录变为“登录”，但会发现当能量币的值过长时会把下拉菜单遮盖住了，如下图所示：
二、修改navigation.css样式文件
1、把菜单包裹器的宽度设置为1000像素，并设置为相对定位，如下：
.system_menu_wrapper{
margin: 0 auto;
height: inherit;
width: 1000px;
position: relative;
}
2、把用户登录菜单设置为绝对定位，且在菜单包裹器的最右侧显示，如下：
.system_menu_user{
width: 120px;
height: inherit;
position: absolute;
right: 0px;
z-index: 10;
}
修改后在chrome浏览器中效果如图所示：
三、编写登录界面及CSS样式文件
1、在D:\medical\war\module\login下创建login.html文件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
<!DOCTYPE HTML><html>
<head>
<title>斗医</title>
<!--利于搜索引擎查询-->
<meta name="description" content="斗医是一个医学交流平台" />
<meta name="keywords" content="医学,交流,讨论" />
<!--设置字符集-->
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<!--页面不缓存-->
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache,must-revalidate" />
<meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT" />
<!--引入外部文件-->
<link rel="stylesheet" type="text/css" href="theme/navigation/navigation.css">
<link rel="stylesheet" type="text/css" href="theme/login/login.css">
<script src="js/common/jquery.js"></script>
<script src="js/common/common.js"></script>
<script src="js/login/login.js"></script>
</head>
<body>
<!--系统导航菜单-->
<div id="system_navigation_menu"></div>
<!--登录页面-->
<div class="system_content">
<div class="login_wrapper">
<div class="login_title">用户登录</div>
<input type="text" class="login_user_input" placeholder="请输入用户名" id="login_dynamic_user_name" />
<input type="text" class="login_user_input" placeholder="请输入密码" id="login_dynamic_user_pass" />
<div class="login_button_wrapper">
<a class="login_confirm_button" href="#">登录</a>
<a class="login_regist_button" href="#">注册</a>
</div>
</div>
</div>
</body>
</html>
|
2、在D:\medical\war\theme\login下创建login.css文件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
|
/*********************************************************************//* 系统登录样式 *//*********************************************************************/.login_wrapper{ width: 420px;
height: 250px;
margin: 0 auto;
border: 1px solid #AAA;
border-radius: 8px;
box-shadow: 1px 1px rgba(0, 0, 0, .4);
}.login_title{ width: inherit;
height: 40px;
line-height: 40px;
background-color: #1575D5;
border: 1px solid #0D6EB8;
border-radius: 8px 8px 0 0;
box-shadow: 1px 1px rgba(255, 255, 255, .1) inset;
font-size: 14px;
text-align: center;
color: #FFF;
}.login_user_name{ width: inherit;
height: 40px;
line-height: 40px;
font-size: 14px;
margin: 15px;
}.login_user_input{ width: 400px;
height: 40px;
border: 1px solid #DDD;
border-radius: 4px;
margin: 20px 10px 5px 10px;
outline: none;
}.login_button_wrapper{ width: inherit;
height: 30px;
line-height: 30px;
margin-top: 20px;
}.login_regist_button{ float: right;
margin-right: 20px;
text-decoration: underline;
font-size: 13px;
color: #259;
}.login_confirm_button{ float: right;
width: 70px;
margin-right: 10px;
background-color: #1575D5;
text-shadow: 0 -1px 0 rgba(0,0,0,.5);
text-align: center;
border: 1px solid #0D6EB8;
color: #FFF;
box-shadow: 0 1px 0 rgba(255,255,255,.2) inset,0 1px 0 rgba(0,0,0,.2);
border-radius: 3px;
white-space: nowrap;
} |
3、在浏览器中输入http://localhost:8080/medical，回车后点击右侧的“登录”按钮，打开网页的效果图如下：
4、细心的用户可以发现登录框在当前屏幕没有垂直居中
（1）在D:\medical\war\js\common\common.js中增加垂直居中方法
|
1
2
3
4
5
6
7
8
9
|
/** * 使DIV垂直水平居中
*/
function centerComponent(component)
{ var x = ($(window).width() - component.outerWidth()) / 2;
var y = ($(window).height() - component.outerHeight()) / 2;
component.css({left: x, top: y});
} |
（2）对D:\medical\war\theme\login\login.css文件的.login_wrapper增加绝对定位样式
|
1
2
3
4
5
6
7
8
9
|
.login_wrapper{ width: 420px;
height: 250px;
margin: 0 auto;
border: 1px solid #AAA;
border-radius: 8px;
box-shadow: 1px 1px rgba(0, 0, 0, .4);
position: absolute;
} |
（3）对D:\medical\war\js\login\login.js文件中的$(document).ready(）增加垂直居中方法调用
|
1
2
3
4
5
6
7
8
9
|
(function( window){
$(document).ready(function()
{
// 生成系统菜单
generateSystemMenu();
// 登录框垂直居中
centerComponent($("#login_dynamic_wrapper"));
});
})( window ); |
（4）在浏览器中输入http://localhost:8080/medical，回车后点击右侧的“登录”按钮打开登录网页，此时可见登录框已垂直居中。
【备注】：
1、对于输入框的placeholderIE10才支持，由于本系统只在Chrome、Firefox中调试运行，若让IE10之下的支持，可问问谷歌会搜索到多个解决方法。
2、具体登录功能在下一节完成，会涉及到登录、注册按钮响应动作；向服务端下发请求；服务端获取数据返回；验证不通过弹出提示信息等。
附件：http://down.51cto.com/data/2364204
本文转自qingkechina 51CTO博客，原文链接：http://blog.51cto.com/qingkechina/1381866，如需转载请自行联系原作者