JavaScript案例精解（四）

来源：互联网发布：银河创想 java面试题编辑：程序博客网时间：2024/06/17 16:54

属性页
效果图

思路：用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>