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

查看：21
本文介绍了jQuery Mobile 一个对话框中的多个对话框的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我已经搜索过，但没有找到这样做的例子.我希望能够为 jQM 打开一个对话框，并将它放在一个对话框内发生的分步过程中.我认为这需要将多个对话框加载到一个对话框中，但不知道这是否可行.我们正在使用带有 jQ​​M 的 Backbone，并且希望能够在对话框中为每一步加载下划线模板.我想这将是对话框中的 4-5 个步骤.

这可能吗?

谢谢.

解决方案

这里是一个例子，使用 .show() 和 .hide().这里的技巧是创建几个 div，然后显示/隐藏它们.

工作演示

标记

<div data-role="header" data-theme="d"><h1>对话框</h1>
<!--首页--><div data-role="content" id="page1"><h3>第1页</h3><p>#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 class="ui-block-b"><a href="#" data-role="button" data-theme="e" class="next">Next</a>

<!-- 第二页--><div data-role="content" id="page2"><h3>第2页</h3><p>#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 class="ui-block-b"><a href="#" data-role="button" data-theme="e" class="next">Next</a>

<!-- 第三页--><div data-role="content" id="page3"><h3>第3页</h3><p>#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 class="ui-block-b"><a href="#" data-role="button" data-theme="e" class="next">Next</a>

代码

//打开后隐藏上一个按钮，#page2 和 #page3$('#dialog').find('#page1 a.prev').hide();$('#page2, #page3').hide();//#page1 到 #page2$('#page1 a.next').on('click', function () {$('#page1').hide();$('#page2').show();});//#page2 到 #page3$('#page2 a.next').on('click', function () {$('#page1, #page2').hide();$('#page3').show();$('#dialog').find('#page3 a.next').hide();});//#page2 到 #page1$('#page2 a.prev').on('click', function () {$('#page2').hide();$('#page1').show();});//#page3 到 #page2$('#page3 a.prev').on('click', function () {$('#page2, #page3').hide();$('#page2').show();});

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.

Is this possible?

Thank you.

解决方案

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

Working Demo

Markup

<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>

Code

// 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屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