Skip to main content
KOMPI AJAIB

follow us

Berbuat khilaf adalah sifat. Meminta maaf adalah kewajiban. Dan kembalinya Fitrah adalah tujuan. Saya, Adhy Suryadi admin blog Kompi Ajaib MEMOHON MAAF LAHIR DAN BATHIN. Minal Aidin Wal Faidzin Taqabalallahu minnaa wa minkum. Selamat hari raya Idul Fitri, 1 Syawal 1439 H.

×

Membuat Tabbed Sidebar Widget Dengan JavaScript

Baca juga:

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.

You Might Also Like:


Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar