ecshop添加可折叠的分类列表

源码技巧15年前 (2010-08-19)13370
对于添加可折叠列表的功能其实大部分都是对模板做些调整,加上一些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]

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。