JavaScript案例精解（四）
属性页
效果图
思路：用span标签制作页标题，用div标签制作内容页面，通过span标签的click事件来控制相应div的显示与隐藏。
HTML代码：
<style type="text/css">
/*标题标签及间隔标签的样式*/
span{ display:inline-block; font-size:12px;}
/*标题标签的样式*/
.tab{ background-image:url(images/titlebg.gif); width:60px; text-align:center; cursor:hand}
/*间隔标签的样式*/
.spliter{ width:10px;}(车延禄)
/*内容页面的样式*/
.con{ text-align:left; display:none; font-size:12px; background-color:#ffeeee; border-color:pink; border-width:1px; border-style:solid; width:300px; height:100px;}
</style>
<body>
<form id="form1" runat="server">
<div id="dd">
<!--标题标签与间隔标签-->
<div id="titles">
<span id="news" class="tab" style=" background-image:url(images/titlebg1.gif)" onclick="sel(this)">新闻</span>
<span id="Span1" class="spliter"></span>
<span id="car" class="tab" onclick="sel(this)">汽车</span>
<span id="Span2" class="spliter"></span>
<span id="sport" class="tab" onclick="sel(this)">体育</span>
<span id="Span3" class="spliter"></span>
<span id="girl" class="tab" onclick="sel(this)">女性</span>
</div>
<!--内容页面-->
<div id="contents">
<div id="divnews" style="display:block;" class="con">
......
</div>
<div id="divcar" class="con">
......
</div>
<div id="divsport" class="con">
......
</div>
<div id="divgirl" class="con">
......
</div>
</div>
</div>
</form>
</body>
Javascript代码：
<script language="javascript">
//当点击标题标签时触发
function sel(t)
{
resettitle(); //重置标题标签
resetcontent(); //隐藏内容页面
t.style.backgroundImage="url(images/titlebg1.gif)";
var c = document.getElementById("div"+t.id);
c.style.display = "block";
}
//隐藏所有的内容页面
function resetcontent()
{
document.getElementById("divnews").style.display="none";
document.getElementById("divcar").style.display="none";
document.getElementById("divsport").style.display="none";
document.getElementById("divgirl").style.display="none";
}
(车延禄)
//重置所有的标题标签的样式
function resettitle()
{
document.getElementById("news").style.backgroundImage="url(images/titlebg.gif)";
document.getElementById("car").style.backgroundImage="url(images/titlebg.gif)";
document.getElementById("sport").style.backgroundImage="url(images/titlebg.gif)";
document.getElementById("girl").style.backgroundImage="url(images/titlebg.gif)";
}
</script>
QQ面版
效果图
思路：在XML中配置QQ面版中的标题与内容，然后用javascript读取XML加载相应内容。
每个QQ面版包含两个面版：标题面版和内容面版。
在点击标题面版的时候，先把所有面版的内容面版收缩，再显示被点击标题的内容面版。
XML代码
<?xml version="1.0" encoding="utf-8" ?>
<panes>
<pane id="p1" title="个人文件夹1" titlebackcolor="green" contentbackcolor="yellow" titlebackimage="" contentbackimage="" borderwidth="1" bordercolor="blue">
<content id="pc11" image="images/qq/p1.gif" text="我的文档1" url="#"></content>
<content id="pc12" image="images/qq/p2.gif" text="我的视频1" url="#"></content>
<content id="pc13" image="images/qq/p3.gif" text="我的图片1" url="#"></content>
</pane>
<pane id="p2" title="个人文件夹2" titlebackcolor="green" contentbackcolor="yellow" titlebackimage="" contentbackimage="" borderwidth="1" bordercolor="blue">
<content id="pc11" image="images/qq/p4.gif" text="我的文档2" url="#"></content>
<content id="pc12" image="images/qq/p5.gif" text="我的视频2" url="#"></content>
<content id="pc13" image="images/qq/p6.gif" text="我的图片2" url="#"></content>
</pane>
<pane id="p3" title="个人文件夹3" titlebackcolor="green" contentbackcolor="yellow" titlebackimage="" contentbackimage="" borderwidth="1" bordercolor="blue">
<content id="pc11" image="images/qq/p7.gif" text="我的文档3" url="#"></content>
<content id="pc12" image="images/qq/p8.gif" text="我的视频3" url="#"></content>
<content id="pc13" image="images/qq/p9.gif" text="我的图片3" url="#"></content>
</pane>
<pane id="p4" title="个人文件夹4" titlebackcolor="green" contentbackcolor="yellow" titlebackimage="" contentbackimage="" borderwidth="1" bordercolor="blue">
<content id="pc11" image="images/qq/p1.gif" text="我的文档4" url="#"></content>
<content id="pc12" image="images/qq/p3.gif" text="我的视频4" url="#"></content>
<content id="pc13" image="images/qq/p5.gif" text="我的图片4" url="#"></content>
</pane>
</panes>
id：面版的编号
title：标题面版的文字(车延禄)
titlebackcolor：标题面版的背景色
contentbackcolor：内容面版的背景色
titlebackimage：标题面版的背景图片
contentbackimage：内容面版的背景图片
borderwidth：QQ面版的边框宽度
bordercolor：QQ面版的边框颜色
image:内容面版中每一项图片的的地址
text：内容面版中每一项文字
url：内容面版中每一项被点击时要导航去的地址
HTML代码：
<body>
<form id="form1" runat="server">
<div id=dd>
<script>ShowQQ("dd");</script>
</div>
</form>
</body>
JavaScript 代码：
<script language="javascript">
var width=200;
var contentheight = 300;
var xmldoc = new ActiveXObject("Microsoft.XMLDOM");
xmldoc.async = false;
xmldoc.load("QQPane.xml");
var root = xmldoc.documentElement;
//控制QQ面版显示的主函数，形参接收的是父对象的ID，即要在哪个HTML元素内显示QQ面版
function ShowQQ(parentid)
{
var toppane = document.createElement("div");// 最外层的div
toppane.id = "QQPane";
toppane.style.fontSize = 12;
toppane.style.width = width;
toppane.style.borderWidth = 1;
toppane.style.borderStyle = "solid";
toppane.style.borderColor = "blue";
//根据XML文件的配置来创建QQ面版（标题面版和内容面版）
createPane(toppane);
//将最外层的DIV加到窗体中
document.getElementById(parentid).appendChild(toppane);
}
//创建标题面版(车延禄)
function createTitle(node)
{
var titlepane = document.createElement("div");
titlepane.id = "title"+node.attributes[0].text;
titlepane.style.textAlign = "center";
titlepane.style.cursor = "hand";
titlepane.style.borderStyle = "outset";
titlepane.style.borderWidth = 1;
titlepane.style.borderColor="#00ffff";
titlepane.innerHTML = node.attributes[1].text;
titlepane.style.backgroundColor = node.attributes[2].text;
titlepane.style.backgroundImage = node.attributes[4].text;
//添加标题面版被点击的事件，先隐藏所有的内容面版，再显示该标题面版对应的内容面版
titlepane.onclick = function()
{
var itempane = document.getElementById("QQPane");
for(var i=0;i<itempane.childNodes.length;i++)
{
itempane.childNodes[i].childNodes[1].style.display = "none";
}
//显示当前标题面版下的内空面版
var showid = "item"+node.attributes[0].text;
var showpane = document.getElementById(showid);
showpane.childNodes[1].style.height = contentheight;
showpane.childNodes[1].style.display = "block";
};
return titlepane;
}
//创建内容面版
function createContent(node,islast)
{
var contentpane = document.createElement("div");
contentpane.id = "content"+node.attributes[0].text;
contentpane.style.backgroundColor = node.attributes[3].text;
contentpane.style.backgroundImage = node.attributes[5].text;
contentpane.style.height = contentheight;
contentpane.style.overflow = "auto";
contentpane.style.textAlign= "center";
contentpane.style.cursor = "default";
//如果不是最后一个内容面版，则把内容面版设为高度为0，即不可见
if(!islast)
{
contentpane.style.height = 0;
}
return contentpane;
}
//创建内容面版中的每个图标和文本，形参parent代表的上一级元素对象（即所在内容面版的对象）
//形参paneNode是代表在XML文件中上一级元素节点
function createContentItem(parent,paneNode)
{
//添加分隔条
var spliter = document.createElement("div");
spliter.style.height=10;
parent.appendChild(spliter);
//循环XML中当前元素下的所有子元素，并根据XML配置生成图标与文本
for(var j=0;j<paneNode.childNodes.length;j++)
{
//图标文本标签包含image和文本的显示
var contentitem = document.createElement("div");
contentitem.style.cursor = "hand";
contentitem.style.height = 50;
//contentitem.style.width = 50;
contentitem.style.textAlign = "center";
//contentitem.style.backgroundColor="red";
//显示图标的img 标签
var contentimage = document.createElement("img");
contentimage.src = paneNode.childNodes[j].attributes[1].text;
contentimage.width=40;
contentimage.height=40;
contentimage.style.textAlign="center";
//显示文本的DIV标签
var contenttext = document.createElement("div");
contenttext.innerHTML = paneNode.childNodes[j].attributes[2].text;
contentitem.appendChild(contentimage);
contentitem.appendChild(contenttext);
//在每一个图标之间添加分隔条
parent.appendChild(contentitem);
var spliter = document.createElement("div");
spliter.style.height=10;
parent.appendChild(spliter);
}
}
function createPane(toppane)
{
//循环根元素下的第一级子元素
for(var i=0;i<root.childNodes.length;i++)
{
var itempane = document.createElement("div");//每一大项的div
itempane.id = "item" + root.childNodes[i].attributes[0].text;
//创建标题面版
var titlepane = createTitle(root.childNodes[i]);
//创建内容面版，其中第二个形参代表该内容面版是不是最后一个内容面版。
var contentpane = createContent(root.childNodes[i],(i==root.childNodes.length-1?true:false));
//创建内容面版中的每一个图标和文本
createContentItem(contentpane,root.childNodes[i]);
itempane.appendChild(titlepane);
itempane.appendChild(contentpane);
toppane.appendChild(itempane);
}
}(车延禄)
</script>
