JQuery Öğreniyorum – 5(Style Shreet – CSS )

JQuery makale serimin, 5 bölümünde JQuery ile web sayfalarımıza can veren css nasıl kontrol edebileceğimizi inceleyeceğiz. Söz konusu konuda JQuery de seçme işlemlerini bilmek çok büyük önem taşımaktadır. Bu nedenle bu konuda eksiği var olduğunu düşünüyor iseniz seçiciler ile ilgili yazımı inceleye bilirsiniz.

JQuery ile css yönetimi yazımızda ilk olarak, seçmiş olduğumuz html elemanında hazırladığımız css class ekleme işlemini görelim.

<html>
  <head>
    <script type=”text/javascript” src=”jquery-1.2.6.pack.js”></script>
    <style type=”text/css”>
      .news{
         Color:Red;
      }
    </style>
    <script type=”text/javascript”>
      $(function(){
         $(“p”).addClass(“news”);
        });
    </script>
  </head>
  <body>
   <p>JQuery Css işlemleri yazısı hazırlandı…</p> 
  </body>
</html>

Yukarıdaki örneğimizde “p” html elemanına dinamik olara news css class eklemiş olduk.

Not: Burada seçilerde olduğu gibi “,” ile ayrım şeklinde birden fazla Class atayamıyoruz. Ama şu şekilde bir kullanımda bulunabiliyoruz; 

$(“p”).addClass(“news”).addClass(“itl”);

<html>
  <head>
    <script type=”text/javascript” src=”jquery-1.2.6.pack.js”></script>
    <style type=”text/css”>
      .news{
         Color:Red;
      }
      .itl{
          font-style:italic;
      }
    </style>
    <script type=”text/javascript”>
      $(function(){
         $(“p”).addClass(“news”).addClass(“itl”);
      });
    </script>
  </head>
  <body>
   <p>JQuery Css işlemleri yazısı hazırlandı…</p> 
  </body>
</html>

Not da belirdiğim gibi html elemanlarına dinamik olarak class eklemek için ayrı ayrı fonksiyonlar kullanmamız gerekmektedir.

Class ekleme senaryosunu işledikten sonra karşı senaryo olarak dinamik olarak nasıl kaldıracağımızı inceleyelim.

<html>
  <head>
    <script type=”text/javascript” src=”jquery-1.2.6.pack.js”></script>
    <style type=”text/css”>
      .news{
         Color:Red;
      }
    </style>
    <script type=”text/javascript”>
      function ClassRemove(){
         $(“p”).removeClass(“news”);
      }
    </script>
  </head>
  <body>
   <p class=”news”>JQuery Css işlemleri yazısı hazırlandı…</p> 
   <input type=”submit” onclick=”ClassRemove()” value=”Class remove et..”/>
  </body>
</html>

Yukarıdaki örnekte “p” html elemanına static olarak atamış olana .news class butona basıldığında ClassRemove() fonksiyonu çalıştırarak tanımlanmış olan özelliği kaldırmış olduk.

JQuery ile Css yönetimi konusunda class ekle ve çıkarma dışında konu ile ilgili olarak bazı hazır fonksiyonlarda bulunmaktadır. Şimdi fonksiyonları inceleyerek konuya daha iyi hakim olaya çalışalım.

.width()

alert($(document).width());

Örnekte documnet nesnesini uzunluğu alert(mesaj) fonksiyonu ile öğrenmiş olduk.

.height()

Bu fonksiyon bir önceki fonksiyonla aynı şekilde kullanır tek fark olarak, seçili olan nesnenin yüksekliğini vermeyi amaçlanmaktadır.

alert($(document).height());

.position()

Position fonksiyon, isimden de anlaşılacağı gibi; nesnenin top ve left koordinatlarımı veren bir fonksiyondur.

<html>
   <head>

      <script src=”jquery.js”></script>

     <style>

          p { margin-left:10px; }

    </style>

   <script type=”text/javascript”>
          alert(“Left : “+$(“p”).position().left+” “+”Top : “+$(“p”).position().top);

   </script>

</head>

<body>
      <p> JQuery Öğreniyorum – www.ibrahimatay.com </p>

</body>

</html>

css()

Bu fonksiyon ile seçim yapılmış olan html elemanı kendimizi css kullanarak istediğimiz gibi atama yapmamızı sağlamaktadır(Özellikle effekler konusunda detaylı olarak incelyeceğiz.).

  <html>
  <head>
    <script src=”jquery.js”></script>
         <script type=”text/javascript”>
          $(function(){
             $(“p”).css(“display”,”none”);
        });
   </script>

  </head>
<body>
   <p> JQuery Öğreniyorum – www.ibrahimatay.com </p>
</body>
</html>

Yukarıdaki örnekte css de bulunan “display” özelliğini “none” yaparak seçili olana html elemanın gizlemiş olduk.

Not: Css konusunda yeterli bilginiz olmadığınız düşünüyor iseniz.w3school ya da Türkçe ve e kitap olan Sayın Fatih HAYRİOĞLU ‘ nu hazırlamış olduğu e kitabı inceleyebilirsiniz.

Serimin bu bölümden JQuery ile uygulama geliştirme esnasında en çok kullanış olduğumuz css yönetim fonksiyonlarını incelemiş olduk. Konu ile ilgili sorularınızı iletişim bölümünde sorabilirsiniz.

Herkese kolay gelsin.

IBRAHIM ATAY

Kaynaklar

http://api.jquery.com/css/
http://www.fatihhayrioglu.com/kitap/
http://www.w3schools.com/css/default.asp

Leave a Reply

Your email address will not be published. Required fields are marked *