通知 | COMPONENT

通知

ダイアログとは異なり、先へ進むためにユーザーのアクションを要求せずに（ユーザーの行動を遮らずに）何らかのメッセージを出す場合に使用します。例えば、変更が無事完了したことのフィードバックや、システム側で表示になんらかの変更を加えたことを知らせたりする用途があります。

通知を呼び出すトリガとなる要素に.open-alertと、表示したい通知のクラスを指定したdata-targetを追加します。

<a class="open-alert btn" href="javascript:void(0)" data-tgt="al1">Notification: default</a></li>
<a class="open-alert btn" href="javascript:void(0)" data-tgt="al2">Notification: success</a>
<a class="open-alert btn" href="javascript:void(0)" data-tgt="al3">Notification: danger</a>
<a class="open-alert btn" href="javascript:void(0)" data-tgt="al4">Notification: warning</a>
<a class="open-alert btn" href="javascript:void(0)" data-tgt="al5">Notification: info</a>
<a class="open-alert btn" href="javascript:void(0)" data-tgt="al6">Notification: 要close</a>
<a class="open-alert btn" href="javascript:void(0)" data-tgt="al7">Notification: linkあり</a>

トリガとなる要素をクリックした際に通知を呼び出すためのjsを定義します。

$('.open-alert').on('click', function(){
  $.showAlert(this);
});

下部に表示する場合

ユーザーの視線や行動を全く遮らないで、視界の隅で軽いフィードバックを返したい場合に使用します。通知が表示されている間もユーザーは他の操作が可能です。.alertに.alert-bottomを付けます。

#alert_bottom_basic
#alert_bottom_success
#alert_bottom_danger
#alert_bottom_warning
#alert_bottom_info
#alert_bottomClose_basic
#alert_bottomLink_basic

表示する通知を.wrapperの外にマークアップします。

<!-- Notification: default -->
<div class="alert alert-bottom alert-default al1" role="alert">
  <span class="alert-message">バラのためになくした時間が、きみのバラをそんなにもだいじなものにしたんだ。</span>
</div>

<!-- Notification: success -->
<div class="alert alert-bottom alert-success al2" role="alert">
  <span class="alert-message">そんなぐずぐずしないで、いらいらしちゃう。行くってきめたんなら、ほら！</span>
</div>

<!-- Notification: danger -->
<div class="alert alert-bottom alert-danger al3" role="alert">
  <span class="alert-message">星から出るのに、その子はわたり鳥をつかったんだとおもう。</span>
</div>

<!-- Notification: warning -->
<div class="alert alert-bottom alert-warning al4" role="alert">
  <span class="alert-message">まっすぐ前に進んでも、あんまり遠くへは行けない…</span>
</div>

<!-- Notification: info -->
<div class="alert alert-bottom alert-info al5" role="alert">
  <span class="alert-message">それがほんっと、ひどい話なんだ！ この星は年々、まわるのがどんどん早くなるのに、同じことをしなさいって！</span>
</div>

<!-- Notification: 要close -->
<div class="alert alert-bottom alert-default alert-dismissible al6" role="alert">
  <button type="button" class="close" data-hide="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
  <span class="alert-message">いやはや、きみは遠くから来たんだな！ 探検家だ！ さあ、わしに、きみの星のことをしゃべってくれんか。</span>
</div>

<!-- Notification: linkあり -->
<div class="alert alert-bottom alert-default al7" role="alert">
  <span class="alert-message">未来とは、予知しようとするものではなく、自分で可能にするものだ。 -<a href="#" class="alert-link" data-hide="alert" target="_blank">サン=テグジュペリ<span class="icon-abui-outside phx"></span></a></span>
</div>

通知を表示させた後に続けて何か処理を実行したい場合

ユーザーの制御をはさまずに、何か別の処理を即座に処理を実行させたい場合に使用します。下記のボタンをクリックすると、通知が消えた後に当ガイドラインのトップページに遷移します。

#alert_bottom_success_process

$('.open-alert').on('click', function(){
  $.showAlert(this).done(function(){
    〜通知が消えた後に実行したい処理を記述〜
  });
});

中央に表示する場合

ダイアログのように明確にユーザーの行動を求めるわけではありませんが、下部に表示する場合と比べてユーザーの注意を引きたい場合に使用します。通知が表示されている間はコンテツは背景に見ることができますが操作はできません。.alertに.alert-centerを付けます。

#alert_center_basic
#alert_center_success
#alert_center_danger
#alert_center_warning
#alert_center_info
#alert_centerClose_basic
#alert_centerLink_basic

