zoukankan      html  css  js  c++  java
  • 使用jQuery和CSS3来访问Dribbble的API

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

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

    欢迎访问GBin1.com
  • 相关阅读:
    LeetCode 345. Reverse Vowels of a String 题解
    LeetCode 344. Reverse String 题解
    LeetCode 27. Remove Element 题解
    LeetCode 61. Rotate List 题解
    LeetCode 19.Remove Nth Node From End of List 题解
    Android耗电量
    Android 使用adb查看和修改电池信息
    Android AOP AspectJ 插桩
    Flask相关用法
    Monkey日志信息的11种Event percentage
  • 原文地址:https://www.cnblogs.com/gbin1/p/2599666.html
Copyright © 2011-2022 走看看