listview在jQuery mobile中不工作_Jquery

listview在jQuery mobile中不工作

jquery

listview在jQuery mobile中不工作,jquery,Jquery,我试图从某个源动态获取提要，然后我想在jQuery mobile中以列表的形式显示每个链接。我能够获取提要，但它们正常显示，即使是我保存的data role=“listview”和无序列表。listview（'refresh'）下面是代码 <!DOCTYPE html> <html> <head> <title>Page Title</title> <link rel="stylesheet" href="http://cod

我试图从某个源动态获取提要，然后我想在jQuery mobile中以列表的形式显示每个链接。我能够获取提要，但它们正常显示，即使是我保存的

data role=“listview”

和

无序列表。listview（'refresh'）

下面是代码

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>

<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
<style type="text/css">
.nstyle
{
data-role:listview;
list-style:none;
}

</style>

 <script>
  $(document).ready(function(){

      $("#toi").rssfeed("http://timesofindia.feedsportal.com/c/33039/f/533974/index.rss",{limit:5,date:false,header:false,content:false});

  });
  </script>


<script type="text/javascript">

(function($){



    var current=null;
    $.fn.rssfeed=function(url,options){
        var defaults={limit:10,header:true,titletag:'h4',date:true,content:true,snippet:true,showerror:true,errormsg:'',key:null};
        var options=$.extend(defaults,options);
        return this.each(function(i,e){var $e=$(e);
        if(!$e.hasClass('rssFeed'))$e.addClass('rssFeed');
        if(url==null)return false;
        var api="http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&callback=?&q="+url;
        if(options.limit!=null)
            api+="&num="+options.limit;
        if(options.key!=null)api+="&key="+options.key;
        $.getJSON(api,function(data)
                {if(data.responseStatus==200)
        {_callback(e,data.responseData.feed,options);
        }
        else{
            if(options.showerror)
if(options.errormsg!='')
{
    var msg=options.errormsg;
    }else
    {
        var msg=data.responseDetails;
        };
        $(e).html('<div"><p>'+msg+'</p></div>');};});});};

        var _callback=function(e,feeds,options){if(!feeds){return false;
        }
var html='';
var row='odd';
if(options.header)
html+='<div>'+'<a href="'+feeds.link+'" title="'+feeds.description+'">'+feeds.title+'</a>'+'</div>';
html+='<div>'+'<ul id="tst">';
for(var i=0;i<feeds.entries.length;i++)
{var entry=feeds.entries[i];
var entryDate=new Date(entry.publishedDate);
var pubDate=entryDate.toLocaleDateString()+' '+entryDate.toLocaleTimeString();
html+='<li class="rssRow '+row+'">'+'<'+options.titletag+'><a  href="'+entry.link+'" title="View this feed at '+feeds.title+'">'+entry.title+'</a></'+options.titletag+'>'
if(options.date)html+='<div>'+pubDate+'</div>'
if(options.content)
{if(options.snippet&&entry.contentSnippet!=''){var content=entry.contentSnippet;
}else{var content=entry.content;
}

html+='<p>'+content+'</p>'}
html+='</li>';if(row=='odd'){row='even';}else{row='odd';}}
html+='</ul>'+'</div>'

$(e).html(html);
$("#tst").addClass('nstyle');
$("#tst").listview('refresh');
        };

        })(jQuery);
</script>





</head>
<body>
<div data-role="page" id="home" data-theme="e">
 <div data-role="header" >
  <h1>Times Of India</h1>
 </div>
 <div data-role="content" id="toi">
 content here
 </div>
 <div data-role="footer">
  <h4>Top News</h4>
 </div>
</div>


</body>
</html>


页面标题
斯泰尔先生
{
数据角色：listview；
列表样式：无；
}
$（文档）.ready（函数（）{
$（“#toi”）.rssfeed（”http://timesofindia.feedsportal.com/c/33039/f/533974/index.rss“，{limit:5，date:false，header:false，content:false}）；
});
（函数（$）{
无功电流=零；
$.fn.rssfeed=函数（url，选项）{
var默认值={limit:10，header:true，titletag:'h4'，date:true，content:true，snippet:true，shourror:true，errormsg:''，key:null}；
var options=$.extend（默认值，选项）；
返回这个.each（函数（i，e）{var$e=$（e）；
if（！$e.hasClass（'rssFeed'））$e.addClass（'rssFeed'）；
if（url==null）返回false；
变量api=”http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&callback=?&q=“+url；
if（options.limit！=null）
api+=“&num=“+options.limit；
如果（options.key！=null）api+=“&key=“+options.key；
$.getJSON（api，函数（数据）
{if（data.responseStatus==200）
{u回调（e，data.responseData.feed，options）；
}
否则{
如果（选项。淋浴ROR）
如果（options.errormsg！=''）
{
var msg=options.errormsg；
}否则
{
var msg=data.responseDetails；
};
$（e）.html（'Change:
$(document).ready(function(){
    $("#toi").rssfeed("http://timesofindia.feedsportal.com/c/33039/f/533974/index.rss",{limit:5,date:false,header:false,content:false});

});

致：
更新：
这就是你想要的吗
最后，我在回调函数中将listview.refresh（）
替换为$（“#toi”）.page（）；

更新2:
修复了jquery移动版的问题-
我遇到了一个类似的问题：
我调用.trigger（“create”），jQM将stlye应用于大多数元素，但不应用于ListView
如果我调用列表中的.page（）；它不会显示样式，但会显示
使用jQuery 1.7.2和jQM 1.1.1
谢谢，Simon页面呈现后是否加载新列表项？@jivings感谢您的回复。我尝试过，但它没有显示新闻提要sure。下面是JSFIDLE代码。不确定我是否正确放置了它，因为这是我第一次放置在那里，谢谢，它很有帮助。但即使现在它也没有显示在中g在典型的jQuery列表中（如在每个列表项的右侧显示箭头>）。您正在构建的html的结构有点问题。对其进行排序，它应该看起来很好。page函数会导致重新呈现该页面元素。因此，构成jQuery Mobile元素的样式会重新应用。请注意，每个元素只能调用它一次。
 $(document).ready(function(){
    $('#home').live('pagebeforecreate', function(){
        $("#toi").rssfeed("http://timesofindia.feedsportal.com/c/33039/f/533974/index.rss",{limit:5,date:false,header:false,content:false});
    });
});