导入多个RSS feed-使用newsWidget（jQuery）

最新推荐文章于 2024-07-25 11:26:35 发布

cuketao5066

最新推荐文章于 2024-07-25 11:26:35 发布

阅读量73

点赞数

文章标签： html js css clojure less ViewUI

原文链接：https://www.script-tutorials.com/importing-multiple-rss-feeds-using-newswidget-jquery/

版权

Importing multiple RSS feeds – using newsWidget (jQuery)

导入多个RSS feed-使用newsWidget(jQuery)

Some times ago I told how to display rss feed at our website. But some times ago my friend ask me how to display in single box feeds from multiple sources. I decided to investigate it and located NewsWidget library. Lets check its possibilities. Here is a sample:

有时我告诉过我们如何在我们的网站上显示rss feed。但是前段时间，我的朋友问我如何在多个来源的单个框供稿中显示。我决定对其进行调查，并找到NewsWidget库。让我们检查一下它的可能性。这是一个示例：

现场演示1

现场演示2

现场演示3

[sociallocker]

[社交储物柜]

打包下载

[/sociallocker]

[/ sociallocker]

Ok, download the example files and lets start coding !

好的，下载示例文件并开始编码！

步骤1. HTML (Step 1. HTML)

As usual, we will start with the HTML.

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

Here are sources of all 3 samples:

这是所有3个样本的来源：

templates / sample1.html (templates/sample1.html)


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Example 1 - NewsWidget jQuery Plugin</title>
    <link rel="stylesheet" href="css/styles1.css" type="text/css" media="screen" />
</head>
<body>
    <div id="newsWidget">
        <div class="intro">Below you find some <strong>random</strong> rss feeds from few sources using extended format. Every <strong>15 seconds</strong> the list is updated.</div>
        <ul id="news"></ul>
    </div>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.newsWidget.js"></script>
    <script type="text/javascript">
        $('ul#news').newswidget({ source: ['http://rss.news.yahoo.com/rss/us', 'http://rss.news.yahoo.com/rss/world', 'http://feeds.bbci.co.uk/news/rss.xml'],
            proxyUrl: "get_rss_feed.php",
            limitItems: 10,
            refresh: 15000,
            random: true,
            itemDateElement: "span",
            itemLinkElement: "span",
            itemWebsiteTitleElement: 'span',
            linkTitle: true,
            format: "title,description,date,link,websiteTitle"});
    </script>
</body>
</html>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Example 1 - NewsWidget jQuery Plugin</title>
    <link rel="stylesheet" href="css/styles1.css" type="text/css" media="screen" />
</head>
<body>
    <div id="newsWidget">
        <div class="intro">Below you find some <strong>random</strong> rss feeds from few sources using extended format. Every <strong>15 seconds</strong> the list is updated.</div>
        <ul id="news"></ul>
    </div>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.newsWidget.js"></script>
    <script type="text/javascript">
        $('ul#news').newswidget({ source: ['http://rss.news.yahoo.com/rss/us', 'http://rss.news.yahoo.com/rss/world', 'http://feeds.bbci.co.uk/news/rss.xml'],
            proxyUrl: "get_rss_feed.php",
            limitItems: 10,
            refresh: 15000,
            random: true,
            itemDateElement: "span",
            itemLinkElement: "span",
            itemWebsiteTitleElement: 'span',
            linkTitle: true,
            format: "title,description,date,link,websiteTitle"});
    </script>
</body>
</html>

templates / sample2.html (templates/sample2.html)


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Example 2 - NewsWidget jQuery Plugin</title>
    <link rel="stylesheet" href="css/styles2.css" type="text/css" media="screen" />
</head>
<body>
    <div id="newsWidget">
        <div class="intro">Below you find some the <strong>latest</strong> rss feeds from few sources using extended format.</div>
        <ul id="news"></ul>
    </div>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.newsWidget.js"></script>
    <script type="text/javascript">
        $('ul#news').newswidget({ source: ['http://rss.news.yahoo.com/rss/us', 'http://rss.news.yahoo.com/rss/world', 'http://feeds.bbci.co.uk/news/rss.xml'],
            proxyUrl: "get_rss_feed.php",
            limitItems: 10,
            random: false,
            itemDateElement: "span",
            itemLinkElement: "span",
            itemWebsiteTitleElement: 'span',
            linkTitle: true,
            format: "title,date,websiteTitle, description"});
    </script>
