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

View Page Demo

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

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

View Page Demo

Sumber