Использование диалогов в JQuery Mobile - PullRequest
Новая
       4

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

2 голосов
/ 15 марта 2012

Я работаю над приложением 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>

OR 

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

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

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

Ответы [ 2 ]

5 голосов
/ 15 марта 2012

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

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

Разметка диалога: 

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

1 голос
/ 06 ноября 2012

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

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