-->

Sponsor Alanı

Slider

İlgi Çeken Videolar

Sağlık

Teknoloji

Sinema

Televizyon

Ne Nedir?

En5 Konular

jQuery Dersleri
ads

JQuery Dersi - Tuşları Algılama

By: İbrahim Fırat on Pazartesi, Aralık 30, 2013 / yorum : 1

Bu dersimizde jqery ile basılan tuşları tanımayı öğreneceğiz.

İlk olarak yapmanız gereken textarea oluşturun,textarea'da tıkladığınız harfler karşımıza çıkacak.

<textarea name="yazi" cols="30" rows="10"></textarea>


Aşağıdaki kodları yazınız.
$("textarea[name=yazi]").keypress(function(e){ /* Textarea da bir tuşa basıldığında */
  var sayisal = e.which; /* tıklanan tuşun ascii değerini bu kodla aldık */
  var harf = String.fromCharCode(sayisal); /* Ascii sembolleri harfe dönüştürmek */
  alert(harf);
 })
jQery

jQuery Dersi Tabmenü Yapımı

By: İbrahim Fırat on Salı, Aralık 24, 2013 / yorum : 0

Selam...

Bu  jQuery dersimizde  sekme yahut Tabmenü yapımını çalışacağız.  Gerkekli kodlama aşağıdadır;

<div class="menüalanı">
<!--[if !IE]>sekmeler<![endif]-->
<ul class="menüler">
<li class="s1"><a href="javascript:void(0);" class="s1">menü1</a></li>
<li class="s2"><a href="javascript:void(0);" class="s2">menü1</a></li>
<li class="s3"><a href="javascript:void(0);" class="s3">menü1</a></li>
<li class="s4"><a href="javascript:void(0);" class="s4">menü1</a></li>
</ul>

<!--[if !IE]>menü icerikleri<![endif]-->
<div class="s1">...</div>
<div class="s2">...</div>
<div class="s3">...</div>
<div class="s4">...</div>
</div>
</body>

Hemen üstüne aşağıdaki kodları ekleyiniz.

<script type="text/javascript" src="jquery.js"></script>

Hemen sonrasında  jquery.js dosyasını ana dizinde düzenleyip  içine aşağıdaki kodları ekleyiniz.

$(document).ready(function() {
 $('div.menüalanı ul.menüler li a').click(function(){
 $(this).parent('li').addClass('menüSecili').siblings().removeClass('menüSecili');
 var mevcutSinif = this.className.slice(0,2);
 $('div.menüAlani > div').hide().filter('div.'+mevcutSinif).show();
 });
 $('.menüAlani ul.menüler li a:first').click();
});
jQery

jQuery İle Özel Karakterlere İzin Verme

By: İbrahim Fırat on Cuma, Aralık 06, 2013 / yorum : 0

Merhaba İF Takipçileri

Bu dersimizde jQuery ile harf, rakam, gibi özel karakterlere izin vermeyi göreceğiz.

Textarea belirlenen öğelerin anlık olarak nasıl düzenleme yapılır öğreneceğiz. Özel karakterlere, rakam veya harflere izin vermek.

İlk aşamada yalnız rakamlara giriş izin verelim. Bunun için yapmanız gereken bir adet input bölümü oluşturun.  Ve  Class ekleyin.

<input type="text" name="yazı bölgesi" class="input1"/>

Yukarıda ki gibi input alanı oluşturduk ve class ekledik. Devamında jquery kodlamasını yapalım. Kodlama , regex deseni kullanıyorz.

$(".input1").keyup(function () {

  if (this.value.match(/[^0-9]/g)){

    this.value = this.value.replace(/[^0-9]/g,'');

  }

});

Yukarıda ki kodlarımızı inceleyecek olursak; En çok gözümüze çarpan keyup kullanımdır. Bu aşamada  class'a ait olan veriye girilecek olan  her işlemin görülmesini sağlamaktayız. kodlarımızın bi alt satırında ise girilmiş değerin  içinde yer alan regex ifadesi bulunmaktadır. Son satırda ise replace kullanımı yapılmıştır.  ( Verileri temizleme İfadesi )

Yalnız sayılara izin verme;

$(".input1").keyup(function (){

  if (this.value.match(/[^0-9]/g)){

    this.value = this.value.replace(/[^0-9]/g,'');

  }

});

Yalnızca Metinlere izin verme;

$(".input1").keyup(function (){

  if (this.value.match(/[^a-zA-Z]/g)){

    this.value = this.value.replace(/[^a-zA-Z]/g,'');

  }

});

Sadece özel karakterlere izin verme;

$(".input1").keyup(function () {

  if (this.value.match(/([A-Za-z0-9-]+)/g)){

    this.value = this.value.replace(/([A-Za-z0-9-]+)/g,'');

  }

});


