自定义你的嘀咕秀样式

此文转载自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即可。

1
2
3
4
5
6
7
<div id="diguShow">

* 求Window空间,让我挂个东东吧。[11小时前](http://digu.com/jump?aid=detail&twId=169480)

[进入**FoxLing**的嘀咕主页?](http://www.digu.com/foxling)

</div>

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

1
2
3
4
5
6
7
8
9
10
/*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代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
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函数的文件链接:

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

完工!

声明: 除非注明,小峰网络遨游记文章均为原创,转载请以链接形式标明本文地址

本博客原创文字只代表本人某一时间内的观点或结论,与本人所在公司没有任何关系。

本作品采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可。

第三方若用于商业用途的转载,须取得本人授权。

本文作者:

本文地址:http://xfeng.me/custom-digu-show-js-weight/

你可能还对下面文章感兴趣: