Anasayfa » Toolkit » PNotify - Son Derece Özelleştirilebilir Bir Bildirim Eklentisi

    PNotify - Son Derece Özelleştirilebilir Bir Bildirim Eklentisi

    Sürekli meşgul olan bazılarımız için, bildirimler bizi her önemli olayın, haber beyninin ve bilgilerin üstünde tutar. Bizi en son gelişmelerden haberdar etmeyi beklerken bekleme süresini kısaltır ve masaüstlerinde ve cep telefonlarında aynı şekilde bildirim almamız şaşırtıcı değildir..

    Ancak siteniz için bildirim oluşturmak istiyorsanız, PNotify adlı bu eklentiyle kolayca oluşturabilirsiniz. Birçok seçenek içeren ücretsiz ve açık kaynak kodlu bir javascript eklentisidir ve kullanımı kolaydır. PNotify ile, bir kerede en fazla 1000 bildirim görüntüleyebilirsiniz (denemek için bu kıyaslama testine bakın). Ne kadar serin?

    Neden PNotify Kullanmalı??

    Eskiden Pines Notify olarak bilinen PNotify, üç ana bildirim türünü taşır: bilgi, ihbar ve hata. Bir sürü özelliği, etkileri, temaları ve stilleri var. Bootstrap, jQuery UI, Font Awesome'den farklı stilleri seçebilir veya kendi stilinizle devam edebilirsiniz. Aralarından seçim yapabileceğiniz yaklaşık 18 hazır tema (Bootswatch'la yapılmış) ve hatta geçiş efektleri de var..

    PNotify ile ilgili en güzel şey sadece harika grafik özelliklere sahip olmaması değil, aynı zamanda güçlü ve zengin API'ler (veya modüller) ile zenginleştirilmesidir. Bu API’lar arasında masaüstü bildirimleri (standart Web Bildirimleri Taslağı esas alınarak), dinamik güncelleme desteği, çeşitli etkinlikler için geri aramalar, önceki bildirimleri görmek için geçmiş görüntüleyici ve başlıkta ve gövdede HTML desteği bulunur.

    PNotify sağlar göze çarpmayan bildirim bu, bildirimi geri almadan herhangi bir öğeyi tıklatabileceğiniz anlamına gelir. Ayrıca, bildirimi her yere yerleştirmenize olanak tanıyan Yığın özellikleriyle bildirimin nerede görüneceğini de belirleyebilirsiniz: üst / alt çubuk stili veya hatta bir araç ipucu olarak.

    Temel kullanım

    PNotify'ın kaynakları özelleştirilebilir paket modüllerinde gelir ve burada bulunabilir.

    Başlamak

    Kaynakları aldıktan sonra bunları HTML'nize şöyle ekleyin:

       

    PNotify kullanımı çok kolaydır. İşte basit bir bildirim:

     $ (function () new PNotify (title: 'Basit Bildirim', metin: 'Hey, basit bir bildirim yapıyorum.');); 

    Ve sonuç bu:

    Temel olarak, bir bildirim oluşturmak için yeni bir PNotify işlevi başlatırsınız. Başlık, metin, stil ve diğer seçenekler fonksiyonun içine aktarılabilir. Bildirim türünü belirtmezseniz, standart bir ihbar. Hakkında 20+ yapılandırılabilir seçenek geçebilirsin. Listeyi varsayılan değeriyle görmek için burayı tıklayın..

    Şekillendirme

    Stili değiştirmek için stil bildirimde seçenek ve istediğiniz stili tanımlayın. Mevcut stiller bootstrap2, bootstrap3, jQueryUI ve fontawesome. Unutma ilgili stil kaynaklarını dahil et projenizde.

    Örneğin, önceki bildirim stilini jQuery UI temasıyla değiştirmek istersem, aşağıdaki pasajı kullanıyorum:

     yeni PNotify (title: "jQuery UI Style", metin: "Hey, jQuery UI temasıyla tarz kullandım.", stil: "jqueryui"); 

    Bildiriminizi şekillendirmenin başka bir yolu var, bu kodla:

     PNotify.prototype.options.styling = "jqueryui"; 

    Değişiklik jQueryUI İstediğiniz stille, aşağıdaki gibi bir bildirimden önce bu satırı koyun:

     PNotify.prototype.options.styling = "jqueryui"; yeni PNotify (title: "jQuery UI Style", metin: "Hey, jQuery UI temasıyla tarz kullandım."); 

    İşte sonucun, tarz:

    Modül Ekleme

    Modüller gelişmiş bildirim özelliklerini sağlayan zengin API'lerdir. Var 7 modül PNotify'da: Masaüstü, Düğmeler, NonBlock, Onayla, Geçmiş, Geri aramalar ve Referans Modülü. Modüller, uygun seçeneklerinin bildirime iletilmesiyle kullanılabilir..

    Örnek olarak, Masaüstü Modülünü nasıl kullanacağınızı gösteren kodlar aşağıdadır:

     PNotify.desktop.permission (); yeni PNotify (title: 'Desktop Notification', metin: 'Ben bir masaüstü bildirisiyim. Bana izin vermelisin ki ben olduğum gibi görüneyim. Olmazsam, düzenli bir bildirim haline geleceğim. ', desktop: desktop: true, simge: null); 

    PNotify.desktop.permission (); kullanıcıların sahip olduklarından emin olmak için kullanılır izin verildi Sitenin bildirim göstermesi için. Kullanıcılar siteye izin vermezse, bildirim düzenli bildirim olarak gösterilir yerine.

    Gördüğünüz gibi, ilave ekleme seçeneği var masaüstü koduna masaüstü: doğru masaüstü için bildirimi etkinleştirir; yanlış olarak ayarlarsanız, bildirim normal bir bildirim haline gelir.

    Ayrıca, özel bir simgeyi ikon seçeneği. Simge URL'nizle doldurun; ayarlayabilirsiniz yanlış simgesini devre dışı bırakmak için Eğer ayarladıysanız boş, varsayılan simge kullanılacak.

    Diğer modül uygulamalarını seçenekleriyle birlikte görmek için bu bağlantıya gidin..

    Resmi sitesine giderek uygulamayı daha da ilerletebilirsiniz. Orada demolarla birlikte bazı gelişmiş kullanımları görebilirsiniz. Alternatif olarak, ek bilgi için GitHub sayfasını ziyaret edebilirsiniz..