mehmetduran.com - Paylaşmak Güzeldir...
Jquery ile Haber Manşet Alan Yapımı (Manşet Uygulamam)
Son günlerde jquery ile hazırladığım uygulamaları paylaşmaktayım ve bu paylaşımlara hazırladığım manşet uygulaması ile devam ediyorum. Son paylaşımlara benzer olarak bu uygulamyı da jquery ve javascript setInterval ve setTimeout fonksiyonları ile hazırladım. Ortaya kullanışlı ve güzel bir çalışma çıktığını düşünüyorum. Umarım hoşunuza gider.

Öncelikle kodlarımıza bakalım. Uygulamamım html kod yapısı şu şekilde olacak:

<div id="manset">
  <div><a href="#"><span class="manset_h">Haber - Yazı Başlığı 1</span> <img src="ft/1.jpg" class="manset_f" /></a></div>
  <div><a href="#"><span class="manset_h">Haber - Yazı Başlığı 2</span> <img src="ft/2.jpg" class="manset_f" /></a></div>
  <div><a href="#"><span class="manset_h">Haber - Yazı Başlığı 3</span> <img src="ft/3.jpg" class="manset_f" /></a></div>
  <div><a href="#"><span class="manset_h">Haber - Yazı Başlığı 4</span> <img src="ft/4.jpg" class="manset_f" /></a></div>
</div>
<div><span id="sayfa_no"></span></div>

Bu yapıya göre hazırlamış olduğum jquery, javascript kodlarım ise şöyle olacak:

<script type="text/javascript">
  var aktif = 1; var timer; var adet;
  $(document).ready(function(){
    $("#manset").show();
    $("#manset div").hide();
    $("#manset div:first").show();
    adet = $("#manset div").length;
    sayfalar();
    renk(1);
    timer = setInterval(degistir,3000);
  });
  function degistir()
  {
    $("#manset div:nth-child("+aktif+")").slideUp(100);
    aktif = (aktif + 1) % adet;
    if(aktif == 0) aktif = adet;
    $("#manset div:nth-child("+aktif+")").slideDown(200);
    renk(aktif);
  }
  function tikla(deger)
  {
    renk(deger);
    $("#manset div:nth-child("+aktif+")").slideUp(100);
    aktif = deger;
    $("#manset div:nth-child("+aktif+")").slideDown(200);
    clearInterval(timer);
    timer = setInterval(degistir,3000);
  }
  function renk(deger)
  {
    $("#sayfa_no span").css("background-color","#ccc")
    $("#sayfa_no span:nth-child("+deger+")").css("background-color","#eee");
  }
  function sayfalar()
  {
    var sayfa_no = "";
    for(var i = 1; i <= adet; i++)
    {
      sayfa_no += "<span class='sayfa' onclick=tikla("+i+")>"+i+"</span>"
    }
    $("#sayfa_no").html(sayfa_no);
  }
</script>

Görüldüğü gibi bu uygulama da daha önce paylaşmış olduğum uygulamara benziyor. Ancak bundan hazırlayacağım uygulamaları ve bundan önce hazırlamış olduğum uygulamaları eklenti haline getirip paylaşıma sunmayı düşünüyorum. Bu şekilde hazırladığım son uygulama olacak bu. Bundan sonraki uygulamalarımı bu yazıdan önce hazırladığım yazımdaki gibi yapacağım. Ayrıca önümüzdeki günlerin yoğun geçecek olması sebebiyle bu örneklere biraz ara vereceğim.

Uygulamanın çalışır halini aşağıdan veya buradan görebilirsiniz. Dosyaları ile beraber örnek çalışmayı buradan indirebilirsiniz. Ayrıca css dosyasında değişiklikler yaparak istediğimiz tasarımı oluşturabiliriz.


Umarım güzel bir çalışma olmuştur ve hoşunuza gider.

