来自Dribbble的第三方API.doc

Dribbble是一个非常知名的设计社区，和其它大型社区类似，它也可以提供给你开放API来访问它的内容，在今天的这个教程中，我们将使用来自Dribbble的第三方API，生成一个最新设计作品展示页面，希望大家喜欢！HTML代码 Popular 首先我们创建一个div，指定class为drib-list。然后当所有的dribbble内容都加载后，传递到预先定义的HTML结构中。 title views likes comments CSS代码以下为CSS代码：body font-family:arial; font-size:75%; margin:0 0 170px 0; padding:0; background: #2F2F2F; color: #C6C6C6; hr -moz-box-shadow: rgba(255, 255, 255, 0.07) 0 1px 0; -webkit-box-shadow: rgba(255, 255, 255, 0.07) 0 1px 0; -o-box-shadow: rgba(255, 255, 255, 0.07) 0 1px 0; box-shadow: rgba(255, 255, 255, 0.07) 0 1px 0; border-bottom: 1px solid #121212; border-top: none; margin: 18px 0; display:block;h1 font: 30px Tahoma, Helvetica, Arial, Sans-Serif; text-align: left; color: #555; text-shadow: 0px 2px 5px #111; margin: 20px 0 10px 0; .drib-list width: 1080px; margin:15px auto 0 auto; padding-left:10px;.drib-item width:200px; height:150px; border:5px solid #ccc; position:relative; overflow:hidden; border: 1px solid rgba(0, 0, 0, 0.05); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; box-shadow: rgba(255, 255, 255, 0.1) 0 1px 0, rgba(0, 0, 0, 0.8) 0 1px 7px 0px inset; background: #202020; background-color: rgba(0, 0, 0, 0.3); margin-bottom:10px; float:left; margin-right:10px;.drib-image,.drib-detail width:100%; position:absolute; left:0; .drib-image top:0; z-index:10; .drib-image img -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; border:0; .drib-detail z-index:0; height:50%; bottom:0; background:#333; -webkit-box-shadow: inset 0 0 10px 5px rgba(0, 0, 0, 0.5); -moz-box-shadow: inset 0 0 10px 5px rgba(0, 0, 0, 0.5); box-shadow: inset 0 0 10px 5px rgba(0, 0, 0, 0.5); .drib-detail-wrapper margin:14px 10px 0 10px; .drib-detail a color:#eee; font-weight:bold; display:block; text-decoration:none; font-size:110%; .drib-detail a:hover color:#ffffff .drib-detail ul margin:2px 0 0 0 ; padding:0; list-style:none; .drib-detail li float:left; margin-right:5px; background:url(sprite.png) no-repeat 0 0; padding-left:24px; height:20px; line-height:22px .drib-detail ments background-position: 0 0; .drib-detail li.views background-position: 0 -39px; .drib-detail li.likes background-position: 0 -79px; /* new clearfix */ .clearfix:after visibility: hidden; display: block; font-size: 0; content: ; clear: both; height: 0; * html .clearfix zoom: 1; /* IE6 */ *:first-child+html .clearfix zoom: 1; /* IE7 */Javascript代码dribbble的API非常简单直接，这里我们使用这俩个：1./shots/list： 返回debuts， everyone， popular的发布。2./players/id/shots： 返回某个用户最近的发布。为跨域访问JSON数据，这里我们本地需要开发一个proxy，用来取得dribbble的json数据，如下：PHP版本创建php版本的proxy ： dribbble-call.phpJAVA版本 %Object playerobj = request.getParameter(player);String type = request.getParameter(type);String list = popular, debuts, everyone;String url= ;if(playerobj!=null)String player = playerobj.toString();boolean existed = false;for(int i=0;i创建php版本的proxy ： dribbble-call.jsp注意这只是一个演示的proxy，如果你需要在产品中应用，最好自己优化一下，比如，缓存等等。(function($) /Attach this new method to jQuery $.fn.extend( dribbble: function(options) var defaults = player: , /username, debuts, popular or everyone total: 3 / 1 - 15, return result, by default dribbble return 15 var options = $.extend(defaults, options); var o = options; /Iterate over the current set of matched elements return this.each(function() / this is the HTML structure for every single shots, and then will be appended to the HTML. / you can view this structure better in HTML section of this tutorial. var struct = titleviewslikescomments, html = , holder = $(this); / make a AJAX call to the PHP script we wrote. $.ajax( type: get, url: dribbble-call.php, data: player= + o.player, success: function(data) / do another test to make sure there is data returned from the service try if (data.shots.length 0) var shots = data.shots; / loop through the data and apply the HTML code with the data for (var i=0; i shots.length; i+) if (i o.total) html += struct.replace(/title/g, shotsi.title) .replace(/image/g, shotsi.image_teaser_url) .replace(/url/g, shotsi.url) .replace(/views/g, shotsi.views_count) .replace(/likes/g, shotsi.likes_count) .replace(/comments/g, ments_count); holder.append(html); else alert(No data returned from dibbble!); catch (e) alert(e); ); / this is the hover effect $(.drib-item).live( mouseenter: function() $(this).find(.drib-image).stop().animate(top: ($(this).height() / 2 * -1), 300); , mouseleave: function() $(this).find(.