玩转嘀咕网的嘀咕秀(Widget)

一直郁闷嘀咕网没有开发JS的博客插件，今天终于看到这款APP出来啦，嘀咕秀：http://www.digushow.com。
一共提供了三种Widget，Flash版的，图片版，以及JS版。
图片版一般是用于论坛签名，效果如下：

其实，任何支持HTML代码，或者支持图片的地方，都可以加上你的图片签名，如果你要在你的网页中插入图片签名，只需要添加如下代码：

<img src="http://digushow.com/sign/foxling/bbs_sign.png" alt="Foxling's digu" />

其中，foxling改为你的用户名，alt的属性改成你的说明。
如果是要在支持UBB代码的论坛里做签名，使用下面的代码：

[img]http://digushow.com/sign/foxling/bbs_sign.png[/img]

Flash版提供了5种颜色可以选择，不过我都不喜欢，定制性较差~但大多数博客提供商都不支持JS，Flash就是一个不错的选择了。

嘀咕秀JS版

对于众多自建博客来说，JS版应该算是最好的选择了，CSS样式完全自主控制，如果熟悉JS的话，HTML结构也可以由自己定制，JS的链接代码：

<div id="diguShow">正在加载嘀咕...</div>
<script src="http://digushow.com/js/digushow.js" type="text/javascript">
</script><script src="http://digushow.com/api/digushow.jsp?callback=diguShowCallback&username=foxling&count=5" type="text/javascript"></script>

有三个可定义的参数，callback后面会说到，先说后两个参数：
username:嘀咕用户名
count:读取的嘀咕数目

JS加载的效果如下

在PJBlog和WordPress里添加嘀咕秀JS模块

在Wordpress和Pjblog里添加JS模块都是比较简单的，PJ里可以添加模块，写入HTML代码完成，在WordPress里添加也是非常容易，有多种方法：
1.添加到边栏：后台-外观-小工具，添加一个文本工具，然后进行编辑，填入标题，然后把上面的JS代码复制进去，保存即可。
2.添加到内容栏：写一篇新文章，在HTML代码里输入上面的JS代码，然后把文章置顶~
3.添加到自定义位置：修改你的主题里的index.php文件，把JS代码插入到相应的位置。
我是用第2种方法~可以在首页看到我的嘀咕秀模块。

自定义嘀咕秀JS版的CSS样式

嘀咕秀JS版没有自带任何CSS样式，这样嘀友们可以自己无限发挥~~

JS生成的HTML代码格式如下，生成的代码结构比较简单，并且加上了ID，只需要写相应的CSS即可。

<div id="diguShow">
    <ul id="diguShow_List">
        <li>求Window空间，让我挂个东东吧。<a href="http://digu.com/jump?aid=detail&twId=169480" class="diguShow_time">11小时前</a></li>
    </ul>
    <p id="diguShow_More">
        <a target="_blank" href="http://www.digu.com/foxling">进入<strong>FoxLing</strong>的嘀咕主页»</a>
    </p>
</div>

在主题的style.css里写入CSS(我稍微写了一点样式，不过还是按照我博客简洁的风格)，给每条嘀咕加上了一个小icon，显得更有条理点，可以在我的博客看到效果：

/*DiguShow*/
#diguShow_List {list-style:none;margin:10px 0;padding:0;}
#diguShow_List li {
background:url(/wp-content/themes/sandbox/diguico.png) no-repeat 0 0;
padding-left:17px;
line-height:16px;
margin-bottom:8px;
}
.diguShow_time {color:#999;}
#diguShow_More {text-align:right;margin:0 0 10px 0;}

加入Loading图标

嘀咕秀是在网页加载完后才会加载JS，这点比较好，不会因为网络的原因导致页面卡住~
在加载的时候，显示：正在加载嘀咕…
可以加入一个Loading图标，这样显得更爽点~
Loading图标生成网站：http://www.ajaxload.info/，提供各种样式的Loading图标，可以自定义前景色和背景色。

将默认代码里的
<div id="diguShow">正在加载嘀咕...</div>
替换成
<div id="diguShow" style="background:url(/wp-content/themes/sandbox/ajax-loader.gif) no-repeat left center;padding:5px 0 5px 20px;">
正在加载嘀咕...
</div>

更强的自定义

如果你对JS比较熟悉，可以完全重写JS回调函数，输出你需要的HTML结构。
嘀咕秀是通过JSONP的方式传入函数名，返回相应的格式，解决跨域问题。
上面提到的callback参数就是处理数据要用到的JS函数名，给函数传递了一个参数，是JSON格式的数据。
服务端传回来的JS代码如下：

diguShowCallback(
{
user:{userId:10013552,
nickname:"FoxLing",
signPicName:"http://121.14.39.139:80/file/10/01/35/52/default/SIGN10013552_24x24.jpg",
homepage:"http:\/\/www.digu.com\/foxling"},
status:[{created_at:"3小时前",
text:"嘀咕",
id:181855,
picPath:[]}]
}
);

写好了JS函数后，将JS代码里的这一句替换成你自己写的JS函数的文件链接：

<script src="http://digushow.com/js/digushow.js" type="text/javascript"></script>

完工！

———–2009-09-08 更新——————————————
嘀咕秀更名为无敌秀，目前可以使用
CSS的ID和Class名有所改动，改动如下：

/*Wudishow*/
#wudiShow_List {list-style:none;margin:10px 0;padding:0;}
#wudiShow_List li {
background:url(/wp-content/themes/sandbox/diguico.png) no-repeat 0 0;
padding-left:17px;
line-height:16px;
margin-bottom:8px;
}
.wudiShow_time {color:#999;}
#wudiShow_More {text-align:right;margin:0 0 10px 0;}

如果你还想对无敌秀的JS下刀，可以下载这个地址的js文件进行修改：

http://www.wudishow.com/js/wudishow.source.js

目前可以在我的博客首页右侧栏看到效果。