使用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>

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