[JS]スクリプト初心者でも簡単にカスタマイズできる、通知パネルをアニメーションで表示するスクリプト -noty

設置が簡単でカスタマイズも簡単にできる、ページの上部・下部・中央・角からアニメーションで通知パネルを表示・非表示するjQueryのプラグインを紹介します。

サイトのキャプチャ

noty

notyのデモ

デモではnotyのさまざまな通知パネルを楽しむことができます。
下記は全てアラートパネルですが、他にもError, Success, Confirmが用意されています。

デモのキャプチャ

デモ:Top, Alert

ページ上部からアラートのパネルを表示します。
キャプチャだと分かりにくいので、モーダルモードで。

デモのキャプチャ

デモ:Top, Alert

パネルの表示時はモーダルレイヤーを表示することもできます。
以下、モーダルモードで。

デモのキャプチャ

デモ:Bottom, Alert

ページの下部からアラートのパネルを表示。

デモのキャプチャ

デモ:Center, Alert

ページの中央からアラートのパネルを表示。

デモのキャプチャ

デモ:Left Corner, Alert

ページの左角からアラートのパネルを表示、右角からも可能です。

notyの使い方

notyの実装方法を紹介します。

外部ファイル

jquery.js」と当スクリプトを外部ファイルとして記述し、あらかじめ用意されたスタイルシートファイルも外部ファイルとして記述します。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.noty.js"></script>

<link rel="stylesheet" type="text/css" href="css/jquery.noty.css"/>

JavaScript: パネルの設置

通知パネルはJavaScriptで設置します。
下記は最初のデモのアラートパネルの実装例です。

$('.ex1.alert').click(function() {
  noty({text: 'noty - a jquery notification library!'});
});

JavaScript初心者や苦手な人でも簡単にカスタマイズできるようツールも用意されています。

サイトのキャプチャ

Noty Creator

各項目を設定し「Get Code」をクリックすると、必要なコードが生成されます。

スクリプトのオプション

スクリプトのオプションでは、パネルの種類・配置、テキストの内容・背理、アニメーションの調整など、さまざまな設定が簡単にできます。

text
テキスト
textAlign
テキストの配置
layout
パネルの配置
type
パネルの種類
modal
モーダルの有無
speed
開閉時のアニメーションのスピード
timeout
非表示の時間
closable
クローズボタンの有無

また、パネルの表示・非表示時にコールバック関数も用意されています。

top of page

©2017 coliss