Membuat Tabbed Sidebar Widget Dengan Javascript

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

Ada bermacam-macam cara untuk menciptakan tabbed sidebar widget. Ada yang manual dengan memasukan eksklusif widget ke dalam tabber, dan ada juga yang memakai jquery dan javascript yang akan otomatis menimbulkan beberapa widget menjadi tabbed sidebar.

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

DEMO

Simpan instruksi 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 menciptakan tabbed sidebar widget lainnya (tab ke-2) ganti semua instruksi tabnav0 menjadi tabnav1, begitu seterusnya untuk tab ke-3 dan seterusnya. Contohnya ibarat instruksi di bawah ini untuk tab ke-2 dari instruksi 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 jikalau CSS-nya di simpan di edit HTML blog dan usahakan untuk menciptakan title gadget yang simple dan tidak panjang.
Sumber https://www.kompiajaib.com/

Share this post