表示する通知を.wrapperの外にマークアップします。

<!-- Notification: default -->
<div class="alert alert-center alert-default al8" role="alert">
  <span class="alert-message">バラのためになくした時間が、きみのバラをそんなにもだいじなものにしたんだ。</span>
</div>

<!-- Notification: success -->
<div class="alert alert-center alert-success al9" role="alert">
  <span class="alert-message">そんなぐずぐずしないで、いらいらしちゃう。行くってきめたんなら、ほら！</span>
</div>

<!-- Notification: danger -->
<div class="alert alert-center alert-danger al10" role="alert">
  <span class="alert-message">星から出るのに、その子はわたり鳥をつかったんだとおもう。</span>
</div>

<!-- Notification: warning -->
<div class="alert alert-center alert-warning al11" role="alert">
  <span class="alert-message">まっすぐ前に進んでも、あんまり遠くへは行けない…</span>
</div>

<!-- Notification: info -->
<div class="alert alert-center alert-info al12" role="alert">
  <span class="alert-message">それがほんっと、ひどい話なんだ！ この星は年々、まわるのがどんどん早くなるのに、同じことをしなさいって！</span>
</div>

<!-- Notification: 要close -->
<div class="alert alert-center alert-default alert-dismissible al13" role="alert">
  <button type="button" class="close" data-hide="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
  <span class="alert-message">いやはや、きみは遠くから来たんだな！ 探検家だ！ さあ、わしに、きみの星のことをしゃべってくれんか。</span>
</div>

<!-- Notification: linkあり -->
<div class="alert alert-center alert-default al14" role="alert">
   <span class="alert-message">未来とは、予知しようとするものではなく、自分で可能にするものだ。 -<a href="#" class="alert-link" data-hide="alert" target="_blank">サン=テグジュペリ<span class="icon-abui-outside phx"></span></a></span>
</div>

上部に固定表示する場合

ウィンドウの上辺とヘッダの間に割り込むように上部に固定して表示します。画面のロード時から表示しておくもので、何かのアクションに対してのフィードバックとしては用いません。例えば重要な更新情報などをユーザーの訪問時に知らせるような場合に用います。.alertに.alert-top-fixedを付けます。

表示する通知を.wrapperの外にマークアップします。

<span class="open-alert hidden" name="default" data-tgt="al16"></span>
<div class="alert alert-top-fixed alert-default al16" role="alert">
  <span class="alert-message">バラのためになくした時間が、きみのバラをそんなにもだいじなものにしたんだ。</span>
</div>

<span class="open-alert hidden" name="success" data-tgt="al17"></span>
<div class="alert alert-top-fixed alert-success al17" role="alert">
  <span class="alert-message">そんなぐずぐずしないで、いらいらしちゃう。行くってきめたんなら、ほら！</span>
</div>

<span class="open-alert hidden" name="danger" data-tgt="al18"></span>
<div class="alert alert-top-fixed alert-danger al18" role="alert">
  <span class="alert-message">星から出るのに、その子はわたり鳥をつかったんだとおもう。</span>
</div>

<span class="open-alert hidden" name="warning" data-tgt="al19"></span>
<div class="alert alert-top-fixed alert-warning al19" role="alert">
  <span class="alert-message">まっすぐ前に進んでも、あんまり遠くへは行けない…</span>
</div>

<span class="open-alert hidden" name="info" data-tgt="al20"></span>
<div class="alert alert-top-fixed alert-info al20" role="alert">
  <span class="alert-message">それがほんっと、ひどい話なんだ！ この星は年々、まわるのがどんどん早くなるのに、同じことをしなさいって！</span>
</div>

<span class="open-alert hidden" name="close" data-tgt="al21"></span>
<div class="alert alert-top-fixed alert-default alert-dismissible al21" role="alert">
  <button type="button" class="close" data-hide="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
  <span class="alert-message">いやはや、きみは遠くから来たんだな！ 探検家だ！ さあ、わしに、きみの星のことをしゃべってくれんか。</span>
</div>

<span class="open-alert hidden" name="link" data-tgt="al22"></span>
<div class="alert alert-top-fixed alert-default al22" role="alert">
   <span class="alert-message">未来とは、予知しようとするものではなく、自分で可能にするものだ。 -<a href="#" class="alert-link" data-hide="alert" target="_blank">サン=テグジュペリ<span class="icon-abui-outside phx"></span></a></span></div>

ロード時に通知を呼び出します。

$(window).on('load',function(){
  $.showAlert('.open-alert');
});