Uygulama geliştirmek aynı zamanda kullanıcı ile iletişime geçmek demektir. Kullanıcı ile iletişime geçildiğinde, bir çok durumda kullanıcıya bilgilendirme mesajları vermek gerekir.
Mesela eğer editör bir yazıyı silmek için yazıyı sil düğmesine tıkladıktan sonra, yazı silinecektir, fakat bazı durumlarda yazı silinemeyebilir de. Bu gibi durumlarda eğer yazı silindi ise Yazı başarı ile silindi eğer bir sorun oldu ise Bir sorun oluştu. Yazı silinemedi şeklinde bir mesaj vermek faydalı olacaktır.
Bu tip durumlarda JavaScript Windows Alert metodu kulanılabilir. Fakat alert metodu çalıştırıldığında ekran bloklanır ve uyarı mesajı silinene kadar ( bunun için alert tamam düğmesine tıklamak gerekir) kullanıcı işlem yapamaz. Eğer sadece mesaj vermek istiyorsak yani ekran bloklanmasın diyorsak farklı seçenekler denemek gerekir. Bu seçeneklerden güzel bir tanesi toastr kütüphanesidir.
Toastr Nedir?
Toastr basit bir şekilde bilgilendirme mesajları vermek için geliştirilmiş hafif bir jQuery eklentisidir. Gelişmiş ayar seçenekleri ile farklı görünümlerde bilgi mesajları vermek için kullanılır. Kullanımı için JQuery gereklidir.
Toastr Mesaj Türleri
Toastr ile success / başarılı, info / bilgi, warning / uyarı ve error / hata mesajlarını verebilirsiniz. Her mesaj türü farklı renk tonlarına sahiptir. Geniş bir özellik seçeneğine sahiptir. Sayfanın neresinde görüntüleneceği, kapatma düğmesi olup olmayacağı, animasyon türü gibi bir çok seçeneğe sahiptir.
Örneklerle Toastr JS Kullanımı
İhtiyaca göre farklı ayarlar ile kullanılabilen toastr eklentisi bir çok özelliğe sahiptir.
Toastr Temel Kullanım Şekli
En temel hali ile kullanmak istediğimizde öncelikle, toastr.css, jquery.min.js ve toastr.js dosyalarını projemize eklememiz gereklidir. Bunu bir html sayfası üzerinde yapalım.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
</head>
<body>
Gerekli olan toastr.min.css, jquery.min.js ve toastr.min.js dosyalarını sayfamıza ekledikten sonra yapmamız gereken mesajı ekrana yazdırmak olacaktır. Şimdi bunu yapalım.
<script>
toastr.success("İşleminiz başarı ile gerçekleştirildi");
toastr.info("İşlem devam ediyor");
toastr.warning("Bir sorun oluştu");
toastr.error("İşlem yapılamadı, bir hata oluştu");
</script>
</body>
</html>
Yukarıdaki kodlar ile bir websayfası oluşturup toastr-den.html olarak kayıt ederek tarayıcınızda açtığınızda ekranın sağ üst köşesinde uyarı mesajlarını göreceksiniz. Belirli bir süre sonunda mesajlar kaybolacaktır.
Başlık Ekleme
Eğer mesajınıza bir başlık eklemeniz gerekiyorsa yine bunu da basitçe yapabilirsiniz. Bunun için toastryi oluştururken önce başlık ve sonrasında mesajın girilmesi gereklidir.
toastr.success('İşlem Durumu', 'İşlem başarı ile yapıldı.');
toastr.error('Hata Oluştu','Veritabanına bağlanılamadı');
toastr.info('Üye Girişi','Başarı ile giriş yaptınız');
toastr.warning('Eksik Bilgi', 'Şifre girilmedi');
Şeklinde hem başlık ve hemde bilgilendirme mesajlarını verebilirsiniz.
Toastr Pencere Özelliklerini Ayarlama
Eğer mesaj penceresini özelleştirmek istiyorsanız üçüncü parametre olarak bir obje vererek istediğiniz özellikleri değiştirebilirsiniz. Kullanımı
toastr.success(baslik, mesaj, opsions);
şeklindedir. opsions olarak bir objse giriyoruz.
const options = {
escapeHtml: true,
closeButton: false,
}
Şeklinde istediğimiz özellikleri belirtebiliyoruz. Kullanabileceğimiz özelliklerden bazıları şunlardır.
- eacapeHtml mesajda html kullanılmasın isteniyorsa bu değer true yapılıyor.
- closeButton pencereyi kapatmak için bir düğme eklenmek istendiğinde bu değer true yapılmalıdır.
- progressBar pencereye bir durum çubuğu eklemek için true yapılmalıdır.
- timeOut milisaniye cinsinden mesajın görüntülenme süresini belirtir.
Diğer özellikleri için toastr github sayfasına bakabilirsiniz.
npm ile Projeye Eklelemek
Eğer npm ile oluşturduğunuz bir projeye eklemek isterseniz
npm install --save toastr
şeklinde projenize ekleyebilirsiniz.
Son Sözler
Websayfanıza veya uygulamanıza hızlı ve basit bir şekilde uyarı mesajları eklemek istediğinizde kullanabileceğiniz hafif bir JQuery eklentisidir. Kullanacağınız teknolojilere göre farklı seçenekler de düşünebilirsiniz. Mesela bootstrap kullanıyorsanız bootstrap toast tercih edebilirsiniz.
Sizin tercih ettiğiniz bilgilendirme mesaj kütüphaneleri nelerdir?