利用jmSlip写一个移动端顶部日历选择组件
可滚动选日期，并限制哪些日期可选和不可选。
主要用来根据后台返回生成一个日期选择器。
具体实现可关注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.当日，加"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(),//默认选中20161019这天，当它为今天
duration: 800,
itemOffWidth: 0, //每个项的偏移量纠正
//当滑动时自动选择回调，自定义控制是否可选
selectHandler: function(curIndex, newIndex) {
//获取自动选择的那一天，如果不是可选的，则选择它最近的一天
var item = $('.js-calendar-days li').eq(newIndex);
if(!item.hasClass('js-has-data')) {
//如果是往后拉，则优先向后搜询可用的日期
//只往前后同时搜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;//如果它是已经被选中的，则直接返回，不需要再触发查询数据
$('.js-calendar-days').find('li.cur').removeClass('cur');
item.addClass('cur'); //刷新其数据
$('.js-content').html(item.attr('data-day'));
}
}); //选中某个日期，则拉取它的数据
//只能选择有数据的项
$('.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>
利用jmSlip写一个移动端顶部日历选择组件的更多相关文章
- 学了C语言，如何利用cURL写一个程序验证某个网址的有效性？
在<C程序设计伴侣>以及这几篇关于cURL的文章中,我们介绍了如何利用cURL写一个下载程序,从网络下载文件.可是当我们在用这个程序下载文件时,又遇到了新问题:如果这个网址是无效的,那么我 ...
- 学了C语言，如何利用CURL写一个下载程序？—用nmake编译CURL并安装
在这一系列的前一篇文章学了C语言,如何为下载狂人写一个磁盘剩余容量监控程序?中,我们为下载狂人写了一个程序来监视磁盘的剩余容量,防止下载的东西撑爆了硬盘.可是,这两天,他又抱怨他的下载程序不好用,让我 ...
- Vue折腾记 - (3)写一个不大靠谱的typeahead组件
Vue折腾记 - (3)写一个不大靠谱的typeahead组件 2017年07月20日 15:17:05 阅读数:691 前言 typeahead在网站中的应用很多..今天跟着我来写一个不大靠谱的ty ...
- 用H5和js写一个移动端自定义播放器
前言 由于html5自带的播放器样式不怎么好看,大多数人都是自己写一个来满足业务需求.这一次的需求如下: 1.不要上一曲下一曲 2.有进度条和播放暂停按钮 3.有时间显示 demo实现功能 1.进度条 ...
- 利用 Python 写一个颜值测试小工具
我们知道现在有一些利用照片来测试颜值的网站或软件,其实使用 Python 就可以实现这一功能,本文我们使用 Python 来写一个颜值测试小工具. 很多人学习python,不知道从何学起.很多人学习p ...
- 怎样写一个PC端使用的操盘手软件（用来买卖股票，查看报表，行情）
我们想写一个操盘手软件,对于操盘而言,首先是快,然后是资料尽可能丰富,最好能看到行情,报表什么的.只是windows上写软件看似基础,实际上都不怎么好弄,用C++开发确实可以实现所有功能,估计光研发费 ...
- 写一个JavaScript“返回顶部”功能
在web页面中,如果页面较高,为了方便用户快速地返回顶部,都会添加一个返回顶部按钮. 效果演示可以查看本页.如果页面有滚动高度,右下角就会有一个含有“返回顶部”字样的黑色背景半透明的小条条.点击这里“ ...
- 利用Python写一个抽奖程序，解密游戏内抽奖的秘密
前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者: 极客挖掘机 PS:如有需要Python学习资料的小伙伴可以加点击下 ...
- 从零开始写一个npm包,一键生成react组件(偷懒==提高效率)
前言 最近写项目开发新模块的时候,每次写新模块的时候需要创建一个组件的时候(包含组件css,index.js,组件js),就只能会拷贝其他组件修改名称 ,但是写了1-2个后发现效率太低了,而且极容易出 ...
随机推荐
- HTTP Client工具类
HTTP Client工具类: import org.apache.http.Header;import org.apache.http.HttpEntity;import org.apache.ht ...
- Ceph剖析：线程池实现
线程池ThreadPool的实现符合生产者-消费者模型,这个模型解除生产者消费者间的耦合关系,生产者可以专注处理制造产品的逻辑而不用关心产品的消费,消费者亦然.当然,生产者消费者之间需要一个连接的纽带 ...
- Flashback for MySQL 5.7
实现原理 flashback的概念最早出现于Oracle数据库,用于快速恢复用户的误操作. flashback for MySQL用于恢复由DML语句引起的误操作,目前不支持DDL语句.例如下面的语句 ...
- python学习之路-day12-mysql && orm
一.数据库 1.数据库介绍 数据库(Database)是按照数据结构来组织.存储和管理数据的仓库,每个数据库都有一个或多个不同的API用于创建,访问,管理,搜索和复制所保存的数据.我们也可以将数据存储 ...
- 122. Best Time to Buy and Sell Stock（二） leetcode解题笔记
122. Best Time to Buy and Sell Stock II Say you have an array for which the ith element is the price ...
- <<Design Patterns>> Gang of Four
One:Introduction: One-1:Before delving into the some twenty pattern designs, it's necessary for ME ...
- linux下不同服务器间数据传输(rcp,scp,rsync,ftp,sftp,lftp,wget,curl)(zz)
linux下不同服务器间数据传输(rcp,scp,rsync,ftp,sftp,lftp,wget,curl) 分类: linux2011-10-10 13:21 8773人阅读 评论(1) 收藏 举 ...
- 通俗易懂的 JSon解析处理
1.主要用到的类: 主要用到了JavaScriptSerializer类,该类在System.Web.Script.Serialization命名空间(在System.Web.Extensions.d ...
- zabbix server配置文件
这样的错误日志,并且在web端也没有画出图来. 解决方法: ①编辑zabbix服务器端的配置文件/etc/zabbix/zabbix_server.conf找到"Timeout"把 ...
- 【洛谷P3197】越狱
本来还想了一会dp-- 然而一看数据范围明显是数论-- 那么推一推.. 我们发现可以用总方案数减去不会越狱的方案数 那么我们考虑在长度为n的数列中填数 首先第一个位置有m种选择,后面的位置: 总方案: ...