THE HAM MEDIA BLOG

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

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery plugin紹介
タグ:
アラート
ダイアログ
javascript
jquery
plugin

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

どうしても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。以上4つを読み込む。

■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行目までをコメントアウトしておきます。

jQuery Alert Dialogs

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

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

$("#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>', 'カスタムダイアログ1');
});

■プレビュー

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

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

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

■スクリプト

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

今回はクリックしたところのIDの値を$.alerts.dialogClassに代入して、ダイアログのclassと設定するものになっています。ダイアログの最後にそのclassが取り外されるような設定が※2の部分です。こうすることによって、下記のような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;
}

■プレビュー

基本は#popup_containerで、その後ろに、設定したclassをつけることでCSSを適応させられるようになっている。

このカスタマイズによっては、表示させるアイコンをかえたり、背景を変えたり、色を変えたり、ボーダーを変更することだって可能である。かなり自由度が高いところはとても便利だ!

以上、jQuery Alert Dialogsの使い方でした。

この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/117267913
※ブログオーナーが承認したトラックバックのみ表示されます。

この記事へのトラックバック

トップに戻る

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。