Modifikasi Tab Content Dengan jQuery UI

Modifikasi Tab Content Dengan jQuery UI - Apa yang Anda pikirkan jika harus mengedit kode dengan jQuery UI, lalu apa yang akan Anda buat setelahnya?. Jika Anda tahu begitu banyak fitur-fitur element yang terkandung didalam script jQuery UI ini, maka banyak widget dengan berbagai efek dapat Anda hasilkan hanya dengan menggunakan jQuery ini. Pada season#1 Widget.UI sudah saya bahas Cara » Menyeleksi Fitur Objek Dengan jQuery UI untuk modifikasi widget blog, kesempatan kali ini saya akan berikan 3 model TAB Content dengan berbagai efek desain seperti :

Anda Tinggal KLIK menu TAB pilihan Anda disini..

• Default Tabs
• Open Tabs On MouseOver (HOVER)
• Sort Table Title (DRAGGABLE)

Membuat Tab Content merupakan cara untuk merangkum berbagai jenis content yang berbeda untuk ditampilkan dalam satu tabel yang sama. » Membuat Label Blogger Accordion Efek Tabulasi merupakan salah satu cara untuk mengumpulkan semua postingan Anda, untuk ditampilkan dan disusun pada halaman yang sama berdasarkan kategori masing-masing tag label seperti ini:




DEMO SHOW

3 Model Tab Content Dengan jQuery UI
1. Default Tabs
Tampilan yang simple dan sangat sederhana, namun pada link menu TAB saya tandai dengan auto-focus color saat Anda berada ditab content-1, content-2 dan seterusnya. Hal ini untuk memudahkan pembaca tahu kalau saat ini mereka sedang membaca informasi dalam content berapa, sehingga lebih mudah untuk melanjutkan pada tab selanjutnya.


<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>

2. Open Tabs On MouseOver (HOVER)

Untuk model ke-2 saya desain dengan sistem HOVER, jadi untuk membuka link pada tab selanjutnya Anda tidak perlu melakukan KLIK, cukup letakkan saja panah mouse Anda pada menu tab, maka Anda sudah bisa membaca isi content dalam menu tersebut, dan bukan hanya itu saja, masing-masing content tab saya bedakan dengan warna background yang berbeda. Bagaimana? mau pilih model yang ini gak.!!, kode lengkapnya seperti ini:


<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>

3. Sort Table Title (DRAGGABLE)
Desain pada model ini saya modifikasi dengan efek DRAG, artinya menu link pada tiap-tiap tab bisa Anda pindahkan posisinya bergantian dengan menu yang lain. (Tempat dimana letak Tab-1 bisa diganti posisinya dengan Tab-2 atau Tab-3, tab-2 diganti dengan tab-3 dan seterusnya sesuai selera Anda).


<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>

Membuat tab content seperti ini akan sangat membantu bilamana suatu saat kita perlu menampilkan informasi yang berbeda dalam bahasan artikel, jadi kita bisa menampilkan content tersebut dengan bentuk desain tab (tabel tabulasi content). Lebih detail pembahasan kinerja tab content, selengkapnya baca » Pengenalan Elemen CSS Target.

Terimakasih **