PNotify - Un complemento de notificación altamente personalizable
Para algunos de nosotros que estamos constantemente ocupados, las notificaciones nos mantienen al tanto de todos los eventos importantes, noticias e información. Disminuye el tiempo de espera al mismo tiempo que nos actualiza con los últimos acontecimientos, y no es de extrañar que recibamos notificaciones en equipos de escritorio y móviles por igual..
Sin embargo, si desea crear una notificación para su sitio, puede crearla fácilmente con este complemento llamado PNotify. Es un complemento javascript de código abierto y gratuito con muchas opciones y es fácil de usar. Con PNotify, incluso puede mostrar hasta 1000 notificaciones a la vez (consulte esta prueba de evaluación comparativa para probarlo). Cuan genial es eso?
¿Por qué usar PNotify??
PNotify, anteriormente conocido como Pines Notify, lleva tres tipos de notificación principales: info, darse cuenta y error. Tiene un montón de características, efectos, temas y también estilos. Puede elegir diferentes estilos de Bootstrap, jQuery UI, Font Awesome o ir con su propio estilo. También hay alrededor de 18 temas listos para usar (hechos con Bootswatch) entre los que puedes elegir e incluso hay efectos de transición..
Lo mejor de PNotify es que no solo tiene características gráficas impresionantes, sino que también está enriquecido con API (o módulos) potentes y ricas. Estas API incluyen notificaciones de escritorio (basadas en el estándar de borrador de notificaciones web), soporte de actualización dinámica, devoluciones de llamadas para varios eventos, visor de historial para ver notificaciones anteriores y soporte de HTML en el título y el cuerpo..
PNotificar proporciona una notificación discreta lo que significa que puede hacer clic en cualquier elemento detrás del aviso sin descartarlo. También puede determinar dónde se muestra la notificación con las funciones de Apilamiento, lo que le permite ubicar el aviso en todas partes: como estilo de barra superior / inferior o incluso como información sobre herramientas.
Uso básico
Las fuentes de PNotify vienen en módulos de paquetes personalizables y están disponibles aquí.
Empezando
Una vez que tenga las fuentes, inclúyalas en su código HTML así:
PNotify es muy fácil de usar. Aquí hay una simple notificación:
$ (function () new PNotify (title: 'Simple Notification', texto: 'Hey, soy una notificación simple.'););
Y este es el resultado:
Básicamente, para crear una notificación inicias una nueva función PNotify. El título, el texto, el estilo y otras opciones se pueden pasar dentro de la función. Si no especifica el tipo de notificación, utilizará el tipo predeterminado, que es un darse cuenta. Hay alrededor de 20+ opciones configurables puedes pasar. Para ver la lista con su valor predeterminado, haga clic aquí..
Estilo
Para cambiar el estilo, puedes pasar el estilo Opción en la notificación y definir su estilo deseado. Los estilos disponibles son bootstrap2, bootstrap3, jqueryui y impresionante. No te olvides de incluir fuentes de estilo relacionadas dentro de tu proyecto.
Por ejemplo, si quiero cambiar el estilo de notificación anterior al tema de la interfaz de usuario de jQuery, utilizo el siguiente fragmento de código:
nuevo PNotify (title: "jQuery UI Style", texto: "Hey, tengo un estilo con el tema jQuery UI.", styling: "jqueryui");
Hay otra forma de diseñar su notificación, a través de este código:
PNotify.prototype.options.styling = "jqueryui";
Cambio jqueryui con el estilo que desee, luego coloque esta línea antes de la notificación, de este modo:
PNotify.prototype.options.styling = "jqueryui"; nuevo PNotify (title: "jQuery UI Style", texto: "Hey, tengo un estilo con el tema jQuery UI.");
Aquí está su resultado, con estilo:
Añadiendo modulos
Los módulos son API ricas que habilitan funciones avanzadas de notificación. Existen 7 modulos en PNotify: Desktop, Buttons, NonBlock, Confirm, History, Callbacks y Reference Module. Los módulos pueden usarse pasando sus opciones apropiadas a la notificación.
A modo de ejemplo, a continuación se muestran los códigos para mostrarle cómo usar el Módulo de escritorio:
PNotify.desktop.permission (); nuevo PNotify (título: 'Notificación de escritorio', texto: 'Soy una notificación de escritorio. Debe darme permiso para que aparezca como lo que soy. De lo contrario, me convertiré en una notificación regular. ', desktop: desktop: true, icon: null);
PNotify.desktop.permission (); se utiliza para asegurarse de que los usuarios tienen permiso dado para que el sitio muestre la notificación. Si los usuarios no permiten el sitio, la notificación será mostrado como un aviso regular en lugar.
Como puede ver, existe la opción adicional de agregar escritorio al código. los escritorio: verdadero habilitará la notificación para escritorio; Si lo configura como falso, la notificación se convertirá en un aviso regular..
También puede utilizar un icono personalizado a través de la icono opción. Rellénalo con tu icono url; puedes configurarlo falso para deshabilitar el icono. Si lo configuras con nulo, se utilizará el icono predeterminado.
Para ver otras implementaciones de módulos con sus opciones, vaya a este enlace.
Usted puede promover la implementación yendo a su sitio oficial. Allí puedes ver algunos usos avanzados junto con las demostraciones. Alternativamente, puede visitar su página de GitHub para obtener información adicional.
