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

经过一个下午的研究，终于做出了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标签样式，可自行替换图片修改样式。