ダイアログボックスを美しくみせる「jQuery Alert Dialogs」を使ってみる

2009/04/10

カテゴリ：: jQuery plugin紹介

タグ：: jquery; javascript; ダイアログ; アラート; plugin

どうしてもOSに依存してしまうアラートボックスやダイアログボックス。しかし、それをきれいに見せてくれる「jQuery Alert Dialogs」というのがある。仕事で、ダイアログボックスを変えたいとの要望があったようで、これを使ってみることにしたので、メモ代わりにエントリー。

基本的な使い方

基本的にカスタマイズ無しで使う場合は以下のように設定をして利用する。

■JSを読み込む

<link href="css/jquery.alerts.css" rel="stylesheet"
	 type="text/css" media="screen" />
<script type="text/javascript"
	 src="js/jquery.js"></script>
<script type="text/javascript"
	 src="js/jquery.ui.draggable.js"></script>
<script type="text/javascript"
	 src="js/jquery.alerts.js"></script>

jQueryとjQueryUIのドラッグを可能にする部分、それとアラート本体。また、アラートダイアログのCSS。以上４つを読み込む。

■script

$("#alert").click(function() {
	jAlert('アラート内のテキスト', 'アラートのタイトル');
});
$("#confirm").click(function() {
	jConfirm('確認ダイアログ', '確認ダイアログのタイトル',function(r) {
		if(r==true){jAlert('OKをクリックしました。', '確認ダイアログ分岐後');}
		else{jAlert('Cancelをクリックしました。', '確認ダイアログ分岐後');}
	});
});
$("#prompt").click(function() {
	jPrompt('入力ダイアログ', '入力初期値', '入力ダイアログのタイトル',function(r) {
    if(r){jAlert('入力した内容は「' + r +'」です')};
});

具体的な内容については、後ほど書いておきます。

■プレビュー

それぞれ上記のスクリプトが動作するように設定されています。

ドラッグ機能を停止

上記のサンプルでもすでにドラッグ機能は動作していません。必要でない場合は、止めておくのがいいでしょう。UIを読み込まなければいいだけなんでしょうけど、それだとエラー表示がでてしまっていたので、jquery.alerts.jsの152行目から158行目までをコメントアウトしておきます。

アラートダイアログの設定

基本的な使い方をみてもらったところで、設定の仕方を書いておきます。

$("#alert").click(function() {
	jAlert('アラート内のテキスト', 'アラートのタイトル');
});

この例でいうと、クリックした時に動作させます。jAlert()でアラートを呼び出すのですが、その括弧の中は、左側がアラート内のテキストになり、右側の二つ目が、でてくるアラートボックスのタイトルになります。タイトルは省略できます。タイトルの後に、アラート後の機能を入れることも可能です。

確認ダイアログの設定

続いて、OKとCancelが選べる確認などで用いられるダイアログ。

$("#confirm").click(function() {
	jConfirm('確認ダイアログ', '確認ダイアログのタイトル',function(r) {
		if(r==true){jAlert('OKをクリックしました。', '確認ダイアログ分岐後');}
		else{jAlert('Cancelをクリックしました。', '確認ダイアログ分岐後');}
	});
});

サンプルではそれぞれ押したら、条件分岐が起きて押した後の処理をするようになっています。今回はわかりやすい分岐で書いてみました。jConfirm()を使うのですが、その中の設定はアラートと同じです。

入力ダイアログの設定

$("#prompt").click(function() {
	jPrompt('入力ダイアログ', '入力初期値', '入力ダイアログのタイトル',function(r) {
    if(r){jAlert('入力した内容は「' + r +'」です')};
});

最後に入力ダイアログ。文字が入力できる部分がついているダイアログで、パスワード入力などはこういうのがでてきますよね。jPrompt()で呼び出し、中の設定はこれもアラートと同じになっています。入力後にOKを押した場合の処理は、入力内容をそのまま表示するものをサンプルにしましたが、設定した値と同じかどうかというチェックに使うことも可能かと思います。ただ、JavaScriptでパスチェックとかをやるのはセキュリティー的によくないような…やめておきましょう。

HTMLタグも設定可能

ダイアログないのメッセージはHTMLタグで書くことも可能だ。

■メッセージをHTMLで書いたサンプル

$("#custom0").click( function() {
  jAlert('<strong>HTMLタグ</strong>の入力も<span style="color:red;">可能</span>', 'カスタムダイアログ１');
});

■プレビュー

ちなみにメッセージ部分だけで、タイトル部分では使えない。

ダイアログのスタイルカスタマイズ

このダイアログ、デフォルトでは先ほどまでの例のような表示になるが、CSSで変更可能なのである。

■スクリプト

$("#custom1").click( function() {
	$.alerts.dialogClass = $(this).attr('id'); //※１
	jAlert('メッセージ', 'タイトル', function() {
		$.alerts.dialogClass = null; //※２
	});
});

今回はクリックしたところのIDの値を$.alerts.dialogClassに代入して、ダイアログのclassと設定するものになっています。ダイアログの最後にそのclassが取り外されるような設定が※２の部分です。こうすることによって、下記のようなCSSがダイアログに適応されるようになります。

■カスタマイズ例CSS

/*ダイアログ全体*/
#popup_container.custom1 {
	font-family: Georgia, serif;
	color: #A4C6E2;
	background: #005294;
	border-color: #113F66;
}
/*タイトル部分*/
#popup_container.custom1 #popup_title {
	color: #FFF;
	font-weight: normal;
	text-align: left;
	background: #76A5CC;
	border: solid 1px #005294;
	padding-left: 1em;
}
/*タイトルより下の部分*/
#popup_container.custom1 #popup_content {
	background: none;
}
/*メッセージ部分*/
#popup_container.custom1 #popup_message {
	padding-left: 0em;
}
/*ボタン部分*/
#popup_container.custom1 INPUT[type='button'] {
	border: outset 2px #76A5CC;
	color: #A4C6E2;
	background: #3778AE;
}