Notific 8 ile Bildirim Kartları Göstermek

Nıotific 8 Windows 8 deki bildiğimlerden esnlenerek oluşturulmuş bir jquery eklentisidir. Kullanımı oldukça kolay tasarımsal ve programatiközellikleri geniş bir eklentidir. Web uygulama arayüzlerinize ayrı bi güzellik ve kullanıcı dostu bir özellik katmak isterseniz kullanmanızı tavsiye ederim.

https://github.com/ralivue/notific8 linkinden source-dist kodlara ve kullanıma ilişkin detaylara erişebilirsiniz.

Ben burada kısaca açıklamaya çalışacağım. Notific plugin css ve js dosyalarını ekledikten sayfamıza ekledikten sonra aşağıdaki şekilde kullanabiliriz. Ben burada kullanırken kolaylık olması için başarılı işlem, hatalı işlem ve bilgi mesajı için üç adet fonksiyon tanımladım. Aşağıda başarı lı işlem bildirimi yapan metod blunmaktadır. Sizde setttings özelliklerini değiştirerek farklı bildirim kartı tasarımları yapabilirsiniz.

function Basari(mesaj) {
    var settings = {
        theme: 'lime', // lime yeşşile yakın renkli olduğu için başarılı işlem mesajlarını göstermktedir. teal, amethist,ruby,tangerine,lemon,lime,ebony,smoke değerlerini alabilir
        horizontalEdge: 'top',  // kartınyataydaki konumu top-bpttom değerleri alabilir
        verticalEdge: 'right',  //bildirimin dikeydeki konumu .  right ,left değerlerini alabilir
        heading: 'Başarılı',  //başlık bilgisi 
        sticky: false, // bildirim göründüğünde sabit mi kalacak yoksa kendiliğinden kapanacak mı ? true false değerlerini alabilir.
        life: 1000 // bildirimin göründükten sonra ne kadar süre sonra kaybolacağı . Burada bir saniye sonra kendiliğinden kaybolacaktır.
    };
    $.notific8('zindex', 11500); // zindex değeri veririz ki sayfada en üstte görünsün. diğer html nesnelerinin altında kalmasın
    $.notific8(mesaj, settings);  // son olarak burada da bildirimi göstermiş oluruz.
}

Aşağıda örnek bir kullanım bulunmaktadır.

$.ajax({

                    type: "POST",
                    url: 'url',
                    data: {id:idegeri },
                    success: function (response) {
                        alert(response);
                        if (response==true) {
                            Basari("Silme işlemi Başarılı");
                        }
                        else {
                            Hata("Hata oluştu Silme işlemi başarısız");
                        }
                    }
                });

Kısaca açıklamak gerekirse ajax metodu başarılı bir şekilde çalışıp true değeri dönderdiğinde

Basari("Silme işlemi Başarılı");

metodu çalışacak ve başarılı bildirim mesajı , ajax işlemi sonucu false dönerse Hata mesajı ekranda aşağıdaki şekilde görünecektir.

Ömer Faruk Dinçer