产品使用及交流论坛

首页 » 产品使用交流区 » 安装及使用交流 » TAB选项卡效果制作总结

firemedia - 2009/9/30 10:13:00

官网主页的TAB选项卡功能深深吸引者无数的PA迷，反复体会坛子里各个选项卡的贴子，经过几天的琢磨，终于制作出来自己想要做的效果，自认为明白了部分有关TAB选项卡的制作要领，现总结如下：（以五个选项卡为例）
具体演示地址：http://firemedia.vicp.net

选项卡制作步骤:

第一步：建立选项卡的样式

【网站栏目管理】—>【模块样式设置】—>【增加新样式】（模块样式名称：“TAB样式” 序号：1）—>【样式设置】—>【外层容器样式】（填写：display:none;  其他不用填写）

1.jpg(24.82 K)

2009/9/30 11:07:38

第二步：建立选项卡结构框架

【栏目管理】—>【首页】—>【模块设置】—>【增加模块】（模块名称：TAB模块；模块类型：自定义内容；模块序号：1）—>

2.jpg(47.39 K)

2009/9/30 10:12:57

【在新建好的“TAB模块”的右边，点箭头，进入“模块样式编辑”】—>【默认模块标志：隐藏；more连接地址：先不填，最后祥述；模块风格：默认风格】—>【自定义头信息】在源代码模式下粘贴以下代码：

转下楼

firemedia - 2009/9/30 10:21:00

<div class="template_title">
<span class="template_sign" id="H_1" onmous防止过滤请删掉eover="show_Hide('Module_22')">公司简介</span>
<span class="template_sign_1" id="H_2" o防止过滤请删掉nmouseover="show_Hide('Module_19')">公司新闻</span>
<span class="template_sign_1" id="H_3" onmo防止过滤请删掉useover="show_Hide('Module_28')">行业动态</span>
<span class="template_sign_1" id="H_4" onmouseo防止过滤请删掉ver="show_Hide('Module_20')">产品展示</span>
<span class="template_sign_1" id="H_5" onmou防止过滤请删掉seover="show_Hide('Module_30')">售后服务</span>
<span class="template_more"><a id="More_id" href="/index.aspx?menuid=3&type=introduct&lanmuid=1&language=cn">more </a></span></div>
<script language=javascript>
function show_Hide(id)
  {
Module1=document.getElementById("Module_22");
Module2=document.getElementById("Module_19");
Module3=document.getElementById("Module_28");
Module4=document.getElementById("Module_20");
Module5=document.getElementById("Module_30");
H1=document.getElementById("H_1");
H2=document.getElementById("H_2");
H3=document.getElementById("H_3");
H4=document.getElementById("H_4");
H5=document.getElementById("H_5");
MoreID=document.getElementById("More_id");
    Module1.style.display="none";
    Module2.style.display="none";
    Module3.style.display="none";
    Module4.style.display="none";
    Module5.style.display="none";
    H1.className="template_sign_1";
    H2.className="template_sign_1";
    H3.className="template_sign_1";    
    H4.className="template_sign_1";
    H5.className="template_sign_1";
    switch(id)
    {
      case "Module_22":
          Module1.style.display="";
          MoreID.href="/index.aspx?menuid=3&type=introduct&lanmuid=1&language=cn";
          MoreID.target="_self";
          H1.className="template_sign";
      break;
      case "Module_19":
          Module2.style.display="";
          MoreID.href="/index.aspx?menuid=5&type=article&lanmuid=9&language=cn";
          MoreID.target="_self";
          H2.className="template_sign";
      break;
      case "Module_28":
          Module3.style.display="";
          MoreID.href="/index.aspx?menuid=5&type=article&lanmuid=10&language=cn";
          MoreID.target="_blank";
          H3.className="template_sign";
      break;
      case "Module_20":
          Module4.style.display="";
          MoreID.href="/index.aspx?menuid=4&type=product&lanmuid=6&language=cn";
          MoreID.target="_self";
          H4.className="template_sign";
      break;
      case "Module_30":
          Module5.style.display="";
          MoreID.href="/index.aspx?menuid=6&type=introduct&lanmuid=15&language=cn";
          MoreID.target="_self";
          H5.className="template_sign";
      break;
    }
  }
