mehmetduran.com - Paylaşmak Güzeldir...
jQuery ile Dinamik Alanlar Oluşturma (Scroll Olmadan ve Yatay)
Bu yazımda jQuery ile sabit uzunlukta bir alan içinde sağa-sola hareket eden ve scroll içermeyen bir alan oluşturmayı anlatmaya çalışacağım. Birçok yerde kullanıldığını özellikle jQuery uygulamalarında kullanıldığını görebiliriz. Daha önce bu örneğin nasıl olacağı konusunda örnek isteyenler de olmuştu. Bunun için bu şekilde bir örnek hazırladım ve sizlerle paylaşıyorum. Böyle bir uygulamanın nasıl yapılacağını göstermek için basit bir örnek hazırladım. Ancak mantığını kavrayanlar her türlü şekile bu uygulamayı sokabilir ve istedikleri uygulamayı geliştirebilirler. Şimdi yapmamız gerekenlere sırayla bakalım.

Öncelikle hazırladığım örnek için kullanacağımız html yapıya bakalım.

 
  <div id="alan">
      <div id="icerik">
          // Görüntülemek istediğimiz verileri buraya konumlandıracağız.
      </div>
  </div>
 

Html yapıdan sonra bu alanları şekillendirecek ve scroll olmadan altta kalan alanı gösterecek olan CSS kodlarımıza bakalım. Bu uygulamanın en önemli noktalarından biri de CSS ile verdiğimiz bu özellikler.

  #alan
  {
    float:left;
    width:700px;
    border:solid 1px #147;
    background:#eee;
    overflow:hidden; /*önemli nokta*/
  }
  #icerik
  {
    float:left;
    color:#000;
    font:24pt tahoma;
    text-align:left;
    white-space:nowrap; /*önemli nokta*/
  }

Daha sonra da yazmamız gereken jQuery kodlarına bakalım. (jQuery kodlarında belirli süre aralıklarında alan hareket ediyor. Eğer sona gelinmiş ise en başa dönülüyor. Ayrıca örnek dosyasını indirip sağa, sola ve en baş ile en sona dönüş için yazmış olduğum ve elementlere görev verdiğim kodları da görebilirsiniz.)

 
<script type="text/javascript">
    var DegismeSuresi = 2000, KaydirmaSuresi = 1000, kaydirma_miktari = 300;
    $(function() {
        timer = setInterval(kaydir, DegismeSuresi);
    });
    function kaydir() {
        var deger = $("#alan").scrollLeft();
        if (deger + $("#alan").width() >= $("#icerik").width()) {
            $("#alan").animate({
                scrollLeft: "0"
            }, KaydirmaSuresi);
        }
        else {
            sagKaydir();
        }
    }
    function sagKaydir() {
        $("#alan").animate({
            scrollLeft: "+=" + kaydirma_miktari
        }, KaydirmaSuresi);
    }
    function solKaydir() {
        $("#alan").animate({
            scrollLeft: "-=" + kaydirma_miktari
        }, KaydirmaSuresi);
    }
</script>
 

Hazırladığım örnek sadece yatay alanda hareket eden bir örnek. Ancak yazmış olduğumuz kodları uyarlayarak bu uygulamayı dikey olarakta çok rahat biçimde hazırlayabiliriz.

Hazırladığım örneği buradan görebilir, buradan da indirebilirsiniz.

