jquery 移动对话框 ajaxenabled=false

Question

我正在开发一个 jQuery Mobile 网站，但我们没有使用 AJAX 转换(整个网站都有 $.mobile.ajaxEnabled = false)。

我有一个页面，我希望将其视为对话框，但是，这似乎仅在启用 AJAX 的情况下工作。

有没有人找到一种方法让 jQuery Mobile 将页面视为对话框，而不仅仅是设计一个看起来像对话框的页面？

Answer 1

jQuery Mobile 框架显示文档中找到的第一个 data-role="page" 元素，它会跳过 data-role="dialog" 元素，因此您无法让文档中的第一个伪页面是一个对话框(在初始加载时会跳过对话框)。

但是，您可以手动将伪页面插入 DOM，然后使用 $.mobile.changePage() 将新插入的页面显示为对话框:

//bind a `click` event handler to a link (to open the dialog)
$('#some-link-id').bind('click', function (event) {

    //prevent the default behavior of the link (an href of '#' would try to scroll to the top of the page, we want to prevent that behavior)
    event.preventDefault();

    //now to get the HTML to add to the DOM for the new dialog, for demonstration purposes I set the URL of the AJAX request to the `href` attribute of the link clicked
    $.get(this.href, function (serverResponse) {

        //append the server response to the `body` element, this should be a `data-role="dialog"` element and it's contents
        $('body').append(serverResponse);

        //now that the new dialog is appeneded to the DOM, transition to it using it's ID as a reference
        $.mobile.changePage($('#dialog-id'), { role : 'dialog' });
    });
});

这是一个演示:http://jsfiddle.net/mVdVd/

请注意，serverResponse 预计是一个完整的 HTML 代码块，以 data-role="dialog" 元素(其 ID 为 dialog-id)。