jQuery Mobile多個對話框在一個對話框中

Question

我已經搜索過，沒有找到這樣做的例子。我希望能夠爲jQM打開一個對話框，並讓它在一個對話框內發生的一步一步的過程中進行。我認爲這將需要多個對話框加載到一個對話框中，並不知道這是否可能。我們在jQM中使用Backbone，希望能夠在對話框中爲每個步驟加載下劃線模板。我認爲這將是對話框中的4-5步。

這可能嗎？

謝謝。

Answer 1

這裏是一個例子，使用.show()和.hide()。這裏的技巧是創建幾個div，然後顯示/隱藏它們。

Working Demo

標記

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