mehmetduran.com - Paylaşmak Güzeldir...
Jquery ile Basit Birkaç Örnek Uygulama (Karakter Saydırma)
Daha önce javascript kodları hazırladığım uygulamaları jquery ile hazırladım ve sizlerle paylaşıyorum. Bunlar genelde kullanılan uygulamalar. Jquery ile yaptığımda javascript kodlarına göre daha az kod yazdım. Zira jquery'nin sloganı da "az kod çok iş". Ayrıca bu uygulamalarda jquery ile bir elementin eventlarını ard arda nasıl tanımlayabileceğimizi ve elmentlere istediğimiz özellikleri ard arda nasıl atayabilceğimizi görmüş olacağız. Karakter saydırma ve focus, blur eventları ile birkaç uygulama yapacağız.

Öncelikle karakter saydırma uygulamasına bakalım. Jquery ile yazdığımız script kodlarımız ve html kodlarımız şöyle olacak:

<head>
  <script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
  <script type="text/javascript">
    $(document).ready(function(){
      var sinir = 20;
      $("#tb1").keyup(function(){
        if($(this).val().length > sinir) $(this).val($(this).val().substring(0,sinir));
        $("#sonuc").html($("#tb1").val().length + " - 20");
      }).focus(function(){
        $(this).css("background-color","maroon").css("color","white").css("border","solid 1px white");
      }).blur(function(){
        $(this).css("background-color","white").css("color","maroon").css("border","solid 1px gray");
      });
    });
  </script>
</head>
<body>
    <input type="text" id="tb1" /><span id="sonuc"></span>
</body>

Karakter saydırma uygulamasını aşağıda görebilirsiniz.


Diğer bir uygulama da ise ilk başta textbox'a değer veriyoruz. Focus eventı tetiklendiğinde değeri boşaltıyoruz. Blur eventı çalıştığında ise değeri kontrol edip yeniden değer atıyoruz. Bu uygulamayı form validation uygulamalarında kullanabiliriz. Ayrıca css özellikleri de ekleyerek daha renkli hale getirebiliriz. Aşağıda uygulamayı görebilirsiniz.


Bu uygulamanın kodları ise şöyle:

<head>
  <script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
  <script type="text/javascript">
    $(document).ready(function(){
      var deger = "Bu Alana İsminizi Yazmalısınız...";
      $("#tb2").val(deger);
      $("#tb2").focus(function(){
          if($(this).val() == deger) $(this).val("");
      }).blur(function(){
          if($(this).val() == "") $(this).val(deger);
      });
    });
  </script>
</head>
<body>
    <input type="text" id="tb2" />
</body>

Görüldüğü gibi jquery ile elementlerin desteklediği eventları ard arda yazarak tetikleyebiliyoruz. Aynı şekilde elementlerin özelliklerini de ard arda belirleyebiliyoruz. Bu durum bizlere kolaylık sağladığı yapacağımız işleri daha az kod ile yapmamızı sağlıyor. Bu da jquery'nin faydalı bir kütüphane olduğunu bir kez daha gösteriyor. Ayrıca bu tür özellikler ile form validation gibi uygulamaları yapabilir ve de daha renkli hale getirebiliriz.

