SlideMenu(老版本QQ好友分组列表样式) 

<!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>SlideMenu</title>
<style type="text/css">

#menuBox {width:150px; background-color:silver; text-align:center; border:solid 1px red;}
</style>
<script type="text/javascript">
function SlideMenu(itemHeight)
{
    var self = this;
    
    this.index = 0;
    this.speed = 10;
    this.selectedIndex = 0;
    
    var lastItem;
    
    this.AddItem = function(caption,element)
    {
        if(this.index==this.selectedIndex)
        {
            itemHeight = 200;
        }
        else
        {
            itemHeight = 0;
        }
        
        var tmp = document.getElementById(element);
        //Title
        var titleDiv = document.createElement("DIV");
        titleDiv.style.backgroundColor = "gray";
        titleDiv.style.color = "white";
        titleDiv.innerHTML = caption;
        titleDiv.style.width = "100%";
        titleDiv.style.cursor = "pointer";
        
        //Content
        var contentDiv = document.createElement("DIV");
        contentDiv.id = "item"+this.index;
        contentDiv.style.backgroundColor = "#03487F";
        contentDiv.style.overflow = "hidden";
        contentDiv.appendChild(tmp);
        contentDiv.style.height = itemHeight+"px";
        
        titleDiv.setAttribute("item",contentDiv.id);
        if(document.attachEvent)
        {
            titleDiv.attachEvent("onclick",ItemClick);
        }
        if(document.addEventListener)
        {
            titleDiv.addEventListener("click",ItemClick,false);
        }
        
        document.getElementById("menuBox").appendChild(titleDiv);
        document.getElementById("menuBox").appendChild(contentDiv);
        
        if(this.index==this.selectedIndex)
        {
            lastItem = contentDiv;
        }
        
        this.index += 1;
    }
    
    var ItemClick = function(evt)
    {
        var clickObj;
        if(document.attachEvent)
        {
            clickObj = window.event.srcElement;
        }
        else if(document.addEventListener)
        {
            clickObj = evt.target;
        }
        
        if(!flag)
        {
            return false;
        }
        
        var itemID = clickObj.getAttribute("item");
        
        Slide(itemID);
    }
    var flag = true;
    Slide = function(objID)
    {
        var obj = document.getElementById(objID);
        if(parseInt(obj.style.height)<200)
        {
            flag = false;
            obj.style.height = (parseInt(obj.style.height)+self.speed)+"px";
            if((parseInt(lastItem.style.height)-self.speed)<0)
            {
                lastItem.style.height = "0px";
            }
            else
            {
                lastItem.style.height = (parseInt(lastItem.style.height)-self.speed)+"px";
            }
            setTimeout("this.Slide('"+objID+"')",1);
        }
        else
        {
            flag = true;
            lastItem = obj;
        }
    }
}
</script>
</head>
<body>
<input type="text" id="txt" style="width:200px;" />
<input type="button" id="btn" value="ClickMe" />
<select id="sel"><option>Football</option><option>Basketball</option></select>
<div id="menuBox"></div>
<input type="button" onclick="alert(document.getElementById('menuBox').innerHTML);" value="ShowDivContent" />
<script type="text/javascript">
var list = new SlideMenu(50);
list.selectedIndex = 1;
list.AddItem("标题一","txt");
list.AddItem("标题二","btn");
list.AddItem("标题三","sel");
</script>
</body>
</html>

 

posted @ 2008-07-09 06:59  CoderWayne  阅读(203)  评论(0)    收藏  举报