eburhan.com

Önceki JQuery ve Seçiciler konusunda web sayfamızdaki elemanlara nasıl erişebileceğimizi ve nasıl işleme tabi tutabileceğimizi görmüştük. Artık daha somut işlemler yapmaya geçebiliriz. İlk önce jQuery ile CSS işlemlerin nasıl yapıldığını inceleyelim. Bakalım jQuery’nin bu konuda bize sağladığı kolaylıklar nelermiş…

jQuery’nin CSS fonksiyonları

jQuery’nin css fonksiyonlarını 3 alt bölüme ayırabiliriz.

1. Css özellikleri (property)
2. Css sınıfları (class)
3. Css konumlandırmaları (offset)

Bu fonksiyonları kullanarak web sayfamızdaki yazıların rengini değiştirebilir, resimlere çerçeve ekleyebilir veya bir elemanın css özelliklerini başka bir elemana aktarabiliriz. Anlatımlara geçmeden önce de yazı boyunca kullanacağımız örneğe gözatalım:

<div class="lorem">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
  sed do eiusmod tempor incididunt ut labore et dolore
  magna aliqua. Ut enim ad minim veniam, quis nostrud
  exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in
  voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>

Yukarıdaki kod, örneğimizin HTML kısmını oluşturuyor. HTML etiketi olarak DIV etiketini kullandık. İçerisinde de ünlü “lorem ipsum” ifadesi yer alıyor. Ayrıca CLASS özniteliğini de "lorem" olarak belirledik. Şimdi de Css ataması yaparak biçimlendirmesini yapalım:

.lorem {
    font: normal 12px/22px Verdana;
    padding: 10px;
    border: 2px solid #00CC66;
    background: #DFFFDF;
    color: #555555
}

Yukarıdaki css kodları yeterince anlaşılır.. Bu örneğimizin sonucunu görmek için Örnek isimli sayfaya bakabilirsiniz. Şimdi ise jQuery’ye geri dönelim

1. Css özellikleri (property)

jQuery ile herhangi bir elemanın css özelliğini almak veya değiştirmek amacıyla css() fonksiyonunu kullanıyoruz. İlk önce bir elemanın css özelliği nasıl alınıyor ona bakalım. Mesela yukarıdaki örneğimizin yazı rengi neymiş öğrenelim.

$('div.lorem').css('color');

$('div.lorem') ifadesini önceki yazıdan biliyoruz. Web sayfamızdaki hangi eleman üzerinde çalışacaksak onu seçmemizi sağlıyordu. Biz de burada class özniteliği "lorem" olan DIV elemanımızı seçmiş olduk. Daha sonra ise asıl önemli kısım başlıyor. Çünkü css('color') ile seçmiş olduğumuz elemanın yazı rengini alıyoruz. Bu işlemin sonucu bize #555555 olarak geri dönecek. Test etmek için Örnek 1a sayfasına bakabilirsiniz.

Şimdi ise css özelliği nasıl değiştiriliyor ona bakalım. Örneğimizin yazı rengi #555555 idi biliyorsunuz. Biz bunu kırmızı renk olan #FF0000 ile değiştirelim.

$('div.lorem').css('color', '#FF0000');

Hangi css özelliği değiştirilecekse önce onu yazıyoruz, sonra yeni değerini belirliyoruz. Test etmek için Örnek 1b sayfasına bakabilirsiniz.

Ve şimdi birden fazla css özelliği nasıl değiştiriliyor ona bakalım. Örnek 1b’de elemanın yalnızca yazı rengini değiştirmiştik. Peki hem yazı rengini, hem arkaplan rengini, hem de çerçeve rengini değiştirmek isteseydik ne yapacaktık? İşte bunu:

$('div.lorem').css({
    color: '#D12F19',
    background: '#FBE3E4',
    borderColor: '#D12F19'
});

Burada dikkat etmeniz gereken en önemli nokta Css özelliklerini javaScript kurallarına göre yazmamız gerektiği… Yani çerçevenin rengini değiştirirken border-color yerine borderColor yazdığıma dikkat edin. Test etmek için Örnek 1c sayfasına bakabilirsiniz.

2. Css sınıfları (class)

jQuery ile elemanlara yeni css sınıfları ekleyebilir, sahip oldukları css sınıflarını silebilir ve bu ekleme-silme işlemini aynı anda yapabiliriz. Css sınıfı eklemek için addClass() fonksiyonunu, silmek için removeClass() fonksiyonunu ve ekleme-silme işlemini aynı anda yapmak içinse toggleClass() fonksiyonu kullanıyoruz. Şimdi bu üç fonksiyonu tek tek inceleyelim.

