問題
Ajaxを使ってタブ操作でカレンダーを表示するには?
解決策
- 今月の値を「Ym」形式で取得し、今月から任意の数の未来の月をタブとして生成します。
- アクティブになったタブの値(年月の値)を「Ajax」のパラメータで、カレンダー表示用の外部ファイルへPOSTで渡し、その年月の値に応じた内容に切り替えます。
タブ操作とAjax処理を連動してカレンダーを表示
タブ操作でAjaxを活用し、そして選択されたタブに応じてカレンダーを表示する記述例をご紹介します。
今回は以下の以下の3つの記事を応用していますので、ぜひこちらもご覧ください。
DEMOはこちら
- ※タブを切り替える度に表示されるカレンダーが切り替わります。
HTML
AJAXで外部ファイルから読み込んだデータを表示させるための空の要素を用意します。
タブは独自属性をjavascriptを介して設定したいため、javascriptで後ほど生成します。
<div class="ajax-box">
<div class="inner-box"></div>
</div>
CSS
タブを横並びにするためと、AJAXの処理が完了するまで、ロード中であることを示すため、ローディング画像を表示させるためのcss設定を行います。
.tab-list{
margin-bottom: 15px;
letter-spacing: -.4em;
}
.tab-list > li{
display: inline-block;
vertical-align: middle;
width: 18%;
margin: 0 1%;
letter-spacing: normal;
}
.tab-list > li:first-child{
margin-left: 0;
}
.tab-list > li:last-child{
margin-right: 0;
}
.tab-list > li a{
display: block;
padding: 10px;
color: #ffffff;
text-decoration: none;
text-align: center;
background-color: #F15A24;
border: 1px solid #F15A24;
}
.tab-list > li a:hover,
.tab-list > li.on a{
color: #F15A24;
background-color: #ffffff;
}
.ajax-box .inner-box .loading-box{
display: block;
height: 130px;
background-image: url("ajax-loader.gif");
background-position: center center;
background-repeat: no-repeat;
background-size: 100px auto;
}
今月から5ヶ月分のタブを生成する
今月から5ヶ月分のタブを生成する記述例は以下になります。
$('.ajax-box').prepend('<ul class="tab-list"></ul>');
var current_date = new Date();
var current_y = current_date.getFullYear();
var current_m = current_date.getMonth();
var d = 1;
var dp_d = ("00" + d).slice(-2);
for( var i = 0; i <= 4; i++ ){
var tabMonth = new Date(current_y, current_m + i);
var dp_y = tabMonth.getFullYear();
var dp_m = ("00" + (tabMonth.getMonth()+1)).slice(-2);
var dp_ymd = dp_y + dp_m + dp_d;
var dp_ym_label = dp_y + '年' + '<br>' + dp_m + '月';
$('.ajax-box .tab-list').append('<li class="'+dp_ymd+'" date="'+dp_ymd+'"><a href="#">'+dp_ym_label+'</a></li>');
}
- まず「prepend」でulタグを生成します。
- 「new Date()」から年を「getFullYear()」、月を「getMonth()」で取得します。
- 日は1を設定し、「(“00” + 日の値).slice(-2)」で0埋めしておきます。
- for文で変数iを0から4まで5回、繰り返します。
- 【繰り返し処理内】「new Date(current_y, current_m + i)」で今月から月の値に変数iをプラスして、再び年、月の値を取り出します。
- 【繰り返し処理内】取り出した月の値を0埋めして、文字列として年、月、日(先ほどの1日としての値)を連結させます。
- 【繰り返し処理内】そして「append」でliタグを生成します。
生成する際に、先ほど連結させた値を独自属性「date」として設定します。
ポイント!
「new Date(current_y, current_m + 任意の数値)」で来月、再来月等の値を取得することができます。
タブ操作でAjax処理を行い、指定した月のカレンダーを表示する記述例
タブ操作でAjax処理を行い、指定した月のカレンダーを表示する記述例は以下になります。
if($('.ajax-box').length){
// AJAX用関数
function tabajax( date, actionkey ){
jQuery.ajax({
type: 'post',
dataType:'text',
cache: false,
data: {
'action': actionkey,
'date': date
},
url: "calendar.php"
}).done(function(data) {
$('.ajax-box .inner-box').html(data);
if(document.location.href.indexOf('?') > -1) {
var url = document.location.href.substring(window.location.href.lastIndexOf('/') + 1).split('?');
var url = url[0]+"?date="+date;
}else{
var url = document.location.href.substring(window.location.href.lastIndexOf('/') + 1).split('?');
var url = url[0]+"?date="+date;
}
history.pushState(null,null,url);
}).error(function(XMLHttpRequest, textStatus, errorThrown) {
alert('error!!!');
console.log("XMLHttpRequest : " + XMLHttpRequest.status);
console.log("textStatus : " + textStatus);
console.log("errorThrown : " + errorThrown.message);
});
} // tabajax
// 初期読み込み時
$('.ajax-box .inner-box').html('<div class="loading-box"></div>');
if(location.search.match(/date=(.*?)(&|$)/)){
var date = location.search.match(/date=(.*?)(&|$)/)[1];
}else{
var date = $('.ajax-box .tab-list > li').eq(0).attr('date');
}
$('.ajax-box .tab-list > li').removeClass('on');
$('.ajax-box .tab-list > li').each( function(){
if( $(this).attr('date') == date ){
$(this).addClass('on');
}
});
var actionkey = "calendar";
tabajax( date, actionkey ); // AJAXの実行
// タブのクリック時
$('.ajax-box .tab-list > li a').click(function(event) {
//aリンクの動作を停止
event.preventDefault();
$('.ajax-box .tab-list > li').removeClass('on');
$(this).closest('li').addClass('on');
$('.ajax-box .inner-box').html('<div class="loading-box"></div>');
var date = $(this).closest('li').attr("date");
tabajax( date, actionkey ); // AJAXの実行
});
};
ポイント!
- AJAX処理をユーザー定義関数に収めて、引数としてタブのキー(日付の値)とアクションキーを設定します。
- ページの読み込み時とタブのクリック時に先ほどのAJAX処理を詰め込んだユーザー定義関数を実行します。
外部ファイルの記述例
外部ファイルの記述例は以下になります。
calendar.php
<?php
function calendar(){
date_default_timezone_set('Asia/Tokyo');
include(dirname(__FILE__)."/../pahooCalendar.php");
//pahooCalendarクラス
$pcl = new pahooCalendar();
$pcl->setLanguage('jp');
if(!empty($_POST['date'])):
$date = $_POST['date'] ;
else:
$date = date();
endif;
// 年月を取得する
$ym_now = date( "Ym", strtotime($date) );
$ym_label = date( "Y年m月", strtotime($date) );
$y = substr($ym_now, 0, 4);
$m = substr($ym_now, 4, 2);
?>
<h3 class="title-level03"><?php echo $ym_label; ?></h3>
<table class="type03 section-sss small sp-t100p">
<thead>
<tr>
<th scope="col"><span class="not">日</span></th>
<th scope="col"><span class="not">月</span></th>
<th scope="col"><span class="not">火</span></th>
<th scope="col"><span class="not">水</span></th>
<th scope="col"><span class="not">木</span></th>
<th scope="col"><span class="not">金</span></th>
<th scope="col"><span class="not">土</span></th>
</tr>
</thead>
<tbody>
<tr>
<?php
// 1日の曜日を取得
$wd1 = date("w", mktime(0, 0, 0, $m, 1, $y));
// その数だけ空白を表示
for ($i = 1; $i <= $wd1; $i++) {
echo "<td> </td>";
}
// 1日から月末日までの表示
$d = 1;
while (checkdate($m, $d, $y)) {
$date_d = sprintf('%02d', $d);
$cal_text = $d;
if($pcl->isHoliday($y,$m,$date_d)){
echo '<td class="close holiday">'.$cal_text.'</td>';
if(date("w", strtotime(date($y.$m.$date_d))) == 6){
echo "</tr>";
// 次の週がある場合は新たな行を準備
if (checkdate($m, $d + 1, $y)) {
echo "<tr>";
}
}
}elseif(date("w", strtotime(date($y.$m.$date_d))) == 6){
// 今日が土曜日の場合、週(行)を終了
echo '<td class="sat">'.$cal_text.'</td>';
echo "</tr>";
// 次の週がある場合は新たな行を準備
if (checkdate($m, $d + 1, $y)) {
echo "<tr>";
}
}elseif(date("w", strtotime(date($y.$m.$date_d))) == 0){
// 今日が日曜日の場合
echo '<td class="sun">'.$cal_text.'</td>';
}else{
echo '<td>'.$cal_text.'</td>';
}
$d++;
}
// 最後の週の土曜日まで移動
$wdx = date("w", mktime(0, 0, 0, $m + 1, 0, $y));
for ($i = 1; $i < 7 - $wdx; $i++) {
echo '<td><span class="not"> </span></td>';
}
?>
</tr>
</tbody>
</table>
<?php
} //calendar
if(!empty($_POST['action'])):
$actions = $_POST['action'];
$actions();
endif;
?>
ポイント!
- 「$_POST[‘date’]」でタブのキーの値を取得し、それを元に処理を行います。
コメント