初心者向け講座早見表
前回に引き続き、jQueryを使ったダイアログボックスについてご紹介いたします。
前回ご紹介しました警告や確認のように、ユーザーへのメッセージを主にしたダイアログボックスもありますが、ユーザーに対して、何か情報を入力してもらうためのダイアログボックスが必要になる事もあると思います。
今回ご紹介するダイアログボックスはこちらにサンプルソースコードをアップロードしてありますので、本コラムと合わせてご確認ください。
◆準備
もし、読んでいない方は前回のコラムにてご紹介しました、「◆準備」と「▼表示する場所の指定」をご確認ください。
◆ダイアログボックスの表示
今回のサンプルでは、文字入力ダイアログについて通常のJavaScriptを使って表示する場合との動きの違いを比較表示しています。
▼jQueryを使った文字入力ダイアログ
基本的には、前回のコラムでご紹介しましたダイアログボックスと変わりはありませんが、警告ダイアログや確認ダイアログで記載していたコメント部分にフォームタグを記述して、ダイアログの中に文字入力機能を盛り込んでいます。以下のソースコードの6行目がポイントになります。
以下が確認ダイアログのサンプルソースコードになります。
function ShowJQueryInputDialog() {
var strTitle = "文字入力ダイアログ";
var strComment = "これは文字入力ダイアログです。";
// ダイアログのメッセージとタイトルを設定
$( "#show_dialog" ).html( '<p>' + strComment + '</p><input type="text" name="inputtxt" id="inputtxt" value="初期入力されている文字列です" />' );
// ダイアログを作成
$( "#show_dialog" ).dialog({
modal: true,
title: strTitle,
buttons: {
"OK": function() {
$( this ).dialog( "close" );
ShowJQueryMessageDialog("入力された文字は「" + $( "#inputtxt" ).val() + "」です。");
},
"キャンセル": function() {
$( this ).dialog( "close" );
ShowJQueryMessageDialog( "キャンセルがクリックされました" );
}
}
});
}
今回は、1行入力のフォームタグを使って単純な文字入力のみをご紹介していますが、このコメント部分に他のフォームタグを設定することによって、ダイアログの機能を増やすことが可能です。皆さんのWebサイトの要件に合わせてこのダイアログを応用してみてはいかがでしょうか。
本コラムが、読者の皆さんの日々の業務に役立てば幸いです。
（担当：小口 真己）
