Membuat Tabbed Sidebar Widget Dengan JavaScript

Ditulis oleh: Adhy Suryadi

Ditulis pada: 6/10/2015

Salah satu cara untuk mengirit space di sidebar adalah dengan cara membuat tab untuk mengumpulkan beberapa widget jadi 1 tempat. Biasanya 3 buah widget sidebar bisa dikumpulkan dalam 1 tempat dengan tabber sidebar.

Ada beragam cara untuk membuat tabbed sidebar widget. Ada yang manual dengan memasukan langsung widget ke dalam tabber, dan ada juga yang menggunakan jquery dan javascript yang akan otomatis menjadikan beberapa widget menjadi tabbed sidebar.

Nah kali ini saya menemukan sebuah javascript untuk membuat tabbed sidebar widget tanpa terintegrasi dengan Jquery Library. Saya hanya memodifikasi tampilan tab-nya menjadi flat dan responsive dan me-minify javascript-nya agar menjadi lebih simple dan lebih ringan.


Simpan kode di bawah ini pada gadget HTML/JavaScript dan simpan gadget tersebut di atas widget yang ingin kita buat tab.

<style scoped="scoped">

#tabnav0,#tabnav0h{margin:0;display:none}

#tabnav0h{position:relative;top:0;height:0;border:0}

#tabnav0v{z-index:0;position:absolute;left:0;top:0;width:0;height:0;display:none}

#tabnav0{z-index:0;position:relative;padding:0;list-style:none;left:0;white-space:nowrap}

#tabnav0 li{float:left;text-align:center;padding:0;width:33.3%;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}

#tabnav0 a{padding:12px 6px;display:block;color:#fff;text-decoration:none;font-size:16px;font-weight:500;background:#333;margin:2px 0 0}

#tabnav0 .here a{background-color:#111}

#tabnav0 .here a:active,#tabnav0 .here a:hover,#tabnav0 a:active,#tabnav0 a:hover{background:#666}

</style>

<script type='text/javascript'>

//<![CDATA[

var tabsID="tabnav0",tabnav0_count=3,tabnav0_tabtitles=[],tabnav0_hideH2=!0,tabnav0_hidechildH2=!0;

function tabnav0_avaa(t){for(var a=0;a<tabnav0_tabids.length;a++)document.getElementById(tabnav0_tabids[a]).style.display="none",tabsIDs[tabnav0_tabids[a]]&&(document.getElementById(tabsIDs[tabnav0_tabids[a]]).style.display="none"),document.getElementById("tab_"+tabnav0_tabids[a]).className="";toshow=document.getElementById(tabnav0_id).style.display,document.getElementById(t).style.display=toshow,tabsIDs[t]&&(document.getElementById(tabsIDs[t]).style.display=toshow),document.getElementById("tab_"+t).className="here",tabsIDs[tabnav0_id]=t}function addLoadEvent(t){var a=window.onload;"function"!=typeof window.onload?window.onload=t:window.onload=function(){a(),t()}}function tabnav0_inittabs(){var t="tabnav0",a=document.getElementById(t);a.style.display="block",a=a.parentNode.parentNode,a.style.marginBottom="-10px",tabnav0_id=a.id;for(var n=a.firstChild;n&&1!=n.nodeType;)n=n.nextSibling;n&&"H2"==n.nodeName&&(tabnav0_hideH2||""==n.innerHTML)?n.style.display="none":n&&"H2"==n.nodeName&&(document.getElementById("tabnav0v").style.top="38px");for(var e=0;e<tabnav0_count;e++){for(a=a.nextSibling;a&&1!=a.nodeType;)a=a.nextSibling;if(!a)break;tabnav0_tabids[e]=a.id}document.getElementById(t+"h").style.display="block",document.getElementById(t+"v").style.display="block";for(var d="",e=0;e<tabnav0_tabids.length;e++){for(a=document.getElementById(tabnav0_tabids[e]),a=a.firstChild;a&&1!=a.nodeType;)a=a.nextSibling;if(a&&"H2"!=a.nodeName)for(a=a.firstChild;a&&1!=a.nodeType;)a=a.nextSibling;a&&"H2"==a.nodeName&&(tabnav0_hidechildH2&&(a.style.display="none"),tabnav0_tabtitles[e]&&""!=tabnav0_tabtitles[e]||(tabnav0_tabtitles[e]=a.innerHTML)),tabnav0_tabtitles[e]&&""!=tabnav0_tabtitles[e]||(tabnav0_tabtitles[e]=tabnav0_tabids[e]),a=document.getElementById("tab_"+tabnav0_tabids[e]),d+='<li id="tab_'+tabnav0_tabids[e]+'"><a href="#" onclick="tabnav0_avaa(\''+tabnav0_tabids[e]+"');this.blur();return false;\">"+tabnav0_tabtitles[e]+"</a></li>"}document.getElementById(t).innerHTML=d,tabnav0_avaa(tabnav0_tabids[0])}if("undefined"==typeof tabsIDs)var tabsIDs=[];var tabnav0_id="",tabnav0_tabids=[];tabnav0_count&&(document.write('<div id="'+tabsID+'h"></div><ul id="'+tabsID+'"></ul><div id="'+tabsID+'v"></div>'),addLoadEvent(tabnav0_inittabs));

