傻瓜式feeds in tabs
在google小工具API编程指南里发现了一个名为feeds in tabs的实例，感觉甚是有趣。不过需要调用tab库，而我对javascript并不熟悉。所以就想能不能用我懂的知识做一个替代品呢?于是上网搜到了一个名为Javascript Tabifier的小小js plugin，这个小东西和Google Reader提供的widgets一结合，恰巧可以实现feeds in tabs的效果。
在html下的全部代码如下：
<html>
<head>
<script type="text/javascript" src="http://www.barelyfitz.com/projects/tabber/tabber.js">
</script>
<link rel="stylesheet" type="text/css" href="http://www.barelyfitz.com/projects/tabber/example.css"/>
</head><body>
<div class="tabber"><div class="tabbertab" title="Internet">
<script type="text/javascript" src="http://www.google.com/reader/ui/publisher-en.js"></script>
<script type="text/javascript" src=" http://www.google.com/reader/public/javascript/user/12274289198166275392/label/internet?n=5&callback=GRC_p(%7Bc%3A%22-%22%2Ct%3A%22%22%2Cs%3A%22false%22%2Cb%3A%22false%22%7D)%3Bnew%20GRC"></script>
</div><div class="tabbertab" title="Google">
<script type="text/javascript" src="http://www.google.com/reader/ui/publisher-en.js"></script>
<script type="text/javascript" src=" http://www.google.com/reader/public/javascript/user/12274289198166275392/label/google?n=5&callback=GRC_p(%7Bc%3A%22-%22%2Ct%3A%22%22%2Cs%3A%22false%22%2Cb%3A%22false%22%7D)%3Bnew%20GRC"></script>
</div></div>
</body>
</html>
<head>区里先后引用了官方提供的js和默认css样式，<body>区里的格式是固定的，在http://www.barelyfitz.com/projects/tabber的使用方法中有说明。形如<div class="tabbertab" title="Internet"> 下面的即是google reader提供的widgets代码。如果要添加多个tab，格式须遵守说明。
如果要在blogger中添加这个傻瓜式feeds in tabs，代码如下：
<script type="text/javascript" src="http://www.barelyfitz.com/projects/tabber/tabber.js"> </script>
<style>..............</style>
<div class="tabber">
<div class="tabbertab" title="Internet"> ....................</div>
<div class="tabbertab" title="Google"> ....................</div>
</div>
<style>和</style>之间的位置是css，可参考http://www.barelyfitz.com/projects/tabber/example.css"/，下面两个省略号位置放google reader的widgets代码。(当然，也可以放其他第三方网站提供的js代码，比如aiderss.com的)
最后还有一点要说明的是，实验成功后最好将Tabifier的js下载到自己空间(googlecode)再引用，否则会对别人网站的服务器造成压力。
附效果图一张：
posted by Vane at
2:06 AM
0 Comments:
Post a Comment
Subscribe to Post Comments [Atom]
<< Home