</script>
将以上代码粘贴到TAB模块的自定义头信息里。

3.jpg(66.73 K)

2009/9/30 10:21:03

firemedia - 2009/9/30 10:43:00

这里对上面代码部分重点说明一下几个问题：
1、红色字是为了防止论坛屏蔽加上的，你必须删掉，否则出错；
2、紫色字是你想要显示的模块的ID号，其中各个模块是你事先在模块设置里添加好的，如图所示，各模块的ID号当你把鼠标放到其名称上时就自动显示出来了；

2.jpg(47.39 K)

2009/9/30 10:43:21

3、各选项卡的more链接地址得你自己去找了，以公司新闻为例说明找的方法：右击公司新闻--属性--有一串地址，对照橙色的部分替换成你网站上的相应地址就行了。

firemedia - 2009/9/30 11:04:00

第三步：在模块设置------模块样式编辑下，给相应模块应用TAB样式
公司简介——模块标志：隐藏，其他保持默认。因为打开首页需要显示企业简介内容，故不用TAB样式；

4.jpg(38.86 K)

2009/9/30 11:04:02

公司新闻——模块标志：隐藏，模块风格：TAB样式，其他保持默认；

5.jpg(37.07 K)

2009/9/30 11:04:02

行业动态——模块标志：隐藏，模块风格：TAB样式，其他保持默认；
产品展示——模块标志：隐藏，模块风格：TAB样式，其他保持默认；
售后服务——模块标志：隐藏，模块风格：TAB样式，其他保持默认。
最后，修改css样式，这点我是一窍不通，所以我是下载了官方首页的css后上传上去的。（下载方法：打开官方首页，点击文件----另存为，保存类型选全部，就会保存一个网页文件和文件夹，在文件夹里能找到一个lanmu.css的css文件，把它上传到你所应用的首页模板替换原来的lanmu.css即可。我是选用的style02模板）

6.jpg(87.17 K)

2009/9/30 11:04:02

做完这些后，刷新一下主页，怎么样？五个TAB选项卡的效果还可以吧？

fryguy - 2009/9/30 16:08:00

我根据前人的经验总结了一下，你倒好，直接抄袭我的。
言归正传：官方绝对不是这么做的，或者不完全是这么做的，
我的认识是：官方第一个Tab也应用了自定义模块的样式，就是那个两列并排<li>用了浮动，而大家通常第一个Tab都使用了默认风格，默认风格里是没有float:left; width:50%的。

benny - 2009/9/30 18:53:00

呵呵``

怎样做没关系```

只要能用得好就行```

firemedia - 2009/9/30 21:56:00

fryguy :大家同是总结前人的贴子，怎么就说明我是直接抄袭？难道上面的代码是你自己一个字一个字写出来的？ 你若真这么认为的话，ryj1976大哥不知会不会也说你在抄袭他呢？
    我们知道，pageadmin本身就是个开放式的系统，给我等pa迷带来了无尽的乐趣，并为之深深着迷，如果像你说的一样，大家使用pa系统不就都成了直接抄袭了？简直是岂有此理!
    我们使用pa建站，主要是如何利用其潜在功能去开发丰富多彩的个性网页，不管采用什么方法，利用什么代码，只要能做出我们想要的内容，我想都是广大pa迷所追求的。以前的几个TAB选项卡贴子，写的的确好，但我等不懂代码的新手就是看不懂，做不出。所以我根据前人的各个贴子，在无数次试验基础上总结并写出这个教程，旨在帮助想做出TAB选项卡的pa友方便快捷地在自己网页上实现TAB选项卡的功能，绝无抄袭某人的主观意图！

fryguy - 2009/10/1 20:47:00

