jquery导入实现导入_使用jFeed（jQuery）导入RSS feed

最新推荐文章于 2021-03-09 17:12:50 发布

cuketao5066

最新推荐文章于 2021-03-09 17:12:50 发布

阅读量115

点赞数

文章标签： html css js jquery templates ViewUI

原文链接：https://www.script-tutorials.com/import-rss-feeds-using-jfeed-jquery/

版权

jquery导入实现导入

RSS feed – using jFeed (jQuery) to aggregate RSS This simple tutorial will show you how to Import rss feeds of any site into your own custom area/block of website. It can be used as news imported from yahoo, bbc etc. As we know, RSS feeds are usually used to trasnfer some news for people. Today I’ll tell you about RSS feeds and show you how to make an own RSS aggregator. In the result, you will be able to display various RSS feeds on your website with nite and modern design.

RSS feed –使用jFeed(jQuery)聚合RSS此简单教程将向您展示如何将任何站点的rss feed导入到您自己的自定义区域/网站块中。它可以用作从yahoo，bbc等导入的新闻。众所周知，RSS提要通常用于为人们传递一些新闻。今天，我将向您介绍RSS源，并向您展示如何制作自己的RSS聚合器。结果，您将能够在网站上以精巧和现代的设计显示各种RSS源。

Here is the sample:

这是示例：

现场演示

[sociallocker]

[社交储物柜]

打包下载

[/sociallocker]

[/ sociallocker]

Well, download the source files and let’s start coding !

好了，下载源文件，让我们开始编码！

步骤1. HTML (Step 1. HTML)

As usual, we start with the HTML.

和往常一样，我们从HTML开始。

This is our main page code (with 2 RSS blocks). Pay heed at RSSAggrCont elements. Param ‘rssnum’ means – how many rss elements will be displayed at the page. ‘rss_url’ – is RSS url. I hope that you will be able to change these params easily.

这是我们的主页代码(带有2个RSS块)。注意RSSAggrCont元素。参数'rssnum'表示–页面上将显示多少个rss元素。 'rss_url'–是RSS网址。我希望您能够轻松更改这些参数。

template / rss_page.html (templates/rss_page.html)


<link href="templates/css/styles.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.jfeed.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.aRSSFeed.js"></script>
<div class="RSSAggrCont" rssnum="5" rss_url="http://rss.news.yahoo.com/rss/topstories">
    <div class="loading_rss">
        <img alt="Loading..." src="templates/images/loading.gif" />
    </div>
</div>
<div class="RSSAggrCont" rssnum="5" rss_url="http://newsrss.bbc.co.uk/rss/newsonline_world_edition/front_page/rss.xml">
    <div class="loading_rss">
        <img alt="Loading..." src="templates/images/loading.gif" />
    </div>
</div>
<script language="javascript" type="text/javascript">
$(document).ready( function() {
    $('div.RSSAggrCont').aRSSFeed();
} );
</script>


<link href="templates/css/styles.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.jfeed.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.aRSSFeed.js"></script>
<div class="RSSAggrCont" rssnum="5" rss_url="http://rss.news.yahoo.com/rss/topstories">
    <div class="loading_rss">
        <img alt="Loading..." src="templates/images/loading.gif" />
    </div>
</div>
<div class="RSSAggrCont" rssnum="5" rss_url="http://newsrss.bbc.co.uk/rss/newsonline_world_edition/front_page/rss.xml">
    <div class="loading_rss">
        <img alt="Loading..." src="templates/images/loading.gif" />
    </div>
</div>
<script language="javascript" type="text/javascript">
$(document).ready( function() {
    $('div.RSSAggrCont').aRSSFeed();
} );
</script>

步骤2. CSS (Step 2. CSS)

Here are CSS styles.

这是CSS样式。

template / css / styles.css (templates/css/styles.css)


