AlertifyJS Notifier Kullanımı, Alert Style'nı değiştirme.

Merhaba,
Bir önceki yazımda AlertifyJS'ye hızlı bir giriş yapmıştık ve nasıl kullanılacağını görmüştük.Alert' lerden bahsettik ve Notifier' larında olduğunu söyledik, şöyle hayal edebilirsiniz. Örneğin facebook bildirimleri browserin sağ alt tarafında gözüküyor ve kayboluyor ya da MS Outlook 2012 de sol üstte mail bildirimi geliyor ve belli bir süre gözüküp kapanıyor.Aynı efekt birazdan kullanacağımız bileşen için aynı.

Yeşil olanlar barşarılı olmuş işlemleri, kırmızıları da hata sonucu gösterilecek bildirimler olarak kullanabilirsiniz.

Bu yazıyı okurken ne dinleyebilirsiniz:

Notifier.aspx adında yeni bir WebForm oluşturalım ve aspx kısmını önceki yaptığımız örnekteki gibi benzer şekilde oluşturalım.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Notifiers.aspx.cs" Inherits="Notifiers" %>

<!DOCTYPE html>

<title>Notifier Sample</title>

</head>

<body>

<div>

<asp:Button runat="server" Text="Click this Notifier" ID="notify_btn" OnClick="notify_btn_Click" />

</div>

</form>

</body>

</html>

Buton click event 'ine geçmeden önce daha önceki yazımızda yazdığımız AlertCustom.cs class'ına yeni metodlar ekleyelim ben aşağıda sadece success notifier metodunu yazacağım tam proje için hepsi mevcut , tam projeyi yine GitHub'da bulabilirsiniz. :)

public static void ShowSuccess(Page page, string message)

{

// Cleans the message to allow single quotation marks

string cleanMessage = message.Replace("'", "\\'");

string script = "<script >alertify.success(\"" + cleanMessage + "\" ); </script>";

page = HttpContext.Current.CurrentHandler as Page;

// Checks if the handler is a Page and that the script isn't allready on the Page

if (page != null && !page.ClientScript.IsClientScriptBlockRegistered("alertcustomsuccess"))

{

page.ClientScript.RegisterClientScriptBlock(typeof(AlertCustom), "alertcustomsuccess", script);

}

şimdi çok basit bir şekilde bu class yarıdımıyla aspx.cs tarafında notifier scriptini sayfaya register edelim.

protected void notify_btn_Click(object sender, EventArgs e)

{

AlertCustom.ShowSuccess(this.Page, "Hello Success Notifier!");

}

Projeyi çalıştırdığınızda ve butona bastığınızda başarılı bildirimini görebilirsiniz.

Error ve Nomal notifierlerde benzer şekilde bunları tam projeye ekledim.

Şimdi alert'lerin görünümlerini değiştirmeye çalışalım benzer şekilde notifier'larında görünümlerini değiştirebilirsiniz. Bunun için default.css de değişiklik yapmamız gerekecek.

Örneğin klasik bir alertteki başlığı kaldıralım ve OK butonunun da rengini kırmızı yapalım.

Yukarıdaki ekran görüntüsündeki gibi Chrome Browser ile Web developer tool 'u kullandığımızda alertify .ajs-header görüntüsündeki classına display:none dememizin yeterli olacağını kolayca bulabiliriz. ve projedeki css dosyasında da bu ilgili değişikliği yaptığımızda alert pencerelerini başlığı olmaksızın kullanabiliriz.

Şimdi de OK butonunun renini değiştirelim.

Görüldüğü gibi benzer şekilde Devleloper tool ile OK butonuna inspect edip( arama çubuğu simgesine basıp-sağ üstte istenilen component üstünde dolaşıp üzerine tıklama ve css özellliklerini elde etme) istenilen css klasını bulup aşağıdaki gibi değiştirebiliriz.

.alertify .ajs-footer .ajs-buttons .ajs-button.ajs-ok {

1 color: #F71155;

}

İşte bu kadar basit sonuç olarak:

Projeyi burarada bulabilirsiniz.

Teşekkürler , sağlıkla kalın, iyi tatiller... :)

Author Description