对于一个网站来讲均会存在公共页面,如异常页面、系统菜单等等,本章针对斗医系统菜单做一下介绍。可以想一想常见网站的系统菜单形式,一般都是菜单项在每个页面的内容不变,区别是菜单的选择状态不同。
JSP可以使用<%@ include file="">语句把公共系统菜单页面引进来,但本文不准备使用JSP,原因有两个:I、当服务器把HTTP请求的结果Response返回给客户端之前,需要把JSP先转换为HTML页面,然后再吐给客户端,这中间多了一个转换过程;II、随着WEB3.0的发展,JS的用武之地越来越多,本系统准备多使用一下JS。
同样HTML也可以通过<iframe>或<object>把页面引进来,本文亦不准备使用HTML的<iframe>引入菜单HTML页面,因为<iframe>对网站的性能有一定的损耗,同时在WEB安全方面存在通过<iframe>透骗用户的可能性。
【备注】:上面的说法并非十分严格,这些信息只是在实际工作中通过测试发现的。若对上面的个人观点感兴趣的话,大家可以在谷歌上搜索类似话题。
四、斗医公共系统菜单
1、实现思路
(1)HTML页面引用生成公共系统菜单的JS文件
(2)当HTML页面加载完后就调用JS的接口创建公共系统菜单,并根据当前页面设置菜单项的选中状态。这里面涉及到判读页面是否加载完的知识点,可以使用JS的onload(),也可以使用if(document.readyState=="complete"),两者在加载完成稍有区别。
2、导航菜单草图及菜单的作用
【搜索框】:可以搜索系统中相关的治疗医症的案例或相关医学高手
【下战书】:这是本系统的一个重点,之所以想叫斗医,也就是想有某个医学高手开出一个药方,里面讲明该药方治疗病症,及治疗原理,其他的医学高手可以对其进行点评,也可以给出其它的优于该药方的药方。这样可以起到一个相互探讨的目的
【首页】:顾名思义就是所有的医学药方的查看处
【专家】:后续可以把给出药方较好的人评价为专家,评价面要全面,可以升级为专家,也可以从专家队伍中剔除
3、目录规划
在斗医运行环境D:\medical\war下分别创建module、theme、js文件夹,其中module下放置HTML文件,用于显示页面内容;theme下放置图片和CSS文件,用于渲染页面样式;js下放置页面响应动作。其结构如下:
4、引入JQuery
伴随着JS的发展,很多优秀的JS工具都孕育而生,比如JQuery、SeaJs、underscorejs、NodeJs等等,关于JQuery的更多说明大家可以在51cto的博客上搜索到很多,此处不再赘述,就个人而言还是比较喜欢JQuery的便捷性,对于其UI组件(像表、树、日期、遮罩等)建议读其源码而非直接使用。
从JQuery官网http://jquery.com/download/下载后放置到D:\medical\war\js\common下,把其命名为jquery.js
【备注】:我下载的是2.0.3未压缩版本,之所以选择未压缩主要是为后面看源码方便;把jquery_2.0.3.jar命名为jquery.js是为了引用时少写版本号,此处意义不大。
5、页面写作之前的话
(1)写一个网站一定要清楚这个网站的定位,否则既便做的很漂亮、性能很好,网站也无法长久生存,这点是做网站应用的前提条件。此斗医系统是我当初的心血来潮,主要是为了练手用的,所以其定位见上面《导航菜单草图及菜单的作用》。
(2)曾看过一本关于CSS的书《别具光芒 CSS网页布局案例剖析》,里面讲到如何写一个页面:先不管它的展显形式,先把内容填写进去,然后使用CSS对其进行装饰。
(3)W3C在制定HTML5规范时有一句话讲的很好,在此分享一下:HTML文件只负责显示内容,CSS只负责内容的展显方式。
关于网页方面的知识,可以问一下谷歌,肯定存在不少人才,会把上面看似无关联的话题清晰地讲出来。
6、导航菜单实现过程
(1)在D:\medical\war\module\navigation下创建navigation.html文件(编码格式为UTF-8),内容如下
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
|
<!doctype html>
<
html
>
<
head
>
<
title
>medical</
title
>
<
link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"../../theme/navigation/navigation.css"
>
</
head
>
<
body
>
<
div
class
=
"system_menu"
>
<
div
class
=
"system_menu_wrapper"
>
<
div
class
=
"system_menu_search"
>
<
input
type
=
"text"
id
=
"system_menu_searcher"
>
</
div
>
<
div
class
=
"system_menu_item"
>
<
ul
>
<
li
><
a
href
=
"#"
>下战书</
a
></
li
>
<
li
><
a
href
=
"#"
>首页</
a
></
li
>
<
li
><
a
href
=
"#"
>专家</
a
></
li
>
</
ul
>
</
div
>
<
div
class
=
"system_menu_user"
>
<
div
class
=
"system_menu_user_wrapper"
>
<
a
href
=
"#"
><
i
></
i
><
span
>陈许诺</
span
></
a
>
</
div
>
<
div
class
=
"system_menu_user_setting"
>
<
ul
>
<
li
><
i
class
=
"system_menu_user_setting_home"
></
i
><
span
>主页</
span
></
li
>
<
li
><
i
class
=
"system_menu_user_setting_set"
></
i
><
span
>设置</
span
></
li
>
<
li
><
i
class
=
"system_menu_user_setting_exit"
></
i
><
span
>退出</
span
></
li
>
</
ul
>
</
div
>
</
div
>
</
div
>
</
div
>
</
body
>
</
html
>
|
【备注】:从这个文件中可以看到对于标签定义了class。有人问你怎么知道这样定义内容和样式?我只能回答:因这是我实现了的,所以我知道这样做。其实这里面有一个“量变”的积累过程,写20多个页面之后自然就清楚了,解释起来真说不清楚。
(2)在D:\medical\war\theme\navigation下创建navigation.css文件(编码格式为UTF-8),此时用浏览器打开navigation.html文件,其内容如下:
下面我们用CSS把其打扮的漂亮一些,在navigation.css中先定义如下内容:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
body, input, a, ul{
font-family
:
'Helvetica Neue'
,
Helvetica
,
Arial
,
Sans-serif
;
font-size
:
14px
;
margin
:
0px
;
padding
:
0px
;
}
/*
* 去掉前面圆点
*/
ul{
list-style
:
none
;
}
/**
* 去掉下划线
*/
a{
text-decoration
:
none
;
}
|
这些都是全局性质的样式定义,其作用如注释所示,浏览器打开navigation.html文件效果如下:
(3)使搜索框、菜单项、用户设置都在一行显示
缺省情况下div的宽度都是当前屏幕的宽度,所以定义多个div时都是上下并列的,这也是上图上看到的搜索框、菜单项(显示为蓝色部分)、用户设置(蓝色字体的下面部分)都是上下并列的。我们在navigation.css中追加下面内容:
1
2
3
4
5
6
7
8
9
10
11
|
/*
* 搜索框、菜单项、用户项均浮动
*/
.system_menu_search, .system_menu_item{
float
:
left
;
}
.system_menu_user{
float
:
right
;
width
:
120px
;
height
: inherit;
}
|
其内容样式变为如下效果:
(4)设置菜单项背景为蓝色,高度固定为50像素
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
/*
* 斗医系统导航菜单
*/
.system_menu{
height
:
50px
;
width
:
100%
;
background-color
:
#0767c8
;
margin
:
0px
;
}
/*
* 系统菜单包裹层高度与父同高,且居中显示
*/
.system_menu_wrapper{
margin
:
0
auto
;
height
: inherit;
width
:
960px
;
clear
:
both
;
}
|
【备注】:这里的clear:both是一个知识点,它的作用是当它的孩子元素设置为浮动时,会从该元素的标准流中脱离出来,它的高度就与孩子高度无关了,为了让它照样看起来像包含着孩子元素,就需要设置clear:both,有兴趣的可以读一下《【CSS】【10】CSS盒子clear属性和高度》
(5)美化全局搜索框
1
2
3
4
5
6
7
8
9
10
11
|
.system_menu_search input{
width
:
360px
;
height
:
36px
;
border
:
1px
solid
#045BB3
;
border-radius:
4px
;
/*使<input>垂直居中*/
margin-top
:
7px
;
margin-bottom
:
7px
;
/*在chrome浏览器下去掉<input>焦点时的外边框*/
outline
:
none
;
}
|
这里把搜索框的高度设置为36像素,宽度设置为360像素,同时有4个像素的圆角,不过需要注意的是border-radius在IE8下不起作用,这里不再处理兼容问题了,大家可以在谷歌上搜索CSS圆角,有很多关于兼容的解决方案。设置后的效果如下:
(6)从上图看菜单项(下战书、首页和专家)貌似看不到了,那接下来就美化一下它们的显示效果,在navigation.css中追加如下CSS代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
/*
* 系统菜单项设置
*/
.system_menu_item ul{
height
:
50px
;
line-height
:
50px
;
margin-left
:
15px
;
}
.system_menu_item li{
float
:
left
;
width
:
50px
;
margin
:
auto
8px
;
text-align
:
center
;
}
.system_menu_item li:hover{
background-color
:
#ff901d
;
}
.system_menu_item a, .system_menu_user_wrapper a{
color
:
#FFF
;
}
|
该CSS设置后的效果是菜单项是白色字体,菜单文本都是居中显示,且菜单项之间有间隔,当鼠标放到菜单项上时背景色变为棕***,效果图如下:
(7)先下载两个图片以备后面使用:把下载后的navigation.png放置到D:\medical\war\theme\navigation下面;把default.jpg放置到D:\medical\war\upload\default下面。在设置用户CSS样式之前,再熟悉一下用户的HTML结构:
在每个<span>之前都有一个<i>标签,里面内容为空,它的作用是设置图标用的。在navigation.css追加如下CSS让<i>、<span>元素浮动起来:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
/*
* 系统用户菜单项设置
*/
.system_menu_user{
float
:
right
;
width
:
120px
;
height
: inherit;
}
.system_menu_user_wrapper{
width
: inherit;
height
: inherit;
line-height
:
50px
;
}
.system_menu_user_wrapper i, .system_menu_user_wrapper span{
float
:
left
;
}
.system_menu_user_wrapper i, .system_menu_user_wrapper span, .system_menu_user_setting_home, .system_menu_user_setting_set, .system_menu_user_setting_exit, .system_menu_user_setting span{
float
:
left
;
}
.system_menu_user_wrapper span, .system_menu_user_setting span{
width
:
83px
;
text-align
:
center
;
}
|
此时除了“用户名”垂直居中显示之外(因为.system_menu_user_wrapper的line-height值设置与父div高度相同),其它的都看不出来变化。下面再设置.system_menu_user_wrapper i把用户的头像显示出来
1
2
3
4
5
6
7
8
9
10
11
12
|
/*头像样式*/
.system_menu_user_wrapper i{
width
:
27px
;
height
:
27px
;
/*若无属性背景图片无法显示*/
display
: inline-
block
;
background-image
:
url
(../../upload/
default
/
default
.jpg);
background-repeat
:
no-repeat
;
/*居中显示*/
margin-top
:
12px
;
margin-left
:
10px
;
}
|
效果图如下:
(8)当鼠标放置在用户和头像菜单上时也希望背景色变为棕***
1
2
3
4
|
/*鼠标放置在用户菜单上时背景色变为棕****/
.system_menu_user_wrapper:hover, .system_menu_user_setting li:hover{
background-color
:
#ff901d
;
}
|
(9)最后按此思路设置用户设置的其它菜单项,在navigation.css中追加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
|
system_menu_user_setting li{
height
:
40px
;
line-height
:
40px
;
background-color
:
#095FB3
;
color
:
#FFF
;
border-top
:
1px
solid
#0D5AA5
}
.system_menu_user_setting_home, .system_menu_user_setting_set, .system_menu_user_setting_exit{
width
:
20px
;
height
:
20px
;
/*若无属性背景图片无法显示*/
display
: inline-
block
;
background-image
:
url
(navigation.png);
background-repeat
:
no-repeat
;
/*居中显示*/
margin-top
:
10px
;
margin-left
:
17px
;
}
.system_menu_user_setting span{
width
:
83px
;
text-align
:
center
;
}
.system_menu_user_setting_home{
background-position
:
-6px
-7px
;
}
.system_menu_user_setting_set{
background-position
:
-6px
-60px
;
}
.system_menu_user_setting_exit{
background-position
:
-6px
-87px
;
}
|
(10)缺省情况下我们希望用户菜单项下面的子元素(主页、设置、退出)不显示,只有当鼠标放置到用户菜单项时子元素才显示出来。
1
2
3
|
.system_menu_user_setting{
display
:
none
;
}
|
7、在第6步中通过HTML和CSS演示把菜单项绘制出来了,正如该文开头所说,我们希望这个菜单项是公用的,所以想通过JS生成此菜单,并把此菜单引入到每个页面中。
(1)在D:\medical\war\js\common下创建common.js文件,由于考虑到这是一个公共工具类,所以没有采用闭包
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
|
/**
* 生成系统公共菜单
*/
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><a href="#">首页</a></li>'
;
systemMenu +=
'<li><a href="#">专家</a></li>'
;
systemMenu +=
'</ul>'
;
systemMenu +=
'</div>'
;
systemMenu +=
'<div class="system_menu_user">'
;
systemMenu +=
'<div class="system_menu_user_wrapper">'
;
systemMenu +=
'<a href="#"><i></i><span>陈许诺</span></a>'
;
systemMenu +=
'</div>'
;
systemMenu +=
'<div class="system_menu_user_setting">'
;
systemMenu +=
'<ul>'
;
systemMenu +=
'<li><i class="system_menu_user_setting_home"></i><span>主页</span></li>'
;
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"
));
}
|
(2)修改D:\medical\war\module\login\login.html文件,首先引入navigation.css样式文件,其次再引入jquery.js、common.js和login.js文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!DOCTYPE HTML>
<
html
>
<
head
>
<
title
>medical</
title
>
<
link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"theme/navigation/navigation.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
>
<
h1
>This is Login page!</
h1
>
</
div
>
</
body
>
</
html
>
|
【备注】:在引用css和js文件时,一定要谨记文件的相对路径是相对web应用环境的,即我们的D:\medical\war
(3)创建D:\medical\war\js\login\login.js文件,这里使用jquery的ready方法来判断页面是否加载完,若加载完就调用common.js的生成菜单方法,把菜单追加到login.html的<div>中
1
2
3
4
5
6
|
(
function
( window){
$(document).ready(
function
()
{
generateSystemMenu();
});
})( window );
|
8、启动tomcat服务,在浏览器中输入http://localhost:8080/medical查看效果,会发现菜单已生成:
【备注】
(1)关于CSS样式一定要多写才能理解其含义,在写的过程中就像一个雕刻艺术家一凿凿地打磨,这个过程是痛并快乐的。
(2)上面写的navigation.html只是方便调试样式使用的,真正使用的是JS生成的导航菜单。
附件:http://down.51cto.com/data/2363735
本文转自qingkechina 51CTO博客,原文链接:http://blog.51cto.com/qingkechina/1322419,如需转载请自行联系原作者