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



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.

Tab content



<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)
Tabs Content


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

Tabs Content


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

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Modifikasi Tab Content Dengan jQuery UI
Ditulis oleh= Devy Indriyani
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

28 komentar

  1. Hmmmm ... lieur nih ...hehehehe
    Soalnya kok klo di coba blm bisa juga ...

    BalasHapus
  2. patut di coba nih mbak, apa gak bingung ya membuat kode html dan jquery sebanyak itu

    BalasHapus
    Balasan
    1. dibagi-bagi mbak, biar gak kebanyakan..hehe..!!

      Hapus
  3. lama juga gak mampir kesini mbak

    BalasHapus
    Balasan
    1. ah perasaan baru aja kemarin mbak PURNAMA mampir kesini, sudah dibilang lama, bukannya mbak PUR ini yang sering bilang "MAS" kalau komentar disini.?

      Hapus
  4. Super keren [-( Mbak Devy, memang kreasi tidak ada habisnya ya, di copy Mbak @-)

    BalasHapus
  5. Demo shownya kok beda dengan gambar yang tertera ya mba :-?

    BalasHapus
    Balasan
    1. maksudnya gambar yang mana ya mas yang beda, coba dipraktekin dulu, hasilnya sama apa gak dengan tampilan DEMO SHOW.

      kalau masalah gambar diposting ini, memang gambar asli tidak saya print, gambar saya bentuk dengan paint-image.

      Hapus
  6. Cara menggunakanya bagaimana mbak, ane bingung.

    BalasHapus
    Balasan
    1. Selengkapnya baca disini mas..
      -->> Label Blogger Accordion Efek Tabulasi

      Disana saya pernah mendesain sebuah tabel untuk membungkus semua posting blog berdasarkan kategori label, dan ini untuk tabel content. Anda cukup pilih salah satu model tab yang menurut Anda menarik, lalu COPY semua kodenya lalu PASTE pada formulir halaman HTML editor teks, seperti ini:

      http://2.bp.blogspot.com/-uW6Du2iK_3s/VVij2nHBNRI/AAAAAAAAB9A/ZGd37M9zIi4/s1600/formulir%2BHTML.jpg

      Hapus
    2. oke Mbak terimakasih, :) Kalau kita ingin post tanpa menggunakan kode tsb bagaimana, jadi tinggal post saja maka tampilannya akan mjd bertab. :-?

      Hapus
    3. letakkan semua kode itu pada halaman HTML Template, namun buang kode tag <style> pada CSS saat akan menaruhnya pada area ]]></b:skin>

      nah yang akan sulit maltakkan HTML ini agar bekerja secara otomatis saat posting dituliskan, disana kita perlu mengubah semua stuktur elemennya menjadi perintah javascript, untuk memanggil teks title posting..Kalau saya jelaskan disini, halaman komentar ini akan penuh dengan kode modifikasi,

      agar lebih jelasnya mas bisa pelajari tag HTML template untuk mengatur area posting, disini:

      » Tata Letak Struktur Elemen HTML Template Halaman Posting

      Hapus
    4. Mbak memang terbaik, ane sampek pusing sendiri, ane pake aja kode diatas pada saat post sajalah. ntar kalo ada waktu luang ane atur HTMLnya. x-)

      Hapus
    5. kok malah pusing sih mas, padahal cukup mudah kok,
      hanya meletakkan kodenya saja, yang terpenting tubuh dimana kode ini akan kita letakkan dalam bahasa HTML, karena semua tag dalam stuktur HTML mempunyai fungsi yang berbeda-beda, kalau salah letak, maka template akan mengalami error..

      semua tutorial yang berhubungan dengan itu kan sudah saya berikan linknya. tinggal dilihat dan dipelajari, pasti mudah..!! hehe..!!

      Hapus
  7. Banyak juga kodenya ya.. Harus disesuaikan juga tampilannya dengan templatenya ya..

    BalasHapus
    Balasan
    1. tidak perlu ada kode yang harus disesuaikan mas, dalam modifikasi tab content ini, saya menggunakan perintah jQuery ui, artinya dapat bekerja pada semua jenis Template, sekalipun itu versi-1 (TM.v-1).

      Hapus
  8. .Yang kedua keren mbak dev, warnanya berganti-ganti. :d
    .Kalau yang ketiga malah saya mainin mbak, hehe. Tapi tetap mantap idenya mbak devy nih.
    (f)

    BalasHapus
    Balasan
    1. model yang ke-2 dan ke-3 desainnya saya samakan mas, hanya saya bedakan efeknya saja, model ke-3 juga berganti background kok, hehe..!!
      hanya lebih unik yang ke-2 tanpa KLIK, cukup mainin HOVER

      Hapus
  9. Kalo di sini (blogspot) aku belom pernah ngotak-ngatik templat karena susah bukan susah nyusunnya tp susah mbukanya karena ngeblognya cuma make hp buat mangkung kucing...

    BalasHapus
  10. ini nih yang gue cari2.. wkwkwk thanks mbak :D

    BalasHapus
    Balasan
    1. hmmm...kira-kira siapa ya yang mas slemut cari-cari, emang diantara sahabat disini ada yang BURONAN kah, hehe..!!

      Hapus
  11. Blog saya udah bawaan templatenya ada menu tab content.
    tapi keren mba tipsnya sangat bermanfaat buat nambah ilmu :))

    BalasHapus
    Balasan
    1. benar mbak, beberapa Template banyak yang sudah menggunakan efek seperti ini pada widget sidebar-page, biasanya menu tabnya untuk POPULAR POST, TOP COMMENT dan LABEL ARSIP.

      Hapus
    2. iya mba bner banger. klo kontennya bisa diganti sesuai selera ga harus popular post, top comment :)

      Hapus
  12. Hmmmmz lieur juga nih yang disini :D
    Ane lebih suka yang instan saja dah (bawaan) :v

    BalasHapus
  13. saya cuma bisa berdoa semoga semua postingan mbak bermanfaat dan bernilai pahala karena berguna bagi orang lain

    BalasHapus
  14. inovasinya selalu uptodate

    BalasHapus
  15. kode nya saya pastekan malah berantakan mba :(

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK