<!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>
