JQuery ile Basit bir Yayın Akışı (Feed Stream) Görünümü

Bu yazımızda JQuery kullanarak basit bir yayın akışı görünümünün (örn. Twitter'daki tweet akışı) kolaylıkla nasıl oluşturulabileceğini göreceğiz. Geliştireceğimiz uygulama bir metin kutusundan, iki düğmeden (Yayınla, Temizle) ve eklediğimiz yayınları gösteren bir listesinden oluşacak. Ayrıca yayının listeye eklenmesi sırasında hoş bir görsellik elde edilmesi için JQuery animasyonlarından yararlanılacaktır. Uygulamanın basit tutulması amacıyla sunucu taraflı bir gerçekleştirimden bahsedilemeyecektir.

Şimdi zaman kaybetmeden uygulamamızı geliştirmeye başlayalım. İlk olarak aşağıdaki basit HTML arayüzünü oluşturmalıyız. Daha önce de söz ettiğimiz gibi ekranımız kullanıcı iletisinin yazıldığı bir metin kutusundan (gonderiMetni), yazılan metni yayınlamayı sağlayan bir düğmeden (yayinla), listeye eklenen gönderileri silen bir başka düğmeden (temizle) ve yayınlanan gönderileri listeleyen bir HTML div alanından (gonderiler) oluşmaktadır. (Not: Karmaşıklığı önlemek amacıyla stil özellikleri HTML kodunda gösterilmemiştir.)

<div>
<textarea id="gonderiMetni"></textarea>
<input id="yayinla" type="button" value="Yayınla" />
<input id="temizle" type="button" value="Temizle" />
<div id="gonderiler"></div>
</div>

İkinci aşamada yayinla ve temizle düğmelerinin işlevlerini yerine getiren JavaScript fonksiyonlarını gerçekleştireceğiz. İlk olarak aşağıdaki yayınlama fonksiyonu inceleyelim. Fonksiyonun ilk satırında kullanıcı tarafından metin kutusuna girilen ileti metni alınmıştır. Bu amaçla JQuery'nin id seçicisi ("#elementId") ve seçilen ögenin degerini döndüren val() fonksiyonu kullanılmıştır. 2. satırda ise gönderilerin listeleneceği div ögesi elde edilmiştir. 3. satır gönderi metninin bir HTML div ögesi içine alındığı bölümdür. Göründüğü gibi JQuery $() fonksiyonu ile çok kolay bir şekilde HTML oluşturulabilmektedir. 4 ve 5. satırlarda oluşturduğumuz div ögesine css() fonksiyonu ile stil değerleri eklenmiştir. 6. satırda prependTo fonksiyonu kullanılarak gönderi metnini tutan div ögesi gönderi listesine eklenmiştir. Buraya kadar olan kısımda girilen gönderi başarılı bir şekilde listeye eklenebilmektedir. Ancak daha hoş bir görünüm elde etmek amacıyla 7 ve 8. satırlarda listeye ekleme işlemi bir animasyon ile zenginleştirilmiştir. hide() fonksiyonu ile div öncelikle görünmez hale getirilmiş, daha sonra da animation() fonksiyonu ile 400 mili-saniye içerisinde görünür hale getirilmiştir.

function yayinla() { 

1. var gonderiMetni = $("#gonderiMetni").val();
2. var gonderiler = $("#gonderiler");
3. $("<div>" + gonderiMetni + "</div>")
4. .css('border-bottom','1px solid #909090')
5. .css('margin-bottom', '5px').css('padding', '4px')
6. .prependTo(gonderiler)
7. .hide()
8. .animate({'opacity': 'toggle', 'height':'toggle'}, 400);  

}

Aşağıdaki temizle() fonksiyonu ile gönderi listesi ve metin kutusu temizlenmiştir.

function temizle() {
$("#gonderiler").empty();
$("#gonderiMetni").val(null);
}

Yapmamız gereken son işlem yukarıdaki fonksiyonları ilgili düğmelerin tıklanma olaylarına (click event) bağlamaktır. Aşağıdaki kod parçası ile bu işlem HTML dokümanı hazır olduğunda (document.ready()) yapılmaktadır.

$(function() {
$("#yayinla").click(yayinla);
$("#temizle").click(temizle);
});

Uygulamayı buradan deneyebilir ve ilgili HTML belgesine buradan ulaşabilirsiniz. Kolay gelsin :)