javascript - 使用 jQuery 移动代码时遇到一些问题

Question

我正在开发一个 jquery 移动网页。在其中一个页面中，我想实现一个 RSS 阅读器。我在网上找到了一个 RSS 阅读器，看起来像这样：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
    <link rel="stylesheet" href="themes/CustomTheme.min.css" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile.structure-1.3.1.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>

    <style type='text/css'>
        .ui-footer .ui-btn-right {
        }
        .articleContent > table > tbody > tr > td > font > br {
            display: none;
        }
        .articleContent > table > tbody > tr > td > font > br + div {
            display: none;
        }
        .articleContent * {
            font-size: medium !important;
        }
    </style>

</head>

<body>




<script type='text/javascript'>//<![CDATA[ 

// ISCPA added search filter, home icon, updated CDN-Hosted links
// forked from sumukh1's "forked: RSS Reader with jQuery Mobile" http://jsdo.it/sumukh1/4Ton
/* configuration */
var maxLength = 20; /* writing HTML */
document.write('<div data-role="page" id="list">' + '  <div data-role="header" data-position="fixed">' + '    <h1><span id="widgetTitle">...</span> ' + '      <span style="font-size: x-small">(HTML)</span></h1>' + '  </div>' + '  <div data-role="content">' + '    <ul data-role="listview" data-filter="true" id="articleList">');
for (var i = 1; i <= maxLength; i++) {
    document.write('<li id="list' + i + '"><a href="#article' + i + '" id="link' + i + '">&nbsp;</a></li>');
}
document.write('    </ul>' + '  </div>' + '</div>');
for (i = 1; i <= maxLength; i++) {
    document.write('<div data-role="page" id="article' + i + '">' + '  <div data-role="header" data-position="inline">' + '    <a href="#list" data-role="button" data-icon="home" data-back="true">Home</a>' + '    <h1 id="articleHeader' + i + '">&nbsp;</h1>' + '    <a href="#" id="openButton' + i + '" data-role="button" data-icon="plus"' + '      class="ui-btn-right" rel="external">Open</a>' + '  </div>' + '  <div data-role="content">' + '    <div id="articleContent' + i + '" class="articleContent"></div>' + '    <div data-role="controlgroup" data-type="horizontal">' + '      <a href="#article' + String(i - 1) + '" data-role="button" data-icon="arrow-l"' + '        data-inline="true" class="prevButton">Prev</a>' + '      <a href="#article' + String(i + 1) + '" data-role="button" data-icon="arrow-r"' + '        data-inline="true" class="nextButton" data-iconpos="right">Next</a>' + '    </div>' + '  </div>' + '</div>');
} /* JSONP */
$(function() {
    // getOnlineFeed('http://www4.lehigh.edu/news/rss/LUnews_rss.xml');
    getOnlineFeed('http://www4.lehigh.edu/news/rss/LUnews_rss.xml');

/*
  getOnlineFeed('http://www.engadget.com/rss.xml');
  getOnlineFeed('http://www.fremont.k12.ca.us/site/RSS.aspx?DomainID=1&ModuleInstanceID=4613&PageID=1');
  getOnlineFeed('http://news.google.com/news?hl=ja&ned=us&ie=UTF-8&oe=UTF-8&output=atom&topic=h');
  getOnlineFeed('http://www.appbank.net/feed');
  getOnlineFeed('http://japanese.engadget.com/rss.xml');
  getOnlineFeed('http://www.bebit.co.jp/index.xml');  
  getOnlineFeed('http://www.ntt.com/rss/release.rdf?link_id=ostop_service_rss');
  getOnlineFeed('http://feeds.feedburner.com/gapsis');
  getOnlineFeed('http://octoba.net/feed');
  getOfflineFeed('google_news_jsonp.js');
*/
}); /* functions */
var listEntries = function(json) {
    if (!json.responseData.feed.entries) return false;
    $('#widgetTitle').text(json.responseData.feed.title);
    var articleLength = json.responseData.feed.entries.length;
    articleLength = (articleLength > maxLength) ? maxLength : articleLength;
    for (var i = 1; i <= articleLength; i++) {
        var entry = json.responseData.feed.entries[i - 1];
        $('#link' + i).text(entry.title);
        $('#articleHeader' + i).text(entry.title);
        $('#openButton' + i).attr('href', entry.link);
        $('#articleContent' + i).append(entry.content);
    }
    $('#article1 .prevButton').remove();
    $('#article' + articleLength + ' .nextButton').remove();
    if (articleLength < maxLength) {
        for (i = articleLength + 1; i <= maxLength; i++) {
            $('#list' + i).remove();
            $('#article' + i).remove();
        }
    }
};
var getOnlineFeed = function(url) {
    var script = document.createElement('script');
    script.setAttribute('src', 'http://ajax.googleapis.com/ajax/services/feed/load?callback=listEntries&hl=ja&output=json-in-script&q=' + encodeURIComponent(url) + '&v=1.0&num=' + maxLength);
    script.setAttribute('type', 'text/javascript');
    document.documentElement.firstChild.appendChild(script);
};
var getOfflineFeed = function(url) {
    var script = document.createElement('script');
    script.setAttribute('src', url);
    script.setAttribute('type', 'text/javascript');
    document.documentElement.firstChild.appendChild(script);
};
//]]>  

