Modifikasi Tab Content Dengan jQuery UI

Berikut ini akan diuraikan langkah-langkah cara membuat ( Modifikasi Tab Content Dengan jQuery UI ) semoga artikel kali ini bermanfaat untuk kita semua.
Adapun Cara membuat : ( Modifikasi Tab Content Dengan jQuery UI ) sebagai berikut :

DAFTAR ISI CODE [Tampilkan][Sembunyikan]

CSS Kode 1

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<link rel='stylesheet' href='http:sahabatblogger77.blogspot.com/licensi/Mt-12/style.css'>
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
<style>
#tabs {border:2px solid red}
.menuContent {background:#38f}
.menuContent a {
background: linear-gradient(left, transparent 0%,blue 50%,transparent 100%)}
.menuContent a:hover,.menuContent a:focus {
background: linear-gradient(left, transparent 0%,red 50%,transparent 100%)}
</style>
<div id="tabs">
<ul class="menuContent">
<li><a style="color:#fff" href="#tabs-1">Content1</a></li>
<li><a style="color:#fff" href="#tabs-2">Content2</a></li>
<li><a style="color:#fff" href="#tabs-3">Content3</a></li>
</ul>
<div id="tabs-1">...Tulis Content (1) Disini...</div>
<div id="tabs-2">...Tulis Content (2) Disini...</div>
<div id="tabs-3">...Tulis Content (3) Disini...</div>
</div>

CSS Kode 2

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<link rel="stylesheet" href="http:sahabatblogger77.blogspot.com/licensi/Mt-12/style.css">
<script>
$(function() {
var tabs = $( "#tabs" ).tabs();
tabs.find( ".ui-tabs-nav" ).sortable({
axis: "x",
stop: function() {
tabs.tabs( "refresh" );}
});
});
</script>
<style>
#tabs {border:none}
.menuContent {background:#38f}
.menuContent a {
background: linear-gradient(left, transparent 0%,blue 50%,transparent 100%)}
.menuContent a:hover,.menuContent a:focus {
background: linear-gradient(left, transparent 0%,red 50%,transparent 100%)}
</style>
<div id="tabs">
<ul class="menuContent">
<li><a style="color:#fff" href="#tabs-1">Content1</a></li>
<li><a style="color:#fff" href="#tabs-2">Content2</a></li>
<li><a style="color:#fff" href="#tabs-3">Content3</a></li>
</ul>
<div id="tabs-1" style="background:#333;border-top:3px solid yellow;color:#fff">
...Tulis Content (1) Disini...
</div>
<div id="tabs-2" style="background:darkred;border-top:3px solid magenta;color:#fff">
...Tulis Content (2) Disini...
</div>
<div id="tabs-3" style="background:darkblue;border-top:3px solid lime;color:#fff">
...Tulis Content (3) Disini...
</div>
</div>

CSS Kode 3

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<link rel="stylesheet" href="http:sahabatblogger77.blogspot.com/licensi/Mt-12/style.css">
<script>
$(function() {
$( "#tabs" ).tabs({
event: "mouseover"
});
});
</script>
<style>
#tabs {border:none}
.menuContent {background:#38f}
.menuContent a {
background: linear-gradient(left, transparent 0%,blue 50%,transparent 100%)}
.menuContent a:hover {
background: linear-gradient(left, transparent 0%,red 50%,transparent 100%)}
</style>
<div id="tabs">
<ul class="menuContent">
<li><a style="color:#fff" href="#tabs-1">Content1</a></li>
<li><a style="color:#fff" href="#tabs-2">Content2</a></li>
<li><a style="color:#fff" href="#tabs-3">Content3</a></li>
</ul>
<div id="tabs-1" style="background:#333;border-top:3px solid yellow;color:#fff">
...Tulis Content (1) Disini...
</div>
<div id="tabs-2" style="background:darkred;border-top:3px solid magenta;color:#fff">
...Tulis Content (2) Disini...
</div>
<div id="tabs-3" style="background:darkblue;border-top:3px solid lime;color:#fff">
...Tulis Content (3) Disini...
</div>
</div>

Setelah semua kode html, (style, atau b:skin, dan javascript sudah di pasang sesuai posisinya masing-masing langkah terahir adalah Simpan, atau klik pratinjau tema terlebih dahulu,. Namun untuk saran tiada salahnya langsung klik SIMPAN dan lihat hasilnya, jika terjadi eror, dan kode tidak berfungsi dengan baik silahkan informasikan kami di kolom komentar, salam Team SAHAB BISNIS 77.

Demikian Cara membuat ( Modifikasi Tab Content Dengan jQuery UI ) semoga bermanfaat terima kasih.