jQueryとjQuery UIを使った文字入力ダイアログ

JavaScriptの文字入力ダイアログ(prompt();)は、ちょっと何かを入力してもらうUIを作るときには、とても便利な機能ですが、もっとカッコ良いダイアログを表示したい。ダイアログにタイトルを付けたいと思った時に、ちょいと機能不足ですね。
そこで、jQueryとjQuery UIを使って作った、文字入力ダイアログをご紹介いたします。
1.準備編
ライブラリの読み込みや表示するためのHTMLの準備については、こちらをご確認ください。
2.文字入力ダイアログの呼び出し
ここで、文字入力ダイアログがどうなっているのか、確認してみましょう。
// 文字入力ダイアログの表示 function ShowInputDialog() { var ret; ret = prompt("これは文字入力ダイアログです。入力した文字が表示されます。", "初期入力されている文字列です"); if (ret==null) { alert("キャンセルボタンがクリックされました"); } else { alert("入力された文字は「" + ret + "」です。"); } }
はい、とてもシンプルです。promptを呼び出して、入力された文字列を戻り値として処理をしています。キャンセルがクリックされるとnullが返ってくるので、nullをキーにして分岐することでメッセージを変える処理を入れています。
それでは、これをjQuery UIで実現するにはどのように書けば良いのでしょうか。
// 文字入力ダイアログの表示(JQuery) 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( "キャンセルがクリックされました" ); } } }); }
テキストボックスを7行目のcomment部分の記載できてしまうのが、ポイントですね。入力力結果を表示するために、メッセージのみを表示するダイアログを利用しています。このソースコードはこちらで説明しているので、見ていない方はご確認くださいな。
ということで、サンプルのソースコードをこちらにアップロードしましたので、興味がある方はご活用ください。
コメントはまだありません。