關於使用jQuery Mobile App登錄安全問題的對話框

Question

我目前正在尋找更好的方法來執行此操作。我必須爲我正在使用的這個應用程序創建一系列基於風險的安全對話彈出窗口。我有用simpledialog2設置的對話框，但我知道可能有更好的方法，也許只有一個對話框的內容動態變化？此外，對於這些單獨的對話框，我有設置最後一個對話框關閉的問題，它也會關閉下一個對話框。如果任何人有一個好主意，在這種情況下什麼是最好的，我非常感謝幫助。我花了幾天的時間研究這個問題並沒有發現什麼。謝謝！

下面是代碼：

$(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>" 
      }); 
     }); 

Answer 1

在回答關閉問題，你需要調用方法來關閉當前對話框。最簡單的方法是使用$.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