使用jQuery和CSS3来访问Dribbble的API
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代码:
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 li.comments { 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非常简单直接,这里我们使用这俩个:
- http://api.dribbble.com/shots/{list}: 返回debuts, everyone, popular的发布。
- http://api.dribbble.com/players/{id}/shots: 返回某个用户最近的发布。
为跨域访问JSON数据,这里我们本地需要开发一个proxy,用来取得dribbble的json数据,如下:
PHP版本
创建php版本的proxy : dribbble-call.php
<?php $player = $_GET['player']; $type = $_GET['type']; $list = array('popular', 'debuts', 'everyone'); if ($player) { if (in_array(strtolower($player), $list)) { $data = file_get_contents('http://api.dribbble.com/shots/' . $player); } else { $data = file_get_contents('http://api.dribbble.com/players/' . $player . '/shots'); } header('Content-type: application/json'); echo $data; exit; } echo 0; ?>
JAVA版本
创建php版本的proxy : dribbble-call.jsp
<%@ page contentType="text/html;charset=UTF-8"%> <%@ page import="java.io.*" %> <%@ page import="java.net.*" %> <% 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<list.length;i++){ if(player.equals(list[i])){ url = "http://api.dribbble.com/shots/" + player; existed = true; break; } } if(!existed){ url = "http://api.dribbble.com/player/" + player + "/shots"; } } try { URL yahoo = new URL(url); BufferedReader in = new BufferedReader( new InputStreamReader(yahoo.openStream())); String inputLine; while ((inputLine = in.readLine()) != null) { out.println(inputLine); } in.close(); } catch (MalformedURLException me) { out.println(me); } catch (IOException ioe) { out.println(ioe); } %>
注意这只是一个演示的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 = '<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>', 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, shots[i].title) .replace(/{image}/g, shots[i].image_teaser_url) .replace(/{url}/g, shots[i].url) .replace(/{views}/g, shots[i].views_count) .replace(/{likes}/g, shots[i].likes_count) .replace(/{comments}/g, shots[i].comments_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('.drib-image').stop().animate({top: 0}, 300); } } ); }); } }); })(jQuery);
如何使用这个插件?
javascript代码:
$(function() { $('#popular').dribbble({ player: 'popular', //username, debuts, popular or everyone total: 5 }); }); HTML代码: <div id="popular"> </div>
搞定,如果大家想看效果,请访问本文的在线演示,希望大家喜欢这篇教程,如果你有任何问题和建议,请给我们留言,谢谢!
欢迎访问GBin1.com