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

注册

 

QQ登录

只需一步,快速开始

发新话题 回复该主题

关于最新版本PageAdmin之TAB选项卡实现 [复制链接]

1#
经过一个下午的研究,终于做出了TAB选项卡,和大家分享下:

一、定义tab.js,并拷贝到“\js”文件夹,内容如下

/*  tab.js  */
var Showed_TabId;
function Hide_Template(Ids)
{
   var AIds=Ids.split(',');
   for(i=0;i<AIds.length;i++)
    {
       document.getElementById("Template_"+AIds【i】).style.display="none";   注:此处“【】”须替换为半角中括号    }
}

function Load_Template_Content(FromId,ToId)
{
   document.getElementById("Template_Content_"+ToId).innerHTML=document.getElementById("Template_Content_"+FromId).innerHTML;
   Showed_TabId=FromId;
}


function ShowTab(Id,ToId)
{
   document.getElementById("Tab_"+Showed_TabId).className="template_tab_title_1";
   document.getElementById("Tab_"+Id).className="template_tab_title";
   Load_Template_Content(Id,ToId);
}


二、选中要加入TAB选项卡的栏目页,单击【局部自定义】,在“头信息自定义”添加如下代码:

        <script src="/js/tab.js"></script>

三、在要加入TAB选项卡的栏目页下添加模块,并记下要通过TAB选项卡显示内容的模块ID(鼠标放置到对应栏目上,三秒后显示:“IDemplate_xx”,此处xx即为该栏目ID)

四、在该页面添加一个TAB控制模块,如:“TAB控制”,模块类型为“自定义内容”,记下该栏目ID,单击【自定义内容设置】进行【内容设置】,切换到“源代码”状态,加入如下代码:

<script language=javascript>
Hide_Template("1,2,3,4");
Load_Template_Content("1","5");
</script>

【说明】1,2,3,4 为需要在TAB选项卡中显示的4个模块,5为TAB模块ID

五、切换到【自定义样式】页,将【默认模块标志】设置为“隐藏”,进入“源代码”模式,加入以下代码:


<style type="text/css">

.template_tab_title{float:left;text-align:center;width:100px;height:21px;padding-top:5px;background:url(/images/diy/template_tab_title_over.jpg) no-repeat left bottom;font-weight:bold;colorffffff;cursor:pointer}

.template_tab_title_1{float:left;text-align:center;width:100px;height:21px;padding-top:5px;background:url(/images/diy/template_tab_title_out.jpg) no-repeat left bottom;cursor:pointer}

.template_tab_title_right{float:right;padding-top:5px;}</style>
<ul style="width: 100%">
    <li id="Tab_1" class="template_tab_title">泸职院新闻</li>
    <li id="Tab_2" class="template_tab_title_1">科研园地</li>
    <li id="Tab_3" class="template_tab_title_1">学生风采</li>
    <li id="Tab_4" class="template_tab_title_1">科技成果</li>
    <li class="template_tab_title_right"><a href="/index.aspx?menuid=4&language=cn">更多...</a></li>
</ul>

【说明】1、1,2,3,4 为需要在TAB选项卡中显示的4个模块,5为TAB模ID
        2、“template_tab_title”、“template_tab_title_1”、“template_tab_title_right”为TAB标签样式,可自行替换图片修改样式。
分享 转发
TOP
2#

还是做不出来
TOP
3#

我以前看华仔的介绍,觉得操作都比较麻烦,我今天是找了个官方的模板研究的,这几步骤应该不是很复杂了吧,只是官网在发代码的时候有点问题,你可以去我博客看看:http://9492901.blog.163.com/blog/static/2693340220109555812140/
TOP
4#

又仔细参照你的弄了以下,终于成功了,谢谢。参见:http://ysx.jsit.edu.cn
TOP
5#

不错的网站,到底是搞艺术的哈,同行可以加个QQ(9492901),我也是一个职业技术学院的!
TOP
6#

做个记号,感谢分享。
TOP
7#

绝对官方标准制作方法
http://bbs.pageadmin.net/showtopic-9934.aspx
TOP
8#

回复 7# hmq9911214033 的帖子

不错,学习了,以后多些官方的,省去我们摸索的艰辛历程!
我的博客:http://9492901.blog.163.com 欢迎交流!
TOP
9#

回复 4# caobaikui 的帖子

你 ,你的网站TAB文章两排是怎么实现的呢,能不能说一下。谢谢
汪家铺一中欢迎光临!http://www.cxwjpyz.co.cc
TOP
10#

帮顶一下,我也关注这个问题
麻将机http://www.gzjindianzi.com
扑克http://www.sjpuke.com
牌技http://www.sjpaiji.com
TOP
11#

做不出来啊
TOP
12#

什么时候的帖子了
TOP
13#

做个记号,感谢分享。
TOP
14#


样子是做出来了  但是鼠标移上去没反应,哪里出了错?
TOP
15#

样子是做出来了  但是鼠标移上去没反应,哪里出了错?
最后自己下了个模版研究出来了!!!
http://art.gaedu.gov.cn/
这是用最新的商业版重做的哟!
TOP
16#

还是没有做出来
TOP
发新话题 回复该主题