ホームページ >ウェブフロントエンド >H5 チュートリアル >HTML5 通知 API に基づくメッセージ通知プラグイン

HTML5 通知 API に基づくメッセージ通知プラグイン

黄舟
黄舟オリジナル
2017-03-21 16:40:492591ブラウズ

簡単なチュートリアル

easyNotify は、HTML5 通知 API に基づいたメッセージ通知 jQuery プラグインです。この jQuery プラグインは、HTML5 API を使用してデスクトップの右下隅にカスタム通知メッセージを表示するだけです。

このプラグインを使用するには、ブラウザが HTML5 通知 API をサポートしている必要があります。ブラウザの互換性は次のとおりです。

HTML5 通知 API に基づくメッセージ通知プラグイン

使用方法

jquery および easyNotify.js ファイルをページに導入します。

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/easyNotify.js"></script>

メッセージ通知の表示

このメッセージ通知プラグインの基本的な使用法は次のとおりです:

<p id="easyNotify"></p>  <!-- HTML -->
$("#easyNotify").easyNotify();

設定パラメータ

必要な設定パラメータをオブジェクトの形式で渡すことができます:

var myCloseInfo = function(){
    alert(&#39;this is a callback function that runs after close the notification.&#39;);
};
 
var options = {
      title: "Notificação",
      options: {
        body: "O melhor do Brasil são os Brasileiros.",
        icon: "icon.png",
        lang: &#39;pt-BR&#39;,
        onClose: myCloseInfo
      }
    };
 
$("#easyNotify").easyNotify(options);

使用可能な設定パラメータは次のとおりです:

  • title: メッセージ通知のタイトル。

  • body: メッセージ通知の内容。

  • icon:: メッセージ通知の画像。

  • lang: 言語。

  • onClose: メッセージ通知を閉じるコールバック関数。

  • onClick: クリックメッセージ通知のコールバック関数。

  • onError: エラー発生時のコールバック関数。

上記は、HTML5 通知 API に基づくメッセージ通知プラグインの内容です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。

関連記事:

HTML 5のメッセージ通知機構

Redisメッセージ通知システムの実装

Webメッセージ通知システムの設計上の問題

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。