.RSSAggrCont {
    border:1px solid #AAA;
    -moz-box-shadow:0 0 10px #ccc;
    -webkit-box-shadow: 0 0 10px #ccc;
    width:500px;
    padding:10px;
    background:#f3f3f3;
    margin:15px;
    float:left;
}
/* RSS Feeds */
.rss_item_wrapper {
    padding-bottom: 8px;
}
.rss_item_wrapper:last-child {
    padding-bottom: 0px;
}
.rss_item_header {
    font-size:12px;
    font-weight:bold;
    padding-bottom:0px;
}
.rss_item_header a,
.rss_item_header a:link,
.rss_item_header a:visited,
.rss_item_header a:hover,
.rss_item_header a:active {
    font-size:12px;
    font-weight:bold;
    color:#33c;
}
.rss_item_info {
    color:#999;
    font-size:9px;
}
.rss_item_desc {
    text-align:justify;
    font-size: 11px;
}
.rss_read_more {
    background-color:#EDEDED;
    font-size:11px;
    font-weight:normal;
    height:30px;
    line-height:30px;
    vertical-align: middle;
    margin-top:2px;
    padding:0 9px;
    text-align:left;
    text-decoration:none;
    text-transform:capitalize;
}
.loading_rss {
    text-align:center;
    width:89px;
    height:64px;
    background-image:url(../images/loading_bg.png);
    z-index: 10;
    margin: 10px auto;
}
.loading_rss img {
    margin-top: 16px;
}
.loading_rss div {
    width:89px;
    height:64px;
    background-image:url(../images/loading.gif);
    background-position:center center;
    background-repeat:no-repeat;
}


.RSSAggrCont {
    border:1px solid #AAA;
    -moz-box-shadow:0 0 10px #ccc;
    -webkit-box-shadow: 0 0 10px #ccc;
    width:500px;
    padding:10px;
    background:#f3f3f3;
    margin:15px;
    float:left;
}
/* RSS Feeds */
.rss_item_wrapper {
    padding-bottom: 8px;
}
.rss_item_wrapper:last-child {
    padding-bottom: 0px;
}
.rss_item_header {
    font-size:12px;
    font-weight:bold;
    padding-bottom:0px;
}
.rss_item_header a,
.rss_item_header a:link,
.rss_item_header a:visited,
.rss_item_header a:hover,
.rss_item_header a:active {
    font-size:12px;
    font-weight:bold;
    color:#33c;
}
.rss_item_info {
    color:#999;
    font-size:9px;
}
.rss_item_desc {
    text-align:justify;
    font-size: 11px;
}
.rss_read_more {
    background-color:#EDEDED;
    font-size:11px;
    font-weight:normal;
    height:30px;
    line-height:30px;
    vertical-align: middle;
    margin-top:2px;
    padding:0 9px;
    text-align:left;
    text-decoration:none;
    text-transform:capitalize;
}
.loading_rss {
    text-align:center;
    width:89px;
    height:64px;
    background-image:url(../images/loading_bg.png);
    z-index: 10;
    margin: 10px auto;
}
.loading_rss img {
    margin-top: 16px;
}
.loading_rss div {
    width:89px;
    height:64px;
    background-image:url(../images/loading.gif);
    background-position:center center;
    background-repeat:no-repeat;
}

步骤3. JS (Step 3. JS)

Here are few necessary JS files for our project:

以下是我们项目的一些必要JS文件：

js / jquery.aRSSFeed.js (js/jquery.aRSSFeed.js)


// jQuery plugin - Dolphin RSS Aggregator
(function($){
    $.fn.aRSSFeed = function() {
        return this.each( function(){
            var $Cont = $(this);
            var iMaxNum = parseInt($Cont.attr( 'rssnum' ) || 0);
            var sFeedURL = $Cont.attr('rss_url');
            if (sFeedURL == undefined)
                return false;
            $.getFeed ({
                url: 'get_rss_feed.php?url=' + escape(sFeedURL),
                success: function(feed) {
                    if (feed != undefined && feed.items) {
                        var sCode =
                            '<div class="rss_feed_wrapper">';
                        var iCount = 0;
                        for (var iItemId = 0; iItemId < feed.items.length; iItemId ++) {
                            var item = feed.items[iItemId];
                            var sDate;
                            var a;
                            var oDate
                            if (null != (a = item.updated.match(/(\d+)-(\d+)-(\d+)T(\d+):(\d+):(\d+)Z/)))
                                oDate = new Date(a[1], a[2]-1, a[3], a[4], a[5], a[6], 0);
                            else
                                oDate = new Date(item.updated);
                            sDate = oDate.toLocaleString();
                            sCode +=
                                '<div class="rss_item_wrapper">' +
                                    '<div class="rss_item_header">' +
                                        '<a href="' + item.link + '" target="_blank">' + item.title + '</a>' +
                                    '</div>' +
                                    '<div class="rss_item_info">' +
                                        '<span><img src="templates/images/clock.png" /> ' + sDate + '</span>' +
                                    '</div>' +
                                    '<div class="rss_item_desc">' + item.description + '</div>' +
                                '</div>';
                            iCount ++;
                            if (iCount == iMaxNum) break;
                        }
                        sCode +=
                            '</div>' +
                            '<div class="rss_read_more">' +
                                '<img class="bot_icon_left" src="templates/images/more.png" />' +
                                '<a href="' + feed.link + '" target="_blank" class="rss_read_more_link">' + feed.title + '</a>' +
                            '</div>' +
                            '<div class="clear_both"></div>';
                        $Cont.html(sCode);
                    }
                }
            } );
        } );
    };
})(jQuery);


