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:
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.