</body>
</html>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Example 2 - NewsWidget jQuery Plugin</title>
    <link rel="stylesheet" href="css/styles2.css" type="text/css" media="screen" />
</head>
<body>
    <div id="newsWidget">
        <div class="intro">Below you find some the <strong>latest</strong> rss feeds from few sources using extended format.</div>
        <ul id="news"></ul>
    </div>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.newsWidget.js"></script>
    <script type="text/javascript">
        $('ul#news').newswidget({ source: ['http://rss.news.yahoo.com/rss/us', 'http://rss.news.yahoo.com/rss/world', 'http://feeds.bbci.co.uk/news/rss.xml'],
            proxyUrl: "get_rss_feed.php",
            limitItems: 10,
            random: false,
            itemDateElement: "span",
            itemLinkElement: "span",
            itemWebsiteTitleElement: 'span',
            linkTitle: true,
            format: "title,date,websiteTitle, description"});
    </script>
</body>
</html>

templates / sample3.html (templates/sample3.html)


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Example 3 - NewsWidget jQuery Plugin</title>
    <link rel="stylesheet" href="css/styles3.css" type="text/css" media="screen" />
</head>
<body>
    <div id="newsWidget">
        <div class="intro">Below you find some the <strong>latest</strong> rss feeds from few sources using easy format.</div>
        <ul id="news"></ul>
    </div>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.newsWidget.js"></script>
    <script type="text/javascript">
        $('ul#news').newswidget({ source: ['http://rss.news.yahoo.com/rss/us', 'http://rss.news.yahoo.com/rss/world', 'http://feeds.bbci.co.uk/news/rss.xml'],
            proxyUrl: "get_rss_feed.php",
            limitItems: 10,
            random: false,
            itemDateElement: "span",
            itemLinkElement: "span",
            itemWebsiteTitleElement: 'span',
            linkTitle: true,
            format: "title,date"});
    </script>
</body>
</html>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Example 3 - NewsWidget jQuery Plugin</title>
    <link rel="stylesheet" href="css/styles3.css" type="text/css" media="screen" />
</head>
<body>
    <div id="newsWidget">
        <div class="intro">Below you find some the <strong>latest</strong> rss feeds from few sources using easy format.</div>
        <ul id="news"></ul>
    </div>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.newsWidget.js"></script>
    <script type="text/javascript">
        $('ul#news').newswidget({ source: ['http://rss.news.yahoo.com/rss/us', 'http://rss.news.yahoo.com/rss/world', 'http://feeds.bbci.co.uk/news/rss.xml'],
            proxyUrl: "get_rss_feed.php",
            limitItems: 10,
            random: false,
            itemDateElement: "span",
            itemLinkElement: "span",
            itemWebsiteTitleElement: 'span',
            linkTitle: true,
            format: "title,date"});
    </script>
</body>
</html>

As you can see – these samples quite same, just list of params is different. Most of params described in JS library itself, but I used next: limitItems – how many elements we will display; refresh – refresh time (in ms, optional param); random – are elements will display randomly or not, format – array of elements which we going to display.

如您所见–这些示例完全相同，只是参数列表有所不同。大部分参数在JS库本身中描述，但我接下来使用：limitItems –我们将显示多少个元素；刷新–刷新时间(以毫秒为单位，可选参数)；随机-元素是否会随机显示，格式-我们将要显示的元素数组。

步骤2. CSS (Step 2. CSS)

Here are used CSS styles.

这是使用CSS样式。

css / styles1.css (css/styles1.css)


