swiperのスライダー式のカレンダー
- 技術三昧@2018-04-20 19:09:52
スポンサーリンク
サンプルです。コピペーでデモページで作成できる。
ここでメモする。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>技術三昧</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<base href="https://www.benri.jp">
<script type="text/javascript" src="/js/jquery/jquery-1.9.1.min.js"></script>
<link rel="stylesheet" href="/css/plugin/swiper/swiper.min.css">
<style>
html, body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 1rem;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.swiper-pagination-bullet {
width: 1.2rem;
height: 1.2rem;
text-align: center;
line-height: 1.2rem;
font-size: 0.8rem;
color:#000;
opacity: 1;
background: rgba(0,0,0,0.2);
}
.swiper-pagination-bullet-active {
color:#fff;
background: #007aff;
}
/*
.swiper-pagination {
top: 0px;
}
*/
.MonthIndexer li {
width: calc(100% / 12);
float: left;
}
.MonthIndexer li:hover {
cursor: pointer;
font-weight: bolder;
background: lightgreen;
}
.CurrentMonth {
font-size:180%;
font-weight: bolder;
color: green;
}
</style>
</head>
<body>
<script>
$(function(){
/*-----------------------------------------------------------------------------
* 概要：月一覧の月を押したら、連動先のカレンダーもその月のカレンダー
* にスライドさせて表示する
* （スライドナビのページングアイコンと連動）
*----------------------------------------------------------------------------*/
$('.MonthIndexer .Month').click(function(){
var labelFor = $(this).data('labelfor');
//連動先のスライドナビーアイコンをクリックさせるイベント
$('#'+labelFor).click();
});
/*-----------------------------------------------------------------------------
* スライドナビーアイコンの状態を監視し、属性classが変わったら、
* その連動先の月一覧へ反映する
* （月一覧に反映）
*----------------------------------------------------------------------------*/
// 監視対象要素（ノード群）
//const targetNode = document.getElementById('your-tag-id');
let targetNodes = document.getElementsByClassName('PaginationNav');
// オブザーバーインスタンス準備
// callbackメッソドで処理
const obs = new MutationObserver((mutations) => {
//連動先の月一覧対象要素を、removeClass
$('.MonthIndexer li.Month').removeClass('CurrentMonth');
//監視対象要素がactive状態になったら、その関連の月一覧の対象月をclass=CurrentMonthに反映
mutations.forEach((mutation) => {
if(mutation.target.className.indexOf('swiper-pagination-bullet-active') >=0){
var paginationId = mutation.target.id; //ページングのカレンダーID
var obsId = $('#'+paginationId).data('observe');//連動対象のID
$('#' + obsId).addClass('CurrentMonth');
}
});
//alert('監視対象の状態が変わったよ！');
});
// オブザーバーの監視対象（イベント）の設定
const config = {
attributes: true
};
//対象と設定を渡す
for(i=0; i<targetNodes.length; i++) {
obs.observe(targetNodes[i] , config);
}
});
</script>
<div style="height:80%;">
<h2>月一覧：<span style="font-size:70%;font-weight:normal;">月を押したら、その月のカレンダーをスライドインで表示</span></h2>
<ul class="MonthIndexer" style="list-style:none;">
<li class="Month" id="month1" data-labelfor="pNav1">1月</li>
<li class="Month" id="month2" data-labelfor="pNav2">2月</li>
<li class="Month CurrentMonth" id="month3" data-labelfor="pNav3">3月</li>
<li class="Month" id="month4" data-labelfor="pNav4
0人
◎技術三昧掲示板で掲載した情報（リンク・リンク先を含む）に関して、掲示板管理者が確認や保証を行うことは一切ありません。
すべて利用者のモラルに委ねられおり、掲示板から張られたリンクに関するトラブルが生じても管理者側は免責とさせていただきます。