Açıklama
EasyNotify, çeşitli seçeneklerle modern, düz stilde basit bildirimler oluşturmanıza olanak tanıyan hafif, duyarlı bir JS eklentisidir.
İstediğiniz bilgilerle bildirimler oluşturun ve gösterin iletmek. Bildirimleri ihtiyaçlarınıza uyacak şekilde özelleştirin ve şekillendirin.
Sitenizdeki haberleri, mesajları görüntülemek veya kullanıcıya geri bildirim sağlamak için harika.
Özellikler
- Herhangi Bir Web Sitesiyle Kolay Entegrasyon
- Temiz ve Yorumlanmış Kod
- Tamamen Özelleştirilebilir
- CSS Değişkenleri Desteği
- Duyarlı ve Mobil Dostu
- Animate.css Eklentisi Desteği
- Herhangi bir Bildirim Metni Oluşturun
- Herhangi Bir Öğeyi Gösterin veya Gizleyin
- Özel Simgeleri
- Farklı Pozisyonlar
- Sınırsız Bildirim Kümeleri
- % 100 Bootstrap Uyumlu
- Görüntü Yok
- jQuery Bağımlılığı Yok
- Çapraz Tarayıcı Uyumluluğu
- Ücretsiz Güncellendi
Kurulum içine -> Merhaba, EasyNotify! EasyNotify'ı seçeneklerle veya seçeneklersiz başlat -> padding: '24px', // : kutunun kenarlık yarıçapı // css-değişken analog: --easy-notify-radius // ör. '0', '4px 16px 4px 16px', vb. Radius: '8px', // : kutunun gölgesi // css-değişken analog: --easy-notify-shadow // ör. 'yok', '0 8px 16px rgba (0, 0, 0, 0.25)', '4px 4px 32px rgba (255, 0, 0, 0.5)', vb. gölge: '0 -1px 1px rgba (0, 0 , 0, 0.05), 0 2px 2px rgba (0, 0, 0, 0.05), 0 4px 4px rgba (0, 0, 0, 0.05), 0 8px 8px rgba (0, 0, 0, 0.05), 0 16px 16px rgba (0, 0, 0, 0.05), 0 32px 32px rgba (0, 0, 0, 0.05) ', // : kutunun z-endeksi // örn. 10, 120, 100100100, vb. ZIndex: 100000, // : kutunun konumu // "üst-sol", "üst-sağ", "alt-sağ" veya "alt-sol" olmalıdır position: 'bottom-left', // : göründüğünde animasyonun adı // css-variable analog: --easy-notify-animation-name-in // özel animasyon adı veya animasyon adı olmalıdır animate.css plugin animationNameIn: 'easyNotifyIn', // : kaybolduğunda // animasyonun adı // css-variable analog: --easy-notify-animation-name-out // özel animasyon adı olmalıdır veya animate.css plugin animationNameOut: 'easyNotifyOut', // : animasyonun saniye cinsinden süresi // css-variable analog: --easy-notify-animation-duration // örn.animationDuration: '0.5s', // : kutu saniye cinsinden belirtilen süreden sonra görünür // css-variable analog: --easy-notify-animation-delay // ör. "1s", "3.5s", vb. AnimationDelay: "0s", // : kapat düğmesini gizle // true veya false olmalıdır closeBtnHide: false, // : kapat düğmesinin rengi // css-değişken analog: --easy-notify-close-color // örneğin 'currentColor', '# 2f6e92', 'black', vb. closeBtnColor: '#acacad', // : kapat düğmesinin fareyle üzerine gelme rengi // css-değişken analog: --easy-notify-close- renk üzerine gelme // örneğin 'currentColor', '# 2f6e92', 'black', vb. closeBtnColorHover: '# 858687', // : simgeyi gizle // true veya false olmalıdır iconHide: false, // : renk varsayılan simgenin // css-değişkeni analog: --easy-notify-icon-color // örn. 'currentColor', '# 2f6e92', 'black', vb. iconColor: '# f5234b', // : özel simgenin src özelliği // '' veya 'path_to_image.png' olmalıdır iconSrc: ' ', // : özel simgenin genişliği // örneğin boyutu 24, 36, vb. İconWidth: 48, // : yüksekliğe göre özel simgenin boyutu // ör. 24, 36 vb. İconHeight: 48, // kutunun açıklaması // ör. '24 Kasım'dan 21 Aralık 2020'ye kadar çevrimiçi olarak verilen siparişler tam bir geri ödeme için 1 Şubat 2021'e kadar iade edilebilir.', 'Hediyelerimizi keşfedin - size en yakın olanlarla paylaşmak veya sadece kendinize saklamak için.Sitemizi kullanmaya devam ederek çerez politikamızı kabul etmiş olursunuz. ', // :' Daha fazla bilgi edinin 'bağlantısını gizle // doğru veya yanlış olmalıdır moreLinkHide: false, // : href özniteliği 'Daha fazla bilgi edinin' link // örn '/ privacy', '/ hediyeler', vb. moreLinkHref: '#', // : 'Daha fazla bilgi edinin' bağlantısının metni // ör. 'Hakkında', 'Ayrıntılar', vb. MoreLinkText: 'Daha fazla bilgi edinin', // : 'Daha fazla bilgi edinin' link // css-değişken analog: --easy-notify-link-color / yazı tipi rengi / Örneğin 'currentColor', '# 2f6e92', 'black', vb. moreLinkColor: '# 0066cc', // : 'Daha fazla bilgi edinin' bağlantısının üzerine getirilen yazı tipi rengi link // css-değişken analog: --easy- notify-link-color-hover // örneğin 'currentColor', '# 2f6e92', 'black', vb. moreLinkColorHover: '# 0052a3', // : kabul düğmesini gizleyin // doğru veya yanlış olmalıdır acceptBtnHide: false, // : the kabul et düğmesinin metni // örn. 'Kapat', 'Başlayalım', vb. AcceptBtnText: 'Kabul Et', // : kabul düğmesinin arka plan rengi // css-değişkeni analog: --easy-notify-btn-bg-color // Örneğin 'currentColor', '# 2f6e92', 'black', vb. acceptBtnBgColor: '# 0070f5', // : kabul düğmesinin yazı tipi rengi // css-değişken analog: --easy-notify-btn- renk // örneğinacceptBtnColor: '#ffffff', // : kabul düğmesinin üzerine gelme arka plan rengi // css-değişken analog: --easy-notify-btn-bg-color-hover // ör. 'currentColor', '# 2f6e92', 'black', vb. acceptBtnBgColorHover: '# 005ac4', // : kabul düğmesinin üzerine gelme yazı tipi rengi // css-değişken analog: --easy-notify-btn -color-hover // örneğin 'currentColor', '# 2f6e92', 'black', vb. acceptBtnColorHover: '#ffffff', // : kabul düğmesinin dolgusu // css-değişken analog: --easy-notify-btn-padding // Örneğin '12px', '4px 20px', '4px 16px 4px 20px', vb. AcceptBtnPadding: '0 16px', // : kabul düğmesinin yüksekliği // css-değişken analog: --easy-notify- btn-yükseklik // örneğin '30px', '50px', vb. AcceptBtnHeight: '40px', // : kabul düğmesinin kenarlık yarıçapı // css-değişken analog: --easy-notify-btn-radius // ör. '0', '4px 8px 4px 8px', vb. AcceptBtnRadius: '8px',}); Tarayıcılar desteği
Eklenti, tüm büyük tarayıcılarla uyumludur:
- Edge
- Firefox
- Chrome
- Safari
- Opera
Günlüğü değiştir v1.0.0
.
