Membuat organic tab dengan js dan jQuery

Masih dengan JavaScript dan jQuery, kali ini kita akan membuat tab pada halaman website, yang kadang keberadaanya diperlukan.

Script ini lumayan cukup panjang, untuk itu penulisan di bawah akan saya bagi menjadi tiga bagian, yaitu, CSS, HTML dan JS.

Silahkan di cermati script dibawah, sebagai bahan latihan koding atau akan di pakai pada website Anda-pun silahkan.


Script CSS organic tab

* { margin: 0; padding: 0; }
body { font: 12px verdana; }
html { overflow-y: scroll; }
a { text-decoration: none; }
a:focus { outline: 0; }
h1 { font: bold 22px Sans-Serif; margin:20px }
.hide { position: absolute; top: -9999px; left: -9999px; }
#tab { background: #dde; padding: 10px; margin:20px; -moz-box-shadow: 0 0 5px #666; -webkit-box-shadow: 0 0 5px #666; }
#tab .nav { overflow: hidden; margin: 0 0 10px 0; }
#tab .nav li { width: 97px; float: left; margin: 0 1px 0 0; }
#tab .nav li.last { margin-right: 0; }
#tab .nav li a { display: block; padding: 5px; background: #666; color: white; font-size: 12px; text-align: center; border: 0; }
#tab .nav li a:hover { background-color: #000; }
#tab ul { list-style: none; }
#tab ul li a { display: block; border-bottom: 1px solid #666; padding: 4px; color: #333; }
#tab ul li a:hover { background: #fe4902; color: white; }
#tab ul li:last-child a { border: none; }
#tab ul li.nav-one a.current, #tab ul#html li a:hover { background-color: #0575f4; color: white; }
#tab ul li.nav-two a.current, #tab ul#css li a:hover { background-color: #d30000; color: white; }
#tab ul li.nav-three a.current, #tab ul#website li a:hover { background-color: #8d01b0; color: white; }
#tab ul li.nav-four a.current, #tab ul#others li a:hover { background-color: #FE4902; color: white; }

Script HTML organic tab

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">	
	<title>Membuat organic tab dengan js dan jQuery</title>	
	<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'></script>

<!-- begin CSS code -->
<style>
/* Kode CSS tempatkan disini */
</style>	
<!-- end of CSS code -->

</head>
<body>

<!-- this content between tag <body>...</body> will be show on browser -->

<h1>Membuat organic tab dengan js dan jQuery</h1>
	
	<div id="tab">	
		<ul class="nav">
			<li class="nav-one"><a href="#html" class="current">HTML</a></li>
			<li class="nav-two"><a href="#css">CSS</a></li>
			<li class="nav-three"><a href="#website">Website</a></li>
			<li class="nav-four last"><a href="#others">Others</a></li>
		</ul>
		
		<div class="list-wrap">		
			<ul id="html">
				<li><a href="https://my-id.site/persiapan-belajar-html/">Persiapan belajar html</a></li>
				<li><a href="https://my-id.site/pengenalan-dasar-html/">Pengenalan dasar html</a></li>
				<li><a href="https://my-id.site/tutorial-dasar-html/">Tutorial dasar html</a></li>
				<li><a href="https://my-id.site/latihan-koding-html/">Latihan koding html</a></li>
			</ul>			
			<ul id="css" class="hide">
				<li><a href="https://my-id.site/persiapan-belajar-css/">Persiapan belajar css</a></li>
				<li><a href="https://my-id.site/pengenalan-dasar-css/">Pengenalan dasar css</a></li>
				<li><a href="https://my-id.site/tutorial-dasar-css/">Tutorial dasar css</a></li>
				<li><a href="https://my-id.site/latihan-koding-css/">Latihan koding css</a></li>
			</ul>			
			<ul id="website" class="hide">
				<li><a href="https://my-id.site/membuat-website-pertama-dengan-html-dan-css/">Belajar membuat website dengan html dan css</a></li>
				<li><a href="https://my-id.site/membuat-website-dengan-togle-menu/">Belajar membuat website dengan togle menu</a></li>
				<li><a href="https://my-id.site/membuat-website-dengan-sliding-menu/">Belajar membuat website dengan sliding menu</a></li>
				<li><a href="https://my-id.site/membuat-website-dengan-halaman-sliding/">Belajar membuat website dengan halaman sliding</a></li>
			</ul>				
			<ul id="others" class="hide">
				<li><a href="https://my-id.site/tag/free-script/">Kumpulan script gratis</a></li>
				<li><a href="https://my-id.site/editor/">Realtime HTML Editor</a></li>
				<li><a href="https://my-id.site/cssme/">CSS box border dan shadow generator</a></li>
				<li><a href="https://my-id.site/download/">Download script</a></li>
				<li><a href="https://my-id.site/category/internet/">Artikel tentang internet</a></li>
			</ul>			
		</div>
	</div>

