Ana Sayfa... Duyurularım... Ben Kimim ??? Projelerim... Tozlanmış dosyalar... İrtibata Geçin...
 
JQuery kullanarak Ekran Bildirim Mesajlari !

Yazar :  Okan  Düzgün             Yayınlanma Saati :  2015-01-17 08:39:34

Bu makalede, web sayfanizda bildirim iletileri görüntülemek için küçük bir ayrintidan bahsetmek istiyorum. Toastmessage - plugin android benzeri bildirim iletileri saglayan bir jQuery eklentisidir . Tost mesajlar kesintisiz ve dogal bir sekilde ekraniniza gelir . Bu kullaniciya bilgi veya hata veya uyari
bildirmek için oldukça güzel bir yöntemdir. Sizde eklentiden faydalanarak web sayfalarinizda kullanabilirsiniz...

Eklentiyi buradan indirebilirsiniz...

Tost mesaj uygulamamizin 4 farkli uyari tipi bulunmaktadir, her uyari mesajinin kendine has simgesi bulunuyor. Dileyenler kendilerine göre simge belirleyip kullanabilirler...

  • Hata
  • Uyari
  • Basarili
  • Ihbar

Özel kullanimlarda yapilandirmayi degistirebilirsiniz...

$().toastmessage({
    text     : 'Ashish Blog',   
    sticky   : true,           
    position : 'top-right',  
    type     : 'success',    
    close    : function () {console.log('toast is closed ...');}

});

Asagida Tost mesaj ekraninizda kullanilacak yöntemler gösterilmistir...

$().toastmessage('showNoticeToast', 'some message here');
$().toastmessage('showSuccessToast', 'some message here');
$().toastmessage('showWarningToast', 'some message here');
$().toastmessage('showErrorToast', 'some message here');

Sayfanizda kullanacaginiz javaScript kodunuz ;

 <script type="text/javascript">

     function showSuccessToast() {

         $().toastmessage('showSuccessToast', "Success Dialog which is fading away ...");

     }

     function showStickySuccessToast() {

         $().toastmessage('showToast', {

             text: 'Success Dialog which is sticky',

             sticky: true,

             position: 'middle-left',

             type: 'success',

             closeText: '',

             close: function () 
             {

             console.log("toast is closed ...");

             }

         });
     }

     function showNoticeToast() {

         $().toastmessage('showNoticeToast', "Notice  Dialog which is fading away ...");

     }

     function showStickyNoticeToast() {

         $().toastmessage('showToast', {

             text: 'Notice Dialog which is sticky',

             sticky: true,

             position: 'top-left',

             type: 'notice',

             closeText: '',

             close: function () { console.log("toast is closed ..."); }

         });

     }

     function showWarningToast() {

         $().toastmessage('showWarningToast', "Warning Dialog which is fading away ...");

     }

     function showStickyWarningToast() {

         $().toastmessage('showToast', {

             text: 'Warning Dialog which is sticky',

             sticky: true,

             position: 'middle-right',

             type: 'warning',

             closeText: '',

             close: function () {

                 console.log("toast is closed ...");
             }

         });

     }

     function showErrorToast() {

         $().toastmessage('showErrorToast', "Error Dialog which is fading away ...");

     }

     function showStickyErrorToast() {

         $().toastmessage('showToast', {

             text: 'Error Dialog which is sticky',

             sticky: true,

             position: 'center',

             type: 'error',

             closeText: '',

             close: function () {

                 console.log("toast is closed ...");
             }

         });

     }

</script>

Asp.net sayfamizda buttonun click olayindan sonra uyari mesajimizi ekranimizda gösterebilmemiz için, butonun click olayinda bir kod yazip tost mesaj function;numuzu çagirmamiz gerekiyor, ilgili kod asagidaki gibidir...

ScriptManager.RegisterStartupScript(Me, GetType(String), "", "showSuccessToast()", True)

yukaridaki resimde ise tost mesaj uygulamasini bir asp.net sayfasinda buton yardimiyla kullanilan çalistirilan uygulamanin resmidir...

evet web sayfalarinizda çokta zorlanmadan sitenin daha gösterisli olmasini ve görsel olmasini bu tip küçük uygulamalarla gerçeklestirebilirsiniz...

Örnek çalismayi buradan indirebilirsiniz...

Yararli olmasi dilegiyle !!!



 

 
 Dosyaları indirmek ve yorumları görebilmek için lütfen kullanici girişi yapınız !!!  
 
 
 


 

Son Güncelleme :  16/11/2017
  Design and Coding - Okan Düzgün 2011 - 2017 © Tüm Hakları Saklıdır.