JQuery ile Son Dakika Haberleri

 bcakir
 25 Ocak 2012

Merhaba arkadaşlar, bu yazımda sitelerin genellikle en üstünde yer alan ve oklar ile ileri geri gittiğimiz yazı şeklinde son dakika haberlerini gösteren bir uygulama yapacağız. Buna özellikle döviz kuru gibi borsa ile alakalı sitelerde de çok rastlıyoruz. Siz bu uygulamayı bloğunuzda bulunan makale, yorum sayısı gibi bilgileri göstermek için de kullanabilirsiniz. Uygulamamızı JQuery ile geliştireceğiz. Uygulamada küçük butonlara ihtiyaç duyacağınız için yazının sonundan uygulamayı indirebileceksiniz. Uygulamamızın temel olarak nasıl olacağından bahsettim, şimdi yapmaya başlayalım.

<!DOCTYPE html>
<html>
<head>
<title>JQuery ile Manşet Yapımı</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    var a=0;
    $("#manset span").hide();
    $("#manset span:first").show();
	//manşet haberi olan span sayısını bul
    haber_sayisi=$("#manset span").length;

	//bir önceki habere geç
    $(".onceki").click(function(){
        $("#manset span").hide();
		//eğer başa geldiyse son spana döndür
        if(a==0){
            a=haber_sayisi-1;
            $("#manset span:last").show();
        }else{
            a--;
            $("#manset span:eq("+a+")").show();
        }
    });

	//bir sonraki habere geç
    $(".sonraki").click(function(){
        $("#manset span").hide();
		//eğer sona geldiyse ilk spana döndür
        if(a==haber_sayisi-1){
            a=0;
            $("#manset span:first").show();
        }else{
            a++;
            $("#manset span:eq("+a+")").show();
        }
    });
});
</script>
</head>
<body>
<a href="javascript:void(0)" class="onceki"><img src="onceki.gif" /></a>
<span id="manset">
<span>1. manşet haberi girin</span>
<span>2. manşet haberi girin</span>
<span>3. manşet haberi girin</span>
<span>4. manşet haberi girin</span>
<span>5. manşet haberi girin</span>
</span>
<a href="javascript:void(0)" class="sonraki"><img src="sonraki.gif" /></a>
</body>
</html>

Uygulamamızı dinamik olarak geliştirdim, siz istediğiniz kadar haber ekleyebilirsiniz. Bunun için herhangi bir değişiklik yapmanıza gerek yoktur. Siz bu uygulamaya değişik tasarımlar verebilir ve zipli halini buradan indirebilirsiniz. Böylece, bir JQuery uygulamamız daha burada sona ermiş oldu. Yararlı olması dileğiyle.

 4.273 Okunma

Bu yazıya 7 yorum yapılmış.

  1. Vermiş olduğunuz bilgiler içi teşekkürler.
    bunu simple portal ana sayfada nasıl gösteririm.yapmaya çalıştım olmadı.

    • Simple portal deneyimim yok maalesef. İyi çalışmalar dilerim.

  2. öncelikle kod için eline sağlık,
    birşey soracağım, mesela veritabanından gelen döngü kadar span olduğunu düşünürsek ve 3’er 3’er gösterebilirmiyiz.

    • İstediğin miktarda (3’er 5’er gibi) gösterebilirsin. Örneğin; veritabanından gelen değerleri diziye aktarıp, döngü ile 3’er listelettirirsin.

  3. Merhaba öncelikle teşekkür ederim, çok işime yaradı. Fakat sorunum şu, otomatik olarak dönme şansı var mı bunların? Hem buton ile hemde otomatik kendi dönsün. Şimdiden teşekkürler.

  4. Teşekkürler Güzel Bir Eklenti

  5. Selam, bu manşet haberi girin yerinde görünen haber başlıkları başka bir sayfadan aldıramıyor muyuz, ya da mevcut sayfanın içindeki başlıkları linkleriyle bu son dakika akışında gösterebiliyor muyuz?

Yazı hakkında görüşlerinizi belirtmek istermisiniz?

Daha fazla JQuery
Kapat