İyi Çalışmalar!
Mehmet Duran 15 Aralık Pazartesi 2008 40 8544 4,7
Javascript Web Tasarım jQuery Jquery Tanıtım Tasarım-Görsellik İndir
Bookmark and Share
Bu Yazıyı Değerlendirin.
Konuyla İlgili Olabilecek Diğer Yazılar 'Uzaktan Sınav Projesi' Jquery ve Ajax ile Oylama (Rating) Yapımı Asp.net MVC'de ActionResult Türleri Visual Studio 2008'de Copy Source as HTML Kullanma Asp.net ve Javascript ile Slayt
Yorumlar
Yorum Yaz
RSS Yorum Takibi
Hüseyin KAMAR 15 Aralık Pazartesi 2008 22:32 #1
Mehmet Hocam Uygulama çok güzel. Fakat ben bunu veritabanı kullanarak veri tabanından bilgileri alamak istiyorum ama 2 gündür yapamadım
Mehmet Duran 15 Aralık Pazartesi 2008 22:35 #2
Bu tür uygulamaları veritabanı ile yapmak için kullanacağımız data kontrol Repeater olmalı. Repeater'ın İtemtemplate bölümünü bu uygulamanın html yapısına uygun olarak oluşturmalı ve verileri almalıyız. Yapacağımız iş bu kadar.
Mehmet Duran 15 Aralık Pazartesi 2008 22:40 #3
Tam olarak anlamak için jquery ile Accordion uygulamasını hem normal hem veritabanı için anlatmıştım. Bu yazımı incelerseniz daha iyi anlayabilirsiniz.
Özgür 16 Aralık Salı 2008 08:33 #4
Ben bu tür uygulamalar için Literal yapısını kullanıyorum. Çok mu kullanışlı? Değil belki ama iş görüyor :)
Mehmet Duran 16 Aralık Salı 2008 08:58 #5
Hazırlayana kalmış bir tercih. Ama bana göre veritabanı ile çalışıyor isek repeater tercih edilmeli.
aaa 17 Aralık Çarşamba 2008 18:12 #6
iyide zaten bunların hepsi çok iyi tutorial sitelerinde var?
Mehmet Duran 17 Aralık Çarşamba 2008 18:15 #7
Evet daha önce bende bu tür uygulamalar gördüm ve paylaştım. Ama önemli olan hazır olanı kullanmak değil. Önemli olan bu uygulamaları kendimizin yapması. Bunun için bu tür uygulamaları yapıp kodları ile beraber sitemde paylaşıyorum. Yoksa hazır uygulamalar her yerde var.
yusuf karatoprak 25 Aralık Perşembe 2008 17:29 #8
üstat eline saglık şöyle bir örnek yaparmısın vertical tab mouseover ile çalışan böyle birşey için tam zamanı bence; çok güzel olur dua alırsın...
Mehmet Duran 25 Aralık Perşembe 2008 21:21 #9
Bu uygulamanın css özelliklerini ve de gerekirse javascript kodlarını değiştirerek istediğimiz uygulamayı elde edebiliriz. Bu uyugulamayı daha efektif daha görsel yapmayı planlıyorum.
mehmet kaan 07 Ocak Çarşamba 2009 10:43 #10
bu uygulamayı blogger da blogumuzda nasıl uygulayabilirim biraz uğraştım başarılı olamadım yardımcı olursanız sevininirim.
Mehmet Duran 07 Ocak Çarşamba 2009 18:53 #11
Bu yapıyı kullanmak için yazdığım script kodlarını ve jquery dosyasını head tagı arasına yazıp html yapıyı da sayfanıza gömeceksiniz. Ancak blogger hakkında pek bilgim yok.
bellagio 21 Mart Cumartesi 2009 01:54 #12
mrb hocam bu çalışmada veri tabanı kullanacak olsak nasıl bir kod yapısı yapmamız gerekir peki yani resimler ve belki bi açıklama alanı veritabanından gelicek
Mehmet Duran 21 Mart Cumartesi 2009 20:17 #13
Merhaba. Bu uygulamayı veritabanı ile yapmak içinverdiğim html yapıyı ve script kodlarını olduğu gibi kullanabilirsin. Data kontrolü olarak repeater kullanmanı tavsiye ederim. Ayrıca açıklama için html kodlarda değişiklik yapabilirsin.
Serkan 29 Mart Pazar 2009 22:49 #14
Merhaba bunu master page e nasıl entegre edebilirim. Bir türlü yapamadım da. Normal aspx sayfada çalışıyor fakat master a koyunca çalıştıramadım.
Mehmet Duran 30 Mart Pazartesi 2009 17:12 #15
Merhaba. Bu uygulamayı normal sayfada veya masterpage`de kullanmanın hiç farkı yok. Önemli nokta her iki durumda da aynı html yapıyı kullanmak. Eğer masterpage`de değerleri yüklediğiniz kontroller asp.net kontrolleri ise id`leri değişir ve Jquery ile seçme işleminde sonuçta da uygulamada hata oluşur. Bu durumu göz önüne alarak sorunu çözebilirsin.
Mesut 11 Nisan Cumartesi 2009 21:09 #16
Mehmet Duran abi, ben bu kodları wordpress sitemde nereye ekleyeceğimi bilemedim yardımcı olur musun?
Mehmet Duran 11 Nisan Cumartesi 2009 21:14 #17
Wordpress daha önce kullandım, bu kodları nasıl eklersin pek bilgim yok. Ancak bu kodları kullanacağın sayfanın içine gömmelisin.
Serkan 06 Mayıs Çarşamba 2009 19:12 #18
Merhaba mehmet yapmış olduğn manşet çok güzel ve kullanışlı senden birşey rica edicem bunu nasıl veritabanı ile bağlantı kurabiliriz manşet başlığını ve o haberin resmini göstermesini istiyorum yardımcı olabilirmisin ?
Mehmet Duran 07 Mayıs Perşembe 2009 00:17 #19
Bu daha önce de soran çok oldu. Yapman gereken repeater data kontrolünü kullanmak ve html yapıyı aynen oluşturmak. Bu yapının içine de istediğin veriyi koyabilirsin.
serkan 07 Mayıs Perşembe 2009 09:15 #20
repeater kontrolü ile yaptım mükemmel oldu veri tabanından çekiyor verileri haber sitelerinin manşet`lerinden daha sexy oldu :)
Alper MEMİŞ 16 Haziran Salı 2009 15:57 #21
En çok merak edilen konuyu anlatmışınız.Sizden ricam bu konunun jquery bölümünü bize detaylı olarak anlatmanız ve veri tabanı olarak anlatırsanız bize daha çok faydalı olur.Kopyala yapıştır yapmak la değil de bizim de sizin kadar olmasada yazacak seviyeye gelmek.İyi Çalışmalar.Kolay Gelsin.
Mehmet Duran 16 Haziran Salı 2009 20:01 #22
Jquery kodlarını yazımda da paylaştım. Değişken isimleri ve fonksiyon isimleri anlaşılır. Biraz kodlar incelenirse rahatlıkla anlaşılacağını düşünüyorum. Veritabanı ile örnek veya örnekler yaparsam paylaşacağım.
Hasan 08 Temmuz Çarşamba 2009 12:05 #23
Hocam ben sitenizde baktım veritabanıyla yapılanını bulamadım eğer yaptıysanız burdan paylaşabilir misiniz? Gerçekten güzel bir uygulama elinize sağlık ben denedim ama yapamadım veritabanıyla. Ne tür değişiklikler yapmam gerekli.
Mehmet Duran 08 Temmuz Çarşamba 2009 12:29 #24
Merhaba. Öncelikle bu örneğin veritabanı ile ilgili örneği yok. Veritabanıyla accordion uygulaması var. Bu örneği veritabanı ile yapmak için id`si manset olan div`in içine repeater koyup bu repeater içinde itemtemplate içerisinde gerekli yapıyı (div - a - span - img taglarını sırayla oluşturmak ve değerleri veritabanından çekerek yazdırmak gerekiyor.) koyman gerekir.
Burak ERDEM 30 Ağustos Pazar 2009 01:35 #25
Bunu çok aradım bulamayınca java ile sade bir şey yaptım.Tasarımımı tekrar değiştirmem gerekecek :) Bu arada siteniz harika.Örneklerinizi çalışır halde bağlantılamanız ve indirmek için rar içinde paylaşmanız gerçekten bilginin paylaşıldıkça çoğalması için somut bir şey.Helal olsun.Çok teşekkürler.
Kenan Sarıtaş 09 Eylül Çarşamba 2009 18:02 #26
Sayın duran bu güzel uygulamayı paylaştığınız için çok teşekkürler. Ben asp için çok yeniyim. Jquery ile Haber Manşet Alan Yapımı uygulamanız çok güzel diğer yorumlardan gördüğüm kadarı ile diğer arkadaşlar da asp de yeni. Amatör bir haber sitesi yapmak istiyorum ve bu tip bir manşet uygulamasına ihtiyacım var. Sizin manşet kodlarını nasıl düzenlemeliyim ki manşetler veri tabanından okunsun. Burada daha önceden nasıl olacağını yazmışsınız ancak örnek vermemişsiniz. Akordeon da olabilir.Saygılar.
Mehmet Duran 10 Eylül Perşembe 2009 01:51 #27
Burada accordion uygulamasını veritabanı ile nasıl yapılacağını ve örneğini paylaşmıştım. İşini görür. Ayrıca o örneği incelersen manşet örneğini de veritabanı ile yapabilirsin.
Shinobi 30 Ekim Cuma 2009 20:41 #28
merhabalar hocam sormak istedigim sey su bu tur islemleri php ile while dongusu ile nasil yapabiliriz? tesekkur ederim
Mehmet Duran 31 Ekim Cumartesi 2009 00:32 #29
Merhaba. Php ile dinamik olarak yapmak için döngü içinde (for, while, vb.) verdiğim html yapıyı oluşturman gerekli. Bu html tagların arasına da veritabanından ya da başka kaynaklardan alacağın verileri yazdırarak bu türlü uygulamayı dinamik olarak yapabilirsin.
hakan 02 Aralık Çarşamba 2009 23:19 #30
Öncelikle Merhaba.
timer = setInterval(degistir,3000);
ile ne yapılmak istendi yani setInterval ile bir değer geriye mi dönüyor??
Bir de
$("#sayfa_no").click(function(){..});
gibi birşeyin içerisinden çağırmanız gerekmiyormu tikla fonksiyonunu yani tikla fonksiyonu ana fonksiyon içerisinden nasıl çağrılıyor?
Mehmet Duran 02 Aralık Çarşamba 2009 23:30 #31
Merhaba. Öncelikle setInterval fonksiyonu ile bir değer dönmüyor ama bu fonksiyonu bir değişkene atadığımızda (örnekteki gibi), değişkeni bir timer nesnesi olarak kullanabiliyoruz. Bu değişkeni yani timer'ı sıfırlayabiliyor ve diğer işlemleri yapabiliyoruz. tikla fonksiyonu da dediğin gibi sayfa numaralarına tıklandığında çalışan bir fonksiyon. Bunu senin belirttiğin gibi değil de direk olarak sayfa numaralarını oluştururken onclick eventına yazarak belirttim. (sayfalar() fonksiyonunda)
hakan 02 Aralık Çarşamba 2009 23:34 #32
Anladım.Tesekkurler..Senin sayende Asp.net deki kalıplaşmış(belirli sınırlar dışına çıkmadan kullanılan) Ajax ı kullanmaktan vazgeçip Jquery i öğrendim.Eywallah...
Hakan 04 Aralık Cuma 2009 17:44 #33
Tekrar Merhaba.Benim burda kafama birşey daha takıldı.css kodlarında