Örnek 1c’de elemanımızın renklerini değiştirmiştik. Fakat o örnekteki yeni renkleri tek tek jQuery’ye biz girmek zorundaydık. Oysaki bunun daha pratik şekli şudur: ilk önce css kodlarımız arasında yeni bir sınıf tanımlayacağız, daha sonrada bu sınıfı jQuery’nin addClass() fonksiyonu ile elemanımıza atayacağız.

.kirmizi {
    color: #D12F19;
    background: #FBE3E4;
    border-color: #D12F19
}

İlk önce css kodlarımız arasına kirmizi isimli yeni bir sınıf ekledik.

$('div.lorem').addClass('kirmizi');

Daha sonra da elemanımıza kirmizi isimli sınıfı jQuery ile eklemiş olduk. Test etmek için Örnek 2a sayfasına bakabilirsiniz.

Şimdi de eklediğimiz bu sınıfı silmeyi öğrenelim. Yapacağımız tek şey removeClass() fonksiyonu kullanarak silmek istediğimiz sınıf ismini belirtmek olacak o kadar.

$('div.lorem').removeClass('kirmizi');

Test etmek için Örnek 2b sayfasına bakabilirsiniz.

Son olarak da sınıf ekleme ve silme işlemlerini aynı anda nasıl yapıyoruz ona bakalım. Yani toggleClass() fonksiyonu nasıl kullanılıyor inceleyelim.

$('div.lorem').toggleClass('kirmizi');

Böylece sınıf ekleme ve silme işlemleri için ayrı ayrı kod yazmaktan kurtulmuş olduk. Test etmek için Örnek 2c sayfasına bakabilirsiniz.

3. Css konumlandırmaları (offset)

jQuery ile web sayfamızdaki bir elemanın yükseklik ve genişlik değerlerini almak, bu elemanın ekranın hangi noktasında bulunduğunu tespit etmek gerçekten çok kolaydır. Bir elemanın yükseklik değerini height() fonksiyonu ile genişlik değerini ise width() fonksiyonu ile alıyoruz. Bu elemanın konumunu almak içinse offset() fonksiyonunu kullanıyoruz.

İlk önce örneğimizin yükseklik değerini alalım.

$('div.lorem').height();

Bu işlem sonucunda örneğimizin yükseklik değeri piksel cinsinden bize geri dönecektir. Yine aynı fonksiyon ile yükseklik değerini de istediğimiz gibi değiştirebiliyoruz. Aynen alttaki gibi:

$('div.lorem').height(250);

Test etmek için Örnek 3a sayfasına bakabilirsiniz.

Şimdi de örneğimizin genişlik değerini alalım. Zaten aynen yükseklik değerini aldığımız gibi alıyoruz.

$('div.lorem').width();

Ve genişlik değerini değiştirmeyi görelim.

$('div.lorem').width(500);

Test etmek için Örnek 3b sayfasına bakabilirsiniz.

Ve son olarak da bir elemanın konumunu alalım. Konum ifadesini açarsak bir elemanın üstten kaç piksel uzaklıkta ve soldan kaç piksel uzaklıkta olduğundan bahsediyorum. Şimdi örneğimizin konumunu tespit etmek için kullanacağımız kodları görelim.

konum  = $('div.lorem').offset();
ustten = konum.top;
soldan = konum.left;

Gördüğünüz gibi offset() fonksiyonun kullanımı biraz değişik. İlk önce bu fonksiyonu bir değişkene atıyoruz. Daha sonra da Top ve Left değerlerine atadığımız bu değişken üzerinden ulaşıyoruz. Test etmek için Örnek 3c sayfasına bakabilirsiniz.

Ayrıca bu fonksiyon ile ilgili olarak şunu da eklemek istiyorum. Biliyorsunuz ki Top ve Left bir css özelliğidir. Bir elemanın Top ve Left özelliğini değiştirmek isterseniz Örnek 1c’dekine benzer bir atama yapmalısınız. Bu atamanın da çalışabilmesi için elemanınız mutlak konumlandırılmış olmasına da dikkat etmelisiniz.

benzer yazılar:

• Tek bir bilgisayarda birden fazla Internet Explorer
• jQuery ile hazırladığım "Kalan Karakter" eklentisi
• Tek bir resim dosyası ile yuvarlak köşeli kutular yapmak