JQuery Mobile - 转换前动态加载页面

Posted

技术标签:

【中文标题】JQuery Mobile - 转换前动态加载页面【英文标题】:JQueryMobile - Dynamicly load page before transition 【发布时间】:2013-01-18 11:42:00 【问题描述】:

我目前正在尝试使用 jquerymobile + phonegap 应用程序。我的问题集中在 jquerymobile 框架上。

我想切换到一个动态加载的页面(通过 jsonp),并使用幻灯片淡入淡出转换,我想在转换中查看加载的内容。目前它正在进行过渡,然后显示内容。 (因为我正在使用 pagebeforeshow 事件将数据添加到 dom 中。)

在触发 changePage 事件之前,我通过 jsonp 加载了内容。所以我的数据已经在那里了。现在我需要在执行转换之前将该数据放入 dom 中。我试图在jqm的changePage函数中找到合适的位置来触发一个事件,并在过渡之前触发它。但内容并未显示在过渡中。

这就是我加载列表的方式(效果很好)

function getList() 
    $.mobile.loading( 'show');
    var req = $.ajax(
    url : serviceURL + 'canteenParser2.php?type=getAllCanteens&callback=?',
    dataType : "jsonp",
    async : false,
    cache: false,
    timeout : 10000
);

req.success(function(data) 
    globalAjaxData = data;
    $.mobile.changePage('mensa.html',showLoadMsg: false,
                         transition: 'slidefade'
    );

);

req.error(function() 
    alert('Oh noes!');
);

这就是我显示数据的方式:

function showList()

mensaList = globalAjaxData;
$.each(mensaList, function(index, mensa) 
    $('#mensaList').append('<li><a href="mensadetails.html?id=' + mensa.id + '" data-transition="slidefade">' +
                '' + mensa.name +  '</a></li>');
    );
$('#mensaList').listview('refresh');


我目前正在调用 showList() 方法:

$('#mensaListPage').live('pageshow',function(event)
    showList();
);

正如我提到的,我尝试了例如 pageload 事件和 pagebeforeshow 事件。 有没有人建议如何实现所需的行为?

问候 莫里茨

更新

我发现我需要在 ajax 加载调用之后、转换之前调用 showList Methode:

$$('#mensaListPage').live('pagebeforeshow',function(event)
showList();
);

这适用于幻灯片过渡,但不适用于幻灯片淡入淡出过渡。 (但幻灯片过渡最终在我的移动应用程序中闪烁。因此我使用了幻灯片淡入淡出。)

希望有机会解决其中一个问题。 ;)

【问题讨论】:

在你的 req.success 函数中,你可以在调用 changePage() 之前调用 showList 吗?这应该确保页面在更改之前得到更新。 【参考方案1】:

jsonp请求不支持同步操作,

在第二页加载你的数据。它会很好用。

【讨论】:

以上是关于JQuery Mobile - 转换前动态加载页面的主要内容,如果未能解决你的问题,请参考以下文章

使用 jQuery-mobile 转换以不同方式加载页面

jQuery Mobile 如何通过ajax方式动态加载页面?

jQuery mobile 不加载新页面脚本

jQuery Mobile:初次访问时页面未完全加载

changePage 后 jQuery Mobile 刷新页面

预取和缓存动态创建的 jquery Mobile+PhoneGap 页面