jQuery Mobile, открытый диалог - PullRequest
Новая
       7

jQuery Mobile, открытый диалог

3 голосов
/ 04 марта 2012

У меня проблема с переходами jQuery Mobile.

Не могу создать эффект перехода.

Вот мой код ... 

    <div id="main" data-role="content" data-theme="d">
<a href="#dialog" data-role="button" data-rel="dialog" data-transition="fade" data-inline="true">dialog</a>
<!-- ... -->
<div data-role="page" id="dialog"><!-- dialog-->
    <div data-role="header" data-theme="e">
        <h1>Foo</h1>
        </div>
    <div data-role="content" data-theme="e">
        <p>Bar</p>
    </div>
</div>
<!-- Footer -->
jQuery('#page').live('pageinit', function() {
    $('.widget ul').attr('data-inset', 'true').attr('data-theme', 'd').attr('data-dividertheme', 'b').attr('data-role', 'listview');
    $('.widget ul').listview();
});
jQuery('#page').live('changepage', function() {
$('#dialog', 'pop', true, true);
});

Спасибо за вашу помощь.

С уважением,

V.

Ответы [ 2 ]

6 голосов
/ 04 марта 2012

В элементе data-role = "page" необходимо добавить data-rel = "dialog" вместо "id", чтобы страница отображалась в виде диалога.

Смотрите здесь: http://jquerymobile.com/test/docs/pages/page-dialogs.html

1 голос
/ 04 марта 2012 
jQuery(document).delegate('#page', 'pageinit', function() {
    $('.widget ul').attr('data-inset', 'true').attr('data-theme', 'd').attr('data-dividertheme', 'b').attr('data-role', 'listview').listview();
}).delegate('#page', 'changepage', function() {
    $.mobile.changePage('#dialog', {
        transition : 'pop',
        role       : 'dialog'//this means you don't have to declare `data-role="dialog"` on the page if you don't want to
    });
});

Обратите внимание, что я приковал цепью вызов функции .listview() и второй вызов функции .delegate(). Я также заменил .live() на .delegate(), поскольку с jQuery 1.7 .live() амортизируется. Для перехода на страницу вы используете $.mobile.changePage(): http://jquerymobile.com/demos/1.1.0-rc.1/docs/api/methods.html

...