Javascript alert'e güle güle AlertifyJS 'ye merhaba!

Merhaba ,
Bu yazım klasik javascript alertlerini çirkin bulanlar için :)

Şimdi Wye Oak 'dan Civilian dinliyorum, bu parçayı dinleyerek yazıya devam edebilirsiniz :)

AlertifyJs aslında bir javascript kitaplığı içinde sadece alert (uyarı) yok , başka değişik bileşenleride içeriyor.bunlar:Confirm(Onaylama uyarı kutucuğu),Prompt (Hızlı cevap kutucuğu) ve Notifier (Kullanıcı bildirimleri) Biz bugün alertlerden bahsedeceğiz. AlertifyJS sitesini ve gerekli js ve css 'leri buradan indirebilirsiniz.Şuan 1.4.0 versiyonu mevcut hızlıca javascript ve css min dosyalarını edinip kolayca web sienizde şık bir uyarı kutucuğu çıkarabilirsiniz. Hemen burada bir demo var .

Örnek projeyi yine githubımda bulabilirsiniz.Ve başlıyoruz. Gerekli dosyaları indirdikten sonra bunları .Net projemizde alertifyJS klasörümüze kopyalayalım.

Boş bir .Net Web sitesi oluşturalım.Ben proje ismini AlertifyJSUsageSample olarak isimlendireceğim.

daha sonda indiridiğimiz javascript ve css le aşagıdaki gib bir zip dosyasında olmalı,

bunlardan alertify.min.js ve alertify.min.css , css/themes/default.css doyalarını web sitemizde yeni oluşturduğumuz alertifyJS klasörüne kopyalayalım. Bu dosylaraın .min olmayanlarını da alabilirsiniz. js ve css leri websitenizin çabuk yüklemesi gerekiyorsa min olanlarını değil ise normallerini kullanabilirsiniz.

Buraya kadar harika , şimdi projemize yeni bir WebForm ekleyelim ve nasıl kullanıldığını basitçe görelim.

Head tagı alanına gerekli css ve javascriptleri referans alalım.

<title>Alertify Usage</title>

</head>

Buraya ve şimdi bu javascripti client side değilde server side yani aspx.cs tarafından çağıralım bunun için bir Asp.Net Folder olan App_Code oluşturalım ve içine AlertCustom adında bir class oluşturalım.

Normal alert görünümlü alert scriptini sayfaya register etmek için aşagıdaki metodu kullanalım . Server side javascript import etmek eminim hoşunuza gidecektir bu custom class sayesind asp tarafına hiç geçmeden istediklerini .cs tarafında yapabiliyorsunuz.

public static class AlertCustom

{

/// <summary>

/// Shows a client-side JavaScript alert in the browser.

/// </summary>

/// <param name="message">The message to appear in the alert.</param>

public static void ShowCustom(Page page,string message)

{

// Cleans the message to allow single quotation marks

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

string script = "<script >alertify.alert(\"" + 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("alertcustom"))

{

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

}

ve şimdi body tagımızda bir asp .Net button elementi yerleştirelim.

<body>

<div>

<asp:Button runat="server" Text="Click Me" ID="hello_btn" OnClick="hello_btn_Click" />

</div>

</form>

</body>

ve click event'inde Custom classımızı kullanarak istediğimiz mesajı alertify 'da gösterelim.

Default.aspx.cs de

protected void hello_btn_Click(object sender, EventArgs e)

{

AlertCustom.ShowCustom(this.Page, "Hello");

}

"Click Me" butonuna bastığınızda aşağıdaki ekran görüntüsündeki gibi bir uyarı almış olmalısınız.

Bu iki görüntüyü karşılaştırıp aradaki farkı görebilirsiniz :) Eğer css tecrübeniz varsa Alertify.css ya da default.css dosyalarını istediğiniz gibi biçimlendirip, alert kutucuğunun style 'nı değiştirebilirsiniz.Tabiki .min dosyaları sıkıştırılmış olduğunda bunu normal css dosyalarında yapmak daha kolay olacaktır.

Bir sonraki yazımızda success ve errror gibi Notifier 'lardan bahsedeceğiz.Aşağıda bir success notifier'ın görüntüsü var , default.css ve alertify.css 'i değiştirmeden de bahsedebiliriz bir sonraki yazımızda.

Projenin final halini burada bulabilirsiniz.
Umarım faydalı olmuştur, teşekkürler, sağlıkla kalın :)

Author Description