Compared with any other design network Dribbble always seems to come out on top. The quality of submissions is beyond comprehension to most graphics designers, especially with mobile/web user interfaces. There are so many amazing shots published every day but it’s tough to keep up with the constant flow of new publications.
In this tutorial I want to demonstrate how we can build a small webapp which dynamically pulls all the most recent popular shots from Dribbble. The interface is very simple to work with and we want to create all these effects without refreshing the page. For organizing the backend data I’ll be using a custom jQuery plugin named jribbble. It suits our needs perfectly and it’s so easy to get started – even a newbie JavaScript developer could pick this up in a couple hours.
Default Page Structure
There isn’t a lot to look over in the HTML but I would like to introduce the library we’ll be working with. First I’m including a reference to the latest jQuery 1.8.0 hosted via Google. Also I’m including the HTML5shiv library for older IE support.
<!doctype html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Dribbble Popular API with jQuery</title> <meta name="author" content="Jake Rocheleau"> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="jquery.jribbble.min.js"></script> <!--[if lt IE 9]> <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head>
Now you will also need a local copy of the Jribbble library to include in the webpage. You candownload the latest version in a .zip archive directly from Github. Any code changes or updates in the future will be pushed directly to this live repository. Inside the folder you’ll find a lot of test files. But all we need is to copy the file dist/jquery.jribbble-1.0.0.ugly.js. I have renamed this to jquery.jribbble.min.js and placed it inside my root directory.
With this library included we can build a really simple function to make all the backend exchanges. The official site has some code examples of how you can setup the plugin. I’ll be including all the JavaScript locally inside the index.html file to keep things easier.
Populate Content via Ajax
One other interesting block of the HTML page is inside the main body wrapper. I have setup two main areas of interest which contain the current shots and a small navigation menu. The page code looks like this:
<nav> <a href="#" id="p1" class="pagination sel">1</a> <a href="#" id="p2" class="pagination">2</a> <a href="#" id="p3" class="pagination">3</a> <a href="#" id="p4" class="pagination">4</a> <a href="#" id="p5" class="pagination">5</a> <a href="#" id="p6" class="pagination">6</a> <a href="#" id="p7" class="pagination">7</a> <a href="#" id="p8" class="pagination">8</a> <a href="#" id="p9" class="pagination">9</a> </nav> <div id="container"> <ul id="shotsListing" class="clearfix"> <strong>Loading...</strong> </ul> </div>
Inside the navigation menu we are starting on the first page of all popular results. This particular anchor link has an extra class .sel which stands for selected. As you click between the links we need to move this class onto the appropriate page number.
Also inside the container I have a div with the ID #shotsListing. You need to have some target in the DOM for Jribbble to drop all the results into. Since we are performing this action right when the page first loads, I only have the text “Loading…” displayed. This is removed as soon as we get the first return data and start populating all of the inner content.
Pulling the First Page
Now down way at the bottom of the page before the closing </body> tag I have opened a new script block. Inside we’ll define all the code needed to parse for the first page of Dribbble shots. Plus we need to handle click events on the navigation links so that new pages will be loaded dynamically without a page refresh.
I’m going to place our Jribbble call into a JavaScript function with a parameter variable for the page number. Then we can just call this function and pass in the number we want, displaying the results back onto the page.
function getShotsList(p){ $.jribbble.getShotsByList("popular", function(data){ var html = [];
So we have this new function getShotsList() which then accesses the$.jribbble.getShotsByList property. Inside this function we need to pass some parameters – the first is what type of results we need, in this case popular shots. The 2nd parameter is a callback function which is what we need to display the data on page. Now this gets a little tricky but I’ll explain the process in simple terms.
$.each(data.shots, function (i, shot) { html.push('<li>'); html.push('<div class="details"><h3>' + shot.title + '</h3>'); html.push('<h4>by <a href="' + shot.player.url + '">' + shot.player.name + '</a></h4></div>'); html.push('<a href="' + shot.url + '" target="_blank" class="linkc">'); html.push('<img src="' + shot.image_teaser_url + '" alt="' + shot.title + '">'); html.push('</a></li>'); }); $('#shotsListing').html(html.join('')); }, {page: p, per_page: 15}); }
The html variable is defined at first as an empty array. jQuery.each() is a library function which behaves similar to a foreach() loop in PHP. We are looping through the Ajax return data inside data.shots – just an array of JSON content. Inside the loop function we need to build all the HTML necessary for each individual shot.
I’m using the JavaScript .push() method to append more data into the content array. Each page is limited to 15 shots total, so this loop will happen 15 times pushing the exact same HTML structure with different data. Notice once we close both these functions there are still 2 more parameters we need to pass into Jribbble. First the current page number which we’ve marked p, followed by the shots-per-page limit which is cut off at 15 max by Dribbble’s own API.
Do not worry too much if you’re struggling to understand the each() loop syntax. If you’re not familiar with looping over JSON content this will appear very foreign. But if you spend some time practicing and looking over documentation it’s actually fairly simple to grasp.
Loading Shots via Pagination
Still inside this script block I want to wrap our new function inside the document.ready() clause. If we’ve done everything correctly it should only require a single line of code to display our first page results. Here is how the current script block should look, replacing the inline comment with our earlier function code:
$(document).ready(function(){ getShotsList(1); // function code here });
It really is as simple as calling the function name and passing is a numeral value for pagination. We could even move this function into an external script.js file to clean up the HTML. But since we have one last bit of functionality it’s easier to work inside the script tags for now.
This final block is an event handler which checks the page whenever a user clicks on the navigation links. You can place this either before the function code or after, but it should still be inside the document.ready() brackets.
$("nav .pagination").click(function(e){ e.preventDefault(); $(this).siblings(".sel").removeClass("sel"); $(this).addClass("sel"); var newnum = $(this).html(); getShotsList(newnum); });
The e variable is our event which holds the user’s current click. Immediately callinge.preventDefault() will stop the browser from loading any href value into the URL bar. Then the next 2 lines will remove the .sel class off any sibling links and append it onto our new selected page link.
Then finally we need to determine what the current page number is set to. We could use an ID with just the numbers, but instead I’ve grabbed the internal HTML value of the link. These anchor links are just plain numbers which can be passed into the getShotsList()function to dynamically update the page.
Final Thoughts
This app is really a lot of fun and it’s a nice way to browse Dribbble dynamically. There is no reason you couldn’t flip through the Dribbble popular section instead of using a 3rd party script. But this functionality is merely a demonstration for how flexible the Dribbble API can be.
Working with an open source plugin makes development even easier. You could choose to pull shots from a particular user, or based on submission tags. Ultimately I hope this tutorial can get you more familiar with the inner-workings behind Dribbble. And similarly it would be cool to check out any related apps built with Jribbble as a frontend JS library.
Tidak ada komentar:
Posting Komentar