您的位置：首页 > Web前端 > JavaScript

Html标签页的实现说明及结合JS基于对象特性的实现对比

2012-02-13 14:12 507 查看
最近*海*原有系统需要进行改进，可能会将Flex改为Flex与jsp相结合的方式，好发挥两者的优势。这两天在做html页面，页面内容主要展现在标签页中，其基础效果图如下所示：



为增强用户对标签页的体验效果，增加鼠标滑过时标签背景色更滑，选中某个标签后该标签应与标签内容形成一体等功能效果。标签页的标签可以使用列表来实现，标签页内容部分使用DIV来划分，此处仅显示DIV左右下三边框，上边框使用ul的下边框展示，便于选中某个标签时，通过控制标签下边框的隐藏，将标签与标签内容形成一个整体。代码实现如下所示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
ul{
border-bottom:1px solid #3366aa;
padding:0 0 27px 0;
margin:0;
width:600px;
margin-bottom:0;
}
li{
float:left;
display:inline;
list-style:none;
margin:0 5px 0 0;
line-height:26px;
padding:0 16px;
text-align:center;
border:1px solid #cccccc;
background-color:#CFE0F2;
border-bottom:0;
}
.selected{
border:1px solid #3366aa;
color:#34B4BD;
border-bottom:1px solid #ffffff;
background-color:#ffffff;
}
#acceptContent ,#processContent ,#associateWorkOrder ,#processCourse{
display:none;
border:1px solid #3366aa;
border-top:1px solid #ffffff;
width:600px;
height:300px;
font-weight::bold;
margin-top:0;
}
#requireContent{
display:block;
border:1px solid #3366aa;
border-top:1px solid #ffffff;
width:600px;
height:300px;
font-weight::bold;
margin-top:0;
}
</style>
</head>
<script>
var obj;	//记录选中标签，对其进行样式设置

//鼠标滑过时
function mouseOver(){
event.srcElement.style.color = '#ffffff';
event.srcElement.style.backgroundColor = '#006699';

}
//鼠标滑出时
function mouseOut(){
event.srcElement.style.color = "";
event.srcElement.style.backgroundColor = "";
}
//鼠标单击选中标签时
function onClick(showDiv){
//点击时标签样式
event.srcElement.style.color = "#34B4BD";
event.srcElement.style.backgroundColor = "#ffffff";
//设置选中标签的样式
if(obj != null){
obj.className="";
}
obj = event.srcElement;
obj.className = "selected";
//仅显示选中标签所对应内容
requireContent.style.display = "none";
acceptContent.style.display = "none";
processContent.style.display = "none";
associateWorkOrder.style.display = "none";
processCourse.style.display = "none";
showDiv.style.display = "block";
}
</script>
<body  >
<div>
<div>

</div>
<div>
<ul id="ospsrc" class="neocard">
<b><li onmouseover="mouseOver()" onmouseout="mouseOut()" onclick="onClick(requireContent)">标签1</li> </b>
<b><li onmouseover="mouseOver()" onmouseout="mouseOut()" onclick="onClick(acceptContent)">标签2</li> </b>
<b><li onmouseover="mouseOver()" onmouseout="mouseOut()" onclick="onClick(processContent)">标签3</li> </b>
<b><li onmouseover="mouseOver()" onmouseout="mouseOut()" onclick="onClick(associateWorkOrder)">标签4</li> </b>
<b><li onmouseover="mouseOver()" onmouseout="mouseOut()" onclick="onClick(processCourse)">标签5</li> </b>
</ul>
<div>
<div id="requireContent" >
<!--标签1模块-->
<label>标签1</label>
</div>
<div id="acceptContent">
<!--标签2模块-->
<label>标签2</label>
</div>
<div id="processContent">
<!--标签3模块-->
<label>标签3</label>
</div>
<div id="associateWorkOrder">
<!--标签4模块-->
<label>标签4</label>
</div>
<div id="processCourse">
<!--标签5模块-->
<label>标签5</label>
</div>
</div>
</div>
</div>
</body>
</html>

