Category Archives: JQuery

jQuery ile ASP.NET Uygulamaları Geliştirme Internet Semineri Notları

Geçtiğimiz günlerde gerçekleştirmiş olduğum jQuery ile ASP.NET Uygulamaları Geliştirme internet seminerinde ASP.Net uygulamalarında JQuery kullanımı ve kolaylıklarından bahsetmeye çalışmıştım. Bu yazımla internet seminerinde kullananmış olduğum sunumu sizler ile paylaşmaktayım.

JQuery, Web tabanlı uygulamamalarında JavaScript kod yazımını en makul hale getiren bir araçtır. Eğer Web uygulaması geliştiriyor ya da bu konuda kendinizi geliştirmek istiyorsanız, eğitim listenize JQuery de koymayı unutmayın.

 

jQuery ve Mobil Web Uygulamaları Internet Semineri Notları

Geçtiğimiz tarihlerde gerçekleştirmiş olduğum jQuery ve Mobil Web Uygulamaları internet Seminerinde Mobile Web konusunu incelemeye çalıştık. Seminerinde ASP.Net MVC ve JQuery araçlarını kullanarak Mobile Web uygulamaları konusunda bilgiler vermeye çalıştık.

İçerisinde bulunduğumuz Mobile Çılgınlık diyebileceğimiz dönemde, Web geliştiricisi olarak Mobile Web uygulamaları geliştirebilmekteyiz. Mobile Web uygulamaları sayesinde, internet ortamında kullanan mobile cihazlar ile sunmak istediğimiz ürün ya da bilgileri her yerden erişebiliriz. (Dünya’ ya her yerden ulaş… )

 

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.

Kaynaklar

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

JQuery Öğreniyorum – 4 (Events)

Önceki yazılarımda seçiler konusunda bilgi vermeye çalıştım. Bu yazımda ise nesneler üzerinde bulunan olaylardan bahsetmeye çalışacağım.

ilk olarak JQuery de onload olayı nasıl yazabileceğimizi inceleyelim.

window.onload(function(){
  //sayfa yüklendiğin çalışır
});

Yukarıda standart olarak kullanabileceğimiz şekli yazmış olduk.Bu işlevi JQuery de yazmak için iki yöntem bulunmaktadır.

1.şekilde olarak

$(documan).ready(function(){
  //sayfa yüklendiğin çalışır
});

Yukarıda sayfa hazırlandığında(ready) içinde bulunan fonksiyonu tetiklenmesi sağlanmaktadır.

2.şekilde olarak

$(function(){
    //sayfa yüklendiğin çalışır
});

Yukarıda javascript kodun script taglari aralarına yazarak çalıştırmaya benzer bir uygulamadır.

Şimdi ise uygulamalarım kullandığımız nesnelerde fazlaca kullandığımız olayları inceleyelim. İlk olarak “a” link elementinin tıklandığında bize merhaba diyek bir uygulama tasarlayalım.

<html>
<head>
<script type=”text/javascript” src=”jquery-1.2.6.pack.js”></script>
<script>
$(function(){
$(“a”).click(function(){
//a tag seçtik ve click olayını belirledik.
        alert(“merhaba”);//javascript standart mesaj komutunu kullandık
      });
});
</script>
</head>
<body>
<a href=”#”>IBRAHIM ATAY</a>
</body>
</html>

Yukarıda uygulamayı gördükten sonra en çok kullandığım diğer  bir olay ise hover olayıdır. Yani nesnenin üzerine gelindiğinde çalışan olayı görelim.

<html>
<head>
<script type=”text/javascript” src=”jquery-1.2.6.pack.js”></script>
<script>
$(function(){
$(“a”).hover(function(){
//a tag seçtik ve hover olayını seçtik
        alert(“merhaba”);//javascript standart mesaj komutunu kullandık
      });
});
</script>
</head>
<body>
<a href=”#”>IBRAHIM ATAY</a>
</body>
</html>

Şimdi ise nesneye çift tıklandığında tetiklenecek olan olayı inceleyelim.

<html>
<head>
<script type=”text/javascript” src=”jquery-1.2.6.pack.js”></script>
<script>
$(function(){
$(“a”).dblclick(function(){
//a tag çiftıklama olayı atandır.
        alert(“merhaba”);//standart javascrpit komutu
      });
});
</script>
</head>
<body>
<a href=”#”>IBRAHIM ATAY</a>
</body>
</html>

En çok kullandığımız olaylardan sonra ise olaylar ile ilgili olan fonksiyonları kullanımlarını görelim. Bu fonksiyonlar ile web sayfalarımızda  daha iyi bir şekilde olayları yönetimi yapabiliriz.

ilk olarak bind() fonksiyonu kullanalım.bind() fonksiyonu örnek olarak bind(“click”) yani click olayı  yakalayabiliriz.Parantez içerisine istediğimiz gibi olayları kullanarak çalıştırabiliriz.

$(function(){
$(“a”).bind(“click”,function(){
// a tag click olayına bağlanmış oldu.
        alert(“merhaba”);
});
});

bind fonksiyonu, ters bir fonksiyonun vardır.unbind fonksiyonu örneğin click olayı kaldırabiliriz.

$(function(){
$(“a”).unbind(“click”);
//a tag click olayı kaldımış oldu.
    });

Son olarak da trigger()fonksiyondan bahsetmek istiyorum.Bu fonksiyonu uygulama içerisinde programatik olarak tetiklememiz gereken durumlarda kullanabiliriz.

$(‘#divmenu’).bind(‘click’, function() {
alert(“merhaba”);
});
$(‘#divmenu’).trigger(‘click’);

Öncelikler divmenu nesnesine bir click olay tanımladık ve daha sonra bu olayı trigger fonksiyonu kullanarak çağırdık.

Sonuç olarak bu yazımda olaylar ve nesnelere nasıl olay bağlayacağımız görmüş olduk.Bir daha ki yazımda görüşmek üzeri

JQuery Öğreniyorum – 3 (Seçiciler-XPATH)

Bir önceki yazımda seçiciler konusunda değinmiştim.Bu yazımda ise JQuery 1.2 ile kütüphane de kalkan ve kullanmak istediğimiz de ek olarak  kurmanız gereken bir plugin halinde gelen XPATHJQuery ‘nin bu plugin bu adres den temin edebilirsiniz. seçisinden bahsetmek istemekteyim.

Aslında XPATH plugin kullanımına bakıldığında .Net deki xpath uygulamalarını benzerlik göstermektedir.

<html>
<head>
<script src=”jquery-1.2.6.pack.js”></script>
<script src=”jquery.xpath.js”></script>
<script>
$(document).ready(function(){
$(“//div/p”).css(“color”, “red”);
});
</script>
</head>
<body>
<div>
<p>Bu yazı XPATH anlatmya çalışıyorum</p>
</div>
</body>
</html>

Yukarında bir div altında bulunan p elemanı içeriğinin rengini değiştirmiş olduk.

Bu yazımda JQuery ile XPATH nasıl kullanacağımız görmüş olduk bir  sonraki yazımda görüşmek üzeri