Bu dersimizde jQuery'de olaylar (events) ve efektler (effects) konusuna değineceğiz.
Bildiğimiz gibi herhangi bir nesneyi etkinleştirdiğimiz zaman gerçekleşen oluşuma olay diyoruz. Bir önceki dersimizde bol bol uyguladığımız için aynı örneği göstereceğim.
<style>
.deneme7 {
width: 100px;
height: 100px;
background: mediumslateblue;
cursor: pointer;
}
</style>
<div class="deneme7"></div>
<script>
$('.deneme7').click(function() {
$(this).css('border-radius','50%');
});
</script>
deneme7 adlı div'imize tıkladığımızda (click olduğunda) kenarlarını %50 oranında yumuşatacağız.
Çıktımız ise bu şekilde olacak.
Olay yönelimli fonksiyonları kullanırken her zaman anonim fonksiyonlar ile kullanmalıyız. Yani
// Hatalı kullanım
$('seçici').click().css('özellik','değer');
// Doğru kullanım
$('seçici').click(function() {
$(this).css('özellik','değer');
});
şeklinde kullanmalıyız.
Bir nesnenin değişimi sırasında gerçekleşecek olayları yönetir. Örneğin; açılır menüden seçim yapmak gibi.
<style>
.mavi {
width: 200px;
padding: 10px;
height: 200px;
line-height: 160px;
text-align: center;
color: white;
background: royalblue;
cursor: pointer;
display: none;
margin-top: 10px;
}
.turkuaz {
width: 200px;
padding: 10px;
height: 200px;
line-height: 160px;
text-align: center;
color: white;
background: teal;
cursor: pointer;
margin-top: 10px;
}
.secim {
width: 200px;
}
</style>
<select class="secim">
<option value="turkuaz">Turkuaz</option>
<option value="mavi">Mavi</option>
</select>
<div class="mavi">
<p>Bu mavi bir div'dir.</p>
</div>
<div class="turkuaz">
<p>Bu turkuaz bir div.</p>
</div>
<script>
$('.secim').change(function () {
if ($(this).val() == "mavi") {
$('.mavi').show();
$('.turkuaz').hide();
} else if ($(this).val() == "turkuaz") {
$('.mavi').hide();
$('.turkuaz').show();
}
});
</script>
Bir önceki dersimizde de anlattığım gibi secim sınıfına sahip bir açılır menümüz var ve bu menüden yaptığımız seçimlere göre mavi ya da turkuaz div'lerini gösterip gizliyoruz.
Bu mavi bir div'dir.
Bu turkuaz bir div.
Çıktımız ise bu şekilde olacaktır.
Elementler için olaya bir denetimci (handler) ekler. Çeşitli şekillerde oldukça yaygın kullanılır.
<style>
.uyari-penceresi-dugmesi {
width: 180px;
height: 40px;
line-height: 40px;
text-align: center;
border-radius: 12px;
background: royalblue;
cursor: pointer;
color: white;
}
</style>
<div class="uyari-penceresi-dugmesi">
<span>Uyarı penceresi aç</span>
</div>
<script>
$('.uyari-penceresi-dugmesi').bind("click", function() {
alert("Bu bir uyarı denemesidir!");
});
</script>
Uyarı penceresi adında bir div'imiz olsun ve bu div'e tıklanınca bir uyarı penceresi açılsın.
Uyarı penceresi aç
Çıktımız ise bu şekilde olacaktır.
<script>
$('.uyari-penceresi-dugmesi').bind("click", function() {
alert("Bu bir uyarı denemesidir!");
});
//sadece .click( ) olayı ile
$('.uyari-penceresi-dugmesi').click(function() {
alert("Bu bir uyarı denemesidir!");
});
</script>
Bu işlemi sadece .click( ) fonksiyonu kullanarak da yapabilirdik.
HTML üzerinde manipülasyonlar yapmak için kullanılır.
<style>
.sergi {
width: 800px;
position: relative;
margin: auto;
}
.sergi h3 {
text-align: center !important;
color: royalblue !important;
font-size: 24px !important;
}
.galaxyS3Mini {
width: 320px;
height: 480px;
position: relative;
margin: 15px auto;
box-shadow: 0 0 16px royalblue;
}
.iPad {
width: 768px;
height: 1024px;
position: relative;
margin: 15px auto;
box-shadow: 0 0 16px royalblue;
}
</style>
<div class="sergi">
<h3>Samsung Galaxy S3 Mini Görünümü</h3>
<div class="galaxyS3Mini"></div>
<h3>Apple iPad Görünümü</h3>
<div class="iPad"></div>
</div>
<script>
$('.galaxyS3Mini').html('<object data="http://zinzinzibidi.com/res" width="320" height="480">');
$('.iPad').html('<object data="http://zinzinzibidi.com/res" width="768" height="1024">');
</script>
sergi adında bir div'imiz var bu div'in içinde galaxyS3Mini ve iPad olmak üzere iki ayrı div var. Bu iki div'in ebatları ise cihazların görüntü çözünürlükleri kadar. .html( ) fonksiyonu ile bu iki div'in içinde canlı olarak bir siteyi sergileyebilirim. Böylece farklı platformlarda sitenin tasarımını inceleyebilirim.
Samsung Galaxy S3 Mini Görünümü
Apple iPad Görünümü
Ekran çıktımız ise bu şekilde olacaktır.
Belki de jQuery'nin en sevilen özelliklerinden biridir. Seçili elementi saklayıp - göstermek, gösterip - saklamak için kullanılır.
<style>
.goster-gizle {
width: 180px;
height: 40px;
line-height: 40px;
text-align: center;
border-radius: 12px;
background: royalblue;
cursor: pointer;
color: white;
}
.spoiler {
width: 180px;
height: 200px;
margin-top: 10px;
background: teal;
display: none;
}
</style>
<div class="goster-gizle">
<span>Göster - Gizle</span>
</div>
<div class="spoiler"></div>
<script>
$(".goster-sakla").click(function () {
$('.spoiler').toggle("slow");
});
</script>
Göster - Sakla adlı bir düğmemiz var ve bu düğmeye bastıkça spoiler div'ini gösterip saklayacağız. Buradaki "slow" ifadesi animasyonun yavaş gerçekleşeceğini belirtiyor.
Göster - Sakla
.slideDown( ) bir nesneyi aşağı doğru görünür kılar. .slideUp( ) ise bir nesneyi yukarı doğru saklar. İkisinin toggle (aç - kapa, kapa - aç) mantığı ile birlikte kullanımı ise .slideToggle( ) fonksiyonudur.
..slideToggle( ), .toggle( ) ile aynı işlevi yerine getir. Sadece animasyonu farklıdır. Bir önceki örneğimizde .toggle( ) yerine .slideToggle( ) yazıldığında aşağıdaki gibi bir efekt elde ederiz.
Göster - Sakla
.scroll( ) sayfada aşağı inildikçe tetiklenecek olayları gerçekleştirir. .fadeIn( ) ve .fadeOut( ) nesneleri göstermek ve gizlemek için kullanılır. .show( ) ve .hide( )'a benzer; fakat efektleri farklıdır. .animate( ) ise jQuery ile animasyonlar oluşturmak için kullanılır.
<style>
.box,
.box2 {
width: 435px;
padding: 10px;
height: 600px;
overflow: auto;
position: relative;
float: left;
background: skyblue;
}
.bilgilendirme,
.bilgilendirme2 {
width: 120px;
height: 50px;
line-height: 50px;
text-align: center;
color: white;
font-size: 14px;
position: absolute;
bottom: 20px;
right: 480px;
display: none;
background: indigo;
cursor: pointer;
z-index: 9999;
}
.bilgilendirme2 {
width: 240px;
height: 80px;
line-height: 40px;
bottom: 20px;
right: 45px;
background-color: teal;
}
</style>
<div class="bilgilendirme">
<span>Yukarı Çık</span>
</div>
<div class="box">
<p>Lorem ipsum dolor sit amet...</p>
<p>...</p>
<p>Lorem ipsum dolor sit amet...</p>
</div>
<div class="bilgilendirme2">
<span>Bilgi kutusu<br />(Kapatmak için Tıkla)</span>
</div>
<div class="box2">
<p>Lorem ipsum dolor sit amet...</p>
<p>...</p>
<p>Lorem ipsum dolor sit amet...</p>
</div>
<script>
$('.box').scroll(function () {
if ($(this).scrollTop()) {
$('.bilgilendirme').fadeIn();
} else {
$('.bilgilendirme').fadeOut();
}
});
$('.bilgilendirme').click(function () {
$('.box').animate({ scrollTop: 0 }, 1000);
});
$('.box2').scroll(function () {
if ($(this).scrollTop()) {
$('.bilgilendirme2').fadeIn();
} else {
$('.bilgilendirme2').fadeOut();
}
});
$('.bilgilendirme2').click(function () {
$(this).css('visibility', 'hidden');
});
</script>
Şimdi bir önceki dersten sözüm olan "Başa Dön" düğmesini yapacağız. Yanında da "Bilgilendirme Kutusu" adlı bir özellik uygulayacağız.
box kaydırma çubuğu aşağı indiğinde bilgilendirme adlı "Başa Dön" div'i görünür olacak. Tıklandığında ise sayfanın başına dönülecek.
box2 kaydırma çubuğu aşağı indiğinde ise bilgilendirme2 adlı "Bilgi Kutusu" görünür olacak. Tıklandığında ise visibility'sini hidden'a çekeceğiz.
Kodlar gördüğünüz şekilde. animate'teki 1000 sayısı animasyonun süresini belirtmektedir. 1000 milisaniyeye eşittir. 1000 milisaniye de 1 saniyeye.
Yukarı Çık
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ante sapien, imperdiet sit amet fermentum eget, bibendum iaculis leo. Mauris nisi libero, sodales at lacus sit amet, viverra euismod turpis. Duis vitae ipsum vitae libero sodales bibendum vel vel metus. Pellentesque sit amet nisl quam. Integer sem sem, sollicitudin eget fringilla at, aliquet eu lectus. Nullam nec metus erat. Cras eget dui congue, tincidunt justo ut, adipiscing odio. Cras in leo viverra, tincidunt ipsum eu, venenatis leo. Ut id tempor urna, vitae fringilla lectus. Sed dictum sed orci a pellentesque. Mauris vel sodales felis. Duis ornare orci ac aliquet tristique.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc convallis euismod aliquet. Integer mollis et velit eu tincidunt. Proin congue, nunc ac vestibulum porttitor, nibh eros lobortis dolor, bibendum rhoncus ligula tellus at lorem. Nam nec mollis neque, non luctus augue. Vestibulum fermentum sapien at felis laoreet, in tempor lorem egestas. Nam sem ligula, interdum non odio non, imperdiet tristique diam. Cras consequat lorem a lobortis condimentum. Fusce ut nisl vitae elit rutrum consectetur. Ut sodales ultrices est. Cras eget dolor in nisl consequat aliquet eu vel mauris. Nunc ultricies lacus in elementum tempor. Integer elementum quam ut faucibus varius. Mauris orci urna, placerat in ultrices non, facilisis sed neque. Sed ultrices nunc in lacus sollicitudin tristique. In consectetur adipiscing justo, id condimentum tortor.
Donec hendrerit tincidunt felis, iaculis tempor sem convallis ac. Donec sagittis imperdiet lorem, in auctor libero gravida non. Aliquam velit leo, varius lacinia malesuada vel, tincidunt vel sem. Aliquam nulla leo, congue eu pretium porta, accumsan a velit. Cras vulputate suscipit risus at dignissim. Aenean et placerat sem, ac condimentum orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris turpis nibh, viverra non nibh ac, venenatis egestas turpis. Donec lectus justo, ullamcorper ac mollis at, dignissim sed est. Pellentesque sollicitudin consequat dui, tempus cursus urna commodo non. Vestibulum lacinia ligula quam, sit amet eleifend purus consequat sit amet. Etiam blandit porttitor erat, eu viverra diam pretium faucibus. Integer elementum interdum aliquet. Maecenas faucibus ante eget neque mollis, at tempor massa suscipit. Quisque accumsan eu nunc at imperdiet.
Aliquam nec feugiat est. Proin in pharetra leo. Praesent odio massa, aliquam et mattis non, rhoncus quis libero. Nunc a justo ligula. Fusce eget viverra purus. Suspendisse hendrerit metus quis nibh accumsan pellentesque. Fusce porta nibh id leo fringilla, at fringilla libero mattis. Aenean sed arcu sed enim pulvinar gravida. Donec imperdiet tortor in gravida malesuada. Etiam blandit libero risus. Quisque vel tellus nec dolor mollis fringilla. Phasellus rhoncus, leo non pharetra interdum, elit dui porttitor mi, eu convallis arcu lacus id sapien. Morbi aliquam imperdiet metus rhoncus tincidunt.
Sed consequat tortor purus, eget mollis nisl consectetur ac. Nunc ornare accumsan arcu, non rhoncus ligula imperdiet eget. Duis fringilla rutrum enim, sed fringilla odio elementum vitae. Quisque porta lacinia lorem quis euismod. Integer in felis lacus. Sed tristique augue faucibus felis aliquam lacinia. Aenean euismod malesuada neque, semper aliquet lectus ullamcorper at. Nulla justo libero, gravida non consectetur ut, mattis ut lectus. Mauris eu feugiat dolor, non commodo sapien. Integer lacus ipsum, ultricies quis porttitor ut, feugiat a est. Fusce fermentum lacus ut risus lobortis pharetra. Pellentesque porta tortor eu elit lacinia ultricies. Curabitur et massa ac libero euismod auctor at id felis.
Pellentesque tincidunt gravida egestas. Vestibulum in sagittis neque. Nunc nec venenatis nunc. Curabitur posuere massa sit amet massa dignissim pretium. Maecenas mattis nulla ut tortor accumsan, ac ullamcorper est ornare. Phasellus placerat nibh ante, non iaculis metus pulvinar sed. Pellentesque iaculis mauris vehicula ipsum luctus ornare. Morbi in sollicitudin ante. Curabitur semper fermentum elit, et rutrum elit tempus id.
Duis at ipsum dolor. Nunc urna metus, aliquam quis hendrerit quis, cursus eu lectus. Donec quis iaculis tellus, in malesuada neque. Donec tempor luctus sagittis. Nam suscipit vulputate magna in ullamcorper. Mauris at odio non magna convallis condimentum. Cras nisl mi, accumsan quis pharetra sed, posuere id libero.
Bilgi kutusu
(Kapatmak için Tıkla)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ante sapien, imperdiet sit amet fermentum eget, bibendum iaculis leo. Mauris nisi libero, sodales at lacus sit amet, viverra euismod turpis. Duis vitae ipsum vitae libero sodales bibendum vel vel metus. Pellentesque sit amet nisl quam. Integer sem sem, sollicitudin eget fringilla at, aliquet eu lectus. Nullam nec metus erat. Cras eget dui congue, tincidunt justo ut, adipiscing odio. Cras in leo viverra, tincidunt ipsum eu, venenatis leo. Ut id tempor urna, vitae fringilla lectus. Sed dictum sed orci a pellentesque. Mauris vel sodales felis. Duis ornare orci ac aliquet tristique.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc convallis euismod aliquet. Integer mollis et velit eu tincidunt. Proin congue, nunc ac vestibulum porttitor, nibh eros lobortis dolor, bibendum rhoncus ligula tellus at lorem. Nam nec mollis neque, non luctus augue. Vestibulum fermentum sapien at felis laoreet, in tempor lorem egestas. Nam sem ligula, interdum non odio non, imperdiet tristique diam. Cras consequat lorem a lobortis condimentum. Fusce ut nisl vitae elit rutrum consectetur. Ut sodales ultrices est. Cras eget dolor in nisl consequat aliquet eu vel mauris. Nunc ultricies lacus in elementum tempor. Integer elementum quam ut faucibus varius. Mauris orci urna, placerat in ultrices non, facilisis sed neque. Sed ultrices nunc in lacus sollicitudin tristique. In consectetur adipiscing justo, id condimentum tortor.
Donec hendrerit tincidunt felis, iaculis tempor sem convallis ac. Donec sagittis imperdiet lorem, in auctor libero gravida non. Aliquam velit leo, varius lacinia malesuada vel, tincidunt vel sem. Aliquam nulla leo, congue eu pretium porta, accumsan a velit. Cras vulputate suscipit risus at dignissim. Aenean et placerat sem, ac condimentum orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris turpis nibh, viverra non nibh ac, venenatis egestas turpis. Donec lectus justo, ullamcorper ac mollis at, dignissim sed est. Pellentesque sollicitudin consequat dui, tempus cursus urna commodo non. Vestibulum lacinia ligula quam, sit amet eleifend purus consequat sit amet. Etiam blandit porttitor erat, eu viverra diam pretium faucibus. Integer elementum interdum aliquet. Maecenas faucibus ante eget neque mollis, at tempor massa suscipit. Quisque accumsan eu nunc at imperdiet.
Aliquam nec feugiat est. Proin in pharetra leo. Praesent odio massa, aliquam et mattis non, rhoncus quis libero. Nunc a justo ligula. Fusce eget viverra purus. Suspendisse hendrerit metus quis nibh accumsan pellentesque. Fusce porta nibh id leo fringilla, at fringilla libero mattis. Aenean sed arcu sed enim pulvinar gravida. Donec imperdiet tortor in gravida malesuada. Etiam blandit libero risus. Quisque vel tellus nec dolor mollis fringilla. Phasellus rhoncus, leo non pharetra interdum, elit dui porttitor mi, eu convallis arcu lacus id sapien. Morbi aliquam imperdiet metus rhoncus tincidunt.
Sed consequat tortor purus, eget mollis nisl consectetur ac. Nunc ornare accumsan arcu, non rhoncus ligula imperdiet eget. Duis fringilla rutrum enim, sed fringilla odio elementum vitae. Quisque porta lacinia lorem quis euismod. Integer in felis lacus. Sed tristique augue faucibus felis aliquam lacinia. Aenean euismod malesuada neque, semper aliquet lectus ullamcorper at. Nulla justo libero, gravida non consectetur ut, mattis ut lectus. Mauris eu feugiat dolor, non commodo sapien. Integer lacus ipsum, ultricies quis porttitor ut, feugiat a est. Fusce fermentum lacus ut risus lobortis pharetra. Pellentesque porta tortor eu elit lacinia ultricies. Curabitur et massa ac libero euismod auctor at id felis.
Pellentesque tincidunt gravida egestas. Vestibulum in sagittis neque. Nunc nec venenatis nunc. Curabitur posuere massa sit amet massa dignissim pretium. Maecenas mattis nulla ut tortor accumsan, ac ullamcorper est ornare. Phasellus placerat nibh ante, non iaculis metus pulvinar sed. Pellentesque iaculis mauris vehicula ipsum luctus ornare. Morbi in sollicitudin ante. Curabitur semper fermentum elit, et rutrum elit tempus id.
Duis at ipsum dolor. Nunc urna metus, aliquam quis hendrerit quis, cursus eu lectus. Donec quis iaculis tellus, in malesuada neque. Donec tempor luctus sagittis. Nam suscipit vulputate magna in ullamcorper. Mauris at odio non magna convallis condimentum. Cras nisl mi, accumsan quis pharetra sed, posuere id libero.
Çıktımız ise bu şekilde. Eğer bu "Başa Dön" ve "Bilgilendirme Kutusu" olaylarını kendi sitenizde kullanacaksanız lütfen bu kodlar yerine aşağıdaki kodları kullanınız.
<style>
#toTop {
width: 50px;
height: 50px;
line-height: 36px;
text-align: center;
font-size: 40px;
padding: 5px 3px;
background: rgba(0,0,0,.5);
color: rgba(255,255,255,.5);
position: fixed;
bottom: 10px;
right: 10px;
display: none;
cursor: pointer;
box-shadow: 0 0 1px black inset;
transition: all .3s ease-in-out;
}
#toTop:hover {
background: rgba(0,0,0,.84);
color: rgba(255,255,255,.84);
}
</style>
<div id='toTop'>
<span>↑</span>
</div>
<script>
$(window).scroll(function () {
if ($(this).scrollTop()) {
$('#toTop').fadeIn();
} else {
$('#toTop').fadeOut();
}
});
$("#toTop").click(function () {
$("html, body").animate({ scrollTop: 0 }, 1000);
});
</script>
Bu kodları kendi projenizde uygulayabilirsiniz. Çıktısı bu sitedeki gibi olacaktır.
Devam etmekte olan bir animasyonu durdurur.
<style>
.baslat,
.durdur,
.sifirla {
width: 90px;
height: 40px;
line-height: 40px;
text-align: center;
border-radius: 12px;
background: royalblue;
cursor: pointer;
color: white;
position: relative;
float: left;
margin-left: 10px;
}
.dolmus-container {
width: 205px;
height: 80px;
background-color: goldenrod;
position: relative;
clear: both;
margin-top: 20px;
top: 20px;
}
</style>
<div class="baslat">
<span>Başlat</span>
</div>
<div class="durdur">
<span>Durdur</span>
</div>
<div class="sifirla">
<span>Sıfırla</span>
</div>
<div class="dolmus-container"></div>
<script>
$(".baslat").click(function () {
$(".dolmus-container").animate({ left: "+=600px" }, 5000);
});
$(".durdur").click(function () {
$(".dolmus-container").stop();
});
</script>
Başlat, Durdur ve Sıfırla olmak üzere üç tane düğmemiz var. Başlat'a basınca dolmus-container adlı temsili dolmuşumuz 600px sola hareket edecek. Bu hareket esnasında Durdur tuşuna basarsanız .stop( ) fonksiyonu devreye girecek ve animasyon duraklayacak.
Aşağıda gördüğünüz animasyonun kodları tabiki şu an yazdıklarım ile aynı değil fakat temel anlamda işler bu şekilde yürüyor.
Başlat
Durdur
Sıfırla
Kadıköy - Bostancı
+
+
Gördüğünüz gibi Kadıköy - Bostancı hattımız bu şekilde çalışıyor. =)
Delay dilimizde erteleme anlamındadır. Bir fonksiyonun çalışmasını ertelemek için kullanılır. .fadeToggle( ) ise .fadeIn() ve .fadeOut( )'un toggle halidir.
<style>
.ertele {
width: 90px;
height: 40px;
line-height: 40px;
text-align: center;
border-radius: 12px;
background: royalblue;
cursor: pointer;
color: white;
margin-left: 10px;
}
.gecik-de-gel {
width: 200px;
height: 200px;
background: mediumpurple;
margin-top: 20px;
}
</style>
<div class="ertele">
<span>Ertele</span>
</div
<div class="gecik-de-gel"></div>
<script>
$('.ertele').click(function() {
$('.gecik-de-gel').delay(1400).fadeToggle(1000);
});
</script>
Ertele tuşuna bastığınızda gecik-de-gel div'imiz 1.4 saniye sonra kaybolacak ve tekrar basıldığında ise 1.4 saniye sonra görünür olacaktır.
Ertele
Bu şekilde kodlarımızı test edebilirsiniz.
Bu dersin videosunu 1080p HD kalitesinde izleyebilirsiniz.
Bu derslik bu kadar. Bir sonraki dersimizde jQuery UI kullanımı konusuna değineceğiz.