JQuery CSS Metodu
Web yazılım meraklılarına yeniden selamlar :)
Yep yeni bir JQuery makalesinde yine birlikteyiz ve bugünkü makalemiz diğer JQuery makalelerimize göre daha özel olacak çünkü JQuery öğrenmenin en temel amaçlarından biri olan CSS konusuna değiniyoruz.
JQuery'nin getirdiği en büyük yenilik olan hali hazırda bir HTML ve türevleri olan web sayfalarındaki tasarımları değiştirebilme yeteneğidir.Bu sayede önceden yazılmış ya da önceden yazılması zorunlu olmayan CSS kodlarını JQuery ile sayfa tarayıcıda aktif bir şekilde görüntülenirken modifiye edebiliyoruz.
Bir web sayfasındaki DOM nesnelerine ait CSS stillerini değiştirebilmek ve okumak için CSS metodunu kullanıyoruz; temelde bu tekniği kullanabilmek için üzerinde CSS düzenlemesi yapmak istediğimiz ya da CSS stillerini okumak istediğimiz nesnenin seçicilerden (selector) biri ile kolaylıkla erişebiliyoruz.
CSS metodunun kullanılma biçimi ikiye ayrılır; birinci teknik nesnenin CSS bilgilerini okumak olan
$(seçici).css();
ile yakalıyor,
$(seçici).css({"özellik1":"değer1","özellik2":"değer2",...});
ile nesne üzerinde CSS stilleri tanımlayabiliyoruz.
Örnek bir uygulama yapalım ve JQuery ile nasıl CSS çalışmaları yapılır görelim.Öncelikle Adobe Dreamweaver uygulamamızı açıyor ve HTML belgesi oluşturuyoruz.Ekranda arka plan rengi mavi olan bir kare oluşturuyor ve 4 HTML buton ekliyoruz:
Yapmak istediğimiz ise kullanıcı butonlara tıkladıkça karenin arka plan rengi değişecek.Sayfamızın tasarımını gerçekleştirdikten sonra JQuery kütüphanesini Head tagı içerisinde projemize dahil ediyor ve javascript fonksiyonlarımızı yazıyoruz:
Ardından sayfamızı web tarayıcımızda (browser) çalıştırıp her butona tıkladığımızda karenin arka plan renginin değiştiğini görüyoruz:
Bu oldukça basit olan uygulama ile JQuery'nin nesneler üzerinde CSS stilleri verildiğini öğrendik,şimdi ise karenin boyutlarını değiştirelim.
HTML sayfamıza tekrar dönüyor ve 2 buton ekliyoruz:
Butonlarımıza tıklandığında karenin yüksekliğini azaltıp artırabileceğiz,butonlar için ilk önce yüksekliği artıracak fonksiyonumuzu yazıyoruz.Bu fonksiyonun arka plan rengi değiştirmek için yazdığımız fonksiyonlardan farklı olarak nesnenin boyutunu artırabilmek için o an ki yükseklik değerini yakalayıp gelen değere 10 px eklemeliyiz:
Nesnenin boyutu string tip olarak "200px" şeklinde geliyor,bu değer CSS biçiminde olduğu için doğrudan +10px değeri ekleyemiyoruz çünkü metinsel ifadede 200px + 10px ile string birleşimi sonucunda "200px10px" gibi geçersiz bir ifade ortaya çıkar.
Böyle bir syntax hatasına yol açmamak için gelen "200px" değerindeki "px" sözcüklerini replace metodu ile kaldırıp değeri int tipinde ele alarak 10 ekler ve değer "210" olduğunda "px" harflerini yanına ekleriz.Bu sayede "210px"
gibi doğru bir CSS birimi oluşturmuş oluruz:
Aynı fonksiyonun nesnenin yüksekliğini 10px düşürmek için bire bir benzerini yazıyoruz:
Sayfamızı çalıştırdığımızda ise nesnenin butonlar yardımıyla yükseklik değerinin değiştiğini görüyoruz.
JQuery ile ilgili başlangıç olarak CSS konusunu bu kadarıyla öğrenmemiz yeterli gibi görünüyor, ilerleyen örnek projelerimizde CSS metodundan oldukça faydalanacağız.
Bir sonraki makalemizde görüşmek üzere hoşçakalın :)
Projeyi İndir
Yep yeni bir JQuery makalesinde yine birlikteyiz ve bugünkü makalemiz diğer JQuery makalelerimize göre daha özel olacak çünkü JQuery öğrenmenin en temel amaçlarından biri olan CSS konusuna değiniyoruz.
JQuery'nin getirdiği en büyük yenilik olan hali hazırda bir HTML ve türevleri olan web sayfalarındaki tasarımları değiştirebilme yeteneğidir.Bu sayede önceden yazılmış ya da önceden yazılması zorunlu olmayan CSS kodlarını JQuery ile sayfa tarayıcıda aktif bir şekilde görüntülenirken modifiye edebiliyoruz.
Bir web sayfasındaki DOM nesnelerine ait CSS stillerini değiştirebilmek ve okumak için CSS metodunu kullanıyoruz; temelde bu tekniği kullanabilmek için üzerinde CSS düzenlemesi yapmak istediğimiz ya da CSS stillerini okumak istediğimiz nesnenin seçicilerden (selector) biri ile kolaylıkla erişebiliyoruz.
CSS metodunun kullanılma biçimi ikiye ayrılır; birinci teknik nesnenin CSS bilgilerini okumak olan
$(seçici).css();
ile yakalıyor,
$(seçici).css({"özellik1":"değer1","özellik2":"değer2",...});
ile nesne üzerinde CSS stilleri tanımlayabiliyoruz.
Örnek bir uygulama yapalım ve JQuery ile nasıl CSS çalışmaları yapılır görelim.Öncelikle Adobe Dreamweaver uygulamamızı açıyor ve HTML belgesi oluşturuyoruz.Ekranda arka plan rengi mavi olan bir kare oluşturuyor ve 4 HTML buton ekliyoruz:
Yapmak istediğimiz ise kullanıcı butonlara tıkladıkça karenin arka plan rengi değişecek.Sayfamızın tasarımını gerçekleştirdikten sonra JQuery kütüphanesini Head tagı içerisinde projemize dahil ediyor ve javascript fonksiyonlarımızı yazıyoruz:
Ardından sayfamızı web tarayıcımızda (browser) çalıştırıp her butona tıkladığımızda karenin arka plan renginin değiştiğini görüyoruz:
Bu oldukça basit olan uygulama ile JQuery'nin nesneler üzerinde CSS stilleri verildiğini öğrendik,şimdi ise karenin boyutlarını değiştirelim.
HTML sayfamıza tekrar dönüyor ve 2 buton ekliyoruz:
Butonlarımıza tıklandığında karenin yüksekliğini azaltıp artırabileceğiz,butonlar için ilk önce yüksekliği artıracak fonksiyonumuzu yazıyoruz.Bu fonksiyonun arka plan rengi değiştirmek için yazdığımız fonksiyonlardan farklı olarak nesnenin boyutunu artırabilmek için o an ki yükseklik değerini yakalayıp gelen değere 10 px eklemeliyiz:
Nesnenin boyutu string tip olarak "200px" şeklinde geliyor,bu değer CSS biçiminde olduğu için doğrudan +10px değeri ekleyemiyoruz çünkü metinsel ifadede 200px + 10px ile string birleşimi sonucunda "200px10px" gibi geçersiz bir ifade ortaya çıkar.
Böyle bir syntax hatasına yol açmamak için gelen "200px" değerindeki "px" sözcüklerini replace metodu ile kaldırıp değeri int tipinde ele alarak 10 ekler ve değer "210" olduğunda "px" harflerini yanına ekleriz.Bu sayede "210px"
gibi doğru bir CSS birimi oluşturmuş oluruz:
Aynı fonksiyonun nesnenin yüksekliğini 10px düşürmek için bire bir benzerini yazıyoruz:
Sayfamızı çalıştırdığımızda ise nesnenin butonlar yardımıyla yükseklik değerinin değiştiğini görüyoruz.
JQuery ile ilgili başlangıç olarak CSS konusunu bu kadarıyla öğrenmemiz yeterli gibi görünüyor, ilerleyen örnek projelerimizde CSS metodundan oldukça faydalanacağız.
Bir sonraki makalemizde görüşmek üzere hoşçakalın :)
Projeyi İndir