float:left; 
padding:2px 0;
margin:0 2px 0 0;
color:#369;
cursor:default;
font-family:calibri;
font-size:10pt;
border:solid 1px #369; 
width:96px; 
text-align:center;

Eger burada float:left kullanmazsak width degerine ne verirsek verelim alttaki spanların boyutunu değiştiremiyoruz.Acaba buradaki float:left in tam anlamı nedir?Yani neden width i etkiliyor??
Mehmet Duran 04 Aralık Cuma 2009 22:17 #34
float değeri bir elementi sağa veya sola yaslıyor. Eğer bu özelliği kullanmaz isek bazı elementlerin genişliklerine müdahele edemiyoruz. Bu bakımdan esneklik kazandırsa da mantığını iyi kavramak gerekiyor. Aksi halde tasarımda işleri zorlaştırabilir. Bunun için float ile birkaç örnek yapmakta fayda var.
Harun 21 Ocak Perşembe 2010 13:52 #35
öncelikle çok teşekkür ediyorum ben html bi sayfa yapmaya çalışıyorum. bu manşet olayı çok güzel böyle bir çalışmayı kendi sayfamda yazmak istedim ama olmadı bana yardım ederseniz sevinirin. html sayfama nasıl yerleştireceğim. teşekkürler
Mehmet Duran 21 Ocak Perşembe 2010 20:09 #36
Direk olarak html kodları sayfaya eklemek yeterli olur. Bir de head arasına eklenen script dosyaların varlığı ve yolu da önemli. Bunları tam ve doğru biçimde yaptığında sorunsuz çalışır.
Kadir Çelebi 08 Şubat Pazartesi 2010 14:53 #37
Merhabalar.. Bu scripte alttaki sayılar yerine gelicek olan haber resminin thumbını koyabilir miyiz oraya acaba? Eğer öyle bişey yapılabilirse gerçekten mutlu olurum.. saatlerdir arıyorum bulamadım o şekilde bi script.. veya nasıl yapacağımıza dair biraz ip uçu verebilirseniz gerçekten sevinirim.. iyi çalışmalar..
Mehmet Duran 08 Şubat Pazartesi 2010 20:05 #38
Buradaki örneği istediğiniz şekle dönüştürmek için script kodlar içinde tanımlı olan sayfalar() fonksiyonu içinde sayfa numaralarının üretildiği bölümde span tagı yerine img tagı kullanıp, img tagının src değerini doğru biçimde vermelisiniz. Bir de tasarım konusunda bozulma olmaması için css kodlarda değişiklik yapmanız gerekir.
saidri 17 Mayıs Pazartesi 2010 18:41 #39
bu uygulamanın blogcu içinde kullanılabilirliği varmı. ben denedim ama pek başarılı olamadım biraz yardım edermisiniz sevinirim
Mehmet Duran 17 Mayıs Pazartesi 2010 23:02 #40
Merhaba. Blogcu hakkında pek bilgim yok ama sisteme Html ve Script gömebiliyorsan bu örneği kullanabilirsin.
İ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.
Kimse sana senden iyi öğüt veremez.
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