<!-- Begin JS code -->
<script>
/* JavaScript tempatkan disini */
</script>
<!-- End of JS code -->
<!-- End of body content -->

</body>
</html>

Script JS organic tab

(function($) {
$.organicTabs = function(el, options) {
    var base = this;
        base.$el = $(el);
        base.$nav = base.$el.find(".nav");
        base.init = function() {
        base.options = $.extend({},$.organicTabs.defaultOptions, options);
        $(".hide").css({
            "position": "relative",
            "top": 0,
            "left": 0,
            "display": "none"
        }); 
        base.$nav.delegate("a", "click", function(e) {
        e.preventDefault();
    var curList = base.$el.find("a.current").attr("href").substring(1),
        $newList = $(this),
        listID = $newList.attr("href").substring(1),
        $allListWrap = base.$el.find(".list-wrap"),
        curListHeight = $allListWrap.height();
        $allListWrap.height(curListHeight);
    if ((listID != curList) &amp;&amp; ( base.$el.find(":animated").length == 0)) {
        base.$el.find("#"+curList).fadeOut(base.options.speed, function() {
        base.$el.find("#"+listID).fadeIn(base.options.speed);
    var newHeight = base.$el.find("#"+listID).height();
        $allListWrap.animate({
        height: newHeight
        }, base.options.speed);
        base.$el.find(".nav li a").removeClass("current");
        $newList.addClass("current");
    if (window.history &amp;&amp; history.pushState) {
		history.replaceState("", "", "?" + base.options.param + "=" + listID);
		}    
        });        
        }   
        });
    var queryString = {};
		window.location.href.replace(
			new RegExp("([^?=&amp;]+)(=([^&amp;]*))?", "g"),
			function($0, $1, $2, $3) { queryString[$1] = $3; }
		);
    if (queryString[base.options.param]) {
        var tab = $("a[href='#" + queryString[base.options.param] + "']");
            tab
			.closest(".nav")
			.find("a")
			.removeClass("current")
			.end()
			.next(".list-wrap")
			.find("ul")
			.hide();
		        tab.addClass("current");
				$("#" + queryString[base.options.param]).show();
			            
		};                    
        };
        base.init();
};
$.organicTabs.defaultOptions = {
	"speed": 300,
	"param": "tab"
};
$.fn.organicTabs = function(options) {
        return this.each(function() {
            (new $.organicTabs(this, options));
        });
};   
})(jQuery);
$(function() {
	$("#tab").organicTabs();
	$("#example-two").organicTabs({
		"speed": 100,
		"param": "tab"
	});			
});

Cukup panjang bukan script diatas ? Anda bisa menggabungkan menjadi satu atau memisahkanya dalam penulisanya.

Silahkan melihat dan edit script diatas pada halaman Realtime HTML Editor ↗ yang telah Saya siapkan, script sudah saya gabung menjadi satu halaman.

Sampai disini pembahasan tentang Membuat organic tab dengan js dan jQuery , semoga bermanfaat, dan salam sukses untuk Anda semua.

Mungkin Anda Menyukai