mehmetduran.com - Paylaşmak Güzeldir...
Jquery ile Değişir Alan Yapma
Bu yazımda bir önceki yazımda anlattığım setInterval fonksiyonu ve jquery'yi kullanarak değişir alan yapacağız. Bu uygulamayı bir çok yerde kullanabiliriz. Örnek verecek olursak; haber başlıklarını göstermek için, harhangi bir blogdan siteden aldığımız rss başlıklarını göstermek için, resim - fotoğraf slaytı hazırlamak için veya manşet alanlar yapmak için bu uygulamayı kullanabiliriz. Kodlarımıza bakalım.

Bu uygulamayı kendim hazırladım. Html kodlar ve script kodlarında değişiklik yaparak uygulamayı çok daha güzel hale getirebiliriz.

Öncelikle html kodlarımıza bakalım. 

<div id="alan">
  <a href="#">Haber, Rss Başlığı 1</a>
  <a href="#">Haber, Rss Başlığı 2</a>
  <a href="#">Haber, Rss Başlığı 3</a>
  <a href="#">Haber, Rss Başlığı 4</a>
  <a href="#">Haber, Rss Başlığı 5</a>
  <a href="#">Haber, Rss Başlığı 6</a>
</div>

Daha sonra jquery, javascript kodlarımıza bakalım.

<script type="text/javascript">
  var aktif = 1;
  $(document).ready(function(){
    $("#alan a").hide();
    $("#alan a:first").show();
    setInterval(degistir,2000);
  });
  function degistir()
  {
    $("#alan a:nth-child("+aktif+")").slideUp(300);
    aktif = (aktif + 1) % $("#alan a").length;
    if(aktif == 0) aktif = $("#alan a").length;
    $("#alan a:nth-child("+aktif+")").slideDown(300);
  }
</script>

Kodlarımız böyle. Javascript ve jquery bilgimiz var ise bu kodlamaları rahatlıkla anlayabilir ve değiştirebiliriz.

Tamamen kendim hazırladım. Bunu belirtmemin nedeni ise; daha önce bu tür uygulamaları başka sitelerden görüp ve sizlerle paylaşıyor olmamdı. Artık bu tür uygulamaları kendim hazırlayabiliyorum. Bu uygulama da bunlardan ilki diyebiliriz. Umarım devamı gelir ve sizlerle paylaşmaya devam ederim.

Uygulamanın çalışır halini aşağıdan görebilirsiniz. Buradan da dosyaları indirebilirsiniz.


İyi çalışmalar!
Mehmet Duran 10 Aralık Çarşamba 2008 9 24978 4,6
Javascript Web Tasarım jQuery Jquery Tasarım-Görsellik İndir Benden
Bookmark and Share
Bu Yazıyı Değerlendirin.
Konuyla İlgili Olabilecek Diğer Yazılar Microsoft Yaz Okulu Projemiz - Cengaver Jquery ve Ajax ile Hazırladığım Takvim Mezuniyet (Gazi Üniversitesi Bilgisayar Mühendisliği) Bloğuma Erişim Sıkıntısı Yorumlar ve Yorum Ekleme Bölümü Güncellendi
Yorumlar
Yorum Yaz
RSS Yorum Takibi
tasarımcı 02 Nisan Perşembe 2009 17:24 #1
Üstad bunlar iyi hoş da bize bunların veri tabanından çekilen hali lazım. bu konuda yardımcı olursan çok memnun oluruz. emenğin için teşekkürler.
Mehmet Duran 02 Nisan Perşembe 2009 20:46 #2
Bu tip uygulamaları veritabanı ile kullanmak veya el ile örnekteki gibi hazırlamak arasında hiç fark yok. Veritabanı ile yapacağımız zaman örnekteki html yapıyı aynı şekilde elde etmemiz gerekiyor. Bunu da en iyi şekilde repeater kontrolünü kullanarak yapabilirsin.
Mesut 11 Nisan Cumartesi 2009 21:14 #3
Arkadaşlar JQUERY`de benim anlamadığım nokta bu kodları veindirdiğimiz hazır çalışmaları nereye ekleyeceğiz ? Lütfen yardımcı olun...
Mehmet Duran 11 Nisan Cumartesi 2009 21:16 #4
Örneği incelersen daha iyi anlayabilirsin. Örneği paylaşmamım amaçlarından biri de nasıl kullanılacağını göstermek. Jquery işlemlerinde jquery kodlarını script tagları arasında yazmalısın. Html kodları da kullanacağın sayfaya gömmelisin.
Mehmet Ali 28 Haziran Pazartesi 2010 19:27 #5
Mouse ile üzerine gelince durmasını nasıl sağlarız ?
Mehmet Duran 29 Haziran Salı 2010 00:35 #6
Merhaba. Sormuş olduğun konuyu daha önce soran olmuştu ve ona göre güncelleme yaparak tekrar yayınlamıştım son halini. Buradan söylemiş olduğun yapıdaki uygulamaya ulaşabilirsin.
raihan 01 Eylül Çarşamba 2010 13:51 #7
helal olsun diyorum başka da birşey demiyorum.Durmak yok.
Mehmet Duran 01 Eylül Çarşamba 2010 14:25 #8
Teşekkürler @raihan. :D
mehmet 07 Kasım Pazar 2010 10:04 #9
güzel bir uygulama :)
İ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