</script>


</body>


</html>

好的，这是一个将动态创建页面和所有内容的 javascript。但是我已经有了页面（其中我也有一个面板），我想要做的是在那里集成代码。我的页面如下所示：

<div data-role="page" id="news" data-theme="a">
    <div data-role="panel" id="mypanel">
        <ul data-role="listview" data-inset="false">
            <li data-role="list-divider">Espacio Joven</li>
            <li><a href="#news" class="ui-btn-active ui-state-persist">News</a></li>
            <li><a href="#agenda" class="ui-btn-active ui-state-persist">Agenda</a></li>
            <li><a href="#info" class="ui-btn-active ui-state-persist">Info</a></li>
            <li><a href="#activities" class="ui-btn-active ui-state-persist">Activities</a></li>
            <li><a href="#alDia" class="ui-btn-active ui-state-persist">Al Dia</a></li>
            <li data-role="list-divider">La Noche Es Joven</li>
        </ul>
    </div><!-- /panel -->
    <div data-role="header">
        <a href="#mypanel" data-icon="grid" data-iconpos="notext"></a>
        <h1>News</h1>
    </div>

    <div data-role="content">
        <ul data-role="listview" data-inset="true" class="RSSclass">    

        </ul>   

    </div> <!-- /content -->
</div>

有人可以帮我配置 RSS 代码，以便它在

<ul data-role="listview" data-inset="true" class="RSSclass">    

</ul>

我有？我试图调整代码，例如我删除了创建页面的行（我有一个页面，所以我不需要它），而不是 document.write 我使用了 append ，以便将专辑附加到 listview 中，但我仍然它有很多问题，而且看起来不太好。

万一有人想知道，我尝试将代码更改为以下内容：

$(document).on("pageshow", '#news', function() {

// ISCPA added search filter, home icon, updated CDN-Hosted links
// forked from sumukh1's "forked: RSS Reader with jQuery Mobile" http://jsdo.it/sumukh1/4Ton
/* configuration */
var maxLength = 20; /* writing HTML */

alert("Hello World!");

//Not sure if .listView('refresh'); is needed. Check it!
for (var i = 1; i <= maxLength; i++) {
    $(".RSSclass").append('<li id="list' + i + '"><a href="#article' + i + '" id="link' + i + '">&nbsp;</a></li>');
}


for (i = 1; i <= maxLength; i++) {
    document.write('<div data-role="page" id="article' + i + '">' + '  <div data-role="header" data-position="inline">' + '    <a href="#list" data-role="button" data-icon="home" data-back="true">Home</a>' + '    <h1 id="articleHeader' + i + '">&nbsp;</h1>' + '    <a href="#" id="openButton' + i + '" data-role="button" data-icon="plus"' + '      class="ui-btn-right" rel="external">Open</a>' + '  </div>' + '  <div data-role="content">' + '    <div id="articleContent' + i + '" class="articleContent"></div>' + '    <div data-role="controlgroup" data-type="horizontal">' + '      <a href="#article' + String(i - 1) + '" data-role="button" data-icon="arrow-l"' + '        data-inline="true" class="prevButton">Prev</a>' + '      <a href="#article' + String(i + 1) + '" data-role="button" data-icon="arrow-r"' + '        data-inline="true" class="nextButton" data-iconpos="right">Next</a>' + '    </div>' + '  </div>' + '</div>');
} /* JSONP */
$(function() {
    // getOnlineFeed('http://www4.lehigh.edu/news/rss/LUnews_rss.xml');
    getOnlineFeed('http://www4.lehigh.edu/news/rss/LUnews_rss.xml');

/*
  getOnlineFeed('http://www.engadget.com/rss.xml');
  getOnlineFeed('http://www.fremont.k12.ca.us/site/RSS.aspx?DomainID=1&ModuleInstanceID=4613&PageID=1');
  getOnlineFeed('http://news.google.com/news?hl=ja&ned=us&ie=UTF-8&oe=UTF-8&output=atom&topic=h');
  getOnlineFeed('http://www.appbank.net/feed');
  getOnlineFeed('http://japanese.engadget.com/rss.xml');
  getOnlineFeed('http://www.bebit.co.jp/index.xml');  
  getOnlineFeed('http://www.ntt.com/rss/release.rdf?link_id=ostop_service_rss');
  getOnlineFeed('http://feeds.feedburner.com/gapsis');
  getOnlineFeed('http://octoba.net/feed');
  getOfflineFeed('google_news_jsonp.js');
*/
}); /* functions */
var listEntries = function(json) {
    if (!json.responseData.feed.entries) return false;
    $('#widgetTitle').text(json.responseData.feed.title);
    var articleLength = json.responseData.feed.entries.length;
    articleLength = (articleLength > maxLength) ? maxLength : articleLength;
    for (var i = 1; i <= articleLength; i++) {
        var entry = json.responseData.feed.entries[i - 1];
        $('#link' + i).text(entry.title);
        $('#articleHeader' + i).text(entry.title);
        $('#openButton' + i).attr('href', entry.link);
        $('#articleContent' + i).append(entry.content);
    }
    $('#article1 .prevButton').remove();
    $('#article' + articleLength + ' .nextButton').remove();
    if (articleLength < maxLength) {
        for (i = articleLength + 1; i <= maxLength; i++) {
            $('#list' + i).remove();
            $('#article' + i).remove();
        }
    }
};
var getOnlineFeed = function(url) {
    var script = document.createElement('script');
    script.setAttribute('src', 'http://ajax.googleapis.com/ajax/services/feed/load?callback=listEntries&hl=ja&output=json-in-script&q=' + encodeURIComponent(url) + '&v=1.0&num=' + maxLength);
    script.setAttribute('type', 'text/javascript');
    document.documentElement.firstChild.appendChild(script);
};
var getOfflineFeed = function(url) {
    var script = document.createElement('script');
    script.setAttribute('src', url);
    script.setAttribute('type', 'text/javascript');
    document.documentElement.firstChild.appendChild(script);
};
//]]>  

});