原帖由 firemedia 于 2009-9-30 21:56:00 发表 fryguy :大家同是总结前人的贴子，怎么就说明我是直接抄袭？难道上面的代码是你自己一个字一个字写出来的？ 你若真这么认为的话，ryj1976大哥不知会不会也说你在抄袭他呢？ .........

无意争论这个。。。。。。。只想互相学习。。。。不过你的确没认真看我的代码，也也没认真看官方的，更没有认真看ryj1976的代码，不然你就不会认为我抄袭ryj1976了。

paboy - 2009/10/1 21:40:00

好笑之极，有什么可争论的，不就是个TAB选项卡而已，少了它就没有人访问网站了吗？“潮流兴”+“心理”在作怪

tianshi - 2009/10/6 21:26:00

TAB选项卡做得好看就好，做不好看不如不要做，楼主的演示做得很粗糙，感觉生搬硬套的，上面控制和内容区还是分开的

firemedia - 2009/10/9 12:34:00

前面已经说过我是个新手，对代码一窍不通，做出来的东西肯定不尽如人意了，主要是想说清楚制作要领，抛砖引玉。请教高手，怎样才能去掉控制区和内容区之间的间隔呢？

TAB.jpg(22.51 K)

2009/10/9 12:34:03

bamboo212 - 2009/10/12 2:03:00

学习了

motte - 2009/11/20 10:06:00

原帖由 firemedia 于 2009-10-9 12:34:00 发表 前面已经说过我是个新手，对代码一窍不通，做出来的东西肯定不尽如人意了，主要是想说清楚制作要领，抛砖引玉。请教高手，怎样才能去掉控制区和内容区之间的间隔呢？

老兄你的帖子对我帮助太大啦。你说的这个问题我研究明白啦，就是template_box里的margin调为:0 0 0 0就OK拉。原来是0 0 10

zwqchina - 2010/1/6 16:11:00

好。做记号。

deiwei45 - 2010/1/31 2:28:00

貌似有问题  而且还是大大的有 控制与内容分开不说  为什么我做的鼠标移走后再回来就什么都不显示

pfreestar - 2010/1/31 12:55:00

js没写好

feiyangqingyun - 2010/1/31 12:57:00

技术交流的地方，何必争论这些！

lzh370 - 2010/2/9 9:51:00

顶，教程很详细，感谢。

cm911 - 2010/2/10 23:48:00

顶起来。。。。。。。。。(*^__^*) 嘻嘻……

小城 - 2010/3/13 15:59:00

记号

gsgsgsgs - 2010/5/1 22:14:00

辛苦了。

szlance - 2010/5/1 22:18:00

记号学习

lzy339 - 2010/5/2 8:51:00

记号111

偷懒的鹰 - 2010/5/4 21:04:00

认真学习了

lsj0330 - 2010/5/11 11:27:00

我的是最新版本，按照你所说的修改后，还是没反应~主要是鼠标放上去没什么效果，你知道该怎么修改吗？O(∩_∩)O谢谢

psger - 2010/6/1 16:08:00

TAB模块”的右边，点箭头，进入“模块样式编辑”】—>【默认模块标志：隐藏；more连接地址：先不填，最后祥述；模块风格：默认风格】—>【自定义头信息】在源代码模式下粘贴以下代码：
  怎么也找不到点箭头，进入“模块样式编辑？？？？？？？？？？？？？
是版本问题吗？PageAdmin版本号： V2.1 20100324

tanjiny - 2010/6/1 21:28:00

看不懂,同大堆代码.要研究一下

T_long - 2010/6/9 14:54:00

记号+学习

kobebyant - 2010/6/9 18:08:00

多谢分享
air jordan 6 olympic
        air jordan 7 retro
        nike air jordan 7
        air jordan 7 olympic

edeile - 2010/6/20 17:25:00

我来学习，顶楼主

12

查看完整版本: TAB选项卡效果制作总结

Powered by Discuz!NT Archiver 3.9.913 2001-2026 Comsenz Inc.