首页 > 源码技巧 > ecshop添加可折叠的分类列表
2010
08-19

ecshop添加可折叠的分类列表

对于添加可折叠列表的功能其实大部分都是对模板做些调整，加上一些js脚本就可以了。我们分两步来完成，一是调整模板生成方便我们js操作的html结构，二是书写js脚本，完成功能。废话不多说，马上开干。

一、调整模板:
接上篇一样，我们这次要调整的还是category_tree.lbi文件，以前生成的分类是放到
里面，部分div的概念，我们用js对
这些标签的操作没有用
来的方便，所以我们书写下面代码，把我们一级分类做成一个”id-header”的div，把分类下的二级分类放到一个”id-centent”下的div里面。这样调整后我们就可以通过js动态的改变二级分类div的现实不显示来完成菜单的折叠功能了。当然在改变之前我们要给分类前面加入一个img来显示折叠的+和-号，代码如下：




{$cat.name|escape:html}

{$cat.name|escape:html}

下面给出模板调整后的代码：
二、添加js脚本加入动态控制
正如前面的代码所写，在每个折叠的img的onclick都调用”changedisplaystate(’{$cat.id}-content’,'{$cat.id}-images’);” ，下面我们来实现这个函数，这个函数就是根据穿的id-content和id-images来调整他们的属性，比如展开的时候就是把id-content这个div的css style里面的display改成block，这样div就可以显示，然后把id-images的src改成minus的图片，完成整个折叠的过程，下面是代码：
三、完善全部打开和合并
上面的代码完成之后我们可以完成大部分的功能，但是刚开始所有的分类都是展开的，如果客户想全部合上，让客户一个个点击合并是不是用户体验太差了，你可以再这个category里面加上一个按钮改成全部打开或者全部，然后在那个打开和合并的image的onclick里面调用changeAllDisplayState函数，下面给出这个函数的具体代码，他是便利categeory下面所有的div，如果是id—content就改变它的display属性，变成block后者none，然后改变里面所有id-images为minus或者plus图片，完成这些也就完成了整个category的打开和合并了，废话少说，上代码：
//改变所有的状态，并且换图片
//parentID为分类的那个层，应该是category，后面的state是要改变成的状态，为none或者block
function changeAllDisplayState(parentID,state)
{
l=$(parentID).getElementsByTagName('div');
c=[];
for(i=0;i h=l[i].id;
if(h.substr(h.indexOf('-')+1,h.length)=='content')
{
l[i].style.display = state;
categoryID = h.substr(0,h.indexOf('-')-1);
imageID = categoryID+"-images";
if(state == 'none')
{
$(imageID).src = 'images/green/minus.gif';
}
else
{
$(imgUrl).src = 'images/green/plus.gif';
}
}
}
}[/i][/i]
作者：访客
访客
热淘博客 站点 QQ交谈

您可能还会对这些文章感兴趣！

《本文》有 0 条评论

留下一个回复