|
锁定老帖子 主题：使用HTML＋CSS编写一个灵活的Tab页
该帖已经被评为精华帖
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2007-05-08
总体感觉不太细腻，效果是有了。
|
| 返回顶楼 | |
|
发表时间：2007-05-08
downpour 写道 最近在研究CSS，正好结合项目做了一个灵活的Tab页，使用纯HTML＋CSS实现，正好总结一下。
首先看一下预览界面： 
样例HTML可以访问：http://www.demo2do.com/htmldemo/school/attendance/AttendanceGlobal.html 下面开始讲述一下完成上述页面的步骤。 1. 构建HTML 构建HTML是整个过程最基础的部分。我们构建HTML比较关键的一个原则就是“还HTML标签其本来的含义”。所以在这里，我们应该合理分析一下期望做到的HTML的结构的情况，并加以分析，选择比较合适的HTML标签，而不是采用非标准的Table布局或者充斥着大量div和class的布局方式。事实上，现在存在着一种误区，就是凡事采用了DIV＋CSS的方式进行页面编程的就是Web标准的，其实这是完全错误的观点，很容易就导致了“多div症”（divitus）或者“多类症”（classitis）。 回到正题，我们分析一下页面样式，可以将整个Tab页分成2个部分，分别是一级菜单和二级菜单，他们有类似的特点，并以横向方式排列。HTML标签中的无序列表就可以反映出这种逻辑关系。所以我们分别采用2个无序列表来表示一级菜单和二级菜单。代码如下： 顺便贴一个我写的 <!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>
<title>Untitled Page</title>
<link type="text/css" href="gridstyle.css" rel="StyleSheet"/>
<script language="javascript" type="text/javascript">
var HK_TabItem = function(){
this.tabControl = null;
var button = document.createElement("div");
var items = new Array();
var active = false;
this.appendItem = function(value){
items[items.length] = value;
value.oldVisible = value.style.display;
value.style.display = "none";
}
this.getElement = function(){
return button;
}
this.setCaption = function(value){
button.innerText = value;
}
this.setActive = function(){
if(active){return};
button.className = "tab_tabbuttonactive";
this.tabControl.setActiveTab(this);
for(var i=0;i<items.length;i++){
items[i].style.display = items[i].oldVisible;
}
active = true;
}
this.deActive = function(){
button.className = "tab_tabbutton";
for(var i=0;i<items.length;i++){
items[i].style.display = "none";
}
active = false;
}
function onClick(){
button.tab.setActive();
}
button.attachEvent("onclick",onClick);
button.className = "tab_tabbutton";
button.tab = this;
}
var HK_TabControl = function(){
var activeTab = null;
var banner =document.createElement("div");
var head = document.createElement("div");
var line = document.createElement("div");
var tab = document.createElement("div");
var padding = document.createElement("div");
banner.className = "tab_banner";
head.className = "tab_head";
line.className = "tab_line";
padding.className = "tab_padding";
line.innerHTML = " ";
tab.appendChild(banner);
tab.appendChild(line);
banner.appendChild(head);
this.tabs = new Array();
this.setActiveTab = function(value){
if(activeTab!=null){
activeTab.deActive();
}
activeTab = value;
}
this.getActiveTab = function(){
return activeTab;
}
this.appendTab = function(){
var tab = new HK_TabItem();
banner.appendChild(tab.getElement());
tab.tabControl = this;
return tab;
}
this.parent = null;
this.init = function(){
this.parent.appendChild(tab);
banner.appendChild(padding);
padding.style.pixelWidth = banner.offsetWidth - padding.offsetLeft-2;
}
}
</script>
</head>
<body>
<div id="test"></div>
<div id="test1" style="width: 100px; height: 100px">
<input id="Button1" type="button" value="button" />
asdfasdf</div>
<div id="test2" style="width: 100px; height: 100px">
asdfasdf<input id="Text1" type="text" /></div>
<div id="test3" style="width: 100px; height: 100px">
<input id="Checkbox1" type="checkbox" />asdfasdf</div>
<div id="test4" style="width: 100px; height: 100px">
asdfasdf<input id="Hidden1" type="hidden" /></div>
<script>
var tabcontrol = new HK_TabControl();
var tab = tabcontrol.appendTab();
tab.setCaption("test1");
tab.appendItem(document.getElementById("test1"));
var tab = tabcontrol.appendTab();
tab.setCaption("test2");
tab.appendItem(document.getElementById("test2"));
var tab = tabcontrol.appendTab();
tab.setCaption("test3");
tab.appendItem(document.getElementById("test3"));
var tab = tabcontrol.appendTab();
tab.setCaption("test4");
tab.appendItem(document.getElementById("test4"));
tab.setActive();
tabcontrol.parent = document.getElementById("test");
tabcontrol.init();
</script>
</body>
</html>
css:
tab_tabbuttonactive
{
cursor:hand;
text-align:center;
vertical-align:middle;
background-color: #cde6f8;
border-width:1px;
border-top:solid 1px #336699;
border-left:solid 1px #336699;
border-right:solid 1px #336699;
display:inline;
float:left;
height:26px;
width:80px;
text-align:center;
vertical-align:middle;
line-height:2;
}
.tab_padding
{
cursor:hand;
text-align:center;
vertical-align:middle;
border-bottom:solid 1px #336699;
border-width:1px;
background-color: #98b1c4;
display:inline;
float:left;
height:27px;
}
.tab_tabbutton
{
cursor:hand;
text-align:center;
vertical-align:middle;
border-bottom:solid 1px #336699;
border-width:1px;
background-color: #98b1c4;
display:inline;
float:left;
height:26px;
width:80px;
text-align:center;
vertical-align:middle;
line-height:2;
}
.tab_banner
{
cursor:hand;
text-align:center;
vertical-align:middle;
background-color: #98b1c4;
height:27px;
}
.tab_head
{
cursor:hand;
text-align:center;
vertical-align:middle;
border-bottom:solid 1px #336699;
border-width:1px;
background-color: #98b1c4;
display:inline;
float:left;
width:12px;
height:27px;
}
.tab_line
{
background-color:#cde6f8;
line-height: 6px;
}
|
| 返回顶楼 | |