//]]>

</script>

<div style="clear:both;"></div>

a.style.marginBottom="-10px" untuk mengatur jarak antara tab dan gadget

Jika ingin membuat tabbed sidebar widget lainnya (tab ke-2) ganti semua kode tabnav0 menjadi tabnav1, begitu seterusnya untuk tab ke-3 dan seterusnya. Contohnya seperti kode di bawah ini untuk tab ke-2 dari kode di atas.

<style scoped="scoped">

#tabnav1,#tabnav1h{margin:0;display:none}

#tabnav1h{position:relative;top:0;height:0;border:0}

#tabnav1v{z-index:0;position:absolute;left:0;top:0;width:0;height:0;display:none}

#tabnav1{z-index:0;position:relative;padding:0;list-style:none;left:0;white-space:nowrap}

#tabnav1 li{float:left;text-align:center;padding:0;width:33.3%;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}

#tabnav1 a{padding:12px 6px;display:block;color:#fff;text-decoration:none;font-size:16px;font-weight:500;background:#333;margin:2px 0 0}

#tabnav1 .here a{background-color:#111}

#tabnav1 .here a:active,#tabnav1 .here a:hover,#tabnav1 a:active,#tabnav1 a:hover{background:#666}

</style>

<script type='text/javascript'>

//<![CDATA[

var tabsID="tabnav1",tabnav1_count=3,tabnav1_tabtitles=[],tabnav1_hideH2=!0,tabnav1_hidechildH2=!0;

function tabnav1_avaa(t){for(var a=0;a<tabnav1_tabids.length;a++)document.getElementById(tabnav1_tabids[a]).style.display="none",tabsIDs[tabnav1_tabids[a]]&&(document.getElementById(tabsIDs[tabnav1_tabids[a]]).style.display="none"),document.getElementById("tab_"+tabnav1_tabids[a]).className="";toshow=document.getElementById(tabnav1_id).style.display,document.getElementById(t).style.display=toshow,tabsIDs[t]&&(document.getElementById(tabsIDs[t]).style.display=toshow),document.getElementById("tab_"+t).className="here",tabsIDs[tabnav1_id]=t}function addLoadEvent(t){var a=window.onload;"function"!=typeof window.onload?window.onload=t:window.onload=function(){a(),t()}}function tabnav1_inittabs(){var t="tabnav1",a=document.getElementById(t);a.style.display="block",a=a.parentNode.parentNode,a.style.marginBottom="-40px",tabnav1_id=a.id;for(var n=a.firstChild;n&&1!=n.nodeType;)n=n.nextSibling;n&&"H2"==n.nodeName&&(tabnav1_hideH2||""==n.innerHTML)?n.style.display="none":n&&"H2"==n.nodeName&&(document.getElementById("tabnav1v").style.top="38px");for(var e=0;e<tabnav1_count;e++){for(a=a.nextSibling;a&&1!=a.nodeType;)a=a.nextSibling;if(!a)break;tabnav1_tabids[e]=a.id}document.getElementById(t+"h").style.display="block",document.getElementById(t+"v").style.display="block";for(var d="",e=0;e<tabnav1_tabids.length;e++){for(a=document.getElementById(tabnav1_tabids[e]),a=a.firstChild;a&&1!=a.nodeType;)a=a.nextSibling;if(a&&"H2"!=a.nodeName)for(a=a.firstChild;a&&1!=a.nodeType;)a=a.nextSibling;a&&"H2"==a.nodeName&&(tabnav1_hidechildH2&&(a.style.display="none"),tabnav1_tabtitles[e]&&""!=tabnav1_tabtitles[e]||(tabnav1_tabtitles[e]=a.innerHTML)),tabnav1_tabtitles[e]&&""!=tabnav1_tabtitles[e]||(tabnav1_tabtitles[e]=tabnav1_tabids[e]),a=document.getElementById("tab_"+tabnav1_tabids[e]),d+='<li id="tab_'+tabnav1_tabids[e]+'"><a href="#" onclick="tabnav1_avaa(\''+tabnav1_tabids[e]+"');this.blur();return false;\">"+tabnav1_tabtitles[e]+"</a></li>"}document.getElementById(t).innerHTML=d,tabnav1_avaa(tabnav1_tabids[0])}if("undefined"==typeof tabsIDs)var tabsIDs=[];var tabnav1_id="",tabnav1_tabids=[];tabnav1_count&&(document.write('<div id="'+tabsID+'h"></div><ul id="'+tabsID+'"></ul><div id="'+tabsID+'v"></div>'),addLoadEvent(tabnav1_inittabs));

//]]>

</script>

<div style="clear:both;"></div>

Akan lebih baik jika CSS-nya di simpan di edit HTML blog dan usahakan untuk membuat title gadget yang simple dan tidak panjang.