上述代码中标签内容使用了DIV，这样每个标签都会有一个DIV，只需要将标签内容填入对应DIV中即可。这样所有内容都写在了一个HTML页面中。我们还可以将每个标签页内容分别放到不同的HTML页面中，使用iFrame展示选中标签的内容：<iframe id="osptgt" width="100%" frameborder="0" src="content.html"></iframe>。之前使用JS控制某个DIV的显现与否，现在使用JS控制嵌入iFrame中的页面。

JavaScript是一种基于对象的语言，之所以不是面向对象的语言，最主要是因为它没有提供象抽象、继承、重载等有关面向对象语言的许多功能。但它却将一切内容都视为对象来处理。下面所展现的标签页的另一种实现更能体现这一点：将所有javaScript方法和属性封装在一个叫做NeoCard类中，将HTML标签视作对象，在初始化时对li标签进行注册鼠标事件。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312"/>
<title>页签</title>
<style type="text/css">
ul.neocard{
border-bottom:1px solid #3366aa;
padding:0 0 27px 0;
margin:0;
}
ul.neocard li{
float:left;
display:inline;
list-style:none;
margin:0 0 0 5px;
line-height:26px;
padding:0 16px;
cursor:hand;
text-align:center;
border:1px solid #cccccc;
background-color:#f4f4f4;
border-bottom:0;
}
ul.neocard li.selected{
border:1px solid #3366aa;
color:#e28822;
border-bottom:1px solid #ffffff;
background-color:#ffffff;
cursor:text;
}
</style>
<script type="text/javascript">
NeoCard={
init:function (osp,tgt,sci){
NeoCard.cs='selected';
var os=document.getElementById(osp).getElementsByTagName('li');
for(var i=0,il=os.length;i<il;i++){
os[i].attachEvent('onmouseover',NeoCard.omi);
os[i].attachEvent('onmouseout',NeoCard.omo);
os[i].attachEvent('onclick',NeoCard.ock);
}
NeoCard.fm=document.getElementById(tgt);
var m=20;//怎么获得这个值 探索中...
NeoCard.fm.height=document.body.clientHeight-NeoCard.ops(NeoCard.fm).y-m;
NeoCard.oc=os[sci];
NeoCard.fm.src=NeoCard.oc.src;
NeoCard.oc.className=NeoCard.cs;
},
ops:function(o){
var ps={x:o.offsetLeft||0,y:o.offsetTop||0};
o=o.offsetParent;
if(o){
var _ps=arguments.callee(o);
ps.x+=_ps.x;
ps.y+=_ps.y;
}
return ps;
},
//onmouseover
omi:function (){
var _om=event.srcElement;
if(_om==NeoCard.oc)return;
NeoCard.om=_om;
var s=NeoCard.om.style;
s.color='#ffffff';
s.backgroundColor='#006699';
},
//onmouseout
omo:function (){
var s=NeoCard.om.style;
s.color='';
s.backgroundColor='';
},
//onclick
ock:function (){
var _oc=event.srcElement;
if(NeoCard.oc==_oc)return;
NeoCard.oc.className='';
NeoCard.oc=_oc;
NeoCard.fm.src=NeoCard.oc.src;
NeoCard.oc.className=NeoCard.cs;
NeoCard.omo();
}
}
</script>
</head>
<body>
<ul id="ospsrc" class="neocard">
<li src="about:blank">页签</li>
<li src="about:blank">页签</li>
<li src="about:blank">页签</li>
<li src="about:blank">页签</li>
<li src="about:blank">页签</li>
</ul>
<iframe id="osptgt" width="100%" frameborder="0" src=""></iframe>
</body>
<script type="text/javascript">
NeoCard.init('ospsrc','osptgt',2);
</script>
</html>

两种实现方式没有本质上的区别，标签页内容是否聚合在同一个页面中是两者的主要区别。哪种设计方式更适合不能仅仅依靠设计原则，也要参考实际，界面只是初步，后续还要在页面上做开发。前者的设计在界面实现上更为简便些，后续的开发中在同一个页面使用Ajax等也可能带来较为简便的操作，不过界面的内容显得有些庞大。还需在实践中考验前者的想法。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  html function div iframe javascript border
相关文章推荐
新的分享
章节导航