Bu örneğimizde açılır-kapanır div oluşturacağız. Bunun için JavaScript’in kütüphanesi olan JQuery’i kullanacağız.
Örneğe başlamadan önce JQuery’i indirmemiz gerekiyor. https://jquery.com/
HTML: Öncelikle ‘ustPanel’ adında bir div oluşturuyorum. Bu divimiz aşağı yukarı hareket edecek olan divimiz. İçerisine şimdilik örnek bir yazı yazıyorum. Daha sonra açılıp kapanmasını sağlamak için içerisine bir div ekliyoruz. Bu div bir buton olarak da görülebilir.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>JQuery Animate Olay Örneği</title> <link href="css/style.css" rel="stylesheet"> </head> <body> <div id="ustPanel"> <p>Panel Yazıları</p> <div id="acKapa">AÇ</div> </div> <p>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur. </p> <a href="http://js/jquery-1.11.1.min.js">http://js/jquery-1.11.1.min.js</a> <a href="http://js/javascript.js">http://js/javascript.js</a> </body> </html> </div> |
Divin dışarısına örnek yazı yazıyoruz. Şimdilik alt alta duracaklar. ustPanel divi şuan tamamen sayfaya bağlı o yüzden örnek yazımızı aşağı atıyor. Bunu önlemek için Css ile divi sayfadan ayıracağız.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
html,body{ margin: 0; padding: 0; } #ustPanel{ position: fixed; width: 100%; height: 200px; background: #0d1c1c; color: #FFF; top: -195px; } #acKapa{ position: absolute; right: 20px; bottom: -30px; width: 60px; height: 30px; background: #0d1c1c; text-align: center; } |
CSS: İlk olarak html ve body de olan boşlukları resetliyoruz. ustPanel divini ‘position: fixed’ ile sabitliyoruz. Böylece altındaki yazımız yukarı kayıyor. Genel olarak ayarladıktan sonra ‘top:-195px’ yaparak sayfanın dışına kaydırıyoruz.
Daha sonra buton görevi gören divimizi sayfadan ayırıyoruz. ustPanel divi fixed olduğu için bu divimiz ona göre pozisyon olacak. Yerini ayarladıktan sonra genel hatlarını oluşturuyoruz.
|
1 2 3 4 5 6 7 8 9 |
$(document).ready(function(){ $("#acKapa").on("click",function(){ }); }); |
JQuery: Jquery kodlarımızı kurucu methodun içerisine yazıyoruz. Buton görevi gören divimize tıklama olayını atıyoruz.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
$(document).ready(function(){ $("#acKapa").on("click",function(){ var konum=$("#ustPanel").css("top"); if(konum=="0px") { $(this).html("AÇ"); $("#ustPanel").animate({top:"-195px"},500); } else { $(this).html("KAPAT"); $("#ustPanel").animate({top:"0px"},500); } }); }); |
Daha sonra tıklama olayında çalışacak kodları yazıyoruz. Konum diye bir değişken tanımlayarak ‘ustPanel’ in top değerini içerisine atıyoruz.
Buradan sonra koşullarımızı yazıyoruz. Konum değişkeni 0(sıfır)’a eşit olduğunda (Yani açıkken) taklandığında div yukarı kaydırılacak, top değeri -195px olarak değişecek ve divin içerisindeki ‘AÇ’ yazısı ‘KAPAT’ yazısına dönüşecek. Else kısmında ise tam tersi olacak. Yani tıklandığında divin top değeri 0(sıfır) olacak.