并在我的html文档的头部添加了CSS，但看起来很糟糕......

我也有一个错误：Uncaught TypeError: undefined is not a function在线：

$(function() {
    // getOnlineFeed('http://www4.lehigh.edu/news/rss/LUnews_rss.xml');
    getOnlineFeed('http://www4.lehigh.edu/news/rss/LUnews_rss.xml');

有任何想法吗？

score 1 · Accepted Answer

您必须/必须修改该listEntries函数，因为这是 JSOP 在回调中调用的函数。

var listEntries = function (json) {
    if (!json.responseData.feed.entries) return false;
    $('#widgetTitle').text(json.responseData.feed.title);
    var articleLength = json.responseData.feed.entries.length;
    articleLength = (articleLength > maxLength) ? maxLength : articleLength;
    for (var i = 1; i <= articleLength; i++) {
        var entry = json.responseData.feed.entries[i - 1];
        $(".RSSclass").append('<li id="list' + i + '"><a href="#article' + i + '" id="link' + i + '">' + entry.title + '</a></li>');
    }
    $('.RSSclass').listview('refresh');
};

此外，您还必须将自定义页面设置添加到页面正文中，如下所示：

<div data-role="page" id="news" data-theme="a">
    <div data-role="panel" id="mypanel">
        <ul data-role="listview" data-inset="false">
            <li data-role="list-divider">Espacio Joven</li>
            <li><a href="#news" class="ui-btn-active ui-state-persist">News</a>
            </li>
            <li><a href="#agenda" class="ui-btn-active ui-state-persist">Agenda</a>
            </li>
            <li><a href="#info" class="ui-btn-active ui-state-persist">Info</a>
            </li>
            <li><a href="#activities" class="ui-btn-active ui-state-persist">Activities</a>
            </li>
            <li><a href="#alDia" class="ui-btn-active ui-state-persist">Al Dia</a>
            </li>
            <li data-role="list-divider">La Noche Es Joven</li>
        </ul>
    </div>
    <!-- /panel -->
    <div data-role="header"> <a href="#mypanel" data-icon="grid" data-iconpos="notext"></a>

         <h1>News</h1>

    </div>
    <div data-role="content">
        <ul data-role="listview" data-inset="true" class="RSSclass"></ul>
    </div>
    <!-- /content -->
</div>

然后您必须删除上述脚本自动生成的内容document.write

这是它工作的 JsBin。http://jsbin.com/APojAlu/1/edit?html ，输出希望有帮助。

score 0 · Accepted Answer

我复制了您的代码并收到了两条错误消息

listEntries 未定义
最大长度未定义

如果您将以下代码放在语句之前，$(document).on("pageshow", '#news', function() {它们都是已知的，并且会显示来自您的提要的内容：

<script type='text/javascript'>//<![CDATA[ 

var maxLength = 20; /* writing HTML */

function listEntries (json) {
    if (!json.responseData.feed.entries) return false;
    $('#widgetTitle').text(json.responseData.feed.title);
    var articleLength = json.responseData.feed.entries.length;
    articleLength = (articleLength > maxLength) ? maxLength : articleLength;
    for (var i = 1; i <= articleLength; i++) {
        var entry = json.responseData.feed.entries[i - 1];
        $('#link' + i).text(entry.title);
        $('#articleHeader' + i).text(entry.title);
        $('#openButton' + i).attr('href', entry.link);
        $('#articleContent' + i).append(entry.content);
    }
    $('#article1 .prevButton').remove();
    $('#article' + articleLength + ' .nextButton').remove();
    if (articleLength < maxLength) {
        for (i = articleLength + 1; i <= maxLength; i++) {
            $('#list' + i).remove();
            $('#article' + i).remove();
        }
    }
};

$(document).on("pageshow", '#news', function() {
// rest follows here

这应该让你继续前进。

javascript - 使用 jQuery 移动代码时遇到一些问题

2 回答 2

Related

Reference