JSON/AJAX ティッカーの実際の例を次に示します。
twhyler の仕様によると、4.5 秒ごとにアイテムをランダムに交換し、既に表示されているアイテムを追跡します。それらがすべて表示されると、最初からやり直します。
コード ファイル:
まず、グローバルtemplate変数にtemplate.html を保存し、getJson()関数を起動する必要があります。
template = '';
....
$(document).ready(function () {
$.get('template.html', function(html) { template = html; getJson(); });
});
次に、JSON をdata変数に格納し、initialize()関数を起動します。
data = ''; // JSON data will be stored here
myurl = 'UK.top.20.html';
....
function getJson() {
$.getJSON(myurl, function (JSON) { data = JSON; initialize(); });
}
ここでは、load()関数を 3 回呼び出して、3 つの製品 div にデータをすぐに入力します。次に、設定をi元に戻し2(つまり、最初に 3 番目の DIV を変更します)、tick()4.5 秒で発射するようにスケジュールします。
tick_time = 4500;
....
function initialize() { // Start with the first 3
for (i = 1; i < 4; i++) { load(); }
i = 2;
setTimeout('tick()', tick_time);
}
関数を説明する前にload()、スクリプトの一番下にある `String.prototype.f' について話しましょう:
String.prototype.f = function () { var args = arguments; return this.replace(/\{(\d+)\}/g, function (m, n) { return args[n]; }); };
String.Format(formatstring, arg1, arg2, arg3...)この関数は、C# またはsprintf($formatstring, arg1, arg2, arg3...)PHPと同様に機能します。次に例を示します。
formatstring = 'Roses are {0}, Violets are {1}, String.Format {2} and so do {3}!';
result = formatstring.f('red', 'blue', 'rocks', 'you');
alert(result);
ご覧のとおり、このString.prototype.f機能は非常に便利です。
関数が最初load()に行うことは setrid = randomId();です。randomId()次に関数を見てみましょう。最初に、(JSON データの長さに基づいて) 1 から 20 までの数値を取得します。次に、seen配列が JSON データと同じサイズであるかどうかを確認し、そうであれば 0 に戻します。次に、配列がrid最近見られていないことを確認し、そうであれば、関数一意のランダム ID を取得するまで、再帰的に自分自身を呼び出します。それ以外の場合は、を配列に格納して値を返しますrid。seen
function randomId() {
rid = Math.floor(Math.random() * data.results.length);
if (seen.length == data.results.length) { seen.length = 0; }
if ($.inArray(rid, seen) == -1) {
seen.push(rid);
return rid;
} else { return randomId(); }
}
load()ランダム ID を取得した後の次の関数では、便利なショートカットとして itemとをセットアップします。プラットフォーム要素の一時的な保管場所です。for ループは、JSON 内のすべてのプラットフォーム データを調べ、String.Format 関数を使用して plat_html 文字列を埋めます。platplat_html
最後に、i の現在の値 (グローバル) によって#product_更新されるものを決定しtemplate.f、テンプレートに JSON データを入力します。これは、 のおかげでスムーズな jQuery アニメーションで行われ.fadeIn()ます。
function load() {
rid = randomId();
item = data.results[rid];
plat = item.Platform;
plat_html = '';
for (var j = 0; j < plat.length; j++) {
plat_html += plat_fmt.f(
plat[j].Hardware,
plat[j].Market
);
}
$('#product_' + i).html(
template.f(
item.Image,
item.id,
item.AgeRating,
item.WikiUrl,
item.Title,
item.Source,
item.Genre,
plat_html
)
).fadeIn();
}
tick()最後に、再帰関数を見てみましょう。まずグローバル変数をインクリメントし、値iが 4 に達したら 1 に戻します。次にfadeOut()、#product_要素に対してアニメーションを実行し、終了するまで待機してload()再度呼び出します。次に、さらに 4.5 秒後に再び実行されるようにスケジュールします。
function tick() {
i++; if (i == 4) { i = 1; }
$('#product_' + i).fadeOut(function() { load(); });
setTimeout('tick()', tick_time);
}
それでおしまい！