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

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

 

下面我就带着大家看看如何将它的默认状态修改为展开,首先我们打开这个模板页的模板文件,forumdisplay_list.htm找到这段代码
<scripttype="text/javascript">showTypes('thread_types');</script>
找到这个这个展开/收起的按钮时如何生成的。
  1. function showTypes(id) {
  2.         var o = $(id);
  3.         if(!o) return false;
  4.         var s = o.className;
  5.         var baseh = o.getElementsByTagName('li')[0].offsetHeight * 2;
  6.         var tmph = o.offsetHeight;
  7.         var lang = ['展开', '收起'];
  8.         var cls = ['unfold', 'fold'];
  9.         if(tmph > baseh) {
  10.                 var octrl = document.createElement('li');
  11.                 octrl.className = cls[0];
  12.                 octrl.innerHTML = lang[0];
  13.  
  14.                 o.insertBefore(octrl, o.firstChild);
  15.                 o.className = s + ' cttp';
  16.  
  17.                 octrl.onclick = function () {
  18.                         if(this.className == cls[0]) {
  19.                                 o.style.height = 'auto';
  20.                                 this.className = cls[1];
  21.                                 this.innerHTML = lang[1];
  22.                         } else {
  23.                                 o.style.height = '';
  24.                                 this.className = cls[0];
  25.                                 this.innerHTML = lang[0];
  26.                         }
  27.                 }
  28.         }
  29. }
复制代码
通过这段代码我们看到,默认的状态下如果主题分类不够多的话是没有那个控制按钮的,程序通过判断主题分类中的个数对<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事件,进行逆操作。经过修改后的函数变为:
  1. function showTypes(id) {
  2.         var o = $(id);
  3.         if(!o) return false;
  4.         var s = o.className;
  5.         var baseh = o.getElementsByTagName('li')[0].offsetHeight * 2;
  6.         var tmph = o.offsetHeight;
  7.         var lang = ['展开', '收起'];
  8.         var cls = ['unfold', 'fold'];
  9.         if(tmph > baseh) {
  10.                 var octrl = document.createElement('li');
  11.                 octrl.className = cls[1];
  12.                 octrl.innerHTML = lang[1];
  13.  
  14.                 o.insertBefore(octrl, o.firstChild);
  15.                 o.className = s + ' cttp';
  16.                 o.style.height = 'auto';
  17.  
  18.                 octrl.onclick = function () {
  19.                         if(this.className == cls[0]) {
  20.                                 o.style.height = 'auto';
  21.                                 this.className = cls[1];
  22.                                 this.innerHTML = lang[1];
  23.                         } else {
  24.                                 o.style.height = '';
  25.                                 this.className = cls[0];
  26.                                 this.innerHTML = lang[0];
  27.                         }
  28.                 }
  29.         }
  30. }

复制代码

 

本主由720P高清电影下载