PNotify - Un plugin de notification hautement personnalisable
Pour certains d'entre nous qui sont constamment occupés, les notifications nous tiennent au courant de tous les événements importants, newsbit et informations. Cela réduit le temps d'attente tout en parvenant à nous mettre à jour avec les derniers événements, et il n'est donc pas étonnant que nous recevions des notifications sur les ordinateurs de bureau et les mobiles..
Si toutefois vous souhaitez créer une notification pour votre site, vous pouvez le créer facilement avec ce plugin appelé PNotify. C'est un plugin javascript gratuit et open source avec beaucoup d'options et facile à utiliser. Avec PNotify, vous pouvez même afficher jusqu'à 1 000 notifications en une seule fois (consultez cet essai d'évaluation pour l'essayer). À quel point cela est cool?
Pourquoi utiliser PNotify?
PNotify, anciennement connu sous le nom de Pines Notify, comporte trois types de notification principaux: Info, remarquer et Erreur. Il a un tas de fonctionnalités, effets, thèmes et styles. Vous pouvez choisir différents styles parmi Bootstrap, l'interface utilisateur jQuery, Font Awesome ou utiliser votre propre style. Il existe également environ 18 thèmes prêts à l'emploi (réalisés avec Bootswatch) parmi lesquels vous pouvez choisir, et il existe même des effets de transition..
L’avantage de PNotify est qu’il n’a pas que des fonctionnalités graphiques impressionnantes, il est également enrichi d’API (ou de modules) puissants et riches. Ces API incluent les notifications de bureau (basées sur la norme Web Notifications Draft), la prise en charge dynamique des mises à jour, les rappels pour divers événements, la visionneuse d'historique pour afficher les notifications précédentes et la prise en charge HTML dans le titre et le corps..
PNotifier fournit un notification discrète ce qui signifie que vous pouvez cliquer sur n’importe quel élément derrière l’avis sans le supprimer. Vous pouvez également déterminer où la notification apparaît avec les fonctionnalités Stacks, ce qui vous permet de positionner la notification partout: en tant que style de barre supérieure / inférieure ou même en tant qu’aide..
Usage basique
Les sources de PNotify sont fournies dans des modules bundles personnalisables et sont disponibles ici.
Commencer
Une fois que vous avez les sources, incluez-les dans votre code HTML comme suit:
PNotify est très facile à utiliser. Voici une notification simple:
$ (function () new PNotify (titre: 'Notification simple', texte: 'Hé, je suis une notification simple.'););
Et voici le résultat:
Fondamentalement, pour créer une notification, vous lancez une nouvelle fonction PNotify. Le titre, le texte, le style et d'autres options peuvent ensuite être passés à l'intérieur de la fonction. Si vous ne spécifiez pas le type de notification, il utilisera le type par défaut qui est un remarquer. Il y a environ 20+ options configurables tu peux passer. Pour voir la liste avec sa valeur par défaut, cliquez ici.
Coiffant
Pour changer le style, vous pouvez passer le coiffant option dans la notification et définissez le style souhaité. Les styles disponibles sont bootstrap2, bootstrap3, jqueryui et fontawesome. N'oublie pas de inclure des sources de style connexes dans votre projet.
Par exemple, si je veux changer le style de notification précédent pour le thème de l'interface utilisateur jQuery, j'utilise l'extrait de code suivant:
new PNotify (title: "Style de jQuery UI", texte: "Hé, je suis stylé avec le thème de jQuery UI.", style: "jqueryui");
Il existe un autre moyen de styliser votre notitication, via ce code:
PNotify.prototype.options.styling = "jqueryui";
Changement jqueryui avec le style de votre choix, placez cette ligne avant la notification comme suit:
PNotify.prototype.options.styling = "jqueryui"; new PNotify (title: "Style de jQuery UI", texte: "Hé, je suis stylé avec le thème de jQuery UI.");
Voici votre résultat, stylé:
Ajout de modules
Les modules sont des API riches qui activent des fonctionnalités de notification avancées. Il y a 7 modules dans PNotify: Bureau, Boutons, NonBlock, Confirmer, Historique, Rappels et module de référence. Les modules peuvent être utilisés en passant ses options appropriées dans la notification.
À titre d’exemple, les codes ci-dessous vous montrent comment utiliser le module de bureau:
PNotify.desktop.permission (); new PNotify (title: 'Desktop Notification', texte: 'Je suis une notification de la part de votre ordinateur. Vous devez me donner la permission afin que je puisse apparaître comme ce que je suis. Sinon, je deviendrai une notification régulière. ', desktop: desktop: true, icon: null);
PNotify.desktop.permission (); est utilisé pour s'assurer que les utilisateurs ont donné la permission pour que le site montre la notification. Si les utilisateurs refusent le site, la notification sera montré comme un avis régulier au lieu.
Comme vous pouvez le constater, il existe une option supplémentaire consistant à ajouter bureau au code. le bureau: vrai activera la notification pour le bureau; si vous le définissez sur false, la notification deviendra une notification régulière.
Vous pouvez également utiliser une icône personnalisée via le icône option. Remplissez-le avec votre URL d'icône; vous pouvez le régler faux pour désactiver l'icône. Si vous le configurez avec nul, l'icône par défaut sera utilisée.
Pour voir d'autres implémentations de modules avec leurs options, allez à ce lien.
Vous pouvez poursuivre la mise en œuvre en allant sur son site officiel. Là, vous pouvez voir une utilisation avancée avec les démos. Alternativement, vous pouvez visiter sa page GitHub pour plus d'informations.
