原创作品，允许转载，转载时请务必以超链接形式标明文章
原始出处 、作者信息和本声明。否则将追究法律责任。
http://qingkechina.blog.51cto.com/5552198/1381866
|
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"
));
}
|
|
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
>
|
|
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
;
}
|
|
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});
}
|
|
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
;
}
|
|
1
2
3
4
5
6
7
8
9
|
(
function
( window){
$(document).ready(
function
()
{
// 生成系统菜单
generateSystemMenu();
// 登录框垂直居中
centerComponent($(
"#login_dynamic_wrapper"
));
});
})( window );
|
