利用 Google Feed API 制作 Box.net 网盘页面

停了几天，还是忍不住折腾起来。

很早就折腾过jQuery直接Ajax解析xml，之前《制作 Box.net 文件外链展示页面》应用的就是此方法，由于跨域的问题那时还是请其他童鞋写的xml.php缓存小程序。

这回当然更牛X了，还是得感谢Google大神，竟然还存在这种神器：Google Feed API，能直接把xml转换成json。

 
http://www.box.net/shared/z27ivp67gu/rss.xml
 
http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=http://www.box.net/shared/z27ivp67gu/rss.xml

如此一来，咱就可以通过Ajax解析json数据，缓存干啥哟，直接上咯～

先看看html代码结构，href里是Box.net文件夹分享的链接，可自行修改添加：

 
	<li><a href="http://www.box.net/shared/z27ivp67gu">网站附件</a></li>

核心还是jQuery代码咯：

 
//By ImMmMm.com
 
jQuery(document).ready(function($){
 
$("#itemname a").click(function(){
 
	$('#itemb').hide(100).empty();
 
	var rss= "http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q="+this.href+"/rss.xml&num=100&callback=?";  //数值100可以修改
 
	$.getJSON(rss,function(json){
 
		$(json.responseData.feed.entries).each(function(i,dt){
 
			var title=dt.title,link=dt.link,cont=dt.content;
 
			var src="http://img1.dnschina.net/files/46/icons/"+title.replace(/.*.(.*)$/,'$1').toLowerCase()+".gif"  //使用横天图床挂图标，另外加了JavaScript的大写转小写属性
 
			$('#itemb').append("<div class='itemb'><div class='thumbb'><a href='"+link+"' title=''><img src='"+src+"'></a></div><div class='file'><div class='name'><a href='"+link+"' title=''>"+title+"</a></div><div class='info'>"+cont+"</div></div></div>");
 
		});
 
		$('#itemb').slideDown(300);
 
	});
 
	return false;
 
});
 
});

2011-03-18更新：由于dl.box.net被墙，利用正则走box镜像站boxcn.net。

8 9	var title=dt.title,link=dt.link.replace('box.net','boxcn.net'),cont=dt.content;

额，竟然注释不出来，混乱，无非就是获取对象，然后该正则的正则该重组的重组。这么晚了，各位童鞋自己看看咯～

看不懂也没关系，下载程序回去改改html就好使的，压缩包里已包含一个页面模板：

box-json.7z

PS：一个问题，xml里面明明有图标的链接，转换后没了，只能使用图床来挂图标了，目前放在衡天图床。

另外有什么类型的图标显示不出来可给我留言，我传上去。当然你也可更改jQuery里的图标链接地址http://img1.dnschina.net/到本地～

怡红公子
一月 18, 2011 23:59:23 #1

妈妈说看完要沙发的
这个很高级，原来Google还有这么好的东西，直接XML转成JSON啊…

回复
- 林木木
  一月 19, 2011 00:04:0
  
  今天才发现，就是转换出来有些内容没了……
  
  回复
西门
一月 19, 2011 00:04:0 #2

没人，那么就占个沙发吧。

回复
- 林木木
  一月 19, 2011 00:04:0
  
  SF已被秒～
  
  回复
d大大的小蜗牛
一月 19, 2011 02:52:2 #3

沙发板凳啥的没有了，那就中蹲地板上慢慢琢磨吧。

回复
- 林木木
  一月 19, 2011 10:58:10
  
  嘻嘻，如果有用box网盘，这个小程序不错～
  
  回复
亦白。
一月 19, 2011 02:55:2 #4

这个给力吖~哈哈。实用

回复
- 林木木
  一月 19, 2011 10:58:10
  
  又一装牛X的东东～
  
  回复
chnmcy
一月 19, 2011 08:49:8 #5

我我我我也不知道说点啥好了
木木你就使劲折腾吧

回复
- 林木木
  一月 19, 2011 11:00:11
  
  使劲折腾会刹不住车的……
  
  回复
独自流浪
一月 19, 2011 08:59:8 #6

一早起来就有收获

回复
- 林木木
  一月 19, 2011 11:01:11
  
  嘻嘻，看看呗～
  
  回复
卢达
一月 19, 2011 09:37:9 #7

木木同学折腾得很给力，这个很赞

回复
- 林木木
  一月 19, 2011 11:02:11
  
  多谢捧场～HOHO，那个页面我很正常打开，你不是电信的吧？
  
  回复
