使用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 {
     1080px;
    margin:15px auto 0 auto;
    padding-left:10px;
}
 
.drib-item {
    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 {
    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>

搞定，如果大家想看效果，请访问本文的在线演示，希望大家喜欢这篇教程，如果你有任何问题和建议，请给我们留言，谢谢！