用jmSlip編寫移動端頂部日歷選擇控件
更新時間：2016年10月24日 14:25:44 作者：家貓47
這篇文章主要為大家詳細(xì)介紹了利用jmSlip編寫移動端頂部日歷選擇組件的方法,具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文為大家分享了jmSlip移動端日歷選擇組件，可滾動選日期，并限制哪些日期可選和不可選。
主要用來根據(jù)后臺返回生成一個日期選擇器。
具體實現(xiàn)可關(guān)注jmslip: https://github.com/jiamao/jmSlip
示例：http://slip.jm47.com/demo/calendar/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<title>日歷</title>
<style>
body,html{
font-family: Helvetica;
font-weight: 100;
}
.justify {
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
}
.cell-box {
background: #fff;
box-shadow: 0 2px 4px rgba(0,0,0,.05);
}
.date-wrap {
padding: 17px 0 18px;
overflow: hidden;
}
.date-wrap .hd {
padding: 0 15px;
font-size: 12px;
color: #888;
}
.date-wrap .bd {
padding-top: 13px;
}
.date-wrap .hd .week {
font-size: 20px;
line-height: 26px;
}
.date-wrap .btn-chief-hollow {
min-width: 49px;
display: inline-block;
height: 28px;
line-height: 28px;
border: 1px solid #417ddf;
border-radius: 3px;
color: #417ddf;
font-size: 12px;
text-align: center;
text-decoration: none;
}
.date-wrap .date-list {
list-style: none;
display: -webkit-box;
white-space: nowrap;
height: 52px;
font-size: 0;
margin: 0;
padding: 0;
}
.date-wrap .date-list li {
-webkit-box-flex: 1;
text-align: center;
display: inline-block;
text-align: center;
width: 50px;
height: 52px;
font-size: 0;
}
.date-wrap .date-list li .week {
margin: 0;
padding: 0;
padding-bottom: 7px;
font-size: 12px;
color: #b2b2b2;
line-height: 15px;
}
.date-wrap .date-list li .date {
margin: 0;
padding: 0;
position: relative;
margin: 0 auto;
width: 30px;
height: 30px;
border-radius: 100%;
font-size: 14px;
color: #d3d3d3;
line-height: 30px;
}
.date-wrap .date-list li.in-case .date {
color: #000;
}
.date-wrap .date-list li.cur .date {
background-color: #2f78ec;
color: #fff;
}
</style>
<script src="http://mat1.gtimg.com/www/mobi/js/zepto.min.js"></script>
<script src="../../src/jmSlip.js"></script>
</head>
<body>
<div class="cell-box">
<div class="date-wrap js-calendar">
<div class="hd justify">
<div class="lt">
<p class="js-date">十月 2016</p>
<p class="week js-week">星期一</p>
</div>
<div class="rt">
<a class="btn-chief-hollow js-tap-on js-today" href="javascript:;">今日</a>
</div>
</div>
<div class="bd">
<div class="date-list-wrap js-calendar-days-container">
<!-- 控制li
1.當(dāng)日，加"cur"
2.有事件，加"in-case" -->
<ul class="date-list js-calendar-days">
<li class="js-item in-case js-has-data" data-day="20161011">
<p class="week">二</p>
<p class="date">11</p>
</li>
<li class="js-item" data-day="20161012">
<p class="week">三</p>
<p class="date">12</p>
</li>
<li class="js-item in-case js-has-data" data-day="20161013">
<p class="week">四</p>
<p class="date">13</p>
</li>
<li class="js-item in-case js-has-data" data-day="20161014">
<p class="week">五</p>
<p class="date">14</p>
</li>
<li class="js-item" data-day="20161015">
<p class="week">六</p>
<p class="date">15</p>
</li>
<li class="js-item" data-day="20161016">
<p class="week">日</p>
<p class="date">16</p>
</li>
<li class="js-item in-case js-has-data" data-day="20161017">
<p class="week">一</p>
<p class="date">17</p>
</li>
<li class="js-item" data-day="20161018">
<p class="week">二</p>
<p class="date">18</p>
</li>
<li class="js-item in-case js-has-data" data-day="20161019">
<p class="week">三</p>
<p class="date">今日</p>
</li>
<li class="js-itema" data-day="20161020">
<p class="week">四</p>
<p class="date">20</p>
</li>
<li class="js-item" data-day="20161021">
<p class="week">五</p>
<p class="date">21</p>
</li>
<li class="js-item in-case js-has-data" data-day="20161022">
<p class="week">六</p>
<p class="date">22</p>
</li>
<li class="js-item" data-day="20161023">
<p class="week">日</p>
<p class="date">23</p>
</li>
<li class="js-item in-case js-has-data" data-day="20161024">
<p class="week">一</p>
<p class="date">24</p>
</li>
<li class="js-item in-case js-has-data" data-day="20161025">
<p class="week">二</p>
<p class="date">25</p>
</li>
<li class="js-item in-case js-has-data" data-day="20161026">
<p class="week">三</p>
<p class="date">26</p>
</li>
<li class="js-item in-case js-has-data" data-day="20161027">
<p class="week">四</p>
<p class="date">27</p>
</li>
</ul>
</div>
</div>
</div>
</div>
<br />
<br />
<div class="js-content"></div>
<script>
var slipCalendar = new jmSlip($('.js-calendar-days-container'),'item',{
mousewheel:true,//支持滾輪
direction: 'x',
page: $('.js-calendar-days li[data-day="20161019"]').index(),//默認(rèn)選中20161019這天，當(dāng)它為今天
duration: 800,
itemOffWidth: 0, //每個項的偏移量糾正
//當(dāng)滑動時自動選擇回調(diào)，自定義控制是否可選
selectHandler: function(curIndex, newIndex) {
//獲取自動選擇的那一天，如果不是可選的，則選擇它最近的一天
var item = $('.js-calendar-days li').eq(newIndex);
if(!item.hasClass('js-has-data')) {
//如果是往后拉，則優(yōu)先向后搜詢可用的日期
//只往前后同時搜4天，超過，則按用戶拉的方向一直向下搜
var der = curIndex > newIndex?-1:1;
for(var i=1;i<5;i++) {
var index = newIndex+(i*der);
item = $('.js-calendar-days li').eq(index);
if(item.hasClass('js-has-data') && index != curIndex) return index;
index = newIndex-(i*der);
item = $('.js-calendar-days li').eq(index);
if(item.hasClass('js-has-data') && index != curIndex) return index;
}
//依然沒有找到，則一直往前找
//最長找三個月
for(;i<93;i++) {
var index = newIndex+(i*der);
item = $('.js-calendar-days li').eq(index);
if(item.hasClass('js-has-data') && index != curIndex) return index;
}
//找不到可用的日期，則返回
return false;
}
},
onPageStart: function(index){
//獲取自動選擇的那一天，如果不是可選的，則選擇它最近的一天
var item = $('.js-calendar-days li').eq(index);
if(!item.hasClass('js-has-data')) return false;
},
onTouchMove: function(evt, offset) {
},
onPageEnd: function(oldPage,newPage) {
//定位于選擇的那一天
var item = $('.js-calendar-days li').eq(newPage);
if(item.hasClass('cur')) return;//如果它是已經(jīng)被選中的，則直接返回，不需要再觸發(fā)查詢數(shù)據(jù)
$('.js-calendar-days').find('li.cur').removeClass('cur');
item.addClass('cur');
//刷新其數(shù)據(jù)
$('.js-content').html(item.attr('data-day'));
}
});
//選中某個日期，則拉取它的數(shù)據(jù)
//只能選擇有數(shù)據(jù)的項
$('.js-calendar-days').on('click', '.js-has-data', function(){
if(!slipCalendar || $(this).hasClass('cur')) return;
//定位于選擇的那一天
slipCalendar.go($(this).index());
});
$('.js-today').click(function(){
slipCalendar.go($('.js-calendar-days li[data-day="20161019"]').index());
});
</script>
</body>
</html>
精彩專題分享：javascript日歷插件使用方法匯總
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JS實現(xiàn)逐頁將PDF文件轉(zhuǎn)為圖片格式
這篇文章主要為大家分享了如何通過前端js將pdf文件轉(zhuǎn)為圖片格式，并且支持翻頁預(yù)覽、以及圖片打包下載，文中的示例代碼簡潔易懂，需要的可以參考一下2023-05-05
這篇文章主要介紹了小程序二次貝塞爾曲線實現(xiàn)購物車商品曲線飛入效果，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
JavaScript 嚴(yán)格模式(use strict)用法實例分析
這篇文章主要介紹了JavaScript 嚴(yán)格模式(use strict)用法,結(jié)合實例形式分析了JavaScript 嚴(yán)格模式的基本功能、用法及操作注意事項,需要的朋友可以參考下2020-03-03
本文給大家介紹的是windows對象中的scrollBy()的定義和使用方法，十分的細(xì)致全面，有需要的小伙伴可以參考下。2015-07-07
Gulp實現(xiàn)靜態(tài)網(wǎng)頁模塊化的方法詳解
眾所周知Gulp.js 是一個自動化構(gòu)建工具,開發(fā)者可以使用它在項目開發(fā)過程中自動執(zhí)行常見任務(wù)。下面這篇文章主要給大家介紹了關(guān)于Gulp實現(xiàn)靜態(tài)網(wǎng)頁模塊化的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下。2018-01-01
js模擬jquery的slide和fadeIn和fadeOut功能
以前用過jquery的slideUp，slideDown，等許多很不錯的方法，感覺很容易就能實現(xiàn)頁面元素的動畫效果！2010-07-07
這篇文章主要介紹了JavaScript 防抖和節(jié)流,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-09-09
下面小編就為大家分享一篇基于js 各種排序方法和sort方法的區(qū)別(詳解)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)日歷小功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
js復(fù)制內(nèi)容到剪貼板代碼,js復(fù)制代碼的簡單實例
下面小編就為大家?guī)硪黄猨s復(fù)制內(nèi)容到剪貼板代碼,js復(fù)制代碼的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10