卢达
一月 19, 2011 09:42:9 #8

http://immmmm.com/box-net-produced-showpage.html 此页面被墙了

回复
zuiTT
一月 19, 2011 10:09:10 #9

嗯嗯，昨天在推特看到你的演示，果然没多久就有方法出来。HOHO

回复
- 林木木
  一月 19, 2011 11:06:11
  
  其实不写出来肯定有人要问，索性折腾了就写文，直接～
  
  回复
kita
一月 19, 2011 11:03:11 #10

kita對於xml和json的概念還是有些模糊
似乎是用來交換數據用的

回复
- 林木木
  一月 19, 2011 11:13:11
  
  其实，具体我也不懂……xml是rss feed一种统一格式吧，json就来得轻量级一些，的确是用来数据交换的～
  
  回复
  - kita
    一月 19, 2011 11:48:11
    
    感覺許多地方都有用到xml之類的，感覺很有用雖然不會用
    
    回复
    - 林木木
      一月 19, 2011 13:29:13
      
      是的呢，想折腾了再找找啥好玩的～
      
      回复
Solo
一月 19, 2011 11:17:11 #11

又来学习…

回复
- 林木木
  一月 19, 2011 11:25:11
  
  欢迎欢迎～
  
  回复
- 林木木
  一月 19, 2011 11:27:11
  
  额，你家评论提交有些问题，出现”匿名”。然后首页显示有评论，进文章看不到……
  
  回复
  - Solo
    一月 19, 2011 12:00:12
    
    呃，我也遇到过，刷新就好了。很郁闷….
    
    回复
wmtimes
一月 19, 2011 11:31:11 #12

这个小功能不错。

回复
Simon
一月 19, 2011 11:42:11 #13

Nice!

回复
- 林木木
  一月 19, 2011 13:28:13
  
  Sure～
  
  回复
Louis Han
一月 19, 2011 12:43:12 #14

这个功能真是太实用了

回复
- 林木木
  一月 19, 2011 13:30:13
  
  对使用box.net的人来说，博客挂一个这还是很方便的～
  
  回复
希丸嘉
一月 19, 2011 16:26:16 #15

这个功能可以方便分享文件。

回复
- 林木木
  一月 19, 2011 17:10:17
  
  恩，比嵌入swf什么的好多了
  
  回复
QiQiBoY
一月 19, 2011 16:34:16 #16

看来你折腾jquery的ajax上瘾了。。

回复
- 林木木
  一月 19, 2011 17:12:17
  
  是ajax的json，没跨域问题，解析起来就是爽～
  
  回复
奚少
一月 19, 2011 16:39:16 #17

我承认文章我看不懂，不过我拿下了那些小说

回复
- 林木木
  一月 19, 2011 17:14:17
  
  趁热再传几本～～
  
  回复
  - 奚少
    一月 19, 2011 17:32:17
    
    我稀饭~
    
    回复
老王
一月 19, 2011 19:46:19 #18

正在考虑我要怎么利用这个东西。

回复
- 林木木
  一月 19, 2011 20:41:20
  
  分享电子书啥的就好了～
  
  回复
囧啊囧
一月 19, 2011 22:03:22 #19

box里面没美女

回复
- 林木木
  一月 19, 2011 22:06:22
  
  囧哥给些咯～
  
  回复
  - 囧啊囧
    一月 19, 2011 22:13:22
    
    才搞到一套那个谁的，，，，，cao 一下想不起名字了，，，哦，周韦彤的
    
    回复
    - 林木木
      一月 19, 2011 22:29:22
      
      视频都看了，没给力……
      
      回复
MOPVHS
一月 19, 2011 22:06:22 #20

tympanus.net/codrops/ 这里果然有好多可以学习的，谢谢木木推荐~~

回复
- 林木木
  一月 19, 2011 22:27:22
  
  还都是基于jQuery的，效果非常给力～
  
  回复
xianzi
一月 19, 2011 22:27:22 #21

上面那两个图标太难看啦！

回复
- 林木木
  一月 19, 2011 22:29:22
  
  额，难看……
  
  回复
  - xianzi
    一月 19, 2011 22:33:22
    
    右上角那俩
    
    回复
  - 老王
    一月 19, 2011 23:07:23
    
    说实话，没以前那个好看
    
    回复
    - 林木木
      一月 20, 2011 13:11:13
      
      主要我想放多个东西～
      
      回复
