こんにちは。
職人見習いの高嶋です。

以前案件で利用したjqueryプラグインをメジャーマイナー関わらず報告していきます。

  1. jquery.alerts.js

ダウンロード：jQuery Alert Dialogs (Alert, Confirm, & Prompt Replacements)

javascriptの標準関数でもalert()やconfirm()はありますが、見た目があまり良くないです。
さらに、iPadやiPhone用となると、ブラウザがSafariとなりますので、ダイアログのタイトルにファイル名が表示されてしまいます。
そこでこのプラグインを利用しました。

HTMLのHEADERタグ内に以下の記述をします。

○アラートを表示する

jAlert('アラートに表示する内容', 'アラートのタイトル', function(r) {確認後の処理});

○確認ダイアログを表示する

jConfirm('確認の内容', '確認のタイトル', function(r) {確認後の処理});

○入力プロンプトを表示する

jPrompt('入力メッセージ', '初期値', '入力プロンプトタイトル', function(r) {入力後の処理});

詳しい利用方法は他サイトでも掲載されているので、そちらを確認した方が分かりやすいですが、ここでは2点、大切な事を記載します。

1．javascriptのalert()やconfirm()と同じ感覚で使用するとうまくいかない

javascriptの標準関数alert()やconfirm()は、プログラム処理がその行に達した際、アラートや確認ダイアログを表示した後、処理がそこで止まります。
そして『OK』などのボタンを押すとその後の処理が再度走るのですが、このプラグインのjAlertなりjConfirmは、ダイアログ表示後もそれ以降の処理が走り続けます。
ですので、ユーザがボタン押下によって実行したい処理などは必ずfunction(r){}内に記述すると共に、その処理の前に実行されては困る処理を上記ブロック外に書いてはいけないという事です。
いわゆるajaxなどの非同期通信時の記述と同じ感覚です。

2．プラグインの改造により自由度が広がる

プラグインのソースも難しいものではありませんので、感覚的に以下のような改造も可能です。

  • 『OK』や『Cancel』などのボタン文言を変更
  • 『OK』の1択、『OK』『Cancel』の2択以外に、3択以上のボタンが存在する確認ダイアログの作成

先に述べた、jAlertやjConfirm関数実行直後も、それ以下に記述された処理が走り続けるという
部分さえ慣れれば大変便利なプラグインです。

※この記事は、なかの人（piro556）が書いています。