jQuery ile modern ve basit bildirimler oluşturun: jQuery Toastr

PhpStorm’umu açarak “Create New Project” deyip oluşturduğum her projeye daha en baştan eklediğim bazı kütüphanelerim, oyuncaklarım var. Toastr da bunlardan bir tanesi. Öyle ki arkasındaki gölgeyi kaldırıp, köşe yuvarlaklıklarını birkaç tık azalttığım özel bir CSS dosyasına dahi sahibim. Çok detaylı güncellemler çıkmadığı sürece her yerde aynı stil dosyasını kullanıyorum. Merak ettiğim şey ise bu kadar sevdiğim ve her yerde kullandığım bu güzide oyuncağa nasıl olup da bugüne kadar sitede yer vermemiş olduğum.

Ağalar, beyler ve hanımlar. Nedir bu Toastr diyecek olursanız, hemen her türlü projeniz için hata, uyarı, bilgi ve başarılı sonuç mesajlarınızı şakkadanak diye ekrana basabileceğiniz, JavaScript’in standart alert diyaloglarına alternatif, son derece kolay kullanılan bir bildirim eklentisi şeklinde özetleyebilirim. Gavurlar bu tür bildirimlere “Toastr notification” diyorlar. Buradaki toastr ifadesi bildiğimiz tosttan geliyor. Bizim kültürümüzde pek öyle yeri olmayan şu ekmek kızartma makinalarından esinlenerek, bu şekilde hitap etmeyi uygun bulmuşlar.

Eğer bu yazıyı bilgisayarınız veya cep telefonunuz aracılığıyla web sitesi üzerinden okuyorsanız, yani herhangi bir RSS reader veya posta kutusu üzerinde değilseniz, uygulamanın çalışan örneklerini aşağıda yer alan düğmeler aracılığıyla inceleyebilirsiniz:

Bilgi Başarılı Uyarı Hata

Ne kadar güzel, ne kadar şık değil mi? Alıştırma yapmak isteyen arkadaşlar tarayıcılarının geliştirici araçlarını açıp (DevTools), konsol bölümüne geçerek uygulamayı Egonomik.com üzerinden test edebilirler. Bunun için F12 tuşuna basmanız ve karşınıza çıkacak olan ekrandan “Console” sekmesine tıklamanız yeterli. Daha sonra aşağıdaki kodları teker teker kopyalayıp bu bölüme yapıştırarak (şu şekilde) “Enee negzel oluyo laan, heykır oldum ben” minvalinde sevinç çığlıkları atabilirsiniz.

1
2
3
4
5
6
7
8
9
10
11
// Bilgi mesajı
toastr.info('Belirtilen işlem biraz zaman alabilir');

// Başarılı işlem mesajı
toastr.success('İşlem başarıyla sonuçlandı');

// Uyarı mesajı
toastr.warning('Lütfen işleminizi kontrol ederek tekrar deneyiniz!');

// Hata mesajı
toastr.error('İşlem sırasında kritik bir hata meydana geldi!');

Toastr hakkında detaylı bilgi almak, diğer kullanım örneklerini incelemek ve hemencecik indirip kullanmaya başlamak için aşağıdaki bağlantıyı kullanabilirsiniz.

Download & Demo

Facebook Yorumları

Uyarı: Yorumlarda link kullanmayınız. Link içeren yorumlar otomatik olarak spam kabul edilmektedir.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir