Web サイトで Tumblr の API v1 出力をページ付けしようとしています。私は jQuery コードを持っており、コンテンツを表示するときに問題なく動作しますが、整理するために分割してページ分割できるようにする必要があります。コードの最初のボックスは、次の場合に API を呼び出します。
<div id="content"><div id=main"><div id ="tumblrFeed"></div><div class="clear"></div></div>
html ページで呼び出されます。
コンテンツがブラウザに出力されるときに、コンテンツのページネーションに問題があります。ご覧のとおり、各ページに 5 つの投稿を表示し、変数 tumblrPaginate を 0 から開始するように宣言しました。ユーザーが [前へ] または [次へ] ボタンをクリックするたびに変数を変更する必要があります。
私はかなり長い間これに取り組んできました.大まかな範囲は2週間ですが、成功していません. どんな助けや指導も大歓迎です。私はJavascript、jQueryなどの初心者であることを覚えておいてください。
var tumblr_api_read = null; // this is important do not remove
var tumblrPaginate = 0; // **TODO** make loop to increment each for pagination feature
var tumblrpostCount = 5; // set the post count number, max is 50 for API v1
$(document).ready(function() {
// setup our namespace
$.tumblr = {};
// modify these
$.tumblr.url = 'http://wisdmlab.tumblr.com/api/read/json?callback=?&num=' + tumblrpostCount +'&start=' + tumblrPaginate +''; // set to display 7 posts. off set syntax is start=[postnumtobeginat]
$.tumblr.numPostsToDisplay = 50;
$.tumblr.postMaxDescriptionLength = 500; // set to -1 to turn off jquery.expander
$.tumblr.videoWidth='200'; // youtube default 400
$.tumblr.videoHeight='163'; // youtube default 325
// do not modify these unless you are hardcore
$.tumblr.imagePath = '..//testscripts/tumblr-jquery-master/img/';
$.tumblr.postCount = 0;
reloadTumblr();
});
function reloadTumblr(){
$("#tumblrFeed").empty();
$("#tumblrFeed").append("<div class='body'>loading Tumblr</div>");
$.ajax({
url: $.tumblr.url,
dataType: 'script',
timeout: 10000,
success:function(){
$("#tumblrFeed").empty();
if ((tumblr_api_read == undefined) || (tumblr_api_read == null)) {
$("#tumblrFeed").append("<div class='title' href='#'>unable to load Tumblr</div>");
$("#tumblrFeed").append("<div class='body'><a href=\"#\" onclick=\"javascript:reloadTumblr();\">[retry]</a></div>");
} else {
//$("#tumblrFeed").append("<div class='body'><a href=\"#\" style=\"float:center\" onclick=\"javascript:reloadTumblr();\">Refresh News Page</a></div>");
$.tumblr.postCount = 0;
$.each(tumblr_api_read.posts.slice(0, 50), function(i,post){
if ($.tumblr.postCount >= $.tumblr.numPostsToDisplay) {
return;
}
parseTumblrJSON(post);
$.tumblr.postCount++;
});
// Apply Expander
if ($.tumblr.postMaxDescriptionLength > -1) {
$('div.expandable').expander({
slicePoint: $.tumblr.postMaxDescriptionLength, // default is 100
expandText: 'Read more.',
userCollapseText: 'Read less.'
});
}
}
},
error:function (xhr, statusTxt, errorTxt){
$("#tumblrFeed").append("<a class='title' href='#'>Tumblr Parse Error</a>");
$("#tumblrFeed").append("<div class='body'>" + errorTxt + "<br/>" + xhr.responseText + "</div>");
}
});
}
function formatDate(d) {
return d.toString('dddd, MMMM d, yyyy')
}
function processResponse() {
}
function parseTumblrJSON(post) {
//alert(post.type);
var d = Date.parse(post["date-gmt"]);
var dateFmt = formatDate(d);
switch(post.type)
{
case "regular":
{
$("#tumblrFeed").append(
"<table style='width: 100%;'><tr><td width='18px'>" +
"</td></table>");
//Place directly before "</td>" <div class='date'>" + dateFmt + "</div>
$("#tumblrFeed").append("<a class='title' href='" + post.url + "' target='_blank'>" + (post["regular-title"] == null ? 'view tumblr' : post["regular-title"]) + "</a>");
$("#tumblrFeed").append("<div class='body expandable'>" + post["regular-body"] + "</div>");
$("#tumblrFeed").append("<div class='date'>Posted on " + dateFmt + "</div>");
break;
}
case "link":
{
$("#tumblrFeed").append(
"<table style='width: 100%;'><tr><td width='18px'>" +
"<a href='" + post.url + "' target='_blank'>" +
"<div class='date'>" + dateFmt + "</div></td></table>");
$("#tumblrFeed").append("<a class='title' href='" + post["link-url"] + "' target='_blank'>" + (post["link-text"] == null ? 'view tumblr' : post["link-text"]) + "</a>");
$("#tumblrFeed").append("<div class='body expandable'>" + post["link-description"] + "</div>");
break;
}
case "quote":
{
$("#tumblrFeed").append(
"<table style='width: 100%;'><tr><td width='18px'>" +
"<a href='" + post.url + "' target='_blank'>" +
"<div class='date'>" + dateFmt + "</div></td></table>");
$("#tumblrFeed").append("<div class='body'>" +
"<div class='quote expandable'>" + post["quote-text"] + "</div>" +
"<div class='quotesrc'>" + post["quote-source"] + "</div>" +
"</div>");
break;
}
case "photo":
{
$("#tumblrFeed").append(
"<table style='width: 100%;'><tr><td width='18px'>" +
"<a href='" + post.url + "' target='_blank'>" +
"</td></table>");
// valid values are: photo-url-[75, 100, 250, 400, 500, 1280]
$("#tumblrFeed").append("<div class='body'>" +
"<a href='" + post.url + "'>" +
"<img src='" + post["photo-url-250"] + "'/></a><br/>" +
post["photo-caption"] +
"</div>", "<div class='date'>Posted on " + dateFmt + "</div>");
break;
}
case "conversation":
{
$("#tumblrFeed").append(
"<table style='width: 100%;'><tr><td width='18px'>" +
"<a href='" + post.url + "' target='_blank'>" +
"<div class='date'>" + dateFmt + "</div></td></table>");
var html = '';
$("#tumblrFeed").append("<a class='title' href='" + post.url + "' target='_blank'>" + (post["conversation-title"] == null ? 'view tumblr' : post["conversation-title"]) + "</a>");
for(var i = 0; i < post["conversation"].length; i++) {
var conv = post["conversation"][i];
html += "<div class='convlabel'>" + conv.label + "</div>";
html += "<div class='convtext expandable'>" + conv.phrase + "</div>";
}
/*
$(this).find("line").each(function(){
html += "<div class='convlabel'>" + $(this).attr("label") + "</div>";
html += "<div class='convtext'>" + $(this).text() + "</div>";
});*/
$("#tumblrFeed").append("<div class='body'>" + html + "</div>");
break;
}
case "audio":
{
$("#tumblrFeed").append(
"<table style='width: 100%;'><tr><td width='18px'>" +
"<a href='" + post.url + "' target='_blank'>" +
"<div class='date'>" + dateFmt + "</div></td></table>");
$("#tumblrFeed").append("<a class='title' href='" + post.url + "' target='_blank'>" + post["audio-caption"] + "</a>");
$("#tumblrFeed").append("<div class='body'>" + post["audio-player"] + "</div>");
break;
}
case "video":
{
$("#tumblrFeed").append(
"<table style='width: 100%;'><tr><td width='18px'>" +
"<a href='" + post.url + "' target='_blank'>" +
"<div class='date'>" + dateFmt + "</div></td></table>");
$("#tumblrFeed").append("<a class='title' href='" + post.url + "' target='_blank'>" + post["video-caption"] + "</a>");
// resize our video code if possible
var vdo = post["video-player"];
var re = new RegExp('width=\"([a-zA-Z0-9]*)\"', 'g');
vdo = vdo.replace(re, 'width="' + $.tumblr.videoWidth + '"');
re = new RegExp('height=\"([a-zA-Z0-9]*)\"', 'g');
vdo = vdo.replace(re, 'height="' + $.tumblr.videoHeight + '"');
re = new RegExp('400,320', 'g');
vdo = vdo.replace(re, $.tumblr.videoWidth + ',' + $.tumblr.videoHeight);
re = new RegExp('400,250', 'g');
vdo = vdo.replace(re, $.tumblr.videoWidth + ',' + $.tumblr.videoHeight);
$("#tumblrFeed").append("<div class='body'>" + vdo + "</div>");
break;
}
default:
break;
}
$("#tumblrFeed").append("<div class='clear'> </div>");
}