[JS]アラート・ダイアログボックスの実装が簡単にできるスクリプト -Apprise

サイト構築 -JavaScript

Post on:2011年4月19日

sponsors

デザイン効率化の新常識！Illustratorの生成塗りつぶし（シェイプ）の活用テクニック Adobe Firefly Camp 2024年11月22日金曜日開催 20時から21時

アラートボックスやダイアログボックスのスタイル、コンテンツ、ポジション、機能性を簡単にコントロールできるシンプルで軽量なjQueryのプラグインを紹介します。

Apprise - The attractive alert alternative for jQuery
デモ

[ad#ad-2]

デモではさまざまなタイプのアラートボックスやダイアログボックスが試せます。

apprise('Hello');
通常のアラートボックス

apprise('Hello?', {'confirm':true});
通常のコンファームボックス

apprise('Hello', {'animate':true});
アニメーション表示のアラートボックス

サイトでは他にも多くのデモがあります。

Appriseの対応ブラウザ

テスト済みのブラウザは、下記の通りです。

Chrome 8.0+
Firefox 3.0+
Safari 4.0+
Internet Explorer 9.0

Appriseの実装

外部ファイル

スクリプト「jquery.js」「apprise.js」とスタイルシートを外部ファイルとして指定します。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/apprise.js"></script>
<link rel="stylesheet" href="css/apprise.css" type="text/css" />

[ad#ad-2]

HTML

「apprise();」に表示するテキストやオプションを記述します。

<a href="http://google.com" onclick="apprise('You are now leaving our site');">Leave the site</a>

JavaScript: Callback

コールバックは下記のように設定します。

$(document).ready(function(){
	apprise('Ready to begin?', {'verify':true}, function(r){
		if(r){
// user clicked 'Yes'
			...
		}else{
// user clicked 'No'
			...
		}
	});
});

スクリプトのオプション

ボックスは通常のアラートボックスをはじめ、コンファーム、ベリファイ、インプット、アニメーションが簡単に設定できます。

{
'confirm' : false, // Ok and Cancel buttons
'verify' : false, // Yes and No buttons
'input' : false, // Returns with user inputed text
'animate' : false // Groovy animation (can be true or number, default is 400)
}