电脑知识与技术博客
一月 20, 2011 01:54:1 #22

我是被木木木木勾引来的。

回复
- 林木木
  一月 20, 2011 13:12:13
  
  说说，怎么勾得你～
  
  回复
电脑知识与技术博客
一月 20, 2011 15:00:15 #23

被~~木jj

回复
MOPVHS
一月 20, 2011 15:35:15 #24

奇怪，这个都提醒？

anothr cn 2011年01月20日 15时33分49秒
*[47]木木木木木*

*电脑知识与技术博客* 15:33 (ID 672)
iNeZha.com/t/1mdt5t/ztm5zkq

回复
- 林木木
  一月 20, 2011 16:05:16
  
  哪儿？
  
  回复
  - MOPVHS
    一月 20, 2011 20:59:20
    
    可能哪吒网最近抽了，它的GTalk总是重复提醒…
    
    回复
阅微BLOG
一月 20, 2011 17:51:17 #25

木木最近总是分享好东西。。太不好意思了。。

回复
- 林木木
  一月 20, 2011 18:08:18
  
  暂时没了……
  
  回复
HuMeng
一月 20, 2011 23:42:23 #26

用了，不错，哈哈，谢谢

回复
- 林木木
  一月 20, 2011 23:44:23
  
  留言人都没说折腾呢，我以为都没人用的，要白折腾了……
  
  回复
fatkun
一月 21, 2011 00:00:0 #27

原来谷歌可以跨域。。。。。在地址加上这个可以看到鸟 &callback=aaaaaaaaaaa

回复
- 林木木
  一月 21, 2011 00:02:0
  
  转json而已，jQuery里的getJSON是没有跨域问题的～
  
  回复
  - fatkun
    一月 21, 2011 16:23:16
    
    getJSON是自动加上了callback 参数了吧,这样才可以跨域.跨域的目前解决方法是使用<script标签执行callback方法.
    
    回复
    - 林木木
      一月 21, 2011 18:05:18
      
      要自己加的～
      
      回复
eversiming
一月 21, 2011 10:42:10 #28

wm手机回复
uc浏览器

回复
- 林木木
  一月 21, 2011 14:04:14
  
  这是测试啥？
  
  回复
Eversiming
一月 21, 2011 11:26:11 #29

iPad

回复
- 林木木
  一月 21, 2011 14:04:14
  
  切JJ！
  
  回复
集趣
一月 21, 2011 17:07:17 #30

呵呵，不想折腾咯

回复
- 林木木
  一月 21, 2011 18:05:18
  
  都有现成的，比起我写代码这安装的折腾……
  
  回复
黄芳
一月 21, 2011 17:35:17 #31

我对这些概念都还不清楚呢，不是很看得懂

回复
- 林木木
  一月 21, 2011 18:07:18
  
  会用就好～
  
  回复
落伍啦
一月 21, 2011 20:26:20 #32

来参观参观，拖博主的福，我的主题跟你的很像呢

回复
- 林木木
  一月 21, 2011 21:22:21
  
  抄得真给力！
  
  回复
落伍啦
一月 21, 2011 20:27:20 #33

嘿嘿，其实是抄你的

回复
落伍啦
一月 21, 2011 20:29:20 #34

不过有些地方学不会，太难了，比如那个无限分页，总没弄好，还有就是顶上的导航栏，也没弄好

回复
- 林木木
  一月 21, 2011 21:23:21
  
  更多内容不放php代码，光css和js是么用地～
  
  回复
  - 落伍啦
    一月 21, 2011 21:58:21
    
    是啊，确实你这个主题太深奥了，看来我还得好好学习
    
    回复
    - 林木木
      一月 21, 2011 22:49:22
      
      是被逼出来的……一大堆扒主题的人，还改主题名作者……
      
      回复
      - 落伍啦
        一月 23, 2011 09:45:9
        
        改主题作者太不应该啊，我发现你的JS文件也都很乱，果然是经过处理的
        
        回复
        
        老王
        一月 23, 2011 11:16:11
        
        乱吗？无语！
        
        回复
        
        林木木
        一月 23, 2011 12:23:12
        
        只是对变量进行了精简，都没加密……
        
        回复
        
        落伍啦
        一月 23, 2011 14:09:14
        
        是没有加密，就是看起来有点费劲，
        
        回复
老王
一月 21, 2011 20:56:20 #35

