2013年4月22日
Movable Typeの日付カスタムフィールドを使って「予定」「開催中」「終了」を別々に表示する方法
「Movable Typeの日付カスタムフィールドを2つ使って「開催中」を表示する方法」で、「予定」「開催中」「終了」をそれぞれ別のリストに出力するカスタマイズを紹介します。
変更前
変更後
以下、カスタマイズ方法です。カスタムフィールドは「Movable Typeの日付カスタムフィールドを2つ使って「開催中」を表示する方法」の2項を参考に予め作成しておいてください。
1.カスタマイズ
まず、「予定」「開催中」「終了」を表示させるエリアとして、次のHTMLを全面追加します。
<div class="widget-recent-entries widget-archives widget">
<h3 class="widget-header">開催中</h3>
<div class="widget-content">
<ul id="during"></ul>
</div>
<h3 class="widget-header">予定</h3>
<div class="widget-content">
<ul id="future"></ul>
</div>
<h3 class="widget-header">終了</h3>
<div class="widget-content">
<ul id="old"></ul>
</div>
</div>
次に、MTEntriesタグにli要素を追加します(赤色部分)。
<mt:Entries>
<li style="display:none"><$mt:EntryTitle$> <span class="icon" style="display:none"><$mt:EntryCFStartDate format="%Y:%m:%d:%H:%M:%S:"$><$mt:EntryCFEndDate format="%Y:%m:%d:%H:%M:%S"$></span></li>
</mt:Entries>
最後にJavaScriptを次のように変更します(赤色が変更部分)。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript">
<!--
var currentDate = new Date();
jQuery(function(){
jQuery('.icon').each(function(){
time = (jQuery(this).text()).split(":");
var startDate = new Date(time[0], time[1]-1, time[2], time[3], time[4], time[5]);
var endDate = new Date(time[6], time[7]-1, time[8], time[9], time[10], time[11]);
var start = (startDate.getTime()/(24*60*60*1000)) - (currentDate.getTime()/(24*60*60*1000));
var end = (endDate.getTime()/(24*60*60*1000)) - (currentDate.getTime()/(24*60*60*1000));
start = Math.ceil(start);
end = Math.ceil(end);
var li = jQuery(this).parent();
jQuery(this).parent().remove();
if (start <= 0 && end >= 0) {
jQuery('#during').append(li);
} else if (start > 0) {
jQuery('#future').append(li);
} else if (end < 0) {
jQuery('#old').append(li);
}
li.css('display', 'block');
});
});
//-->
</script>
2.解説
次の部分でspan要素の親要素(li要素)を取得し、取得したら取得元を削除します。
jQuery('.icon').each(function(){
// ...
var li = jQuery(this).parent();
jQuery(this).parent().remove();
期間に応じて、取得したli要素をそれぞれのリストに追加していきます。
if (start <= 0 && end >= 0) {
jQuery('#during').append(li);
} else if (start > 0) {
jQuery('#future').append(li);
} else if (end < 0) {
jQuery('#old').append(li);
}
追加後、リストに表示されるようにします。
li.css('display', 'block');
Comments [7]
| Trackbacks [0]