我已经搜索过,但没有找到这样做的例子。我希望能够为 jQM 打开一个对话框,并在一个对话框内进行逐步过程。我认为这需要将多个对话框加载到一个对话框中,并且不知道这是否可行。我们将 Backbone 与 jQM 结合使用,并希望能够在对话框中为每一步加载下划线模板。我认为对话框中需要 4-5 个步骤。
这可能吗?
谢谢。
这是一个例子,使用.show()
and .hide()
。这里的技巧是创建几个 div,然后显示/隐藏它们。
工作演示
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();
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)