帖子列表页，主题分类默认展开修改方法

elevensky · 发表于 2011-4-7 16:23:23

今天给大家讲解一个下指示点，是关于主题分类展开效果的默认修改方法。

情况如下：当我们默认打开一个帖子列表页的时候，如果这个帖子类表也存在的主题分类非常多的话，他默认就会折叠起来，但是我们通常希望默认丢失让他展开的，这样有利于用户第一次能直观的看到这个版块下的分类。

下面我就带着大家看看如何将它的默认状态修改为展开，首先我们打开这个模板页的模板文件，forumdisplay_list.htm找到这段代码

<scripttype="text/javascript">showTypes('thread_types');</script>

找到这个这个展开/收起的按钮时如何生成的。

function showTypes(id) {
var o = $(id);
if(!o) return false;
var s = o.className;
var baseh = o.getElementsByTagName('li')[0].offsetHeight * 2;
var tmph = o.offsetHeight;
var lang = ['展开', '收起'];
var cls = ['unfold', 'fold'];
if(tmph > baseh) {
var octrl = document.createElement('li');
octrl.className = cls[0];
octrl.innerHTML = lang[0];
o.insertBefore(octrl, o.firstChild);
o.className = s + ' cttp';
octrl.onclick = function () {
if(this.className == cls[0]) {
o.style.height = 'auto';
this.className = cls[1];
this.innerHTML = lang[1];
} else {
o.style.height = '';
this.className = cls[0];
this.innerHTML = lang[0];
}
}
}
}

复制代码

通过这段代码我们看到，默认的状态下如果主题分类不够多的话是没有那个控制按钮的，程序通过判断主题分类中的个数对<ul id="thread_types" class="ttp bm cl">的影响从而添加相应的代码，从而控制主题分类的显隐。

首先var baseh = o.getElementsByTagName('li')[0].offsetHeight * 2;

根据第一个主题分类的高乘以2，来判断主题分类的个数是否达到了2行。var tmph = o.offsetHeight;将会读取当前主题分类的父框的考度，如果超过了两行，他的实际高度就会大于baseh，则执行下面的代码，通过css默认隐藏掉多余的主题分类。然后插入展开/收起的控制按钮，并绑定onclick事件，进行逆操作。经过修改后的函数变为：

function showTypes(id) {
var o = $(id);
if(!o) return false;
var s = o.className;
var baseh = o.getElementsByTagName('li')[0].offsetHeight * 2;
var tmph = o.offsetHeight;
var lang = ['展开', '收起'];
var cls = ['unfold', 'fold'];
if(tmph > baseh) {
var octrl = document.createElement('li');
octrl.className = cls[1];
octrl.innerHTML = lang[1];
o.insertBefore(octrl, o.firstChild);
o.className = s + ' cttp';
o.style.height = 'auto';
octrl.onclick = function () {
if(this.className == cls[0]) {
o.style.height = 'auto';
this.className = cls[1];
this.innerHTML = lang[1];
} else {
o.style.height = '';
this.className = cls[0];
this.innerHTML = lang[0];
}
}
}
}

复制代码

82076322 · 发表于 2011-4-7 20:49:25

yaclty · 发表于 2011-4-8 17:08:01

好！

X-kaifa · 发表于 2011-4-11 11:14:58

先保存起来！

X-kaifa · 发表于 2011-4-12 14:36:35

本公司专业做php，java项目外包和人才派遣。QQ；1584414787
电话；13121777156 联系人；王懿芳

yinjie8888 · 发表于 2011-5-5 11:54:14

918wz · 发表于 2011-5-15 21:57:55

收藏起来！

i1668 · 发表于 2011-5-16 21:01:44

沐青年华 · 发表于 2011-5-21 20:52:06

很好

不太行 · 发表于 2011-5-31 09:07:57

这个正好需要！谢谢了！

		自动登录	找回密码
密码			立即注册

帖子列表页，主题分类默认展开修改方法

本帖子中包含更多资源