Basit jQuery Uygulamaları Yazıyoruz : Yukarı Çık / Aşşağı İn Uygulaması
Merhaba Arkadaşlar ,
Eğitim serimizin sırada ki makalesi olan ” Yukarı Çık / Aşşağı İn Uygulaması ” için bugün de bir uygulama eşliğinde makalemizi yazacağız. Gayet basit ve içeriğinin ne anlama geleceği hemen herkes tarafından anlaşılabilecek olan bu uygulama da sitelerde bol bol gördüğümüz ” Yukarı Çık ” butonunun yanı sıra uzun sayfaların bulunduğu sitelerde de karşımıza çıkan ” Aşşağı İn ” butonunun da işlevlerini hep birlikte kodlayarak göreceğiz.
Yukarı Çık butonu için sayfanın sağında görünecek olan scroll ‘ un en üst noktadan 200px gibi bir boşluk bırakacak şekilde aşşağı inmesini bekleyeceğiz. Aşşağı İn butonu için ise herhangi bir şey beklemeden en alt noktaya denk gelmediği sürece aktif halde olmasını sağlayacağız. Uygulamamıza başlayalım…
Bir klasör oluşturalım ve içerisine ” index.html ” isimli bir sayfa yaratalım. Daha sonra son sürüm jQuery kütüphanesini indirmek için ” www.jquery.com ” adresine gidelim ve anasayfa da karşımıza çıkacak olan büyük ” Download ” butonuna tıklıyoruz. Açılan sayfa da ki linklerden son sürüm jQuery için hazırlanmış olanına tıklıyoruz ve bizi yönlendireceği pencereyi uygulama için oluşturduğumuz klasör içerisine kaydediyoruz.
Tüm indirme ve yeni bir nesne yaratma işlemlerimiz bittiğine göre artık kodlarımızı yazmaya başlayabiliriz. İlk olarak HTML sayfamızı açıyoruz ve her HTML tabanlı sayfamızda yazdığımız kodlarımız ile birlikte jQuery kütüphanemizi de sayfamıza dahil ediyoruz. İlk kod görünümümüz şu şekilde olacaktır :
<html>
<head>
<title>BilgiSayaci.Org - jQuery Uygulaması</title>
<script src="jquery-1.9.1.min.js"></script>
</head>
<body>
</body>
</html>
Şimdi yapacağımız işlem sayfamızda scroll çıkmasını sağlayacak kadar çok veri olmasını sağlamak olacaktır. 15.4′ lik bir ekrandan yazan ben bu ekrana göre veri girişi yaparken sizlerde kendi ekran büyüklüğünüze göre bu işlemi uyarlayın 🙂 . Alt alta yazılmış ” BilgiSayaci.Org ” yazıları ile işlemimizi gerçekleştiriyoruz. Kod görünümü şu şekilde olacaktır :
<html>
<head>
<title>BilgiSayaci.Org - jQuery Uygulaması</title>
<script src="jquery-1.9.1.min.js"></script>
</head>
<body>
BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />
</body>
</html>
Bunu da yaptığımıza göre artık makalemizin ana konusu için elementlerimizi oluşturabiliriz. Yukarı çık ve aşşağı in için birer adet span oluşturuyoruz ve CSS lerini yazarak ikisini de sayfa içerisinde ekranın sağında olmak şartıyla istediğimiz yerlere konumlandırıyoruz. İlk açılışta sayfa en üstten itibaren görüntüleneceği için Yukarı Çık butonu için de ” display : none ” değeri ile görünmez hale getiriyoruz. CSS ‘ler ile konumlandırmaların yapıldığı son html kod görünümümüz şu şekilde olacaktır :
<html>
<head>
<title>BilgiSayaci.Org - jQuery Uygulaması</title>
<script src="jquery-1.9.1.min.js"></script>
<style>
.yukari_cik{position: fixed;top: 20px;right: 20px;cursor: pointer; display: none;}
.assagi_in{position: fixed;bottom: 20px;right: 20px;cursor: pointer;}
</style>
</head>
<body>
BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />
<span class="yukari_cik">Yukarı Çık</span>
<span class="assagi_in">Aşşağı İn</span>
</body>
</html>
Son olarak ta jQuery kodlarımızı yazarak makalemizin sonuna geliyoruz. jQuery kodlarını elimden geldiğince açıklama satırları ile açıklıyorum. Uygulamamızın son ve çalışır hali de şu şekilde olacaktır :
<html>
<head>
<title>BilgiSayaci.Org - jQuery Uygulaması</title>
<script src="jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function(){
//Pencere içinde yapılacak olan Scroll un sonucunda gerçekleşecek olanlar
$(window).scroll(function() {
//enust isimli bir değişken yaratarak bunun scroll un en üstteki haline karşılık gelen bir değişken olduğunu tanımlıyoruz.
var enust = $(document).scrollTop();
// Bir if değeri döndürerek üstten 200px lik bir scroll hareketinde Yukarı Çık yazısının aktif olmasını sağlıyoruz
if (enust > 200){$(".yukari_cik").fadeIn(1000);}
//Eğer 200px lik bir scroll yapılmadıysa Yukarı Çık en başta olduğu gibi kapalı kalıyor
else{$(".yukari_cik").fadeOut(1000);}
});
// Yukarı Çık butonuna tıklandığında scrollTop değeri ile sayfanın en üst kısmı ile olacak boşluğun 0px olmasını sağlıyoruz.
$(".yukari_cik").click(function(){
$("html,body").stop().animate({"scrollTop":"0"});
});
// Aşşağı İn butonuna tıklandığında scrollTop değeri ile sayfanın en üst kısmı ile olacak boşluğun sayfanın yüksekliği kadar olmasını sağlıyoruz.
$(".assagi_in").click(function(){
$("html,body").stop().animate({"scrollTop":$(document).height()});
});
});
</script>
<style>
.yukari_cik{position: fixed;top: 20px;right: 20px;cursor: pointer; display: none;}
.assagi_in{position: fixed;bottom: 20px;right: 20px;cursor: pointer;}
</style>
</head>
<body>
BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />BilgiSayaci.Org<br />
<span class="yukari_cik">Yukarı Çık</span>
<span class="assagi_in">Aşşağı İn</span>
</body>
</html>
Not : Bu ders içeriğinde kullanılan dosyaları İndir Sayfası 36 No ‘lu Maddeden İndirebilirsiniz..
Tüm Yorumlar