mehmetduran.com - Paylaşmak Güzeldir...
Jquery ile Tab Kontrol Uygulaması
Son günlerde bitirmem gereken proje için birçok uygulamaya göz attım. Bunlardan birkaçını paylaşmıştım. Şimdi ise bir uygulamayı daha sizlerle paylaşacağım. Bu uygulama da jquery ile tab uygulaması. Yapmam gereken projede kullandığım oldukça faydalı ve oldukça güzel bir uygulama. Tamamen jquery ile yapılabiliyor. Ekstra javascript kodlarına gerek yok. Sadece tasarım için css dosyası kullanıyoruz. Şimdi bu uygulamayı yapmak için gereken kodlara bakalım.

Html kodlarımız ve yazmamız gereken javascript kodlarımız şöyle olacak:

<head>
  <title>Jquery ile Tab Kontrol</title>
  <link href="stil.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
  <script>
    $(document).ready(function(){
      $('#tabs div').hide();
      $('#tabs div:first').show();
      $('#tabs ul li:first').addClass('active');
      $('#tabs ul li a').click(function(){
        $('#tabs ul li').removeClass('active');
        $(this).parent().addClass('active');
        var currentTab = $(this).attr('href');
        $('#tabs div').hide();
        $(currentTab).show();
        return false;
      });
    });
  </script>
</head>
<body>
  <div id="tabs">
    <ul>
      <li>
        <a href="#tab-1">Tab 1</a>
      </li>
      <li>
        <a href="#tab-2">Tab 2</a>
      </li>
      <li>
        <a href="#tab-3">Tab 3</a>
      </li>
      <li>
        <a href="#tab-4">Tab 4</a>
      </li>
    </ul>
    <div id="tab-1">
      <h3>Tab 1</h3>
      <p>Tab Alanı 1 - Deneme Yazısı</p>
    </div>
    <div id="tab-2">
      <h3>Tab 2</h3>
      <p>Tab Alanı 2 - Deneme Yazısı</p>
    </div>
    <div id="tab-3">
      <h3>Tab 3</h3>
      <p>Tab Alanı 3 - Deneme Yazısı</p>
    </div>
    <div id="tab-4">
      <h3>Tab 4</h3>
      <p>Tab Alanı 4 - Deneme Yazısı</p>
    </div>
  </div>
</body>

Uygulamanın örnek ekran görüntüsü ise şöyle:
Jquery ile Tab Kontrol Uygulaması

Uygulamanın çalışır halini buradan görebilir, uygulamayı ise buradan indirebilirsiniz.
İyi Çalışmalar!
Mehmet Duran 22 Kasım Cumartesi 2008 3 23308 5,0
Javascript Web Tasarım jQuery Jquery Tasarım-Görsellik İndir Html
Bookmark and Share
Bu Yazıyı Değerlendirin.
Konuyla İlgili Olabilecek Diğer Yazılar Microsoft Ajax $addHandler Metodu ve Örnek Uygulama Asp.net'te Türkçe Karakter Sorunu Düzeltme Javascript ile Karakter Saydırma Vectorel Wallpapers (10 Adet) Asp.net MVC Cheat Sheets
Yorumlar
Yorum Yaz
RSS Yorum Takibi
Ali Canpolat 23 Kasım Pazar 2008 10:49 #1
bu bana asp.netteki multiviewleri hatırlattı. eline saglık gayet guzel ve sade bi uygulama. kolaylıkla her uygulamaya entegre edilebilir.
serkan topkan 17 Mart Çarşamba 2010 12:57 #2
Merhaba peki bu tablar arsından seçim yaptığımızın tabın içeriğini güncelleme olayını nasıl yaparız.
Mehmet Duran 17 Mart Çarşamba 2010 12:59 #3
Merhaba. Zaten örnekte her tab seçiminde görünen kısmın içeriği değişiyor. Örnekte içerik benzer olduğu için farkedemedin sanırım.
İsim :
Site :
Yorum :

Buradan bu yazıya ait yorumları RSS olarak takip edebilirsiniz.

Bu servis ile yazılara eklenen yorumları RSS ile takip ederek konu ile ilgili başkaları tarafından yapılan yorumları veya konuyla ilgili sorduğunuz sorulara verilen cevapları görebilirsiniz.
Hizmet amaçlı işler başarıya, kar amaçlı olanlar ise başarısızlığa yöneliktir.
Bölümler
Yazılar
Arşiv
Arama
Linkler
Site İçi Arama
Son Zamanlarda Ne Yapıyorum ?
İstatistikler - Araçlar - Reklam
İstatistikler
Sayaç
Mehmet Duran | mehmetduran.com | Copyright © 2009