位置：首页>> 网络编程>> ASP.NET>> 自适应内容高度的收缩与展开

自适应内容高度的收缩与展开

作者：xling　来源：蓝色理想　发布时间：2007-09-24 14:38:00　

标签：自适应,收缩

在FF下，如果内容含有FLASH，FLASH不会被隐藏掉，做为变通，我在收缩完成之后，将生成的内容容器隐藏掉了。

<!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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script language="javascript" type="text/javascript">function $(id){return document.getElementById(id)};function $c(tag){return document.createElement(tag)};function $evt(){ //只能应用在onmousemove,onmousedown等事件， //现在以知，不能用在 <a href="javascript:****">里，但是可以用在 <a onclick="****">里。 var func = $evt.caller; var evt; while(func != null){ evt = func.arguments[0]; if(evt && evt.constructor == Event) break; func = func.caller; } return evt;}function vControl(pChoice,pParm){ switch(pChoice){ case "OPENCLOSE": var evt = window.event || $evt(); var obj = evt.srcElement || evt.target; if(obj.tagName == "INPUT") return; obj = $(pParm); var expanded = (obj.style.display == "none" ? true : false); obj.style.display = ""; if(!obj.fNode){ var fNode = $c("DIV"); obj.parentNode.insertBefore(fNode,obj); fNode.appendChild(obj); obj.fNode = true; fNode.style.overflow = "hidden"; fNode.maxHeight = fNode.offsetHeight; fNode.perHeight = 35; }else var fNode = obj.parentNode; var max_ = obj.offsetHeight; if(fNode.expanded == undefined){ fNode.expanded = expanded; if(expanded){ fNode.style.overflow = "hidden"; fNode.style.height = "0px"; } }else fNode.expanded = !fNode.expanded; fNode.currHeight = fNode.expanded ? fNode.offsetHeight : 0; //fNode.style.height = fNode.currHeight + "px"; fNode.style.overflow = "hidden"; fNode.interval = setInterval("expand('" + pParm + "'," + fNode.expanded + ")",10); break; case "CHANGECOLOR": pParm.style.backgroundColor = "#e4e4e4"; pParm.style.cursor = "pointer"; break; case "RESETCOLOR": pParm.style.backgroundColor = ""; break; case "CHANGESUBCOLOR": pParm.className = arguments[2]; case "RESETSUBCOLOR": pParm.className = arguments[2] }}function expand(pId,pParm){ var obj = $(pId).parentNode; if(pParm){ var h_ = obj.offsetHeight + obj.perHeight; if(h_ >= obj.maxHeight){ h_ = obj.maxHeight; obj.style.overflow = "visible"; clearInterval(obj.interval); } obj.style.height = h_ + "px"; obj.style.display = ""; }else{ obj.style.overflow = "hidden"; var h_ = obj.offsetHeight - obj.perHeight; if(h_ <= 0){ h_ = 0; clearInterval(obj.interval); obj.style.display="none"; } obj.style.height = h_ + "px"; }}</script></head><body><button onclick="vControl('OPENCLOSE','aa')">aaaa</button><button onclick="vControl('OPENCLOSE','bb')">bbbb</button><table width="100％" border="0"> <tr> <td width="50％" valign="top"><div id="aa" style="display:none"><table width="200" border="1"> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr></table></div></td> <td valign="top"><div id="bb"> <table width="200" border="1"> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> </table> </div></td> </tr></table></body></html>

作者的blog：http://xling.blueidea.com

投稿

自适应内容高度的收缩与展开

猜你喜欢