Merhaba arkadaşlar bu yazıda jQuery ile one örneği yapacağız.Bu fonksiyon genellikle oylama için kullanılır kullanımı basittir şöyle ki
jQuery One Kullanımı
jQuery İle Canlı Önizleme
Merhaba arkadaşlar şu sıralar angularjs oldukça popüler durumda ancak jQuery kullanarak da aynı şeyleri yapabiliriz.Örnek verecek olursak bir textarea olusturalım
<textarea name="yazi"> </textarea> <div id="sonuc"> </div> |
daha sonra jQuery kodlarını yazalım.
$("textarea[name=yazi]").keyup(function(){ $("#sonuc").html($(this).val()); }); |
burada keyup fonksyonunu kullanarak canlıönizleme yapıyoruz.
jQuery ile Sayfa Geçiş Efekti
Bu yazıda jQuery kütüphanesini kullanarak sayfalar arası geçiş yapacağız buradan örneklerini görebilirsiniz.Öncelikle Html sayfamızı oluşturuyoruz.
<!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" xml:lang="en"> <head> <title>jQuery ile sayfa geçiş efekti </title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <!-- gerekli dosyalar --> <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <!--#gerekli dosyalar --> </head> <body> <!-- html --> <nav class="menu"> <a href="#anasayfa">Anasayfa</a> <a href="#hakkimda">Hakkımda</a> <a href="#iletisim">İletişim</a> </nav> <div id="anasayfa"> <h1>ANASAYFA</h1> <p>Vural Usenc Kişisel Blog</p> <p>Vural Usenc Kişisel Blog</p> <p>Vural Usenc Kişisel Blog</p> <p>Vural Usenc Kişisel Blog</p> <p>Vural Usenc Kişisel Blog</p> <p>Vural Usenc Kişisel Blog</p> <p>Vural Usenc Kişisel Blog</p> <p>Vural Usenc Kişisel Blog</p> <p>Vural Usenc Kişisel Blog</p> <p>Vural Usenc Kişisel Blog</p> <p>Vural Usenc Kişisel Blog</p> <p>Vural Usenc Kişisel Blog</p> <p>Vural Usenc Kişisel Blog</p> <p>Vural Usenc Kişisel Blog</p> </div> <div id="hakkimda"> <h1>HAKKIMDA</h1> <p>Herkese Merhaba, Ben Vural Üşenç,Bilecik Şeyh Edebali Bilgisayar Mühendisliği 3.sınıf ögrencisiyim.Bu blogu yazmaktaki amacım araştırıp bulduğum bilgileri ve tuttuğum notları kenarda köşe de kaybetmemek ve bunları internet ortamında paylaşmak.Kendimi web ve mobil alanda geliştirmekteyim.</p> <p>Herkese Merhaba, Ben Vural Üşenç,Bilecik Şeyh Edebali Bilgisayar Mühendisliği 3.sınıf ögrencisiyim.Bu blogu yazmaktaki amacım araştırıp bulduğum bilgileri ve tuttuğum notları kenarda köşe de kaybetmemek ve bunları internet ortamında paylaşmak.Kendimi web ve mobil alanda geliştirmekteyim.</p> <p>Herkese Merhaba, Ben Vural Üşenç,Bilecik Şeyh Edebali Bilgisayar Mühendisliği 3.sınıf ögrencisiyim.Bu blogu yazmaktaki amacım araştırıp bulduğum bilgileri ve tuttuğum notları kenarda köşe de kaybetmemek ve bunları internet ortamında paylaşmak.Kendimi web ve mobil alanda geliştirmekteyim.</p> <p>Herkese Merhaba, Ben Vural Üşenç,Bilecik Şeyh Edebali Bilgisayar Mühendisliği 3.sınıf ögrencisiyim.Bu blogu yazmaktaki amacım araştırıp bulduğum bilgileri ve tuttuğum notları kenarda köşe de kaybetmemek ve bunları internet ortamında paylaşmak.Kendimi web ve mobil alanda geliştirmekteyim.</p> <p>Herkese Merhaba, Ben Vural Üşenç,Bilecik Şeyh Edebali Bilgisayar Mühendisliği 3.sınıf ögrencisiyim.Bu blogu yazmaktaki amacım araştırıp bulduğum bilgileri ve tuttuğum notları kenarda köşe de kaybetmemek ve bunları internet ortamında paylaşmak.Kendimi web ve mobil alanda geliştirmekteyim.</p> </div> <div id="iletisim"> <h1>İLETİŞİM</h1> <p>vuralusenc@gmail.com</p> <p>vuralusenc@gmail.com</p> <p>vuralusenc@gmail.com</p> <p>vuralusenc@gmail.com</p> <p>vuralusenc@gmail.com</p> <p>vuralusenc@gmail.com</p> <p>vuralusenc@gmail.com</p> <p>vuralusenc@gmail.com</p> <p>vuralusenc@gmail.com</p> <p>vuralusenc@gmail.com</p> <p>vuralusenc@gmail.com</p> <p>vuralusenc@gmail.com</p> <p>vuralusenc@gmail.com</p> <p>vuralusenc@gmail.com</p> <p>vuralusenc@gmail.com</p> <p>vuralusenc@gmail.com</p> <p>vuralusenc@gmail.com</p> <p>vuralusenc@gmail.com</p> <p>vuralusenc@gmail.com</p> <p>vuralusenc@gmail.com</p> <p>vuralusenc@gmail.com</p> <p>vuralusenc@gmail.com</p> </div> <!--#html --> </body> </html> |
yazıların tekrar tekrar yazılması sayfa geçişlerinin daha net görülebilmesi için daha sonra ufak bir css ile yazıları düzenleyelim.
<!-- style --> <style type="text/css"> * { margin:0; border:0; padding:0; text-decoration:none; } /* menü */ .menu { position:fixed; top:0; background:#EEE; width:100%; height:40px; text-align:center; border-bottom:1px solid red; } .menu a { color:#000; line-height:40px; margin-right:30px; padding: 2px; } h1 { text-align:center; padding-top:45px; } #anasayfa{ width:940px; margin:60px auto; background:lightyellow; } #hakkimda { width:940px; margin:60px auto; background:lightgreen } #iletisim { width:940px; margin:60px auto; background:lightblue } </style> <!--#style --> |
Jquery kodlarında geçtiğimizde ise scrollTop ve animate methodlarını kullanıyoruz animate methodu 2 parametre alır ilk parametre hareket yönünü ikinci parametre ise kaç milisaniye cinsinden değer alır
<!-- js --> <script type="text/javascript"> $(function() { $('.menu a').bind('click',function(event){ var link = $(this); $('html, body').stop().animate({ scrollTop: $(link.attr('href')).offset().top }, 1500); event.preventDefault(); }); });</script> <!--#js --> |
Herkeze İyi Çalışmalar
jQuery Gizleme (hide) Metodu
Merhaba Arkadaşlar,
jQuery’de gizleme metodundan bahsedeceğiz.Öncelikle jQuery Kütüphanemizi buradan indirelim. Daha sonra jQueryde nesne secme olayına geçelim.
$("p") //paragraf nesnesi seçme |
$("div.usenc") //div nesnesi seçme |
örnek kullanım
<title>Insert title here</title> </head> <body> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script> $(document).ready(function(){ $(".vrl").click(function(){ $(this).hide(); }); }); </script> </head> <div class="vrl">vural</div> </body> |
jQuery .focusin() ve .focusout() Metodu
Merhaba Arkadaşlar,
Bu yazıda jQuery ile focusin ve focusout metodları nasıl kullanılır buna bakacağız.Öncelikle Jquery Kütüphanemizi buradan indirelim ve sayfamıza dahil edelim.
<script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script> |
daha sonra bir input text oluşturalım ve Jquery focusin metodumuzu yazalım.
<script type="text/javascript"> $(function(){ $(":text").focusin(function(){ $(this).css('background-color','#dfdbdb'); }); }); </script> |
aynı şekilde focusout metodunuda kullanabiliriz.
<script type="text/javascript"> $(function(){ $(":text").focusout(function(){ $(this).css('background-color','#dfdbdb'); }); }); </script> |
Herkeze iyi çalismalar