带有ajaxenabled = false的jquery移动对话框 [英] jquery mobile dialog with ajaxenabled=false

问题描述

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

I'm working on a jQuery Mobile site but we're not using the AJAX transitions (we have $.mobile.ajaxEnabled = false for the entire site).

我有一个页面，我希望被视为对话框，但这似乎只适用于启用AJAX。

I have a page that I would like to be treated like a dialog however, this only appears to work with AJAX enabled.

有没有人找到一种方法让jQuery Mobile以这种方式处理像对话框一样的页面而不仅仅是设计一个看起来像对话框的页面？

Has anyone found a way to get jQuery Mobile to treat a page like a dialog in this way short of just designing a page that looks like a dialog?

推荐答案

jQuery Mobile框架显示文档中找到的第一个 data-role =page元素，它跳过 data-role =dialog元素，因此您不能让文档中的第一个伪页面成为对话框（初始加载时会跳过对话框）。

The jQuery Mobile framework displays the first data-role="page" element found in the document, it skips data-role="dialog" elements so you cannot let the first pseudo-page in a document be a dialog (dialogs are skipped on the initial load).

然而，您可以手动将伪页面插入DOM，然后使用 $ .mobile.changePage（）将新插入的页面显示为对话框：

You can however insert a pseudo-page into the DOM manually and then use $.mobile.changePage() to show the newly inserted page as a dialog:

//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为对话框-id ）。

Note that serverResponse is expected to be a fully formed HTML code-block that starts with a data-role="dialog" element (that has the Id of dialog-id).

这篇关于带有ajaxenabled = false的jquery移动对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！