Using jquery to develop a responsive super cool integrated RSS information Reading magazine

Intermediary transaction SEO diagnosis Taobao guest Cloud host technology Hall

If you like to read blog posts, RSS Readers may be used today, and here we will use jquery to develop a responsive RSS reading application that you can use to aggregate your favorite RSS articles on the same page, like an online magazine or publication, You can also customize the configuration used to set the need to access the RSS feed, I hope you like!

JS class libraries and jquery Plug-ins used:

JQuery

JQuery Cookies

JQuery Socialist

JQuery Feeds

Cufon

jquery placeholder

Moment.js

HTML code

HTML code is very simple, consists of display content, RSS Settings window and its cover layer

The HTML code to generate RSS read content is as follows:

Generate RSS Configuration pop-up window and its masking layer HTML code as follows:

<div id= "Modelwrapper" ></div> <div id= "model" > <h2>add new feed</h2> <div> 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"/> </div> <ul id= "rsslist" > </ul> </div>

JavaScript code

Get current RSS content from cookies, use the Sociallist plugin to get RSS content, and use Cufon to beautify your fonts:

$ (document). Ready (function () {$ (' #setting '). Animate ({opacity:0.4}). Animate ({opacity:1}) cufon.replace (' body '). Css.ready (function () {if (cookie.enabled ()) {} else {alert (' You need to enable the cookie, thanks! ');} var rsslinks = Cookie.get (' gbin1-rsslinks '); if (rsslinks==null) {cookie.set (' gbin1-rsslinks ', ' http://feed.feedsky.com/GBin1 '); rsslinks = ' http:// Feed.feedsky.com/gbin1 '; var rsslinklist = rsslinks.split (' | '); var rsslistarray = new Array (); for (a=0;a<rsslinklist.length;a++) {if (Rsslinklist[a].trim ()!== ') {Rsslistarray.push ({name: ' RSS '), ID: Rsslinklist[a]}); } $ (' #content '). Socialist ({networks:rsslistarray, isotope:true, Random:false, textlength:800, Theme: ' None ', Maxresu lts:50, fields:[' source ', ' heading ', ' Text ', ' date ', ' image ', ' followers ', ' likes '}); }); });

The following code controls the pop-up RSS Configuration dialog box and saves the RSS feed to the user's current browser cookie:

 $ (function () {$ (' #config '). On (' click ', Function () {console.log (' config '); var model = $ (' #model '); var w = $ (win Dow). width (); var h = $ (window). Height (); var left = W/2-Model.outerwidth ()/2; var top = H/2-Model.outerheight ()/2; $ (' #modelwrapper '). FadeIn (); $ (' #model '). Animate ({left:left, top:top}). FadeIn (); var rssliststr = '; var rsslinks = cookie.get (' gbin1-rsslinks '); var rsslinklist = rsslinks.split (' | '); for (a=0;a<rsslinklist.length;a++) {if (Rsslinklist[a].trim ()!== ') {rssliststr = = ' <li><a style= ' color: Red "class=" DeleteIt "href=" # ">[x]</a>&nbsp;<span> ' + rsslinklist[a] + ' </span></li> ' ; } $ (' #rsslist '). HTML (RSSLISTSTR); Cufon.refresh (); }); var addcxt = $ (' #addrss '). On (' click ', function () {var url = $ (' #rssvalue '). Val (), RSS = ' <span> ' + URL + ' </span& gt; ', AddButton = $ (' #addrss '); $ (this). val (' Add ... '); $.getfeed ({url:url, success:function (feed) {Console.log (Feed.title); $ (' #rsslist '). Append (' <li>≪a style= "color:red" class= "DeleteIt" href= "#" >[x]</a>&nbsp; ' + rss + ' </li> '); Cufon.refresh (); Addbutton.val (' + '); Error:function () {alert (' Please ensure it's a valid RSS URL '); Addbutton.val (' + ');}}; }); $ (' #saverss '). On (' click ', function () {var rsslinks= '; $ (' #model '). fadeout; $ (' #modelwrapper '). fadeout (600); ' #rsslist Li '). each (function () {rsslinks = rsslinks + ' | ' + $ (a). Find (' span '). text ();}); Cookie.set (' Gbin1-rsslinks ', Rsslinks, {expires:30}); Location.reload (); }); $ (' #rsslist '). On (' Click ', ' #rsslist. DeleteIt ', function () {$ (this). Closest (' Li '). Remove ();}); });

Note The above code we have implemented a masking layer to highlight the effect of the dialog box, and before the user to save RSS to determine whether the correct RSS address.

Online Demo

We add a new RSS address: http://www.leiphone.com/feed (Lei Feng net)

Save the RSS address and return to the main screen to display all RSS content:

You can see all the latest RSS article seeds that list the gbin1 and Lei Feng Web. If you zoom the browser window, you can see the content of the window with the size of the adaptive display, is not very good?

I hope you like this online integrated RSS reading magazine, if you have any questions, please leave us a message, thank you!

Date: 2012-10-25 Source: gbin1.com