skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

twitterぽく何分前を表示するJavaScript「timeago: a jQuery plugin」

｜ ｜ ｜ ｜ ｜ ｜ ｜

twitterではそれぞれのtweetが何分前や何時間前などを表示します。
それと同じようなことがJavaScriptのjQueryプラグイン「timeago: a jQuery plugin」で実現可能です。

使用方法
timeago: a jQuery pluginからjquery.timeago.jsをjQueryからjquery.jsをダウンロードします。
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.timeago.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('abbr.timeago').timeago();
});
</script>

上記のように記述したら、表示させたい場所にhtmlを書きます。
<abbr class="timeago" title="2009-07-17T09:24:17Z">表示テキスト</abbr>

※title部分は始点の時間を記述します。
また、別の記述だと以下のようになります。
$(document).ready(function(){
$("#id名1").text(jQuery.timeago(new Date())); // 今の時間の場合
$("#id名2").text(jQuery.timeago("1981-11-30")); //1981年11月30日の場合
});

あとは対応するidを書けば完成です。
<span id="id名1"></span>
<span id="id名2"></span>

twitterぽく何分前を表示するJavaScript「timeago: a jQuery plugin」サンプル

記事作成：2009年11月04日

前の記事：LPについて考えてみた
次の記事：ステップ分けできるJavaScript「Smart Wizard」