啥时候加了个显示信息的了。

回复
- 林木木
  一月 21, 2011 21:24:21
  
  下午，刚刚～呵呵
  
  回复
  - 老王
    一月 21, 2011 22:35:22
    
    本来我早就想加上的，但看到好多图片还是很矛盾。
    
    回复
    - 林木木
      一月 21, 2011 22:50:22
      
      加了一个判断，只在主评论显示～
      
      回复
      - hzlzh
        一月 23, 2011 23:48:23
        
        犀利，我也折腾下，只要主评论显示UA
        
        回复
kay
一月 25, 2011 20:44:20 #36

木木！有个提议，就是分页，每一页输出多小个软件等。还有，木木能不能把衡天图床挂图标的图标打包发我一份呢？我想把那图标放在自己的空间里！

回复
- 林木木
  一月 26, 2011 15:43:15
  
  分页大大增加代码复制性，暂时没这个需求，有时间再折腾～图标已发到你邮箱～
  
  回复
- 亿品元素
  二月 20, 2011 11:13:11
  
  确实建议有个分页，如果里面文件一多，那不是找起来就麻烦了，有个分页好
  
  回复
  - 林木木
    二月 20, 2011 13:53:13
    
    分页会增大数据解析量，得不偿失……
    
    回复
老宋
二月 5, 2011 18:55:18 #37

想弄个下载但不太会弄呵呵

回复
Aaronlam
二月 10, 2011 01:51:1 #38

这个功能很给力、

回复
- 林木木
  二月 12, 2011 16:31:16
  
  出来的效果也比较显酷～
  
  回复
cgrabbit/兔了吧唧网
二月 20, 2011 11:31:11 #39

昨天抄袭了一下。。。哈哈确实很给力！

回复
亿品元素
二月 20, 2011 19:45:19 #40

终于也折腾好了，不过有时候图标不显示，能否把打包的图标发给我? e_yun@163.com

回复
公子
三月 2, 2011 17:00:17 #41

现在好像不好使了? 一直打不开?

回复
荒野无灯
三月 18, 2011 18:07:18 #42

还是放本地安装吧，GOOGLE服务神马的，经常被墙（移动铁通的网尤其）。

回复
哧饭饭
四月 9, 2011 12:10:12 #43

木木，为什么上传到插件，，，插件列表没有这个插件啊~

回复
哧饭饭
四月 9, 2011 12:39:12 #44

上传了，okoki.cn/box，但是不会搞成页面那样的。。。关键点那个电子书之后，出现那句“什么不存在的”。。。

回复
- 林木木
  四月 11, 2011 22:07:22
  
  没有这个图标，你可以改改图片的路径～
  
  回复
熊猫稀饭
五月 3, 2011 22:02:22 #45

这玩意我用起来后总有行悲催的红字挡着我的文件……

回复
熊猫稀饭
五月 3, 2011 22:23:22 #46

多谢木木问题解决了

回复
- 林木木
  五月 4, 2011 00:11:0
  
  恩哈～解决就好
  
  回复
no
五月 30, 2011 20:50:20 #47

http://50an.com/box/ 我的还不行应该是背墙还有怎么放进小页面里而不是单独的页面

回复
- no
  五月 30, 2011 20:57:20
  
  现在没墙了只是怎么放到其他页面中呢
  
  回复
oucfeng
六月 24, 2011 20:15:20 #48

图床是不是挂了？

回复
NONO
三月 3, 2012 17:30:17 #49

var src=”http://50an.com/file/icons/”+title.replace(/.*\.(.*)$/,’$1′).toLowerCase()+”.gif”
我改成了自己的添加了部分图标但是文件夹图标不知道怎么修改需要怎么命名

回复
- 林木木
  三月 10, 2012 12:35:12
  
  可能直接写在html或者css里了……
  
  回复
  - NONO
    三月 10, 2012 14:24:14
    
    那需要怎么改？我现在拿没有图标http://50an.com/box
    
    回复
    - 林木木
      三月 11, 2012 00:05:0
      
      box.css 11行
      
      回复
      - NONO
        四月 2, 2012 17:32:17
        
        还有我心爱那个添加其他文件的图标比如 bt种子的图标需要怎么改？？？还有你之前的图标能分享一下吗
        
        回复
      - NONO
        四月 2, 2012 17:37:17
        
        我会啦不用弄了
        
        回复

发表评论 取消回复

发表评论取消回复