jquery.newmark.js で一定の期間だけ New マークを表示する

下記のサイトで紹介されていたコードを少し改変してプラグイン化しております。

• 一定時間で自動的に消える New マークを付ける JavaScript の jQuery 版 - かたつむりくんのWWW

jquery.newmark.js は 新着ニュースの一覧などで公開あるいは更新から一定の期間の間だけ New マークを表示をさせることができます。class 属性 newmark を指定された a 要素の後に html 要素や New マークの画像などを挿入します。

jquery.newmark.js は、下記よりファイルをダウンロードしてご使用ください。

download

ダウンロードした zip ファイルを解凍したフォルダには以下のようなファイルが含まれます。

v0.1
　┗ index.html
　┗ jquery.js
　┗ jquery.newmark.js
　┗ images
　　┗ new.gif

• jQuery: The Write Less, Do More, JavaScript Libraryy

以下は、jquery.newmark.js の設置方法を説明します。

head 要素内で以下のように jquery.js とjquery.newmark.jsを読み込みます。src 属性内は格納ディレクトリによって適宜変更してください。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.newmark.js"></script>

次に、以下のコードを記述して、newmark() 関数を実行させます。

<script type="text/javascript">
/* <![CDATA[ */
$(document).ready(function(){
	$(".newmark").newmark({
		past: 72,
		icon: "<img src="images/new.gif" alt="new">"
	});
});
/* ]]> */
</script>

公開から何時間経過したら New マークを消すかを指定する past パラメータと、 New マークとなる html の要素や画像などを指定する icon パラメータを設定します。

past パラメータは、デフォルトでは 72 時間（ 3 日）となっています。
icon パラメータは、マークアップされたテキストでも、img 要素で指定した画像を設定することもできます。

New マークなどを表示させてい一覧でリンクの a 要素のclass属性を newmark に設定します。
さらに title 属性に「2011:02:20」（年:月:日）ようなフォーマットで更新日時を設定します。この日付設定を基準にしてpast パラメータで指定した時間が経過したかどうかを判定します。

もし、指定した時間が経過していなければ、 a 要素の後ろに icon パラメータに指定した New マークの要素を挿入します。

<ul>
  <li><a href="#" title="2011:02:20" class="newmark">2011年02月20日のニュース</a></li>
</ul>

このスクリプトは、CMS などで利用すれば効率的です。 下記の例は、Movable Type で利用する場合のサンプルです。

<ul>
<MTEntries>
  <li><a href="<$MTEntryPermalink$>" title="<$mt:EntryDate format="%Y:%m:%d"$>" class="newmark"><$mt:EntryTitle$> </a></li>
</MTEntries>
</ul>

下記の例は、WordPress で利用する場合の設定です。

<ul>
<?php while ( have_posts() ) : the_post(); ?>
  <li><a href="<?php the_permalink(); ?>" title="<?php the_modified_time('Y:m:d'); ?>" class="newmark"><?php the_title(); ?></a></li>
<?php endwhile; ?>
</ul>