mehmetduran.com - Paylaşmak Güzeldir...
Jquery ile Tek Tek Kayan Alan Oluşturma ve Ajax ile Rss Okuma Örneği
Bu yazımda Jquery ile hazırladığım uygulamalardan birini daha sizlerle paylaşacağım. Ayrıca hem basit yapısını hem de örnek olması açısından Ajax ile Rss okuma örneği yaparak bu örneği sizlere sunacağım. Uygulamam ise belli bir alanda bulunan elementlerin belli bir süre aralığında sürekli birer birer slayt şeklinde kayması ile oluşuyor. Oldukça faydalı ve kullanışlı bir uygulama olduğunu düşünüyorum. Bu örneği daha kullanışlı yapmak için de Rss okuma örneğini Ajax ile Class kullanarak hazırladım. Böylece hem örneğimi hem de Ajax ile Class kullanma mantığını daha iyi anlayacağımızı düşünüyorum. Şimdi uygulamamızın yapısına, kodlarına ve örneğimizin de kodlarına bakalım.

Öncelikle tek tek kayan alan uygulamsı için kullandığım html yapı şu şekilde olmalı.

  <div id="alan">
    <p><b>Birinci Alan</b></p>
    <p>İkinci Alan</p>
    <p>Üçüncü Alan</p>
    <p>Dördüncü Alan</p>
    <p>Beşinci Alan</p>
  </div>

Bu yapıyı kullanan ve tek tek kaymasının sağlayan Jquery kodlarım ise şöyle olmalı.

  <script type="text/javascript">
    var aktif=0, gosterim_adeti=5;
    var dizi = new Array();
    $(document).ready(function(){
      var boyut = $("#alan p").length;
      for(var i=0; i<boyut; i++)
      {
        dizi[i] = $("#alan p:eq("+i+")").html();
      }
      $("#alan").html("");
      for(var i=0; i<gosterim_adeti; i++)
      {
        $("#alan").append("<p>"+dizi[i]+"</p>");
      }
      setInterval(degistir, 2000);
      function degistir()
      {
        aktif = (aktif + 1)%boyut;
        $("#alan").html("");
        var ilk = aktif-1;
        if(ilk<0)ilk = ilk+boyut;
        $("#alan").append("<p>"+dizi[ilk]+"</p>");
        for(var i=aktif; i<aktif + gosterim_adeti;i++)
        {
          $("#alan").append("<p>"+dizi[(i%boyut)]+"</p>");
        }
        $("#alan p:first").slideUp(500);
        $("#alan p:last").css("height","0px").animate({height:"40px"},600);
        //verdiğimiz yükseklik css ile belirttiğimiz yükseklik
        //ayrıca alan id'li elementin yüksekliğini hesaplayarak vermeliyiz.
      }
    });
  </script>

Görüldüğü uygulama kodlarımız böyle. Uygulamanın bu halini buradan görebilirsiniz. Daha önce de belirttiğim gibi bu uygulamayı Ajax ile Class kullanma yöntemi ile Rss okuma biçiminde hazırladım. Bu örnek için html yapımız ve script kodlarımız tamamen aynı. Fakat script kodlarında Ajax kullandığımız için çağırdığımız yerde birkaç değişiklik var. Bu değişiklikleri de örneği inceleyerek görebilirsiniz. Şimdi ise Ajax ile Rss okuma örneğimizin kodlarına bakalım.

public partial class jquery_slayt_alan : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
 
    }
 
    [WebMethod]
    public static List<rss> rss_getir()
    {
      System.Threading.Thread.Sleep(500);
      XmlTextReader okuyucu = new XmlTextReader("http://www.mehmetduran.com/rss.aspx");
      XmlDocument dokuman = new XmlDocument();
      dokuman.Load(okuyucu);
      XmlNode node = dokuman.SelectSingleNode("/rss");
      XmlNodeList title = dokuman.SelectNodes("/rss/channel/item/title");
      XmlNodeList link = dokuman.SelectNodes("/rss/channel/item/link");
 
      List<rss> r = new List<rss>();
      for (int i = 0; i < 20; i++)
      {
        rss ro = new rss();
        ro.title = title.Item(i).InnerText;
        ro.link = link.Item(i).InnerText;
        r.Add(ro);
      }
      return r;
    }
}
 
public class rss
{
  public string title { get; set; }
  public string link { get; set; }
}

