ホーム サンプルコード一覧 4. Notifier

4. Notifier

実現される機能

通知UIを実現します。
任意のテキストを、ページ上部に表示することができます。
「成功」「失敗」の2種類の通知を表示することが可能です。

ダウンロード

※ダウンロードファイル内に、ソースコードとともに以下のデモが同梱されています。

デモ

基本デモ

単純な使用例のサンプルです。
各リンクを押下すると、notifierにテキストを渡し、通知表示を行わせています。

組み込みデモ1 - お気に入りボタン

お気に入りボタンを押下すると、通知表示を行います。
サーバーへリクエストを飛ばす要な場合をイメージしたデモです。

組み込みデモ2 - ニュース一覧

右上の更新ボタンを押下すると、データを取得し、通知表示を行います。
ニュースの一覧ページを更新できるよう、イメージしたデモです。
リクエストが失敗した場合、エラーの通知を行います。
(このデモでは、一定確率でエラーが起こります

組み込みデモ3 - 設定項目の更新

「変更を適用する」ボタンを押下すると、データをPOSTし、通知表示を行います。
ダイナミックにデータをやりとりするフォームをイメージしたデモです。
リクエストが失敗した場合、エラーの通知を行います。
(このデモでは、一定確率でエラーが起こります)

使用手順

1. 依存ライブラリの読み込み

Notifierが依存する、以下のライブラリを読み込みます。

<script src="[yourDirectoryHere]/jquery.min.js"></script>

この機能を実現するライブラリである jquery.notifier.js を読み込みます。

<script src="[yourDirectoryHere]/jquery.notifier.js"></script>

2. 通知UIを配置するための要素を用意

ページ内に、通知UIを配置するための要素を用意します。

<div class="su-notifier" id="su-notifier"><div></div></div>

通知が行われると出現する要素は、この要素の中に配置されます

通知が行われるときに追加される要素は、以下の様な構造のHTMLの断片になっています。

成功時

<section class="su-notifierItem su-notifierItem--ok">
  <h1>[title]</h1>
  <p>[body]</p>
</section>

失敗時

<section class="su-notifierItem su-notifierItem--ng">
  <h1>[title]</h1>
  <p>[body]</p>
</section>

上記、[title][body]のところに、任意のテキストを入れ、通知表示が行われます。
これらの要素はposition:fixed等で固定表示されています。
本スケルトンのデモとして読み込んでいるCSSファイルを参考に、見栄えのカスタマイズを行ってください。

3. Notifierのセットアップ

ページ内に通知UIを配置するための要素(デモだと#su-notifier)が存在するタイミングで、以下を実行してください。

window.su_notifier.setup('#su-notifier');

指定されたセレクタの要素を、通知UIを格納するコンテナとし、notifierのセットアップが行われます。

4. 通知の実行

その後、以下のようにnotifierのメソッドを呼ぶことで、通知を行わせることができます。

OK通知

window.su_notifier.notifyOK({
  title: 'タイトル部のテキスト',
  body: 'ボディ部のテキスト'
});

NG通知

window.su_notifier.notifyNG({
  title: 'タイトル部のテキスト',
  body: 'ボディ部のテキスト'
});

上記で渡しているオブジェクトにおいて、bodyは任意です。
指定しなかった場合、body部は表示されません。

より細かい設定方法

見栄えを変更したい場合は、CSSを編集します。