使用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代码如下:
- <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>
生成RSS配置弹出窗口及其遮盖层html代码如下:
- <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代码
从Cookie中取得当前的RSS内容,这里使用sociallist插件来取得RSS信息内容,并且使用cufon来美化字体:
- $(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',
- maxResults: 50,
- fields:['source','heading','text','date','image','followers','likes']
- });
- });
- });
下面代码控制弹出的RSS配置对话框,并且保存RSS到用户当前浏览器的cookie中:
- $(function(){
- $('#config').on('click', function(){
- console.log('config');
- var model = $('#model');
- var w = $(window).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> <span>' + rsslinklist[a] + '</span></li>';
- }
- }
- $('#rsslist').html(rssliststr);
- Cufon.refresh();
- });
- var addcxt = $('#addrss').on('click', function(){
- var url = $('#rssvalue').val(),
- rss = '<span>' + url + '</span>',
- 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> ' + rss + '</li>');
- Cufon.refresh();
- addbutton.val('+');
- },
- error: function(){
- alert('Please ensure it is a valid RSS url');
- addbutton.val('+');
- }
- });
- });
- $('#saverss').on('click', function(){
- var rsslinks='';
- $('#model').fadeOut(400);
- $('#modelwrapper').fadeOut(600);
- $('#rsslist li').each(function(){
- rsslinks = rsslinks + '|' + $(this).find('span').text();
- });
- cookie.set('gbin1-rsslinks', rsslinks, {
- expires: 30
- });
- location.reload();
- });
- $('#rsslist').on('click', '#rsslist .deleteit', function(){
- $(this).closest('li').remove();
- });
- });
注意以上代码我们自己实现了一个遮盖层来突显对话框效果,并且在用户保存RSS前判断RSS地址是否正确。
在线演示
我们添加一个新的RSS地址: http://www.leiphone.com/feed (雷锋网)
保存RSS地址后返回主界面显示所有的RSS内容:
大家可以看到列出了gbin1和雷锋网的所有最新的RSS文章种子。如果你缩放浏览器窗口,可以看到内容随着窗口大小自适应显示,是不是很不错?
希望大家喜欢这个在线整合RSS阅读杂志,如果你有任何问题,请给我们留言,谢谢!
使用jQuery开发一个响应式超酷整合RSS信息阅读杂志相关推荐
- 使用BootStrap开发一个响应式的页面
1.1 需求 开发一套页面,可以适用在PC端,Pad端,和手机端.不影响你的浏览的效果 1.2 分析 技术分析 [BootStrap的概述] 1).BootStrap的概念 2).什么是响应式: 响应 ...
- 如何快速开发一个响应式移动端页面
适用领域 1.非工程化项目(不需要webpack之类的打包) 2.html+css页面数少的项目(例如:app下载页面.抽奖活动页面) 3.其实pc端页面也适用的,但用的少(例如:大屏数据可视化页面) ...
- Bootstrap3.1开发的响应式个人简历模板
在线演示 使用bootstrap3快速开发一个响应式的个人简历,如果有兴趣了解如何开发,请访问GB课程库,地址如下: Bootstrap3构建响应式前端设计师简历模板 http://www.gbtag ...
- java全景图片生成_[Java教程]使用Javascript来创建一个响应式的超酷360度全景图片查看幻灯效果...
[Java教程]使用Javascript来创建一个响应式的超酷360度全景图片查看幻灯效果 0 2015-07-23 18:00:14 360度的全景图片效果常常可以用到给客户做产品展示,今天这里我们 ...
- 使用jQuery开发一个超酷的倒计时效果
转自:http://www.gbtags.com/technology/jquerytutorial/20110105countdownjquery/ 使用jQuery开发一个超酷的倒计时效果 日期: ...
- 帮助你高效开发Ajax应用的超酷jQuery插件 - AjaxML
日期:2012-4-20 来源:GBin1.com 如果你使用jQuery进行Ajax开发的话,你一定要试试今天我们这里介绍的这一款jQuery插件 - AjaxML.它是一款能够帮助你提高ajax ...
- 使用 jQuery Mobile 与 HTML5 开发 Web App (十五) —— jQuery Mobile 与响应式
jQuery Mobile 在刚推出的时候,曾经宣传了几个重要的特点,除了 Kayo 在本系列文章中多次介绍的"触摸屏优化"外,另外一个最直接的特点就是"响应式设计&qu ...
- 移动端WEB开发之响应式布局(响应式开发原理、bootstrap、阿里百秀案例)
移动端WEB开发之响应式布局 1.1 响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的. 设备的划分情况: <!DOCTYPE html> & ...
- 响应式网站导航html,jQuery和CSS3响应式网站导航幻灯片插件
这是一款即实用又炫酷的jQuery和CSS3响应式网站导航幻灯片插件.该插件将幻灯片制作为网站的hero导航,在幻灯片中展示网站各主要板块的内容,使用户可以非常容易的了解网站的主要信息. 该幻灯片插件 ...
最新文章
- ISCW实验:配置Cisco IOS EASY ××× Server和Cisco ××× Client
- 【原创】谈谈线上CPU100%排查套路
- Dubbo-go 发布 1.5 版,朝云原生迈出关键一步
- Boost:boost::bimaps::multiset_of的测试程序
- find之exec和args
- Robotium_断言方法assert、is、search
- 职业发展 先“立功”还是先“安内”?
- oracle pl/sql 包
- 读取扫码枪输入_为何超市“扫码枪”这么强?不输密码钱就没了,现在知道还不晚...
- Linux学习笔记-编译与链接的过程
- android 电话拨号器
- 如何提高Eclipse的运行速度 之总结
- .NET: 如何在宿主中动态加载所有的服务
- 一文了解参数检验和非参数检验
- SRIO的介绍和IP核解析
- 计算机组成原理变形补码计算
- Office/Wps日常操作小技巧
- [NOI2003] 文本编辑器
- 微软终于要在2022年让ie浏览器退役了
- java.lang.IllegalArgumentException: Could not find class异常解决方式
热门文章
- Swift 与 Objective-C混编xxx-Swift.h File not found
- python大数据搜索_python语言-用 Python 实现一个大数据搜索引擎
- android: 在android studio中使用retrolambda的步骤
- Win10系列:UWP界面布局基础11
- 软件测试女孩学适合吗
- HTML5和CSS3响应式WEB设计指南译者序
- ie6 ie7 绝对定位 相对定位 层被遮住
- Win10如何远程连接Windows Server 2008,以及提示“您的凭证不工作”问题解决
- 使用SpringBoot配置了 server.servlet.path后无效的解决方案
- MySQL_解决ERROR 2006 (HY000) at line XX MySQL server has gone away问题