Görüldüğü gibi Ajax ile Rss okuma işlemi de böyle. Daha önce yazmış olduğum yazımdaki gibi bir yapı kullanarak (Class kullanarak) bu örneği hazırladım. Umarım faydalı bir çalışma olmuştur.

Rss okuma örneğini buradan, basit html ile hazırladığımız uygulamayı ise buradan görebilirsiniz.
İki örneği de içeren örnek projeye de buradan ulaşabilirsiniz.

İyi Çalışmalar!
Mehmet Duran 13 Şubat Cuma 2009 14 40909 4,8
Ajax Javascript Asp.net C Sharp jQuery Jquery Class İndir List Rss İnternet Generic Class
Bookmark and Share
Bu Yazıyı Değerlendirin.
Konuyla İlgili Olabilecek Diğer Yazılar Css and Html Web Disayn Bloğumda Kullandığım SiteMap Sınıfı FancyBox Kullanımı Visio için UML Sembolleri Asp.net'te Jquery ve Ajax ile Veritabanına Kayıt Ekleme
Yorumlar
Yorum Yaz
RSS Yorum Takibi
Hasan Gürsoy 13 Şubat Cuma 2009 10:57 #1
Hmm, çok güzel ve işe yarar bir örnek...
Selami Altıntaş 23 Haziran Salı 2009 00:51 #2
üstad eline sağlık bunu xml kullanarak yapa bilirmiyiz. http://www.meb.gov.tr/haberler/xml/meb0.xml
Mehmet Duran 23 Haziran Salı 2009 11:18 #3
Verdiğin linkteki xml veriye göre c# kodlarını uyarlayıp kullanabilirsin. Script kodlarda herhangi bir değişime gerek yok. Sadece c# kodlarını uyarlamak yeterli.
Selami Altıntaş 23 Haziran Salı 2009 11:25 #4
Teşekkür ederim. Hallettim.
Onur Demirel 19 Temmuz Pazar 2009 13:43 #5
Hocam burdaki web metodu script de nerde kullanıyoruz orasını anlayamadım.Saygılar
Mehmet Duran 19 Temmuz Pazar 2009 14:07 #6
Merhaba. Script kodlarını verdiğim örnek sadece html örnek. Webmethodu Rss okuma örneğini bu şekilde tek tek kayan alan şeklinde tasarlamak için hazırladım. Rss okuma örneğini incelersen orada webmethodu kullandığımızı görebilirsin. Yazının sonunda Rss örneğinin linki var. Ayrıca örneğin içinde de dosyaları görebilirsin.
abdullah çakır 01 Temmuz Perşembe 2010 16:50 #7
çok sağolun mehmet bey, bide merak ettim,burda kayacak metinleri veritabanında çekebilirmiyiz.
Mehmet Duran 01 Temmuz Perşembe 2010 19:28 #8
Merhaba. Burada for döngüsü içinde doldurulan nesneler okunulan XML yerine veritabanından veya başka bir kaynaktan alınacak. Yapılması gereken sadece verilerin çekildiği ve döngü içinde doldurulduğu bölümü uyarlamak.
Ümit 05 Ocak Çarşamba 2011 18:32 #9
Hocam bunu aşağıdan yukarı değilde sağdan sola nasıl yaparız.Ben kayan resim şeklinde yapıcam.bunu nasıl uyarlayabiliriz.
Mehmet Duran 06 Ocak Perşembe 2011 11:39 #10
@Ümit, buradaki örnek işini görebilir.
Ümit 06 Ocak Perşembe 2011 20:46 #11
Hocam ordaki asp bana html yada php lazım yinede teşekkür ederim ilginiz için.
Mehmet Duran 13 Ocak Perşembe 2011 08:50 #12
@Ümit, hangi dil ile olacağı farketmez. Sonuç olarak örnekteki gibi bir html yapısı oluştucaksın. Bunu da herhangi bir dilde bir döngü ile yapabilirsin.
Necdet TAŞ 22 Mart Salı 2011 11:40 #13
Üstad güzel birşey yazmışsın ve gerçekten çok güzelde ben bunun içerisine div tagı yerleştirmeye çalıştığım anda uçuyor. Bununla ilgili internette epey eksik var. Siz bu eksiği doldursanız inanın bizim çok işimize yarar. :)
Mehmet Duran 08 Nisan Cuma 2011 22:53 #14
@Necdet, içine yeni bir dünya eklenebilir ama css kodlara dikkat etmek gerekir.
İ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.
Gençken bilgi ağacını dikmesek, yaşlandığımız zaman gölgesine sığınacak bir yerimiz olmayacaktır.
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