하나의 대화 상자에 jQuery Mobile의 여러 대화 상자가 있습니다.

Question

나는이를 수행 한 예를 찾아서 찾지 못했습니다. jQM을 위해 대화 상자를 열어서 한 대화 상자 내에서 수행되는 단계별 프로세스가있는 곳에두고 싶습니다. 하나의 대화 상자로로드되는 여러 대화 상자가 필요하고 이것이 가능한지 여부를 알지 못한다는 것을 알았습니다. 우리는 백본을 jQM과 함께 사용하고 있으며 각 단계마다 대화 상자에 밑줄 템플릿을로드 할 수 있기를 원합니다. 대화 상자에서 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(); 
});