İyi Çalışmalar!
Mehmet Duran 28 Kasım Cuma 2008 12 34935 3,6
Javascript Web Tasarım jQuery Jquery Tasarım-Görsellik Programlama
Bookmark and Share
Bu Yazıyı Değerlendirin.
Konuyla İlgili Olabilecek Diğer Yazılar Jquery, Ajax ve FaceBox ile Edit Update Uygulaması Jquery'de Tanımlayıcı Değiştirme Asp.net - Ajax E-book Linq to Xml (Linq Konusuna Devam) Asp ile Basit Login Kontrolü
Yorumlar
Yorum Yaz
RSS Yorum Takibi
Barış 26 Haziran Cuma 2009 17:41 #1
Selam mehmet, karakter saydırma uygulamasını uyguladım,Aynı form içindeki 1 textbox`a uyguluyorum sorunsuz, fakat 2.texboxt`a uygulamaya çalışıyorum olmuyor?, aynı şekilde 2.textbox`un id degerini tb1 veriyorum olmuyor ? nasıl yapabilirim birden fazla textbox için? , kolay gelsin iyi çalışmalar
Mehmet Duran 26 Haziran Cuma 2009 18:37 #2
Merhaba. Öncelikle farklı textboxlara aynı id`yi verirsen çalışmaması normaldir. Çünkü her element için id değeri unique değer olmalıdır. Bunun için textboxlara aynı css class`ı vererek class`a göre saydırma yapabilirsin. Veya her textbox için farklı id verip o id`lere göre ayrı ayrı saydırma kodu yazmalısın.
huseyin 05 Nisan Pazartesi 2010 17:03 #3
Merhaba.Hocam ilk örnek için, masterpage a bağlı sayfa içine TextBox koydum ve multiline olarak. ama bu kod çalışmıyor. Bunun yerine input şeklinde text konulduğunda doğru çalışıyor neden acaba? Bir de burda yaptığınız gibi text in multiline olmasını istiyorum.Yani TextBox ın multiline özelliği var ama jquery çalışmıyor onun için. Eğer input kullanırsak bunun multiline nasıl aktif edilir?bir de input text in maxlength in kullanımı nedir ve TextBox ile input:text arsındaki fark nedir?
huseyin 05 Nisan Pazartesi 2010 17:11 #4
Son olarak input:text de nasıl kod bölümünde o textin degerini alabiliyoruz.(script kısmında değil) yani texbox da textbox1.text şeklinde ama input:text degerini nasıl kod tarafında alabiriz.Cünkü veritabanı ile bagantı kurmam gerekiyor.runat=server eklesek mantıklı olurmu?yani buara benim yazdığım şeyleri nasıl veritabanına kaydedebiliyorsunuz?Simdiden tesekkurler.
Mehmet Duran 06 Nisan Salı 2010 02:17 #5
Merhaba. Öncelikle bu sorun herkes tarafından dile getiriliyor ama ortada bir sorun yok. Biraz dikkatsizlikten oluyor. Masterpage olan bir sayfada yer alan kontrollerin ID'leri çakışma olmaması için değiştirilir. Buna göre jQuery kodlaması yapılırken bu durum göz önüne alınmalıdır. Aksi halde jQuery selector kodunda belirtilen element aslında sayfada olmayan bir element olmuş oluyor. jQuery kodlamasında bu sorunu engellemek için server kontrollerini şu şekilde kullanabiliriz. $("#<%= TextBox1.ClientID %>")... gibi. Umarım anlatabilmişimdir. Bunun dışında ise TextBox ile input:type arasında pek fark yok. Eğer input:type elementine runat=server özelliği verirsen TextBox olmuş olur. Ancak TextBox .Net içinde tanımlanmış ve hazır olarak gelen bir kontroldür. Render edildiğinde input:type olarak render edilir. Eğer TextBox kontrolüne multiline özelliği verilirse textarea olarak render edilir. Tüm bunları daha iyi anlamak için bunları kullandığın sayfaların kaynak kodlarını incelemelisin.
Mehmet Duran 06 Nisan Salı 2010 02:20 #6
İkinci olarak bahsettiğin konuda ise cevabı kendin vermişsin. Bu türlü kullanımda elementlere runat="server" özelliği atamakla beraber server kontrolü olarak belirlemiş oluyoruz ve CodeBehind tarafında bu kontrole ID değeri ile erişebiliyoruz. Değerini alırken de ElementID.Value gibi bir özellik yeterli oluyor. Ancak bir önceki yorumumda belirttiğim gibi eğer script kodlama yapılacaksa runat="server" olan kontrollerde selector kısmına dikkat etmeliyiz.
huseyin 06 Nisan Salı 2010 15:18 #7
Merhaba.Cevap verdiğiniz için tesekkurler.İkinci cevabınız icin bu sitedeki yorum yazılan kısma firebug ile baktım burda textarea kullanılmış ama runat=server eklenmemiş.runat=server eklemeden nasıl bu yorumları veritabanına kaydedebiliyorsunuz?Yani siz burda nasıl bir mantık izlediniz?
Mehmet Duran 06 Nisan Salı 2010 16:38 #8
Tekrar merhaba. runat="server" tagı kontrol render edildiğinde kalkar. Yani server taraflı tagdır ve kullanıcı tarafında bu tag görülmez. Söylediğin konuda ise kullandığım textarea'da runat="server" yok. Burada jQuery Ajax ile yorumları alıyorum. Değerleri alırken de script kullanarak geçerli elementin değerini alıp, jQuery Ajax fonksiyonun data özelliği ile beraber sunucuya aktarıyorum. Bu yapı için sitemdeki Ajax ile ilgili yazıları ve örnekleri inceleyebilirsin.
Bahadır 08 Eylül Çarşamba 2010 13:02 #9
Doğruyu söyle twitteri sen mi yaptın? :D
Mehmet Duran 13 Eylül Pazartesi 2010 10:17 #10
@Bahadır, keşke öyle olsaydı. :D
alperen 01 Aralık Çarşamba 2010 03:14 #11
kardeşim sende cevher var..tivitir dan iyisini yaparsın inşallah..bende çok fikirler ama senn gibi coder değilim malasef..
Mehmet Duran 11 Aralık Cumartesi 2010 00:00 #12
@alperen, yorumun için teşekkür ederim ama olanı değil de olmayan birşeyi yapmayı daha çok isterim. Sırf kod yazmak veya sırf fikir sahibi olmak yeterli değil. Ya ikisi de olacak ya da ikisini bilenler bir araya gelecek. Bunlardan birini yakalaman dileğiyle.
İsim :
Site :
Yorum :

Buradan bu yazıya ait yorumları RSS olarak takip edebilirsiniz.

Bu servis ile yazılara eklenen yorumları RSS ile takip ederek konu ile ilgili başkaları tarafından yapılan yorumları veya konuyla ilgili sorduğunuz sorulara verilen cevapları görebilirsiniz.
Şans bir uğraşının eseridir.
Bölümler
Yazılar
Arşiv
Arama
Linkler
Site İçi Arama
Son Zamanlarda Ne Yapıyorum ?
İstatistikler - Araçlar - Reklam
İstatistikler
Sayaç
Mehmet Duran | mehmetduran.com | Copyright © 2009