Experiment CSS3 | jQuery Folder Tabs

CSS3 & jQuery folder tabs
CSS3 & jQuery Folder Tabs
AssalamuallaikumWr.Wb
Under88 - Sejak aku mulai ber-Experiment dengan CSS3, saya berpikir Untuk menulis Tutorial CSS3 Folder Tabs ini. dan akhirnya saya menemukan inspirasi dari red-team-design. Disana Banyak sekali tutorial CSS3 untuk Web dan Blog. Pada artikel ini, saya akan menggunakan teknik yang sama untuk membuat beberapa CSS3 tab terlihat baik.
Lihat rekontruksinya :
HTML
Penggunaan Markup adalah sangat jelas. Sedangkan atribut judul mungkin tampaknya menjadi tambahan, dalam hal ini mereka dibutuhkan untuk hal-hal jQuery. Setelah mencoba experiment ini beberapa kali saya selalu menemukan kendala pada atribut dan pada akhirnya saya memutuskan untuk memperbarui atribut judul dengan nama. Dengan cara ini, Anda akan menghindari tooltip yang tidak perlu ketika melayang pada tab.
<ul id="tabs">
    <li><a href="#" name="tab1">One</a></li>
    <li><a href="#" name="tab2">Two</a></li>
    <li><a href="#" name="tab3">Three</a></li>
    <li><a href="#" name="tab4">Four</a></li>
</ul>

<div id="content">
    <div id="tab1">...</div>
    <div id="tab2">...</div>
    <div id="tab3">...</div>
    <div id="tab4">...</div>
</div>
Jadi, berikut ini adalah bahan-bahannya:
  • # tab - daftar unordered yang memegang item tab navigasi.
  • # content - bungkus untuk setiap isi tab.
The CSS
CSS3 Folder Tabs
CSS3 Folder Tabs
Di bawah ini Anda akan menemukan baris CSS yang diperlukan untuk membuat tab ini. Juga, sumber demo berisi semua prefiks CSS3 properti.
#tabs{
  overflow: hidden;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
#tabs li{
  float: left;
  margin: 0 .5em 0 0;
}
#tabs a{
  position: relative;
  background: #ddd;
  background-image: linear-gradient(to bottom, #fff, #ddd);
  padding: .7em 3.5em;
  float: left;
  text-decoration: none;
  color: #444;
  text-shadow: 0 1px 0 rgba(255,255,255,.8);
  border-radius: 5px 0 0 0;
  box-shadow: 0 2px 2px rgba(0,0,0,.4);
}
#tabs a:hover,
#tabs a:hover::after,
#tabs a:focus,
#tabs a:focus::after{
  background: #fff;
}
#tabs a:focus{
  outline: 0;
}
#tabs a::after{
  content:'';
  position:absolute;
  z-index: 1;
  top: 0;
  right: -.5em;
  bottom: 0;
  width: 1em;
  background: #ddd;
  background-image: linear-gradient(to bottom, #fff, #ddd);
  box-shadow: 2px 2px 2px rgba(0,0,0,.4);
  transform: skew(10deg);
  border-radius: 0 5px 0 0;
}
#tabs #current a,
#tabs #current a::after{
  background: #fff;
  z-index: 3;
}
#content
{
    background: #fff;
    padding: 2em;
    height: 220px;
    position: relative;
    z-index: 2;
    border-radius: 0 5px 5px 5px;
    box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);
}
jQuery
Tidak ada perubahan pada script di bawah ini, masih menggunakan code standar..
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function() {
    $("#content div").hide(); // Awalnya menyembunyikan isi semua
    $("#tabs li:first").attr("id","current"); // Aktifkan tab pertama
    $("#content div:first").fadeIn(); // Tampilkan isi tab pertama

    $('#tabs a').click(function(e) {
        e.preventDefault();
        if ($(this).closest("li").attr("id") == "current"){ //deteksi untuk tab saat ini kembali
        }
        else{
        $("#content div").hide(); //Sembunyikan semua konten
        $("#tabs li").attr("id",""); //Reset id's
        $(this).parent().attr("id","current"); // Tabs yang aktive
        $('#' + $(this).attr('name')).fadeIn(); // Tampilkan konten untuk tab saat ini
        }
    });
});
</script>

Panduan Script :
1. Saat memulai.. semua isi harus tersembunyi .
$("#content div").hide();
2. Aktifkan Tab pertama yang terbuka .
$("#tabs li:first").attr("id","current");
3. Tampilkan isi konten tab yang terbuka .
$("#content div:first").fadeIn();
4. Deteksi pada saat tab akan kembali .
if ($(this).closest("li").attr("id") == "current")
5. Sembunyikan Semua kontent Saat tab lain akan di buka .
$("#content div").hide();
6. Reset semua id pada saat tabs di buka secara bergiliran .
$("#tabs li").attr("id","");
7. Tabs yang aktif sesuai id current .
$(this).parent().attr("id","current");
8. Tampilkan isi konten tab Lain Dengan efek fadIn. anda bisa merubah ini dengan atribut lainnya .
$('#' + $(this).attr('name')).fadeIn();
Ini hanyalah contoh kecil yang menunjukkan kedahsyatan CSS3. Semuanya sangat bagus juga untuk browser lama, tab menurunkan bagus.
Sekali lagi, Diperbarui sedikit kode di atas untuk menambahkan deteksi saat mengklik tab. Sekarang, segala sesuatu harus benar-benar baik dan tanpa ada masalah. Terima kasih atas kunjungan anda!
WassalamuallaikumWr.Wb
Sumber

4 comments:

  1. dari dulu saya selalu kesulitan belajar tentang jquery gan..

    ReplyDelete
  2. @Hendik CahyonoSaya juga tidak terlalu paham dengan jQuery.. namun saya manfaatkan bidang perkuliahaan saya yang masih berhubungan dengan pemprograman.. mari kta sama-sama untuk belajar.

    ReplyDelete
  3. mas, di titik2 yang 3 biji itu gak bisa kita masukin kode script perintah lain? kyk recent post atau apa gitu?

    ReplyDelete
    Replies
    1. bisa.. buat pembungkus baru lagi.. dan atur css.. di atas hanya sample saja..
      contoh pembungkus untuk script pada tab1..
      <div id="tab1">
      <div class="widget1">

      <script type="text/javascript">
      ...script widget yang ingin di masukan..
      </script>

      </div>
      </div>

      NB: atur widget tinggi dan lebar dengan css. gunakan overflow agar tidak melebihi batas . untuk meminimalisir kesalahan.
      pembungkus hanya untuk membuat box baru agar lebih mudah mengatur css nya..
      DEMO : http://jsfiddle.net/denzdii/zsdy6/

      Delete

Perhatian !! Komentar Pada Bulan September 2012 belum bisa di balas.
di karenakan semua admin sedang sibuk dengan urusan kulliahnya.
semoga setelah akhir bulan artikel dan komentar akan segera di update.


terima kasih atas perhatiannya sekali lagi kami minta maaf yang sebesar-besarnya.

 
loading...
Top