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

サイト構築 -JavaScript

Post on:2012年2月15日

notyのデモ

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

デモ：Top, Alert

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

デモ：Top, Alert

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

デモ：Bottom, Alert

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

デモ：Center, Alert

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

[ad#ad-2]

デモ：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: クローズボタンの有無

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

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

notyのデモ