爱站程序员基地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: [\'JQuery/us\', \'JQuery/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: [\'JQuery/us\', \'JQuery/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>
[/code]
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: [\'JQuery/us\', \'JQuery/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: [\'JQuery/us\', \'JQuery/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>
[/code]
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: [\'JQuery/us\', \'JQuery/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: [\'JQuery/us\', \'JQuery/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>
[/code]
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}
[/code]
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}
[/code]
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}
[/code]
步骤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);?>
[/code]
现场演示1
现场演示2
现场演示3
结论 (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。 您可以使用此材料在创业公司中创建自己的脚本。 祝好运！
翻译自: JQuery/blockquote
