심재운 블로그

728x90
반응형




이번 내용은 먼저 트위글 15개 리스트를 보여주고, 제일 하단의 글을 보고 스크롤을 선택하면, 16-30 개 사이의 리스트를

보여주는 기술이다.




  // Set the size for each page to load var pageSize = 15; // Username to load the timeline from var username = 'marcofolio';   // Variable for the current page var currentPage = 1;

Now, we need to call a function that'll load the first page.

 
// First time, directly load the tweets
loadTweets();

The loadTweets() code is wrapped inside a function, since we'll need to call it over and over to load more tweets. This is how it looks like:

 
// Loads the next tweets
var loadTweets = function() {
   var url = "http://twitter.com/status/user_timeline/"
         + username + ".json?count="+pageSize+"&page="+currentPage+"&callback=?";
         
   $.getJSON(url,function(data) {
      $.each(data, function(i, post) {
         appendTweet(post.text, post.id);
      });
      
      // We're done loading the tweets, so hide the overlay
      $("#overlay").fadeOut();
   });
};



  // Appends the new tweet to the UI var appendTweet = function(tweet, id) { $("<p />") .html(tweet) .append($("<a />") .attr("href", "http://twitter.com/" + username + "/status/" + id) .attr("title", "Go to Twitter status") .append($("<img />") .attr("src", "images/link.png") ) ) .appendTo($("#tweets")); };

We're using the jQuery function to dynamically the tweet paragraphs. We also add the link to the tweet by showing an image. We append the new element to the #tweets container and we're done!

But now, we have the initial fill (the first page). We now need to detect that the user is scrolling the #tweets container and find out if he is at the bottom to load the next page. Here's how this can be achieved:

 
// Append a scroll event handler to the container
$("#tweets").scroll(function() {
   // We check if we're at the bottom of the scrollcontainer
   if ($(this)[0].scrollHeight - $(this).scrollTop() == $(this).outerHeight()) {
 
      // If we're at the bottom, show the overlay and retrieve the next page
      currentPage++;
      $("#overlay").fadeIn();
      loadTweets();
   }
});








728x90
반응형

이 글을 공유합시다

facebook twitter kakaoTalk kakaostory naver band

본문과 관련 있는 내용으로 댓글을 남겨주시면 감사하겠습니다.

비밀글모드