Bu dersimizin sonuna geldik. Yukarıda ki kodlamalar gibi bu örnekleri çoğaltabiliriz. Örnek olması açısından sadece bu kadarının faydalı olacağını düşündük....jQery

Jquery Efekt Yapımı

By: İbrahim Fırat on Cuma, Aralık 06, 2013 / yorum : 0

Selam iF Takipçileri

Bu dersimizde Jquery kullanarak çok güzel bir efekt yapımını öğreneceğiz. Basit olmasının yanı sıra bir o kadar da kaliteli efektleri yapacağız.

Efekt Kod:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
 <meta charset="UTF-8">
    <script src="http://code.jquery.com/jquery-2.0.3.min.js" type="text/javascript">
    </script>
<script type="text/javascript">

        $(function(){
             $("#btn").click(function(){
                 $("img").hide(400); /* hide() belirlenmiş bir öğeyi görüntülemeye yarar örn:(3000) 3sn  */
             });
             $("#btn2").click(function(){
                 $("img").show(400);/* show() belirlenmiş bir öğeyi  görüntülemeye yarmaktadır aynı hide() gibi değerleri almaktadır*/
             });
             $("#btn3").click(function(){
                 $("img").toggle(400); /* toggle() belirlenmiş bir aracı  hem görüntüler  hem de gizlemesine yardımcı olur aynı show() ve hide() gibi değerler alabilir */
             })
        });
</script>

<title>ibrahimfirat.net| jQuery Basit Efektler</title>
</head>
<body>
<img src="http://j1309.hizliresim.com/1f/c/sldpj.jpg"><br />
<button id="btn">Tıkla - Gizle</button>
<hr />
<button id="btn2">Tıkla - görüntüle</button>
<hr />
<button id="btn3">Görüntüle - Gizle</button>

</body>
</html>
jQery

jQuery | Tıklanan Metnin Görüntüsünü Değiştirmek

By: İbrahim Fırat on Salı, Aralık 03, 2013 / yorum : 0

Bu dersimizde jQuery  ile tıklanan yazının görünürlüğünü değiştirmeyi öğreneceğiz. <p>
etiketi içindeki metinin üzerine tıklayınca  metinlerin görünürlüğünü kapatmaya yarayan kodlamayı yapalım.

Aşağıdaki örnek kodlamayı uyguladığınız zaman her satıra tıklandığı zaman yazılar yok olacaktır.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ibrahimfirat.net - Tıkladığım Yazı kaybolsun</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});
</script>

</head>

<body>

<p>ibrahim fırat</p>
<p>ibrahimfirat.net</p>
<p>iF'deki jQuery dersleri -) </p>


</body>
</html>
jQery

jQuery Kullanımı

By: İbrahim Fırat on Salı, Aralık 03, 2013 / yorum : 0

jQuery ile ilgili bu ilk dersimizde jQuery  kullanımı ve tanımından bahsedeceğiz.

jQuery  Nedir?

bir  JavaScript kütüphanesidir.  yahut bir javascript framework'ü denilebilir.  Genel olarak sitelerdeki flash alternatifi olarak kullanılmakta olan oldukça başarılı bu teknoloji ile manşet alanları, tab menüler, resim galeriler vs.  yapımı için kullanılan bir alternatiftir.

Dünya genelinde onbinlerce kullanıcı bugün jQuery kullanarak web uygulamalarını destelemektedir. Kulanımının en büyün nedenlerinden, jQuery'nin Ajax kullanımını son derece iyi bir şekilde kolaylaştırması ve tüm tarayıcılarda iyi sonuçlar vermesindendir. jQuery önceleri yokken veya tam olarak yaygınlaşmakışken , Ajax kullanılması gereken uygulamalarda, çeşitli tarayıcı kontrolleri ve try catch blokları ile kodumuz tam olarak iyi sonuçlar veremeyebiliyordu.

Nihayet, 2006 senesinde John Resig ve grubu jQuery kütüphanesini dünya yazılımcılarına hediye etmişlerdi.

jQuery  Kullanımı

Kullanmak için yapmanız gereken ilk adım kütüphaneyi referans olarak göstermeniz gerekmektedir.

<script type="text/javascript" src="jquery.js"></script>

Sonrasında aynı kütüphaneyi kullanarak kodlamaya başlayabilirsiniz

$(document).ready(function(){
// kodları buraya yazın...
});

Bunun gibi ilk başlangıç olarak basit çalışmalar yapabilirsiniz. 

<p>Ne yapabileceğini göster</p>
<script>
$( “p” ).append(“<strong>
Sanalkurs </strong>” );
</script>

jQery
Kaydol: Kayıtlar (Atom)
Copyright © 2012 - Bazı konularımızda insanları kötü alışkanlıklardan çaydırmak ve bilgilendirmek için yazılmıştır.