Web dünyasına Javascript’in gücünü gösteren kütüphane olan JQuery, artık geliştiricilerin gözdesi. JQuery sayesinde neler yapılmıyor ki. Özellikle sosyal paylaşım sitelerinde sıklıkla göze çarpan bildirim panelleri benim de dikkatimi çekmedi diyemem. Hemen klavyenin başına geçerek bir iki deneme yapmaya karar verdim ve güzel bir sonuç çıktı ortaya. Dilerseniz beraber inceleyelim.
Web sayfalarında sağ veya sol panellerde, son bildirimleri kayan yazılar şeklinde efektlendiren bir demo yapmaya çalışalım.
Bu işlem için gereksinimimiz bir jquery kütüphanesi referansı ve kodlama için bir ortam. Ben bu uygulama için notepad aracını seçtim. Notepad içerisine html döküman oluşturacak kodları girerek işe başladım ve ardından jquery kodlarını akledim.
<script> $(function () { setInterval("updateShouts()", 3000); }); function updateShouts() { $('#foo').prepend('<div style="display: none;">Yeni içerik.'+Math.random()+'<p><a href="#">İçerik linki</a></p></div>'); $('#foo').find(".newContent:first").slideDown(); $('#foo .newContent:gt(5)').remove(); } </script> <div id="foo"></div>
JQuery ile bir timer nesnesi kullanılarak, 3 saniyede bir yeni içerik oluşturularak, panel içerisine eklenmektedir.
Buraya kadar olan işlemler, html bilgisi ve javascript bilgisi ile halledilebilecek şeklide gelişmiştir. Veriler elle üretilmiş ve animasyona sunulmuştur. Tabi gerçek hayat hikayelerinde, yukarıda tanımlanan updateShouts() metodu bir action metoda giderek veri alacak şekilde düzenlenip canlı bir uygulama da hazırlanabilir. Hatta action metod, outputcache mekanizmasıyla desteklenip, gereksiz yere veritabınına gitmeden, direk cache verilerine erişilebilir. Bu da hızda ciddi bir artış sağlar.
Sonuç olarak yukarıdaki şekildeki gibi bir panel elde edilebilmektedir.
Jquery slide bildirim paneli çalışan uygulamasına buradan ulaşabilirsiniz.