@charset "utf-8";
body{color:#333;font-family:Verdana,Arial,Helvetica,sans-serif;font-size:12px;text-align:center}
#newsWidget{text-align:left;margin:20px auto;width:250px;border:1px solid #cdcdcd;padding:10px}
#newsWidget .intro{background-color:#f5f5f5;padding:10px}
#newsWidget ul{margin-left:0;padding-left:0;list-style:none}
#newsWidget ul li{padding-left:20px;background-image:url(news.jpg);background-repeat:no-repeat;background-position:0 12px}
#newsWidget h4{font-size:12px;color:#424242;margin:0;padding:10px 0 5px}
#newsWidget .description{margin:0;padding:0 0 5px}
#newsWidget .date{font-size:10px;color:gray}
#newsWidget .date,#newsWidget .link{font-size:10px;color:gray;padding:0 5px 0 0;margin:0 5px 0 0;border-right:solid 1px gray}
#newsWidget .websiteTitle{font-size:10px;color:gray}
#newsWidget a:link,#newsWidget a:active,#newsWidget a:visited{color:#036}
#newsWidget a:hover{color:#f60}


@charset "utf-8";
body{color:#333;font-family:Verdana,Arial,Helvetica,sans-serif;font-size:12px;text-align:center}
#newsWidget{text-align:left;margin:20px auto;width:250px;border:1px solid #cdcdcd;padding:10px}
#newsWidget .intro{background-color:#f5f5f5;padding:10px}
#newsWidget ul{margin-left:0;padding-left:0;list-style:none}
#newsWidget ul li{padding-left:20px;background-image:url(news.jpg);background-repeat:no-repeat;background-position:0 12px}
#newsWidget h4{font-size:12px;color:#424242;margin:0;padding:10px 0 5px}
#newsWidget .description{margin:0;padding:0 0 5px}
#newsWidget .date{font-size:10px;color:gray}
#newsWidget .date,#newsWidget .link{font-size:10px;color:gray;padding:0 5px 0 0;margin:0 5px 0 0;border-right:solid 1px gray}
#newsWidget .websiteTitle{font-size:10px;color:gray}
#newsWidget a:link,#newsWidget a:active,#newsWidget a:visited{color:#036}
#newsWidget a:hover{color:#f60}

css / styles2.css (css/styles2.css)


@charset "utf-8";
body{color:#333;font-family:Arial,Helvetica,sans-serif;font-size:12px;text-align:center}
#newsWidget{text-align:left;margin:20px auto;width:250px;border:1px solid #cdcdcd;padding:10px;color:#333}
#newsWidget .intro{background-color:#f5f5f5;padding:10px}
#newsWidget ul{margin:0;padding:0;list-style:none}
#newsWidget ul li{border:3px solid #f2f2f2;display:block;margin:10px 0 0;padding:10px 24px 16px 28px;position:relative}
#newsWidget h4{font-size:17px;color:#424242;margin:0;padding:10px 0 5px;line-height:22px}
#newsWidget .description{color:gray;font-size:11px;line-height:15px;clear:both}
#newsWidget .date,#newsWidget .websiteTitle{font-size:10px;font-style:italic;line-height:13px;padding:0 4px 24px 0;display:block;float:left}
#newsWidget a:link,#newsWidget a:active,#newsWidget a:visited{border-bottom:1px solid #d8d8d8;color:#333;text-decoration:none}
#newsWidget a:hover{border-bottom-color:#333}
.spacer{clear:both;height:1px;display:block}


@charset "utf-8";
body{color:#333;font-family:Arial,Helvetica,sans-serif;font-size:12px;text-align:center}
#newsWidget{text-align:left;margin:20px auto;width:250px;border:1px solid #cdcdcd;padding:10px;color:#333}
#newsWidget .intro{background-color:#f5f5f5;padding:10px}
#newsWidget ul{margin:0;padding:0;list-style:none}
#newsWidget ul li{border:3px solid #f2f2f2;display:block;margin:10px 0 0;padding:10px 24px 16px 28px;position:relative}
#newsWidget h4{font-size:17px;color:#424242;margin:0;padding:10px 0 5px;line-height:22px}
#newsWidget .description{color:gray;font-size:11px;line-height:15px;clear:both}
#newsWidget .date,#newsWidget .websiteTitle{font-size:10px;font-style:italic;line-height:13px;padding:0 4px 24px 0;display:block;float:left}
#newsWidget a:link,#newsWidget a:active,#newsWidget a:visited{border-bottom:1px solid #d8d8d8;color:#333;text-decoration:none}
#newsWidget a:hover{border-bottom-color:#333}
.spacer{clear:both;height:1px;display:block}

css / styles2.css (css/styles2.css)


@charset "utf-8";
body{color:#bebebe;font-family:Arial,Helvetica,sans-serif;font-size:13px;font-weight:lighter;line-height:18px;text-align:center;background-image:url(background.jpg);background-repeat:repeat}
#newsWidget{text-align:left;margin:20px auto;width:250px;border:1px dotted #414141;padding:10px;color:#333}
#newsWidget .intro{background-color:#67afcb;padding:10px;color:#fff;margin-bottom:10px}
#newsWidget ul{margin:0;padding:0;list-style:none}
#newsWidget ul li{border-bottom:1px dotted #313131;margin:0 0 8px;padding:0 0 8px;display:block;position:relative}
#newsWidget h4{font-size:14px;color:#424242;margin:0;padding:2px 0 0;line-height:18px;display:block}
#newsWidget .date{color:#999;font-size:11px;clear:both}
#newsWidget a:link,#newsWidget a:active,#newsWidget a:visited{color:#67afcb;text-decoration:none}
#newsWidget a:hover{color:#79c0dc}
.spacer{clear:both;height:1px;display:block}


@charset "utf-8";
body{color:#bebebe;font-family:Arial,Helvetica,sans-serif;font-size:13px;font-weight:lighter;line-height:18px;text-align:center;background-image:url(background.jpg);background-repeat:repeat}
#newsWidget{text-align:left;margin:20px auto;width:250px;border:1px dotted #414141;padding:10px;color:#333}
#newsWidget .intro{background-color:#67afcb;padding:10px;color:#fff;margin-bottom:10px}
#newsWidget ul{margin:0;padding:0;list-style:none}
#newsWidget ul li{border-bottom:1px dotted #313131;margin:0 0 8px;padding:0 0 8px;display:block;position:relative}
#newsWidget h4{font-size:14px;color:#424242;margin:0;padding:2px 0 0;line-height:18px;display:block}
#newsWidget .date{color:#999;font-size:11px;clear:both}
#newsWidget a:link,#newsWidget a:active,#newsWidget a:visited{color:#67afcb;text-decoration:none}
#newsWidget a:hover{color:#79c0dc}
.spacer{clear:both;height:1px;display:block}

步骤3. JS (Step 3. JS)

Current samples contain jquery.min.js library and jquery.newsWidget.js. I don`t included source codes of these libraries in post. It always available in package

当前示例包含jquery.min.js库和jquery.newsWidget.js。我没有在帖子中包含这些库的源代码。始终以包装形式提供

步骤4. PHP (Step 4. PHP)

Here are one small PHP file:

这是一个小PHP文件：

get_rss_feed.php (get_rss_feed.php)


<?php
$sUrl = $_GET['url'];
header( 'Content-Type: text/xml' );
readfile($sUrl);
?>


<?php
$sUrl = $_GET['url'];
header( 'Content-Type: text/xml' );
readfile($sUrl);
?>

结论 (Conclusion)

Today I told you how to import several RSS feeds using new jQuery library. You can use this material to create own scripts into your startups. Good luck!

今天，我告诉您如何使用新的jQuery库导入多个RSS feed。您可以使用此材料在创业公司中创建自己的脚本。祝好运！

翻译自: https://www.script-tutorials.com/importing-multiple-rss-feeds-using-newswidget-jquery/

cuketao5066

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
导入多个RSS feed-使用newsWidget（jQuery）

Importing multiple RSS feeds – using newsWidget (jQuery) 导入多个RSS feed-使用newsWidget(jQuery) Some times ago I told how to display rss feed at our website. But some times ago my friend ask me how to dis...
复制链接

扫一扫