// jQuery plugin - Dolphin RSS Aggregator
(function($){
    $.fn.aRSSFeed = function() {
        return this.each( function(){
            var $Cont = $(this);
            var iMaxNum = parseInt($Cont.attr( 'rssnum' ) || 0);
            var sFeedURL = $Cont.attr('rss_url');
            if (sFeedURL == undefined)
                return false;
            $.getFeed ({
                url: 'get_rss_feed.php?url=' + escape(sFeedURL),
                success: function(feed) {
                    if (feed != undefined && feed.items) {
                        var sCode =
                            '<div class="rss_feed_wrapper">';
                        var iCount = 0;
                        for (var iItemId = 0; iItemId < feed.items.length; iItemId ++) {
                            var item = feed.items[iItemId];
                            var sDate;
                            var a;
                            var oDate
                            if (null != (a = item.updated.match(/(\d+)-(\d+)-(\d+)T(\d+):(\d+):(\d+)Z/)))
                                oDate = new Date(a[1], a[2]-1, a[3], a[4], a[5], a[6], 0);
                            else
                                oDate = new Date(item.updated);
                            sDate = oDate.toLocaleString();
                            sCode +=
                                '<div class="rss_item_wrapper">' +
                                    '<div class="rss_item_header">' +
                                        '<a href="' + item.link + '" target="_blank">' + item.title + '</a>' +
                                    '</div>' +
                                    '<div class="rss_item_info">' +
                                        '<span><img src="templates/images/clock.png" /> ' + sDate + '</span>' +
                                    '</div>' +
                                    '<div class="rss_item_desc">' + item.description + '</div>' +
                                '</div>';
                            iCount ++;
                            if (iCount == iMaxNum) break;
                        }
                        sCode +=
                            '</div>' +
                            '<div class="rss_read_more">' +
                                '<img class="bot_icon_left" src="templates/images/more.png" />' +
                                '<a href="' + feed.link + '" target="_blank" class="rss_read_more_link">' + feed.title + '</a>' +
                            '</div>' +
                            '<div class="clear_both"></div>';
                        $Cont.html(sCode);
                    }
                }
            } );
        } );
    };
})(jQuery);

js / jquery-1.4.2.min.js和js / jquery.jfeed.js (js/jquery-1.4.2.min.js and js/jquery.jfeed.js)

This are common files – jQuery library with jFeed library. It is to no purpose to publish full codes of these files here (they are pretty huge). Both are available in our download package

这是常见文件–带有jFeed库的jQuery库。在这里发布这些文件的完整代码是没有目的的(它们非常大)。两者都可以在我们的下载包中找到

步骤4. PHP (Step 4. PHP)

Finally – PHP sources, I think that everything should be easy to understand:

最后– PHP资料，我认为一切都应该易于理解：

index.php (index.php)


<?php
require_once('templates/rss_page.html');
?>


<?php
require_once('templates/rss_page.html');
?>

get_rss_feed.php (get_rss_feed.php)


<?php
$sUrl = (isset($_GET['url']) && $_GET['url'] != '') ? $_GET['url'] : 'http://www.boonex.com/unity/extensions/latest/?rss=1';
header( 'Content-Type: text/xml' );
readfile($sUrl);
?>


<?php
$sUrl = (isset($_GET['url']) && $_GET['url'] != '') ? $_GET['url'] : 'http://www.boonex.com/unity/extensions/latest/?rss=1';
header( 'Content-Type: text/xml' );
readfile($sUrl);
?>

步骤5.图片 (Step 5. Images)

Several images are required for our project:

我们的项目需要几个图像：

现场演示

结论 (Conclusion)

Today I’ve described you how to create own RSS aggregator using jQuery library – jFeed. You are welcome to use it in your projects. Good luck!

今天，我已经向您介绍了如何使用jQuery库jFeed创建自己的RSS聚合器。欢迎您在项目中使用它。祝好运！

翻译自: https://www.script-tutorials.com/import-rss-feeds-using-jfeed-jquery/

jquery导入实现导入

cuketao5066

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery导入实现导入_使用jFeed（jQuery）导入RSS feed

jquery导入实现导入RSS feed – using jFeed (jQuery) to aggregate RSS This simple tutorial will show you how to Import rss feeds of any site into your own custom area/block of website. It can be used as news i...
复制链接

扫一扫