PageAdmin网站内容管理系统(CMS)交流论坛

注册

 

QQ登录

只需一步，快速开始

返回列表 12345678
发新话题 回复该主题
查看: 61174|回复: 119

标准官方选项卡制作教程 [复制链接]

LightTea
头像

清茶

  • PageAdmin学员
  • 168
  • 284
  • 2010-07-23
1#
t T
发表于 2010-11-30 17:08 |只看楼主
1、首先从官方网站下载用于制作选项卡的JS（说明：我使用的是style02样式）
   下载地址：http://pageadmin.net/js/diy.js
2、把这个文件放入js文件夹下，并在incs\web_top.ascx里引用。
  1. <script src="/js/diy.js" type="text/javascript"></script>
复制代码
3、把官方的样式也下载了，用来找选项卡的样式的。
   下载地址：http://pageadmin.net/template/pageadmin/lanmu.css
4、用记事本打开，查找“选项卡”。把找到的两行代码复制到你的lanmu.CSS文件里。
   因为样式里用到了图片，所以必须把图片放到模板的images文件夹里，
   图片的下载地址是：http://pageadmin.net/template/pageadmin/images/sign_bg.gif    到这里，基本的准备工作已经完成。
5、进入“模块设置”里，添加你要添加的选项卡。
   这里添加的选项卡项跟平常添加的没有什么区别。如图红色框。

    
6、细心的朋友一定看到“Tab1”和“Tab2”，这两个是用来干什么的呢？
   这两个就是用来控制选项卡的显隐的。不用像之前有些同学写的还要建一个“模块样式”。
7、这里都设置好了，来看关键的一步。
   “Tab1”和“Tab2”名字是自己取的，设置为“自定义内容”。在设置之前呢，我们必须知道每个模块的Template_ID是多少，后面要用呢。这个ID的获得之前也有人说过，也很容易，我就不多说了（把鼠标放在模块输入框内就会显示）。记住他们的ID哦，最好是用纸记下来。
8、然后我们设置他的内容。
   是在“源代码”里把这段代码粘贴进去
  1.    <script type="text/javascript">
  2. Show_Template('42');
  3. HideTab('36,37,38');
  4. ShowTab('36','42');
  5. </script>
复制代码
说明：Show_Template('42');中的数字是“Tab1”的Template_ID。36、37、38为三个选项卡标签，ShowTab('36','42');这里函数里的36是你设置的默认显示标签的ID。
   如下图：

        
9、设置自定义样式。
   还是先看图吧：


图上的代码（这段代码是在官网里找到的，修改了自己的模块的ID）：
  1. <div class="template_title"><span id="Tab_36" class="template_sign_tab_over" onmouseover="HideTab('36,37,38');ShowTab('36','42')">系统党建</span> <span id="Tab_37" class="template_sign_tab_out" onmouseover="HideTab('36,37,38');ShowTab('37','42')">高管论坛</span> <span id="Tab_38" class="template_sign_tab_out" onmouseover="HideTab('36,37,38');ShowTab('38','42')">专题报道</span></div>
复制代码
修改完，保存，预览效果。



如果对你有用，别忘记了回帖哦！
分享 转发
TOP
wxpanmingjie
头像

  • PageAdmin新手
  • 35
  • 70
  • 2010-08-11
2#
t T
发表于 2010-11-30 17:10 |只看该用户

天字一号！楼主辛苦，感谢分享！
TOP
kenwho
头像

  • PageAdmin入门
  • 1
  • 2
  • 2010-11-18
3#
t T
发表于 2010-11-30 17:16 |只看该用户

好东西 学习了。
TOP
paullee
头像

  • PageAdmin熟手
  • 295
  • 506
  • 2010-08-13
4#
t T
发表于 2010-12-01 08:25 |只看该用户

学习了
TOP
Vwunwun2
头像

  • PageAdmin学员
  • 131
  • 224
  • 2010-04-22
5#
t T
发表于 2010-12-01 08:56 |只看该用户

很高明的哈
TOP
paullee
头像

  • PageAdmin熟手
  • 295
  • 506
  • 2010-08-13
6#
t T
发表于 2010-12-01 14:37 |只看该用户

