0

私は現在、これを行うためのより良い方法を探しています。作業中のこのアプリケーションで、リスクベースのセキュリティのために一連のダイアログ ポップアップを作成する必要があります。simpledialog2 でダイアログを設定しましたが、もっと良い方法があるかもしれません。おそらく、コンテンツが動的に変化するダイアログは 1 つだけですか? また、これらの個別のダイアログでは、最後のダイアログを閉じるように設定するという問題があり、次のダイアログも閉じます。この状況で何が最善かを誰かがよく知っているなら、助けていただければ幸いです。調査に数日を費やしましたが、この件については何も見つかりませんでした。ありがとうございました！

コードは次のとおりです。

$(document).delegate('#security-questions', 'click', function() {
            $('<div>').simpledialog2({
              mode: 'blank',
              headerText: 'Security Questions',
              headerClose: true,
              blankContent : 
                "<div class='question-content'><p>Please choose 5 of the following security questions and provide answers:</p><div data-role='fieldcontain'><select name='question-one-select' id='question-one-select'><option value='None'>Please choose a question:</option><option value='1'>What is your favorite pizza topping?</option><option value='2'>Who is the person you admire the most?</option><option value='3'>Who is your favorite actor, actress or celebrity?</option><option value='4'>What is your favorite television show?</option><option value='5'>What is the name of the first person you were romantically interested in?</option></select></div><div id='firstq-div' data-role='fieldcontain'><input type='text' name='question-one' id='question-one' placeholder='Answer' /></div><a href='#' id='second-question' data-role='button' data-rel='dialog'>Next</a></div>"
            });
        });

        $(document).delegate('#second-question', 'click', function() {
            $('<div>').simpledialog2({
              mode: 'blank',
              headerText: 'Question 2',
              headerClose: true,
              blankContent : 
                "<div class='question-content'><div data-role='fieldcontain'><select name='question-two-select' id='question-two-select'><option value='None'>Please choose a question:</option><option value='1'>What is your favorite pizza topping?</option><option value='2'>Who is the person you admire the most?</option><option value='3'>Who is your favorite actor, actress or celebrity?</option><option value='4'>What is your favorite television show?</option><option value='5'>What is the name of the first person you were romantically interested in?</option></select></div><div id='secondq-div' data-role='fieldcontain'><input type='text' name='question-two' id='question-two' placeholder='Answer' /></div><a href='#' id='third-question' data-role='button' data-rel='dialog'>Next</a></div>"
            });
        });

        $(document).delegate('#third-question', 'click', function() {
            $('<div>').simpledialog2({
              mode: 'blank',
              headerText: 'Question 3',
              headerClose: true,
              blankContent : 
                "<div class='question-content'><div data-role='fieldcontain'><select name='question-three-select' id='question-three-select'><option value='None'>Please choose a question:</option><option value='1'>What is your favorite pizza topping?</option><option value='2'>Who is the person you admire the most?</option><option value='3'>Who is your favorite actor, actress or celebrity?</option><option value='4'>What is your favorite television show?</option><option value='5'>What is the name of the first person you were romantically interested in?</option></select></div><div id='thirdq-div' data-role='fieldcontain'><input type='text' name='question-three' id='question-three' placeholder='Answer' /></div><a href='#' id='fourth-question' data-role='button' data-rel='dialog'>Next</a></div>"
            });
        });

        $(document).delegate('#fourth-question', 'click', function() {
            $('<div>').simpledialog2({
              mode: 'blank',
              headerText: 'Question 4',
              headerClose: true,
              blankContent : 
                "<div class='question-content'><div data-role='fieldcontain'><select name='question-four-select' id='question-four-select'><option value='None'>Please choose a question:</option><option value='1'>What is your favorite pizza topping?</option><option value='2'>Who is the person you admire the most?</option><option value='3'>Who is your favorite actor, actress or celebrity?</option><option value='4'>What is your favorite television show?</option><option value='5'>What is the name of the first person you were romantically interested in?</option></select></div><div id='fourthq-div' data-role='fieldcontain'><input type='text' name='question-four' id='question-four' placeholder='Answer' /></div><a href='#' id='fifth-question' data-role='button' data-rel='dialog'>Next</a></div>"
            });
        });

        $(document).delegate('#fifth-question', 'click', function() {
            $('<div>').simpledialog2({
              mode: 'blank',
              headerText: 'Question 5',
              headerClose: true,
              blankContent : 
                "<div class='question-content'><div data-role='fieldcontain'><select name='question-five-select' id='question-five-select'><option value='None'>Please choose a question:</option><option value='1'>What is your favorite pizza topping?</option><option value='2'>Who is the person you admire the most?</option><option value='3'>Who is your favorite actor, actress or celebrity?</option><option value='4'>What is your favorite television show?</option><option value='5'>What is the name of the first person you were romantically interested in?</option></select></div><div id='fifthq-div' data-role='fieldcontain'><input type='text' name='question-five' id='question-five' placeholder='Answer' /></div><a href='#' id='finish-question' data-role='button' data-rel='dialog'>Done</a></div>"
            });
        });
4

1 に答える 1

0

閉じる問題に対応するには、メソッドを呼び出して現在のダイアログを閉じる必要があります。これを行う最も簡単な方法は、 でグローバル データポイントを使用すること$.mobileです。後続のダイアログを開くハンドラの開始時に、次のダイアログを開く前に現在のダイアログを閉じます。

簡略化されたコード サンプル:

$( '#dialog2' ).click( function(){
  // close the current dialog
  $.mobile.sdCurrentDialog.close();

  // open the next one
  $('<div>').simpledialog2( {...} );
});

現在のコンテンツを置き換えるには、updateBlank() メソッドのみを使用するようにハンドラーを変更します。

$( '#dialog2' ).click( function(){
  // update the contents in the current blank-mode dialog
  $.mobile.sdCurrentDialog.updateBlank( '<p>The next question</p>...' );
});

これはすべて、ドキュメントの3ページ目に明確に文書化されています。simpledialog2 のホームページに移動します。ここにアクセスするには、メイン メニューのリンクをクリックするだけMethods, Events and Dataです: http://dev.jtsage.com/jQM-SimpleDialog/demos2/event.html

于 2012-05-22T08:53:04.867 に答える