在进行web开发的过程中，后台管理是一个非常重要的部分，而后台管理又常常因为数据的条目和类别太多使我们的网页设计人员常常感到头痛，毕竟有时常常得考虑在一个页面中显示很多的条目与内容，但是却又要保持页面的视觉效果，而这两者之间又常常是想冲突的。因此在我们进行后台设计时，引入一种竖向或者横向的伸缩列表，达到显示内容与视觉效果相和谐的目的。
伸缩列表有两种，一种是竖向的，这种常常在后台中使用，模拟的是电脑中文件夹的操作，而横向的更多的是用于网站的前台导航。因此，在这我们先介绍竖向伸缩列表的做法。
效果图如下所示：
该图是页面开始运行是的效果图，在每一个类别下面有若干小类，我们只要点击相应的类别就可以把相关类别展开，效果图如下所示，在点击一次，相关类别收缩。
其功能的实现方式是通过JavaScript来控制相应元素的显示与隐藏，关键的JavaScript代码如下：
function go(index)
{
var images=document.images;
if(images[index].src.indexOf(“add”)!=-1)
images[index].src=”images/dec.jpg”;
else
images[index].src=”images/add.png”;
var tables=document.getElementsByTagName(“table”);//.length;index=2*index+1;
if(tables[index].style.display==”none”)
tables[index].style.display=”block”;
else
tables[index].style.display=”none”;
}
</script>
你也可以通过点击这里获取该文件的原代码。
相关文章:
Comments
Leave a comment Trackback