İyi Çalışmalar.
Mehmet Duran 25 Eylül Cuma 2009 12 29041 4,1
jQuery Web Tasarım Jquery Css İndir Tasarım-Görsellik Html Scroll
Bookmark and Share
Bu Yazıyı Değerlendirin.
Konuyla İlgili Olabilecek Diğer Yazılar Asp.net ile Multiupload Asp.net ile Resim Üzerine Çoklu Yazı Yazma (Generic Handler ile de Gösterme) 411 Length Required Hatası ve Çözümü MVC ile Link İşlemleri (Html.ActionLink, Url.Action ve Özel Metot Oluşturma) FancyBox Kullanımı
Yorumlar
Yorum Yaz
RSS Yorum Takibi
Salih Gedik 26 Eylül Cumartesi 2009 01:46 #1
Eline sağlık. Butarz birşeyi saf javascriptle yazmıştım. Saçma ve uzun framework kullanmamak benim gibi biri için. $() Ext.get varken neden document.getElementsById() şeklinde kullanayım ki
Mehmet Duran 26 Eylül Cumartesi 2009 14:27 #2
Zaten script kütüphanelerinin amacı az kod yazmak. jQuery'nin sloganı da "Az kod çok iş". Boşuna saatlerce bir takım şeyleri tekrarlamak gereksiz.
Salih Gedik 26 Eylül Cumartesi 2009 15:16 #3
Öyle olunca birde çok özelleştirmek zorlaşıyor karışıklık oluyor en azından bende
Atilla 07 Aralık Pazartesi 2009 14:49 #4
Peki veritabanindan gelen herbir satiri nasil ayri ayri gosterebiliriz ?
Mehmet Duran 07 Aralık Pazartesi 2009 22:47 #5
Her birini ayrı ayrı html elementlerin (p, div, span, vb..) arasına yazdırırsan satır satır yazarsın.
Yasin kucuk 10 Mayıs Pazartesi 2010 17:48 #6
aradigim bir uygula idi paylasim icin tesekkurler.
ali 11 Mayıs Salı 2010 23:20 #7
merhaba.Ben bir web sitesi yapıyorum da bu web sitesinin body bölümünün width degeri ne kadar olmalı? Yani genel olarak siteler ne kullanıyor?yüzde olarak mı yoksa pixel olarak mı?örneğin siz kendi siteniz de 920px(firebug) galiba kullanmıssıznız.Bir de bir resim üzerine geldiğinde o resme sahip olan kisinin ad ve soyadını nasıl gösterebilirm?Yani veritabanından alıcam burası tamam ama javascript mi yazmam lazım.Eğer öyleyse bir örnek verirseniz memnun olurum.
Mehmet Duran 11 Mayıs Salı 2010 23:51 #8
Merhaba. Bu genişlik ve biriminin ne olacağı tasarımı yapana ve site sahibine kalmış. Sitenin konusu ne ise o konulardaki sitelerin yapısına bakıp karar verilebilir. Genişliğin sabit olması veya olmaması da siteyi tsarlayana kalmış. Son bahsettiğin örnek için ise tooltip olayı. Bu örneği javascript ile yapabilirsin. Çok önceden sitemde birkaç örnek paylaşmıştım. Ancak güncel örnek istiyorsan internette araştırma yapmanı tavsiye ederim.
Serkan 20 Temmuz Salı 2010 19:37 #9
Gerçekten bu uygulamayı araya taraya google oldum :) en sonunda buldum ben burda resim koymayı düşünüyorum denicem inş.. olur resimleride php ile yazdırıcam .s Sanırım çalışmıcak ama denicem Teşekkürler..
Mehmet Duran 21 Temmuz Çarşamba 2010 09:15 #10
Eğer aynı yapıyı oluşturursan ister Asp ister Php olsun hiçbir sıkıntı olmaz.
fatih 30 Eylül Perşembe 2010 11:57 #11
merhaba ben sağa veya sola doğru kayacak resim slaytları yapmaya calısıyorum. ekranda aynı anda iki resim gorunmeli ve ikişer ikişer kaymalı. yardımcı olur musunuz
Mehmet Duran 01 Ekim Cuma 2010 15:18 #12
@fatih, Merhaba. Bu örneği uyarlyarak istediğini yapabilirsin. Bunun için metin olarak ayarlanmış yerlere resim ekleyebilirsin. Vereceğin genişlik ve yükseklik değerleri ile de istediğin şekilde bir alanı oluşturabilirsin.
İ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.
Ne edersen kendine, edersin kendi kendine.
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