Membuat Tabbed Sidebar Widget Dengan JavaScript

Membuat Tabbed Sidebar Widget Dengan JavaScript

Bola Hero Gawai

Membuat Tabbed Sidebar Widget Dengan JavaScript

Membuat Tabbed Sidebar Widget Dengan JavaScript
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.

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×