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

Source: Internet
Author: User

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:

<div id= "title" > <h1 style= "padding:10px;font-size:50px;" >gbin1 RSS Feed magazine</h1> <div id= "config" ><a id= "Setting" href= "#" ></a></div> </div> <div id= "content" ></div>

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.