0

我目前正在寻找一种更好的方法来做到这一点。我必须在我正在使用的这个应用程序上创建一系列基于风险的安全性对话框弹出窗口。我用 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>"
            });
        });
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 回答