PNotify - 高度にカスタマイズ可能な通知プラグイン

常に忙しい私たちのうちの何人かにとって、通知は私たちをあらゆる重要な出来事、ニュースビットや情報の上に保っています。最新の出来事をお知らせするために管理している間の待ち時間が短縮されます。デスクトップとモバイルの両方で通知が届くのも当然です。.

しかしながらあなたがあなたのサイトのために通知を作成したいなら、あなたはPNotifyと呼ばれるこのプラグインを使ってそれを簡単に作成することができます。それはたくさんのオプションを持つ無料でオープンソースのjavascriptプラグインであり、そしてそれは使いやすいです。 PNotifyを使えば、最大1000個の通知を一度に表示することもできます（試してみるには、このベンチマークテストを参照してください）。なんてかっこいいですか?

PNotifyを使う理由?

以前はPines Notifyと呼ばれていたPNotifyには、主に3つの通知タイプがあります。 情報, 通知 そして エラー. それは機能、効果、テーマそしてスタイルの束を持っています。 Bootstrap、jQuery UI、Font Awesomeからさまざまなスタイルを選択することも、独自のスタイルを使用することもできます。あなたが選ぶことができる（Bootswatchで作られた）約18の既製のテーマもありますそして移行効果さえあります.

PNotifyの素晴らしいところは、それが素晴らしいグラフィック機能を持っているだけでなく、強力で豊富なAPI（あるいはモジュール）で強化されているということです。これらのAPIには、デスクトップ通知（Web Notifications Draft標準に基づく）、動的更新のサポート、さまざまなイベントのコールバック、以前の通知を確認するための履歴ビューア、およびタイトルと本文のHTMLサポートが含まれます。.

PNotify を提供します 控えめな通知 つまり、通知を消さずに通知の背後にある任意の要素をクリックできます。また、Stacks機能を使用して通知を表示する場所を決定することもできます。これにより、通知をあらゆる場所に配置できます。上下のバースタイルまたはツールチップとして.

基本的な使い方

PNotifyのソースはカスタマイズ可能なバンドルモジュールに入っていてここから入手できます。.

入門

ソースを入手したら、次のようにそれらをHTMLに含めます。

PNotifyはとても使いやすいです。これは簡単な通知です。

 $（function（）new PNotify（タイトル： 'Simple Notification'、テキスト： 'Hey、私は単純通知です。'）;）; 

これが結果です。

基本的に、通知を作成するには、新しいPNotify機能を起動します。その後、タイトル、テキスト、スタイル、その他のオプションを関数内に渡すことができます。通知タイプを指定しない場合は、デフォルトのタイプが使用されます。 通知. についてあります 20種類以上の設定可能なオプション あなたは通過することができます。リストをデフォルト値で表示するには、ここをクリックしてください。.

スタイリング

スタイルを変更するには、 スタイリング 通知のオプションとあなたの希望のスタイルを定義します。利用可能なスタイルは ブートストラップ2, ブートストラップ3, jqueryui そして 素晴らしい. 忘れないで 関連するスタイルソースを含める プロジェクト内.

たとえば、以前の通知スタイルをjQuery UIテーマに変更したい場合は、次のスニペットを使用します。

 new PNotify（title： "jQuery UI Style"、テキスト： "こんにちは、jQuery UIテーマでスタイル設定されています。"、スタイル： "jqueryui"）; 

このコードを介してあなたの通知をスタイルするための別の方法があります：

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

変化する jqueryui あなたが望むスタイルで、そして次のように通知の前にこの行を入れてください：

 PNotify.prototype.options.styling = "jqueryui"; new PNotify（title： "jQuery UI Style"、テキスト： "こんにちは、jQuery UIテーマにスタイルが設定されています。"）; 

これがあなたの結果です。

モジュールを追加する

モジュールは高度な通知機能を可能にする豊富なAPIです。がある 7モジュール PNotifyで：デスクトップ、ボタン、非ブロック、確認、履歴、コールバック、および参照モジュール。適切なオプションを通知に渡すことでモジュールを使用できます.

例として、以下はデスクトップモジュールの使い方を示すためのコードです。

 PNotify.desktop.permission（）; new PNotify（title： 'デスクトップ通知'、テキスト： '私はデスクトップ通知です。許可を与える必要があります。許可されていない場合は、通常の通知になります。 '、desktop：desktop：true、icon：null）; 

PNotify.desktop.permission（）; ユーザーが持っていることを確認するために使用されます 与えられた許可 サイトが通知を表示するようにします。ユーザーがサイトを許可しない場合、通知は次のようになります。 定期通知として表示 代わりに.

ご覧のとおり、追加の追加オプションがあります。 デスクトップ コードに。の デスクトップ：真 デスクトップの通知を有効にします。 falseに設定すると、通知は通常の通知になります.

また、カスタムアイコンを使用することもできます。 アイコン オプション。あなたのアイコンのURLを入力してください。あなたはそれを設定することができます 偽 アイコンを無効にします。と設定すれば ヌル, デフォルトのアイコンが使用されます.

他のモジュールの実装とそのオプションを見るには、このリンクにアクセスしてください。.

公式サイトにアクセスして、実装をさらに進めることができます。そこにはデモと一緒にいくつかの高度な使い方があります。あるいは、GitHubのページで追加情報を入手することもできます。.