Question

我正在将一些外部html加载到jquery移动应用程序中的div中。一切正常，但我试图让它更平滑一点。

这是我的代码：

$(document).bind('pagebeforecreate', function (event, ui) {
    if (event.target.id == 'pageViewOrder') {
        //get the page
        $.getJSON(root_url + '/orders/view/' + window.viewOrderReference + '/?callback=?', null, function (d) {
            $("#viewOrder_content").html(d.html).trigger("create");
            $.mobile.loading('hide');
        });
    }

正在进行的是在ajax调用结束之前显示的页面。有没有办法在此调用结束之前暂停jquery mobile继续显示页面？目前它显示页面，然后内容弹出。

编辑：这是以单页加载

干杯，本

Answer 1

暂停显示过程非常简单，只需拨打event.preventDefault()即可。问题是确保在检索内容后您将使用该过程。我实际上要做的是绑定到pagechange，检查是否已经检索了数据，如果没有，则中断进程，检索数据并重新开始。如果是，则按计划进行。

var contentRetrieved = false; //will indicate wether the JSON call has already been executed
var contentToDisplay; //data from the JSON call

$(document).live('pagebeforechange', function (event, data) {
    if (( typeof data.toPage === "string" ) && ($.mobile.path.parseUrl(data.toPage).hash == '#pageViewOrder')) {
        if (contentRetrieved) {
           contentRetrieved = false; //content is already retrieved, we proceed with the pagechange
        } else {
           event.preventDefault(); //prevent further page change operations
           $.getJSON(root_url + '/orders/view/' + window.viewOrderReference + '/?callback=?', null, function (d) {
                contentToDisplay = {"html":d.html};
                contentRetrieved = true;
                $.mobile.changePage("#pageViewOrder");
            });
        }
    }
});


$(document).bind('pagebeforecreate', function (event, ui) {
    if (event.target.id == 'pageViewOrder') {
        $("#viewOrder_content").html(contentToDisplay.html).trigger("create");
        $.mobile.loading('hide');
    }
});

jQuery Mobile - 加载外部HTML

1 个答案: