jQuery ile CSS Sınıfları Arasında Geçiş Yapmak

jQuery kütüphanesi ile html ve css’e  bi hareketlilik geldi ;-) Biz de bu hareketliliğin getirdiği rüzgârı arkamıza alarak ilk jQuery makaleciğimizi yazıyoruz. Div arasında iki css sınıfı değişikliğine gideceğiz.  Div imizin ilk CSS sınıfı class1 iken biz bunu class2′ye dönüştüreceğiz. Çok basit bir mantığı var, ama çok iş görebilir. Önce jQuery kütüphanesini işleyeceğimiz sayfaya çağırıyoruz:

 <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

Daha sonra aralarında geçiş yapacağımız CSS sınıflarını tanımlıyoruz:

 <style type="text/css">
 .class1
 {
 background-color: Aqua;
 border: 3px dashed Black;
 width: 400px;
 height: 200px;
 }
 .class2
 {
 background-color: Fuchsia;
 border: 6px groove Blue;
 width: 400px;
 height: 200px;
 }
 </style> 

Şimdi de <script> etiketleri arasına girip jQuery kodumuzu yazıyoruz. Bismillah :)

 &lt;script type=&quot;text/javascript&quot;&gt;
 $(document).ready(function () {    // jQuery yi başlatıyoruz.
    $(&quot;#div1&quot;).click(function () {  // div1 id li html öğesi tıklandığı zaman:
       $(this).toggleClass(&quot;class2&quot;).html(resim);
 });
 });
 &lt;/script&gt;

CSS sınıfı değişimini toggleClass ile sağlıyoruz. this kalıbına dikkat: üst satırdaki #div1 kastedilir. Çalışır halini buradan görebilir, buradan da indirebilirsiniz. İlk jQuery makalemiz biraz basit. İnşallah ileride, daha derin işler yaparız :) Şaka bir yana, bundan sonra jQuey Events’a, Ajax’a ve jQuery ve ASP.NET in birlikte kullanımına değineceğiz. Bir sonraki makalede görüşmek üzere … İyi çalışmalar

Benzer İçerikler :

  • Benzer içerik bulunamadı
You can leave a response, or trackback from your own site.