使用jQuery開發一個響應式超酷整合RSS信息閱讀雜誌

• 在線演示1
•  
• 本地下載
 

 

 

申請達人，去除贊助商連接

若是你們喜歡閱讀博客文章的話，可能都會使用RSS閱讀器，今天這裏咱們將使用jQuery來開發一個響應式的RSS信息閱讀應用，使用它你能夠將你喜歡的RSS文章以聚合的方式顯示在同一個頁面，相似一本在線的雜誌或者刊物，你也能夠自定義配置用來設定須要訪問的RSS源，但願你們喜歡！

使用的js類庫和jQuery插件：

• jQuery
• jQuery cookie
• jQuery socialist 
• jQuery feed
• Cufon
• jquery placeholder
• moment.js

HTML代碼

HTML代碼很是簡單，由顯示內容，RSS設置窗口及其遮蓋層組成

生成RSS閱讀信息內容的html代碼以下：

1. <div id="title">
2. <h1 style="padding:10px;font-size:50px;">gbin1 rss feed magazine</h1>
3. <div id="config"><a id="setting" href="#"></a></div>
4. </div>
5. <div id="content"></div>

 

生成RSS配置彈出窗口及其遮蓋層html代碼以下：

1. <div id="modelwrapper"></div>
2. <div id="model">
3. <h2>add new feed</h2>
4. <div>
5. RSS url: <input id="rssvalue"type="text" placeholder="eg. http://feed.feedsky.com/GBin1" /><input type="button" value="save" id="saverss"/><input type="button" value="+" id="addrss"/>
6. </div>
7. <ul id="rsslist">
8. </ul>
9. </div>

 

 

 

Javascript代碼

從Cookie中取得當前的RSS內容，這裏使用sociallist插件來取得RSS信息內容，而且使用cufon來美化字體：

1. $(document).ready(function () {
2. $('#setting').animate({opacity:0.4}).animate({opacity:1})
3. Cufon.replace('body').CSS.ready(function() {
4. if (cookie.enabled()) {
6. } else {
7. alert('you need to enable the cookie, thanks!');
8. }
10. var rsslinks = cookie.get('gbin1-rsslinks');
11. if(rsslinks==null){
12. cookie.set('gbin1-rsslinks', 'http://feed.feedsky.com/GBin1');
13. rsslinks = 'http://feed.feedsky.com/GBin1';
14. }
15. var rsslinklist = rsslinks.split('|');
16. var rsslistarray = new Array();
17. for(a=0;a<rsslinklist.length;a++){
18. if(rsslinklist[a].trim()!==''){
19. rsslistarray.push({name:'rss', id:rsslinklist[a]});
20. }
21. }
23. $('#content').socialist({
24. networks: rsslistarray,
25. isotope:true,
26. random:false,
27. textLength: 800,
28. theme: 'none',
29. maxResults: 50,
30. fields:['source','heading','text','date','image','followers','likes']
31. });
32. });
33. });

 

 

下面代碼控制彈出的RSS配置對話框，而且保存RSS到用戶當前瀏覽器的cookie中：

1. $(function(){
2. $('#config').on('click', function(){
3. console.log('config');
4. var model = $('#model');
5. var w = $(window).width();
6. var h = $(window).height();
7. var left = w/2 - model.outerWidth()/2;
8. var top = h/2 - model.outerHeight()/2;
9. $('#modelwrapper').fadeIn();
10. $('#model').animate({left:left, top:top}).fadeIn();
12. var rssliststr = '';
13. var rsslinks = cookie.get('gbin1-rsslinks');
14. var rsslinklist = rsslinks.split('|');
15. for(a=0;a<rsslinklist.length;a++){
16. if(rsslinklist[a].trim()!==''){
17. rssliststr += '<li><a style="color:red" class="deleteit" href="#">[x]</a>&nbsp;<span>' + rsslinklist[a] + '</span></li>';
18. }
19. }
20.  
21. $('#rsslist').html(rssliststr);
23. Cufon.refresh();
24. });
26. var addcxt = $('#addrss').on('click', function(){
27. var url = $('#rssvalue').val(),
28. rss = '<span>' + url + '</span>',
29. addbutton = $('#addrss');
30. $(this).val('add...');
31. $.getFeed({
32. url: url,
33. success: function(feed) {
34. console.log(feed.title);
35. $('#rsslist').append('<li><a style="color:red" class="deleteit" href="#">[x]</a>&nbsp;' + rss + '</li>');
36. Cufon.refresh();
37. addbutton.val('+');
38. },
39. error: function(){
40. alert('Please ensure it is a valid RSS url');
41. addbutton.val('+');
42. }
43. });
44.  
45. });
47. $('#saverss').on('click', function(){
48. var rsslinks='';
50. $('#model').fadeOut(400);
51. $('#modelwrapper').fadeOut(600);
53. $('#rsslist li').each(function(){
54. rsslinks = rsslinks + '|' + $(this).find('span').text();
55. });
57. cookie.set('gbin1-rsslinks', rsslinks, {
58. expires: 30
59. });
61. location.reload();
62. });
64. $('#rsslist').on('click', '#rsslist .deleteit', function(){
65. $(this).closest('li').remove();
66. });
67. });

 

 

 

注意以上代碼咱們本身實現了一個遮蓋層來突顯對話框效果，而且在用戶保存RSS前判斷RSS地址是否正確。

在線演示 

咱們添加一個新的RSS地址： http://www.leiphone.com/feed （雷鋒網）

保存RSS地址後返回主界面顯示全部的RSS內容：

你們能夠看到列出了gbin1和雷鋒網的全部最新的RSS文章種子。若是你縮放瀏覽器窗口，能夠看到內容隨着窗口大小自適應顯示，是否是很不錯？

但願你們喜歡這個在線整合RSS閱讀雜誌，若是你有任何問題，請給咱們留言，謝謝！