利用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个后发现效率太低了,而且极容易出 ...
随机推荐
- Android 遮罩层效果
(用别人的代码进行分析) 不知道在开发中有没有经常使用到这种效果,所谓的遮罩层就是给一张图片不是我们想要的形状,这个时候我们就可以使用遮罩效果把这个图片变成我们想要的形状,一般使用最多就是圆形的效果, ...
- 借助无线路由器+2台笔记本+Windows桥接功能，成功绕过了微信聊天记录迁移的BUG
最近入了台iphone se,在迁移微信聊天记录的时候,遇到个BUG.它的迁移流程是这样的:需要将两台手机连接到同一个WIFI上面,然后新手机扫旧手机上面的二维码,来完成导入.中途遇到的问题是: 此时 ...
- [MOSEK] Stupid things when using mosek
1.2016-8-14 我希望把一个qp问题的代码从conic constraints改为无外加约束,仅适用variable bounds的线性不等式约束 于是原来的约束代码为 if (r == MS ...
- Oracle 学习方法
参考书籍: oracle实用教程 pdf 深入浅出Oracle: DBA入门.进阶与诊断案例.pdf Oracle 认证 Dba 认证: Oca oracle 初级dba 认证(容易) Ocp o ...
- 使用afinal下载文件并且在状态栏中显示下载的进度
2013年10月23日,今天是在“我在找你信息服务有限公司”第一天上班,公司给提出了这样一个要求:下载本公司的app,并且在下载的过程中要在状态栏中显示下载的进度,并且,可以暂停和继续下载. 下面是我 ...
- final、finally、finalize的区别
看C#知识点的时候发现的问题 1.final 修饰符(关键字)如果一个类被声明为final,意味着它不能再派生出新的子类,不能作为父类被继承.因此一个类不能既被声明为 abstract的,又被声明为f ...
- python的正负无穷float("inf")的用法
今天,在看书的时候看到这么一个例子: 这是用来求解 从某个数字列表中找出俩个彼此最接近但是不相等的数(俩者之间的绝对差是最小的): >>> from random import ra ...
- CSS里常见的块级元素和行内元素
根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,成为“块级 ...
- javascript除法如何取整
Math.round(x) 四舍五入,如Math.round(0.60),结果为1:Math.round(0.49),结果为0: Math.floor(x) 向下舍入,如Math.floor(0.60 ...
- 搭建maven环境
有两种方式可以配置maven的环境配置,本人推荐使用第二种,即使用本地的maven安装文件,个人感觉这样可以方便管理下载jar包的存放位置,错误信息的输出等,可以在dos窗口中可以清晰看到,虽然比较麻 ...