使用jQuery和CSS3来访问Dribbble的API

日期：2012-7-16 来源：GBin1.com



在线演示

本地下载

Dribbble是一个非常知名的设计社区，和其它大型社区类似，它也可以提供给你开放API来访问它的内容，在今天的这个教程中，我们将使用来自Dribbble的第三方API，生成一个最新设计作品展示页面，希望大家喜欢！

HTML代码

<div class="drib-list clearfix" id="popular">
<h1>Popular</h1>
</div>

首先我们创建一个div，指定class为drib-list。然后当所有的dribbble内容都加载后，传递到预先定义的HTML结构中。

<div class="drib-item">
<div class="drib-image">
<a href="{url}"><img src="{image}" alt="{title}" /></a>
</div>
<div class="drib-detail">
<div class="drib-detail-wrapper">
<a href="#">{title}</a>
<ul>
<li class="views">{views}</li>
<li class="likes">{likes}</li>
<li class="comments">{comments}</li>
</ul>
</div>
</div>
</div>

CSS代码

以下为CSS代码：

........

来源：使用jQuery和CSS3来访问Dribbble的API