玩聚 SRBacks 自定义脚本及样式表

iFire @ 2009-01-11 02:34 59

今天玩聚推出了社会化推荐聚合服务中的一项有趣的页面挂件应用：SRBacks，十分实用也十分有趣。我当即引入自己的博客页面，不过发现其中的嵌套有误、呈现效果不够理想，于是将脚本下载下来自定义，改完之后自己感觉还不错。

对于外来挂件，其内嵌的样式有时候会给自己的页面造成挺大的麻烦，因此我尽量删减脚本中的内嵌样式，而是将其赋予伪类值(class)，然后将样式写入样式表，这给自定义样式的用户会带来较大的空间。

在 Twitter 上讨论了一番之后，我自行修改脚本，用笨办法解决了在列表里隐藏博主条目的问题。同时，也给用户头像、Google Reader 图标赋予了伪类值，这样自定义的时候可以轻松地将它们隐藏或是设置图像尺寸。

我修改的版本大体上算是自适应的，只是我测试宽度为 180px 的时候出现溢出，这应该是推荐文字中的长链接字符造成的，因此如果您是在侧栏调用，最好在设置一下条目 (#srbacks li.srbacklist )宽度，并加上 overflow: hidden; 应该就能解决。

我建议将我提供样式表文件在页面<head>标签内单独引用，修改起来方便一些，我为所有的样式值之前都添加了 #srbacks 是为避免造成与您页面里的样式表冲突。

上传压缩包中的 SRbacks.js 及 srback.css 这两个文件到您管理的空间，假设路径是：http://yourdomin.com/widget/

在<head></head>标签内引入

<link rel="stylesheet" href="http://yourdomin.com/widget/srback.css" type="text/css" media="screen" />

然后在模板内引入

<script type="text/javascript" src="http://yourdomin.com/widget/SRbacks.js"></script>

Wordpress 用户可将其放在模板文件中的 comments.php 或是 sidebar.php 里。我推荐是在评论模板里调用。

样式表文件中我已逐项标注了说明，修改时请参阅。下面是两张截图：

200px 呈现样式

500px 呈现样式

Permanent Link | Posted in: Application | 4,750 Views

dupola says:

非常不错。我已推荐，等下看效果。不过我的TT是保护的……

[...] 增加了玩聚SR的SRBacks功能。使用的ifire提供的修改过后的js代码和样式表，如果你也需要可以到这里下载。顺便说下，玩聚SR确实是最近很红的一个应用，貌似国内很久没有出现过这么受关注的东东了。很好用，很有用。[...]

oxygen says:

相当不错，看起来很清新。

峄峰 says:

玩聚之后又发布了SRCBacks，博主能再为它写个自定义脚本吗？或者告诉我怎么在SRBacks的基础上进行修改也行，谢谢了！

iPost