自定义你的嘀咕秀样式

此文转载自Foxling 大师博客，不过我尽转载了JS输出部分，因为只有这个才可以自定义

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

JS的链接代码：

1
2
3

<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加载的效果如我首页置顶文章

自定义嘀咕秀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(你的图片路径) 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图标，可以自定义前景色和背景色。

将默认代码里的

1	<div id="diguShow">正在加载嘀咕...</div>

替换成

1	<div id="diguShow" style="background:url(你的加载图片的路径) 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:[]}]
}
);