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

首页 » PageAdmin使用区 » 安装及使用交流 » 关于最新版本PageAdmin之TAB选项卡实现
zxd1972 - 2010/10/5 17:59:00
经过一个下午的研究,终于做出了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(鼠标放置到对应栏目上,三秒后显示:“ID:Template_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;color:#ffffff;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标签样式,可自行替换图片修改样式。
caobaikui - 2010/10/5 21:27:00
还是做不出来
zxd1972 - 2010/10/5 21:51:00
我以前看华仔的介绍,觉得操作都比较麻烦,我今天是找了个官方的模板研究的,这几步骤应该不是很复杂了吧,只是官网在发代码的时候有点问题,你可以去我博客看看:http://9492901.blog.163.com/blog/static/2693340220109555812140/
caobaikui - 2010/10/6 1:40:00
又仔细参照你的弄了以下,终于成功了,谢谢。参见:http://ysx.jsit.edu.cn
zxd1972 - 2010/10/6 8:56:00
不错的网站,到底是搞艺术的哈,同行可以加个QQ(9492901),我也是一个职业技术学院的!
brand8412 - 2010/10/25 14:14:00
做个记号,感谢分享。
LightTea - 2010/11/30 17:28:00
绝对官方标准制作方法
http://bbs.pageadmin.net/showtopic-9934.aspx
zxd1972 - 2010/12/6 15:37:00
不错,学习了,以后多些官方的,省去我们摸索的艰辛历程!
wjpzx - 2011/1/15 17:57:00
你 ,你的网站TAB文章两排是怎么实现的呢,能不能说一下。谢谢
hxh76620447 - 2011/1/16 12:02:00
帮顶一下,我也关注这个问题
xajhmw - 2011/6/9 11:34:00
做不出来啊:-|
jintiancaizhuce - 2011/6/9 16:09:00
什么时候的帖子了
jiacheng78 - 2011/6/10 0:22:00
做个记号,感谢分享。
hkaimy - 2011/7/19 16:08:00

样子是做出来了  但是鼠标移上去没反应,哪里出了错?
lzy339 - 2012/4/11 13:58:00
样子是做出来了  但是鼠标移上去没反应,哪里出了错?
最后自己下了个模版研究出来了!!!
http://art.gaedu.gov.cn/
这是用最新的商业版重做的哟!
psger - 2012/6/19 18:23:00
还是没有做出来
knxmy - 2020/2/18 16:13:44
感谢楼主分享,马克一下
1
查看完整版本: 关于最新版本PageAdmin之TAB选项卡实现