Использование диалоговых окон в JQuery Mobile

Question

Я работаю над приложением JQuery Mobile. Каждый из моих .html-файлов в основном имеет

<div id="myPage" data-role="page"> 
    <!-- My Content --> 
</div> 

На каждой из моих страниц будет несколько связанных с ним диалогов. Из-за этого я подумал, что было бы целесообразно включить эти определения диалогов в тот же .html-файл, что и связанная с ним страница. Тем не менее, все документы JQuery Mobile, которые я вижу, имеют диалоги в своих .html-файлах.

Есть ли способ определить диалог в том же .html-файле, что и обычная страница? Если да, то какой рекомендуемый подход? Я знаю, что JQuery mobile делает некоторые умные вещи с DOM, чтобы заставить его работать так хорошо. Из-за этого, я не уверен, если я делаю:

<div id="myPage" data-role="page"> 
    <!-- My Content --> 

    <div id="myDialog" data-role="page" data-rel="dialog"> 
    <!-- My Dialog Conent --> 
    </div> 
</div> 

ИЛИ

<div id="myPage" data-role="page"> 
    <!-- My Content --> 
</div> 

<div id="myDialog" data-role="page" data-rel="dialog"> 
    <!-- My Dialog Conent --> 
</div> 

Даже тогда, я не знаю, как открыть диалоговое окно программно. Я здесь отсюда?

Answer 1

Да, вы можете включить диалоги на той же странице. например

<div data-role="page"> 
     <div id="content" data-role="content"> 
      <a href="#dialog1" id="some-dialog" data-rel="dialog" data-role="button">Open Dialog</a> 
     </div> 
    </div> 

Dialog Markup:

<div data-role="dialog" id="dialog1" class="app-dialog"> 
     <div data-role="header"> 
      <h3>A dialog</h3> 
     </div> 
      <div id="content" data-role="content"> 
        <p>I am a dialog....!</p> 
     </div> 
    </div> 

Для получения дополнительной информации посетите http://jquerymobile.com/demos/1.0a4.1/docs/pages/docs-pages.html.

Answer 2

Для перехода «поп» вы добавляете data-transition = «pop» к ссылке, используемой для вызова диалога. F.E.

<a href="#dialog1" data-icon="info" data-rel="dialog" data-transition="pop">Help</a>