要素に有効期限を指定する「jqExpire」
当ページのリンクには広告が含まれています。
スポンサーリンク
要素に有効期限を指定するプラグイン「jqExpire」を紹介します。
jQueryプラグイン「jqExpire」
このプラグインを使えば、要素に有効期限を指定することができます。指定した有効期限を過ぎた要素にはCSSに「display: none;」が付加され非表示になります。
有効期限付きのコンテンツやリンクなどに利用できるので、便利ですね。
スポンサーリンク
デモでは適当に有効期限を設けた要素があります。有効期限と要素の表示/非表示を確認してみてください。
デモのソース（HTML + jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="jqExpireのデモでーす。">
<title>jqExpire - jQueryプラグイン</title>
</head>
<body>
<h1>jqExpireのデモでーす。</h1>
<div id="demo1" data-expire="2013-12-01">
<p>2013年12月1日まで表示。</p>
</div>
<div id="demo2" data-expire="2014-01-01">
<p>2014年1月1日まで表示。</p>
</div>
<div id="demo3" data-expire="2014-03-01">
<p>2014年3月1日まで表示。</p>
</div>
<div id="demo4" data-expire="2014-05-01">
<p>2014年5月1日まで表示。</p>
</div>
<div id="demo5" data-expire="2014-07-01">
<p>2014年7月1日まで表示。</p>
</div>
<div id="demo6" data-expire="2015-01-01">
<p>2015年1月1日まで表示。</p>
</div>
<div id="demo7" data-expire="2016-01-01">
<p>2016年1月1日まで表示。</p>
</div>
<div id="demo8" data-expire="2017-01-01">
<p>2017年1月1日まで表示。</p>
</div>
<div id="demo9" data-expire="2018-01-01">
<p>2018年1月1日まで表示。</p>
</div>
<div id="demo10">
<p>東京五輪開催（2020年7月24日）まで表示。</p>
</div>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="jquery.jqExpire.js"></script>
<script>
$(document).ready(function() {
$().jqExpire();
$('#demo10').jqExpire('2020-07-24');
});
</script>
</body>
</html>
jsファイルのダウンロードやオプションなどの詳細はこちらからどうぞ。
» jqExpire
スポンサーリンク