我使用jQuery Mobile、jQuery和html制作了一个web应用程序。它基本上是针对其网站的RSS阅读器。
$(document).ready(function() {
$('[data-role=button]').click(function() {
var $id = $(this).attr('id');
switch($id)
{
case 'news-button':
var type = 'news';
var url = '/tag/news/';
break;
//etc...
}
$.get('http://wiiuandmii.com' + url + 'feed/', function(data) {
$('#' + type + '-content').empty();
var i = 0;
$(data).find('item').each(function() {
i = i + 1;
$('#' + type + i).empty().remove();
var $item = $(this);
var html = '<li>';
html += '<a href="#'+ type + i + '">';
html += $item.find('image').text();
html += '<h3 style="color: #01acca;">' + $item.find('title').text() + '</h3>';
html += '<p>' + $item.find('pubDate').text() + '</p>';
html += '</a>';
html += '</li>';
$('#' + type + '-content').append($(html));
$('#' + type + '-content').find('img.attachment-thumbnail').removeClass().removeAttr('width').removeAttr('height');
$('#' + type + '-content').listview('refresh');
var page = '<div data-role="page" id="' + type + i + '" data-url="' + type + i + '">';
page += '<div data-role="header" data-theme="c" data-position="fixed"><a href="#home" data-rel="back" data-theme="b" data-icon="arrow-l">Back</a><h1 style="margin-top:0px; margin-bottom:0px;"><img src="images/header.png" title="Wii U and Mii" alt="Wii U and Mii"/></h1></div>';
page += '<div data-role="content" data-theme="c" class="main-' + type + i + '">';
page += '<h1 style="color: #01acca;">' + $item.find('title').text() + '</h1>';
page += '<p>' + $item.find('dc:creator').text() + '</p>';
page += $item.find('desc').text();
page += '</div>';
page += '<div data-role="footer" data-theme="c"></div>';
page += '</div>';
$('body').append($(page));
var test = '#' + type + i;
$(test).page();
});
});
});
});
当主页面上的按钮被点击时,它会顺利地转换到
#news
页面。问题在于,#news
页面的内容部分在加载约5秒钟后仍然为空白。加载消息不会出现。应该出现的是,加载消息应该出现在#home
页面上,而所有内容加载完毕后,然后转到填充好的#news
页面。如果我想要的效果触发了错误的内容加载事件,那么我应该使用哪个事件呢? 2011年9月30日修订 我已经成功地使页面转换等待列表完全加载后再转换,但是加载消息仍未出现。
我使用了:
$('#news').live('pagebeforeshow',function(event){
$.mobile.showPageLoadingMsg();
替代document ready和.click方法,我使用了:
$.ajax({
url: 'http://wiiuandmii.com' + url + 'feed/',
async: false,
success:function(data){
使用.get()
的替代方法