研究Dribbble的API及实际应用

Dribbble的API可以调用他们网站上的某些作品,做设计的朋友也许对这个网站非常熟悉,因为这里的作品非常优秀,加入想把他引用到你的网站上,就需要了解他的API有哪些,及如何调用。

推荐一个Dribbble的插件,http://lab.tylergaw.com/jribbble/.这个插件主要是使用官方API的文档来制作的,官方API使用地址:https://dribbble.com/api


;(function($, window, document, undefined) {
'use strict';

$.jribbble = {};

var jsonpGET = function (path, args) {
$.ajax({
type: 'GET',
url: 'http://api.dribbble.com' + path,
data: args[1] || {},
dataType: 'jsonp',
success: function (data) {
if (typeof (data) === 'undefined') {
args[0]({error: true});
}
else {
args[0](data);
}
}
});
};

var methods = {
'getShotById': '/shots/$/',
'getReboundsOfShot': '/shots/$/rebounds/',
'getShotsByList': '/shots/$/',
'getShotsByPlayerId': '/players/$/shots/',
'getShotsThatPlayerFollows': '/players/$/shots/following/',
'getPlayerById': '/players/$/',
'getPlayerFollowers': '/players/$/followers/',
'getPlayerFollowing': '/players/$/following/',
'getPlayerDraftees': '/players/$/draftees/',
'getCommentsOfShot': '/shots/$/comments/',
'getShotsThatPlayerLikes': '/players/$/shots/likes/'
};

var createAPIMethod = function (urlPattern) {
return function () {
var // Convert arguments to a real Array
args = [].slice.call(arguments),

// We run shift() on args here because we don't need to send
// the first argument to jsonpGET.
url = urlPattern.replace('$', args.shift());

jsonpGET(url, args);
};
};

for (var method in methods) {
$.jribbble[method] = createAPIMethod(methods[method]);
}

})(jQuery, window , document);

通过以上代码将API分出多种方法。

调用方式

1.获取一个作品

$.jribbble.getShotById(shotId, callback)

shotID:调用作品的ID

callback:当成功响应式,返回一个参数返回请求的回调内容


var callback = function (shot) {
var html = '';

html += '<a href="' + shot.url + '"><img src="' + shot.image_url + '"></a>';
html += '<h3>' + shot.title + '</h3>';
html += '<i>by <a href="' + shot.player.url + '">' + shot.player.name + '</a></i>';

html += '<ul><li><b>Views:</b> ' + shot.views_count + '</li>';
html += '<li><b>Likes:</b> ' + shot.likes_count + '</li>';
html += '<li><b>Comments:</b> ' + shot.comments_count + '</li>';
html += '<li><b>Rebounds:</b> ' + shot.rebounds_count + '</li></ul>';

$('#shot').html(html);
};

$.jribbble.getShotById(914651, callback);

 

第二种:获取某类列表(popular、everyone、debuts)

$.jribbble.getShotsByList(listName, callback, [pagingOpts])

listName:“popular”, “everyone”, “debuts”

pagingOpts:{page: 1, per_page: 15}

回调函数返回的是对象的合集。

var callback = function (listDetails) {
var html = '';

$.each(listDetails.shots, function (i, shot) {
html += '<li><h3>' + shot.title + '</h3>';
html += '<h4>by ' + shot.player.name + '</h4><a href="' + shot.url + '">';
html += '<img src="' + shot.image_teaser_url + '" ';
html += 'alt="' + shot.title + '"></a></li>';
});

$('#shotsByList').html(html);
}

$.jribbble.getShotsByList('popular', callback, {page: 2, per_page: 10});

演示

原创文章:研究Dribbble的API及实际应用 ,未经许可,禁止转载,©版权所有
原文出处:前端开发博客 (http://caibaojian.com/dribbble-api.html)

发表评论

请登录后发表评论: