JQuery Tabs Generator頁籤修改範例(PHP端及JS優化修改)-教學撰寫:徐嘉裕Neil hsu

JQuery Tabs Generator是一個好用的頁籤生成器，輸入內容就能產生頁籤，大家可以點以下的網址自己試看看

https://www.html-code-generator.com/jquery/tabs-generator.php

不過如果要修改成用PHP迴圈輸出smarty樣板就還需要再做些修改，才能靈活實用美觀大方，像是下面這樣：

修改過後頁籤可隨資料自動增加跟刪減，如果只有一個頁籤也能正常顯示內容

以下為修改過的全部程式codo範例

php端-code

$descriptionArr = array(); //建構陣列

$i=0;

$descriptionArr[$i]['btntext']=_MD_SHOPWCASE20;  //按鈕文字

$descriptionArr[$i]['btncenter']=$productlimt['description'];  //頁籤內容

$descriptionArr[$i]['i']=$i;  //頁籤id

$i++;

$descriptionArr[$i]['btntext']=_MD_SHOPWCASE22;  //按鈕文字

$descriptionArr[$i]['btncenter']=$productlimt['specification'];  //頁籤內容

$descriptionArr[$i]['i']=$i;  //頁籤id

$i++;

$descriptionArr[$i]['btntext']=_MD_SHOPWCASE23;  //按鈕文字

$descriptionArr[$i]['btncenter']=$productlimt['productwarranty'];  //頁籤內容

$descriptionArr[$i]['i']=$i;  //頁籤id

$shopwcase['descriptionbox']=$descriptionArr;

輸出smarty

$xoopsTpl->assign( "shopwcasepage" , $shopwcasepage) ;


樣板端-code

<div id="jquery-tabs" style="width:auto">
<div id="tabs-nav">
<{foreach item=descriptionbox from=$shopwcasepage.descriptionbox}>
<{if $descriptionbox.btncenter}> <a href="#tab<{$descriptionbox.i}>" class="tabs-menu "><{$descriptionbox.btntext}></a> <{/if}>
<{/foreach}>
</div>
<div class="tabs-container">
<{foreach item=descriptionbox from=$shopwcasepage.descriptionbox}>
<{if $descriptionbox.btncenter}><div id="tab<{$descriptionbox.i}>" class="tabs-panel" ><{$descriptionbox.btncenter}></div><{/if}>
<{/foreach}>
</div>
</div>

然後再樣foreach的下面增加css樣式定義

<style>

#tabs-nav{

   margin: 0;

   padding: 0;

   position: relative;

   text-align: left

}

a.tabs-menu {

   display: inline-block;

   background-color: #9E5B87;

   font-size: 120%;

   color: #fff;

   padding: 10px 15px;

   font-weight: normal;

   text-decoration: none;

   border: solid 1px #9E5B87;

   border-bottom: 0;

   border-radius: 3px 3px 0 0;

}

a.tabs-menu.tabs-menu-active {

   background-color: #fff;

   text-shadow: 1px 1px 0px #ffffff;

   border: solid 1px #9E5B87;

   color: #6b6b6b;

   border-bottom: 0;

}

.tabs-container {

   border: solid 1px #9E5B87;

   margin-top: -1px;

   background-color: #fff;

   overflow: hidden;

}

.tabs-panel {

   display: none;

   min-height: 350px;

   overflow: auto;

   padding: 15px;

}

如果要做行動裝置RDW設定a.tabs-menu即可

@media screen and (min-width: 768px) and (max-width: 640px) {
a.tabs-menu {
display: block;
text-align: center;
}
}

</style>

然後再加上以下的JS設定，或是吧CODE丟到JS檔裡也行(需要引入JS檔)

<script>
$(function() {
//輔助程式
$(".tabs-menu").each(function(index) {
var $tab='[href="'+$(this).attr("href")+'"]';
var $all=$(this).attr("href");
var $tabspanelall=$all.replace(/#/g, "");
if(index=='0'){
$($tab).addClass("tabs-menu-active");
$('#'+$tabspanelall+'').css("display", "block");
}
});

//套件主程式
$("#tabs-nav a").click(function() {
$("#tabs-nav a").removeClass("tabs-menu-active");
$(this).addClass("tabs-menu-active");
$(".tabs-panel").hide();
var tab_id = $(this).attr("href");
$(tab_id).fadeIn();
return false;
});
});
</script>

這樣就OK了，如果要增加頁籤在PHP的陣列中在加上一個陣列即可(以下紅字)

$descriptionArr[$i]['btntext']=_MD_SHOPWCASE20;  //按鈕文字

$descriptionArr[$i]['btncenter']=$productlimt['description'];  //頁籤內容

$descriptionArr[$i]['i']=$i;  //頁籤id

$i++;

其他程式都會自動搞定，有需要的朋友參考看看

心得教學撰寫：徐嘉裕 Neil hsu