一个对话框中的jQuery Mobile多个对话框 [英] jQuery Mobile Multiple Dialog Boxes in One Dialog

问题描述

我已经搜索并且没有找到执行此操作的示例.我希望能够为jQM打开一个对话框，并将其放置在一个对话框中进行逐步操作的位置.我想这将需要将多个对话框加载到一个对话框中，并且不知道是否可能.我们正在将Backbone与jQM结合使用，并希望能够在对话框的每个步骤中加载下划线模板.我想这将是对话框中的4-5个步骤.

I have searched and have not found example of doing this. I want to be able to have a dialog box open for jQM and have it where there is a step by step process that takes place inside of one dialog box. I am figuring this would require multiple dialog boxes loading into one dialog box and don't know if this is possible. We are using Backbone with jQM and want to be able to load the underscore templates in the dialog box for each step of the way. I am figuring it would be 4-5 steps in the dialog box.

这可能吗?

谢谢.

推荐答案

以下是使用.show()和.hide()的示例.这里的窍门是创建多个div，然后显示/隐藏它们.

Here is an example, using .show() and .hide(). The trick here is to create several divs, and then show/hide them.

工作演示

标记

<div data-role="dialog" id="dialog">
 <div data-role="header" data-theme="d">
  <h1>Dialog</h1>
 </div>

<!-- First Page -->
 <div data-role="content" id="page1">
  <h3>Page 1</h3>
  <p>Text for #page1</p>
  <div class="ui-grid-a">
   <div class="ui-block-a">
    <a href="#" data-role="button" data-theme="b" class="prev">Previous</a>
   </div>
   <div class="ui-block-b">
    <a href="#" data-role="button" data-theme="e" class="next">Next</a>
   </div>
  </div>
 </div>

<!-- Second Page -->

<div data-role="content" id="page2">
  <h3>Page 2</h3>
  <p>Text for #page2</p>
  <div class="ui-grid-a">
   <div class="ui-block-a">
    <a href="#" data-role="button" data-theme="b" class="prev">Previous</a>
   </div>
   <div class="ui-block-b">
    <a href="#" data-role="button" data-theme="e" class="next">Next</a>
   </div>
  </div>
 </div>

<!-- Third Page -->
<div data-role="content" id="page3">
  <h3>Page 3</h3>
  <p>Text for #page3</p>
  <div class="ui-grid-a">
   <div class="ui-block-a">
    <a href="#" data-role="button" data-theme="b" class="prev">Previous</a>
   </div>
   <div class="ui-block-b">
    <a href="#" data-role="button" data-theme="e" class="next">Next</a>
   </div>
  </div>
 </div>

</div>

代码

// hide previous button, #page2 and #page3 once opened
$('#dialog').find('#page1 a.prev').hide();
$('#page2, #page3').hide();

// #page1 to #page2
$('#page1 a.next').on('click', function () {
 $('#page1').hide();
 $('#page2').show();
});

// #page2 to #page3
$('#page2 a.next').on('click', function () {
 $('#page1, #page2').hide();
 $('#page3').show();
 $('#dialog').find('#page3 a.next').hide();
});

// #page2 to #page1
$('#page2 a.prev').on('click', function () {
 $('#page2').hide();
 $('#page1').show();
});

// #page3 to #page2
$('#page3 a.prev').on('click', function () {
 $('#page2, #page3').hide();
 $('#page2').show();
});

这篇关于一个对话框中的jQuery Mobile多个对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！