学习过了,只是自定义样式下面的代码有点问题,应该是
<div class="template_title"><span id="Tab_2" class="template_sign_tab_over" onmouseover="HideTab('2,13,36,37,38,39,40,41,42');ShowTab('2','43')">企业简介</span> <span id="Tab_13" class="template_sign_tab_out" onmouseover="HideTab('2,13,36,37,38,39,40,41,42');ShowTab('13','43')">企业资质</span> <span id="Tab_36" class="template_sign_tab_out" onmouseover="HideTab('2,13,36,37,38,39,40,41,42');ShowTab('36','43')">联系我们 </span><span id="Tab_37" class="template_sign_tab_out" onmouseover="HideTab('2,13,36,37,38,39,40,41,42');ShowTab('37','43')">格力空调</span> <span id="Tab_38" class="template_sign_tab_out" onmouseover="HideTab('2,13,36,37,38,39,40,41,42');ShowTab('38','43')">大金空调</span> <span id="Tab_39" class="template_sign_tab_out" onmouseover="HideTab('2,13,36,37,38,39,40,41,42');ShowTab('39','43')">美的空调</span> <span id="Tab_40" class="template_sign_tab_out" onmouseover="HideTab('2,13,36,37,38,39,40,41,42');ShowTab('40','43')">三菱重工海尔</span> <span id="Tab_41" class="template_sign_tab_out" onmouseover="HideTab('2,13,36,37,38,39,40,41,42');ShowTab('41','43')">扬子空调</span> <span id="Tab_42" class="template_sign_tab_out" onmouseover="HideTab('2,13,36,37,38,39,40,41,42');ShowTab('42','43')">空气能热水器</span></div>

请参阅http://www.021-kongtiao.com
TOP
LightTea
头像

清茶

  • PageAdmin学员
  • 168
  • 284
  • 2010-07-23
7#
t T
发表于 2010-12-01 14:45 |只看楼主

回复 7# paullee 的帖子

其实onmouseover这个函数有写，但是被过滤掉了。
可以把你修改前的源码发下给我吗？
想研究下商业版。谢谢
Email: liuxinhuahao@qq.com
TOP
paullee
头像

  • PageAdmin熟手
  • 295
  • 506
  • 2010-08-13
8#
t T
发表于 2010-12-01 15:13 |只看该用户

这可是违规的,我一向是遵纪守法的!
TOP
rzndir
头像

  • PageAdmin入门
  • 26
  • 46
  • 2010-11-01
9#
t T
发表于 2010-12-01 22:40 |只看该用户

好贴，谢谢楼主指导，试验成功
TOP
gearfox
头像

小栩

  • PageAdmin熟手
  • 366
  • 547
  • 2010-05-20
10#
t T
发表于 2010-12-02 09:51 |只看该用户

谢谢楼主的经验分享 钛合金
TOP
lbs
头像

  • PageAdmin入门
  • 15
  • 30
  • 2010-11-30
11#
t T
发表于 2010-12-07 19:03 |只看该用户

谢谢
！
TOP
kaba47
头像

  • PageAdmin入门
  • 31
  • 46
  • 2010-06-29
12#
t T
发表于 2010-12-08 10:19 |只看该用户

学习了，谢谢
TOP
zhendan
头像

  • PageAdmin入门
  • 7
  • 12
  • 2010-11-13
13#
t T
发表于 2010-12-10 23:56 |只看该用户

标准官方选项卡制作,thanks
TOP
虞大侠
头像

  • PageAdmin新手
  • 37
  • 63
  • 2010-05-26
14#
t T
发表于 2010-12-22 22:27 |只看该用户

感谢
TOP
zylq
头像

中原路桥

  • PageAdmin新手
  • 108
  • 170
  • 2010-12-03
15#
t T
发表于 2010-12-23 08:33 |只看该用户

学习收藏了。
下面是我改的网站
http://www.zylq.co.cc/
TOP
LightTea
头像

清茶

  • PageAdmin学员
  • 168
  • 284
  • 2010-07-23
16#
t T
发表于 2010-12-24 18:44 |只看楼主

这种是最新版的，老板的不行。
TOP
上一主题| 下一主题
返回列表 12345678
发新话题 回复该主题
高级编辑器高级编辑器