自适应备忘录 demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title>工作台-备忘录</title>
<link rel="stylesheet" href="../css/weixincrm.min.css">
<script type="text/javascript" src="../js/zepto.min.js"></script>
<script type="text/javascript" src="../js/weixincrm.min.js" ></script>
<style type="text/css">
.calendar2 h2{line-height: 0.8rem;height: 0.8rem; text-align: center; color: #25a9e6; font-size: 0.32rem; background-color: #f5f5f5;}
.calendar2 table tbody{width: 100%; position: relative; z-index: 60;}
.calendar2 table{width: 100%;background-color: #fff; border-collapse:collapse; }
.calendar2 table thead{background-color: #c6dde4;}
.calendar2 table thead tr { height: 0.5rem; line-height: 0.5rem; }
.calendar2 table thead tr td{ color: #666; font-size: 0.26rem; text-align: center; font-weight: 500;}
.calendar2 table thead tr td .event-wekday{width: 0.6rem;}
.calendar2 table tbody{padding-top: 0.2rem;}
.calendar2 table tbody tr{height: 0.6rem;line-height: 0.6rem; }
.calendar2 table tbody tr td{color: #333; font-size: 0.26rem; text-align: center; padding-top: 0.2rem;font-weight: 400;}
.calendar2 table tbody tr td .event-day{width: 0.6rem; display: inline-block;border: 2px solid #fff;}
.calendar2 table tbody tr td span.active{ border: 2px solid #3399cc;border-radius: 50%;}
.calendar2 table tbody tr td .current{width: 0.6rem height:0.6rem; border-radius: 50%; background-color: #3399cc; color: #fff;}
.day-event2 {font-size: 0.28rem;color: #333;box-sizing: border-box; margin-left: 0.35rem; margin-right: 0.25rem; border-left: 2px solid #ddd; padding-top: 0.2rem;position: relative;display: none;}
.day-event2 .dost{width: 0.34rem; height: 0.34rem; border: 2px solid #e3e3e3; border-radius: 50%;position: absolute; top: 0.43rem;left: -0.25rem;text-align: center;z-index: 2;}
.day-event2 .dost b{background-color: #ef5e5e; width: 0.29rem; height: 0.29rem; border-radius: 50%; position: absolute;left: 0.028rem;top: 0.025rem;}
.day-event2 div{margin-left: 0.45rem; background-color: #fff; padding-top: 0.15rem; border-radius: 0.05rem; padding-left: 0.2rem; position: relative;}
.day-event2 div p{ line-height: 0.3rem;}
.day-event2 div .arrow-left{border-bottom: 0.3rem solid transparent;border-top: 0.3rem solid transparent;border-right: 0.3rem solid #fff; font-size: 0;line-height: 0; position: absolute;left: -0.25rem;/* top: 0.4rem; */}
.day-event2 .time-text{font-size: 0.22rem; color: #999;padding-top: 0.1rem;padding-bottom: 0.1rem;}
.calendar2 table tbody tr td .current-day{ width: 0.6rem height:0.6rem; border-radius: 50%; background-color: #3399cc; color: #fff;border: 2px solid #3399cc;}
.calendar2 table tbody tr td .event{position: relative;background: #e7e7e7;border: 2px solid #e7e7e7;border-radius: 50%;}
</style>
</head>
<body>
<div id="section_container">
<section id="index-section" class="active">
<header>
<div class="goback2"><h1>客户信息</h1><a href="#" class="backhref"></a></div>
<div class="calendar2 article-top-backhref2">
<h2 class="month">9月2016</h2>
<table>
<thead class="head">
<tr>
<td><span class="event-wekday">周日<span></td>
<td><span class="event-wekday">周日<span></td>
<td><span class="event-wekday">周日<span></td>
<td><span class="event-wekday">周日<span></td>
<td><span class="event-wekday">周日<span></td>
<td><span class="event-wekday">周日<span></td>
<td><span class="event-wekday">周日<span></td>
</tr>
</thead>
<tbody class="event-calendar2">
<tr class="row1">
<td><span class="event-day"></span></td>
<td><span class="event-day"></span></td>
<td><span class="event-day"></span></td>
<td><span class="event-day"></span></td>
<td><span class="event-day active">1</span></td>
<td><span class="event-day">2</span></td>
<td><span class="event-day">3</span></td>
</tr>
<tr class="row2">
<td><span class="event-day">4</span></td>
<td><span class="event-day">5</span></td>
<td><span class="event-day">6</span></td>
<td><span class="event-day">7</span></td>
<td><span class="event-day">8</span></td>
<td><span class="event-day">9</span></td>
<td><span class="event-day">10</span></td>
</tr>
<tr class="row3">
<td><span class="event-day">11</span></td>
<td><span class="event-day">12</span></td>
<td><span class="event-day">13</span></td>
<td><span class="event-day">14</span></td>
<td><span class="event-day">15</span></td>
<td><span class="event-day">16</span></td>
<td><span class="event-day">17</span></td>
</tr>
<tr class="row4">
<td><span class="event-day">18</span></td>
<td><span class="event-day">19</span></td>
<td><span class="event-day current">20</span></td>
<td><span class="event-day">21</span></td>
<td><span class="event-day">22</span></td>
<td><span class="event-day">23</span></td>
<td><span class="event-day">24</span></td>
</tr>
<tr class="row5">
<td><span class="event-day">25</span></td>
<td><span class="event-day">26</span></td>
<td><span class="event-day">27</span></td>
<td><span class="event-day">30</span></td>
<td><span class="event-day"></span></td>
</tr>
</tbody>
</table>
</div>
</header>
<article class="active article-top-0 clearfix">
<div class="scroller scroller-top">
<div class="list">
<!-- <div class="day-event2" date-day="19" date-month="9" date-year="2016" data-number="0" style="display: block;">
<span class="dost"><b></b></span><div><a class="arrow-left"></a><p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras justo odio, dapibus ac facilisis in, egestas eget quam</p>
<p class="time-text">16:52</p>
</div>
</div>
<div class="day-event2" date-day="19" date-month="9" date-year="2016" data-number="0" style="display: block;">
<span class="dost"><b></b></span><div><a class="arrow-left"></a><p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras justo odio, dapibus ac facilisis in, egestas eget quam</p>
<p class="time-text">16:52</p>
</div>
</div> -->
</div>
</div>
</article>
</section>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('.scroller').css('top',$('header').height());
})
</script>
<script src="../js/simplecalendar2.js" type="text/javascript"></script>
<!-- <script src="../js/jquery-latest.min.js" type="text/javascript"></script>
<script src="../js/simplecalendar.js" type="text/javascript"></script> -->
</body>
</html>
var calendar = {
init: function(ajax) {
if (ajax) {
// ajax call to print json
//
$.ajax({
type: 'GET',
url: '../data/events.json',
dataType: 'json',
success: function(data){
var events = data.events;
// loop json & append to dom
var myDate = new Date();
var now = myDate.getFullYear() +"/" +(myDate.getMonth()+1)+"/"+myDate.getDate();
for (var i = 0; i < events.length; i++)
{
var time = events[i].year + "/" + events[i].month +"/"+events[i].day;
if(time == now )
{
$('.list').append('<div class="day-event2" style="display:block;" date-day="'+ events[i].day +'" date-month="' + events[i].month +'" date-year="'+ events[i].year +'" data-number="'+ i +'"><span class="dost"><b class="active"></b></span><div><a class="arrow-left"></a><p>'+ events[i].description +'</p><p class="time-text">16:52</p></div></div>');
}
else
{
$('.list').append('<div class="day-event2" date-day="'+ events[i].day +'" date-month="' + events[i].month +'" date-year="'+ events[i].year +'" data-number="'+ i +'"><span class="dost"><b class="active"></b></span><div><a class="arrow-left"></a><p>'+ events[i].description +'</p><p class="time-text">16:52</p></div></div>');
}
}
calendar.startCalendar();
},
error: function(xhr, type){
alert('Ajax error!')
}
})
}
else {
// if not using ajax start calendar
calendar.startCalendar();
}
},
startCalendar: function() {
var mon = '周一';
var tue = '周二';
var wed = '周三';
var thur = '周四';
var fri = '周五';
var sat = '周六';
var sund = '周日';
/**
* Get current date
*/
var d = new Date();
var strDate = yearNumber + "/" + (d.getMonth() + 1) + "/" + d.getDate();
var yearNumber = (new Date).getFullYear();
/**
* Get current month and set as '.current-month' in title
*/
var monthNumber = d.getMonth() + 1;
function GetMonthName(monthNumber) {
var months = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
return months[monthNumber - 1];
}
setMonth(monthNumber, mon, tue, wed, thur, fri, sat, sund);
function setMonth(monthNumber, mon, tue, wed, thur, fri, sat, sund) {
$('.month').text(GetMonthName(monthNumber) + ' ' + yearNumber);
$('.month').attr('data-month', monthNumber);
printDateNumber(monthNumber, mon, tue, wed, thur, fri, sat, sund);
}
var oSlide = document.querySelector('.calendar2 table');
// var oList = document.querySelector('.calendar header');
var startPoint = 0;
var startX = 0;
var startY= 0;
var translateX = 0;
var translateY= 0;
oSlide.addEventListener('touchstart',function(e){
startPoint = e.changedTouches[0].pageX;
startY=e.changedTouches[0].pageY;
})
oSlide.addEventListener('touchmove',function(e){
translateX = e.changedTouches[0].pageX - startPoint;
translateY = e.changedTouches[0].pageY - startY;
// translateX = startX + dis;
// translateY=
})
oSlide.addEventListener('touchend',function(e){
if(Math.abs(translateX)> Math.abs(translateY))
{
if(startPoint.toFixed(2)==e.changedTouches[0].pageX.toFixed(2))
{
return false;
}
else
{
if(translateX>0)
{
var monthNumber = $('.month').attr('data-month');
if (monthNumber < 2) {
$('.month').attr('data-month', '13');
var monthNumber = $('.month').attr('data-month');
yearNumber = yearNumber - 1;
setTimeout(setMonth(parseInt(monthNumber) - 1, mon, tue, wed, thur, fri, sat, sund),1000);
} else {
setMonth(parseInt(monthNumber) - 1, mon, tue, wed, thur, fri, sat, sund);
};
var myDate = new Date();
var date=(myDate.getMonth()+1)+"月"+myDate.getFullYear();
var day=myDate.getDate();
var year=myDate.getFullYear();
var month=myDate.getMonth()+1;
$('.day-event2').css('display','none');
if($('.calendar2 .month').text().replace(" ","")==date)
{
$('.day-event2[date-month="' + month + '"][date-year="' + year + '"][date-day="' + day + '"]').css('display','block');
}
// else
// {
// }
}
else if(translateX<0)
{
var monthNumber = $('.month').attr('data-month');
if (monthNumber > 11) {
$('.month').attr('data-month', '0');
var monthNumber = $('.month').attr('data-month');
yearNumber = yearNumber + 1;
setMonth(parseInt(monthNumber) + 1, mon, tue, wed, thur, fri, sat, sund);
} else {
setMonth(parseInt(monthNumber) + 1, mon, tue, wed, thur, fri, sat, sund);
};
var myDate = new Date();
var date=(myDate.getMonth()+1)+"月"+myDate.getFullYear();
var day=myDate.getDate();
var year=myDate.getFullYear();
var month=myDate.getMonth()+1;
$('.day-event2').css('display','none');
if($('.calendar2 .month').text().replace(" ","")==date)
{
$('.day-event2[date-month="' + month + '"][date-year="' + year + '"][date-day="' + day + '"]').css('display','block');
}
}
}
}
else
{
return false;
}
})
function printDateNumber(monthNumber, mon, tue, wed, thur, fri, sat, sund) {
$($('tbody.event-calendar2 tr')).each(function(index) {
$(this).empty();
});
$($('thead.head tr')).each(function(index) {
$(this).empty();
});
function getDaysInMonth(month, year) {
// Since no month has fewer than 28 days
var date = new Date(year, month, 1);
var days = [];
while (date.getMonth() === month) {
days.push(new Date(date));
date.setDate(date.getDate() + 1);
}
return days;
}
i = 0;
setDaysInOrder(mon, tue, wed, thur, fri, sat, sund);
function setDaysInOrder(mon, tue, wed, thur, fri, sat, sund) {
var monthDay = getDaysInMonth(monthNumber - 1, yearNumber)[0].toString().substring(0, 3);
if (monthDay === 'Mon') {
$('thead.head tr').append('<td><span class="event-wekday">' + mon + '</span></td><td><span class="event-wekday">' + tue + '</span></td><td><span class="event-wekday">' + wed + '</span></td><td><span class="event-wekday">' + thur + '</span></td><td><span class="event-wekday">' + fri + '</span></td><td><span class="event-wekday">' + sat + '</span></td><td><span class="event-wekday">' + sund + '</span></td>');
} else if (monthDay === 'Tue') {
$('thead.head tr').append('<td><span class="event-wekday">' + tue + '</span></td><td><span class="event-wekday">' + wed + '</span></td><td><span class="event-wekday">' + thur + '</span></td><td><span class="event-wekday">' + fri + '</span></td><td><span class="event-wekday">' + sat + '</span></td><td><span class="event-wekday">' + sund + '</span></td><td><span class="event-wekday">' + mon + '</span></td>');
} else if (monthDay === 'Wed') {
$('thead.head tr').append('<td><span class="event-wekday">' + wed + '</span></td><td><span class="event-wekday">' + thur + '</span></td><td><span class="event-wekday">' + fri + '</span></td><td><span class="event-wekday">' + sat + '</span></td><td><span class="event-wekday">' + sund + '</span></td><td><span class="event-wekday">' + mon + '</span></td><td><span class="event-wekday">' + tue + '</span></td>');
} else if (monthDay === 'Thu') {
$('thead.head tr').append('<td><span class="event-wekday">' + thur + '</span></td><td><span class="event-wekday">' + fri + '</span></td><td><span class="event-wekday">' + sat + '</span></td><td><span class="event-wekday">' + sund + '</span></td><td><span class="event-wekday">' + mon + '</span></td><td><span class="event-wekday">' + tue + '</span></td><td><span class="event-wekday">' + wed + '</span></td>');
} else if (monthDay === 'Fri') {
$('thead.head tr').append('<td><span class="event-wekday">' + fri + '</span></td><td><span class="event-wekday">' + sat + '</span></td><td><span class="event-wekday">' + sund + '</span></td><td><span class="event-wekday">' + mon + '</span></td><td><span class="event-wekday">' + tue + '</span></td><td><span class="event-wekday">' + wed + '</span></td><td><span class="event-wekday">' + thur + '</span></td>');
} else if (monthDay === 'Sat') {
$('thead.head tr').append('<td><span class="event-wekday">' + sat + '</span></td><td><span class="event-wekday">' + sund + '</span></td><td><span class="event-wekday">' + mon + '</span></td><td><span class="event-wekday">' + tue + '</span></td><td><span class="event-wekday">' + wed + '</span></td><td><span class="event-wekday">' + thur + '</span></td><td><span class="event-wekday">' + fri + '</span></td>');
} else if (monthDay === 'Sun') {
$('thead.head tr').append('<td><span class="event-wekday">' + sund + '</span></td><td><span class="event-wekday">' + mon + '</span></td><td><span class="event-wekday">' + tue + '</span></td><td><span class="event-wekday">' + wed + '</span></td><td><span class="event-wekday">' + thur + '</span></td><td><span class="event-wekday">' + fri + '</span></td><td><span class="event-wekday">' + sat + '</span></td>');
}
};
$(getDaysInMonth(monthNumber - 1, yearNumber)).each(function(index) {
var index = index + 1;
if (index < 8) {
$('tbody.event-calendar2 tr.row1').append('<td date-month="' + monthNumber + '" date-day="' + index + '" date-year="' + yearNumber + '"><span class="event-day">' + index + '</span></td>');
} else if (index < 15) {
$('tbody.event-calendar2 tr.row2').append('<td date-month="' + monthNumber + '" date-day="' + index + '" date-year="' + yearNumber + '"><span class="event-day">' + index + '</span></td>');
} else if (index < 22) {
$('tbody.event-calendar2 tr.row3').append('<td date-month="' + monthNumber + '" date-day="' + index + '" date-year="' + yearNumber + '"><span class="event-day">' + index + '</span></td>');
} else if (index < 29) {
$('tbody.event-calendar2 tr.row4').append('<td date-month="' + monthNumber + '" date-day="' + index + '" date-year="' + yearNumber + '"><span class="event-day">' + index + '</span></td>');
} else if (index < 32) {
$('tbody.event-calendar2 tr.row5').append('<td date-month="' + monthNumber + '" date-day="' + index + '" date-year="' + yearNumber + '"><span class="event-day">' + index + '</span></td>');
}
i++;
});
var date = new Date();
var month = date.getMonth() + 1;
var thisyear = new Date().getFullYear();
setCurrentDay(month, thisyear);
setEvent();
displayEvent();
}
/**
* Get current day and set as '.current-day'
*/
function setCurrentDay(month, year) {
var viewMonth = $('.month').attr('data-month');
var eventYear = $('.event-days').attr('date-year');
if (parseInt(year) === yearNumber) {
if (parseInt(month) === parseInt(viewMonth)) {
$('tbody.event-calendar2 td[date-day="' + d.getDate() + '"] span').addClass('current-day');
}
}
};
/*$('tbody td span').on('click', function(e) {
alert('11');
if ($(this).hasClass('event')) {
$('tbody.event-calendar2 td span').removeClass('active');
$(this).addClass('active');
} else {
$('tbody.event-calendar2 td span').removeClass('active');
$(this).addClass('active');
// debugger;
// $('.event-calendar tr td[class="active"]').text();获取日
// $('.month').text();获取年月
};
});
*/
/**
* Add '.event' class to all days that has an event
*/
function setEvent() {
$('.day-event2').each(function(i) {
var eventMonth = $(this).attr('date-month');
var eventDay = $(this).attr('date-day');
var eventYear = $(this).attr('date-year');
var eventClass = $(this).attr('event-class');
if (eventClass === undefined) eventClass = 'event';
else eventClass = 'event ' + eventClass;
var date = new Date();
var month = date.getMonth() + 1;
var day=date.getDate();
if (parseInt(eventYear) === yearNumber) {
if(eventMonth==month&& eventDay==day)
{
$('tbody.event-calendar2 tr td[date-month="' + eventMonth + '"][date-day="' + eventDay + '"] span').addClass();
}
else
{
$('tbody.event-calendar2 tr td[date-month="' + eventMonth + '"][date-day="' + eventDay + '"] span').addClass(eventClass);
}
}
});
};
/**
* Get current day on click in calendar
* and find day-event to display
*/
function displayEvent() {
$('tbody.event-calendar2 td span').on('click', function(e) {
$('.day-event2').css('display','none');
var monthEvent = $(this).parent().attr('date-month');;
var dayEvent = $(this).text();
var yearEvent = $(this).parent().attr('date-year');
$('.day-event2[date-month="' + monthEvent + '"][date-year="' + yearEvent + '"][date-day="' + dayEvent + '"]').css('display','block');
$('tbody.event-calendar2 td span').removeClass('active');
$(this).addClass('active');
});
};
}
}
$(document).ready(function() {
calendar.init('ajax');
});
自适应备忘录 demo的更多相关文章
- 前端切图:手机端自适应布局demo
手机端自适应布局demo原型如下: 图片发自简书App 要求如下:适应各种机型源码如下: <!DOCTYPE html > <html> <head> <me ...
- 手机端自适应布局demo
原型如下: 要求如下:适应各种机型 源码如下: <!DOCTYPE html > <html> <head> <meta http-e ...
- textarea如何实现高度自适应？
今天需要些一个回复评论的页面,设计师给的初始界面就是一个只有一行的框.然后当时就想这个交互该怎么实现比较好,然后想起了新浪微博的做法:点击评论,默认显示一行,当输入的文字超过一行或者输入Enter时, ...
- textarea文本域轻松实现高度自适应
转载:http://www.xuanfengge.com/textarea-on-how-to-achieve-a-high-degree-of-adaptive.html 今天需要些一个回复评论的页 ...
- display:table-cell的应用
一.display:table-cell属性简述 display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签.目前IE8+以及其他现代浏览器都是支持此属性的,但是IE6 ...
- 几种display:table-cell的应用
一.display:table-cell属性简述 display:table- cell属性指让标签元素以表格单元格的形式呈现,类似于td标签.目前IE8+以及其他现代浏览器都是支持此属性的,但是IE ...
- 也来谈谈wap端瀑布流布局
Definition 瀑布流布局,在视觉上表现为参差不齐的多栏布局,随着页面滚动条向下滚动,新数据不断被加载进来. 瀑布流对于图片的展现,是高效而具有吸引力的,用户一眼扫过的快速阅读模式可以在短时间内 ...
- absolut绝对定位的非绝对定位用法
一.absolute绝对定位的流行用法 一般而言,我们会用absolute绝对定位做什么呢?就是绝对定位,顾名思意,定死在某个位置上.例如,lightbox效果就是使用的绝对定位,例如新浪微博的弹出提 ...
- 【分享】纯jQuery实现星巴克官网导航栏效果
前言 大冬天的没得玩,只能和代码玩. 所以就无聊研究了一下星巴克官网,在我看来应该是基本还原吧~ 请各位大神指教! 官网效果图 要写的就是最上方的会闪现的白色条条 效果分析 1.在滚动条往下拉到一定距 ...
随机推荐
- java,H5微信蓝牙设备开发教程申请设备和添加设备(2)
转载地址 http://www.vxzsk.com/76.html 申请设备功能 a. 登录公众平台,点击左边功能栏的"添加功能插件",选择"设备功能". b ...
- MyBatis-Exception：org.apache.ibatis.exceptions.PersistenceException
错误信息如下: HTTP Status 500 - org.mybatis.spring.MyBatisSystemException: nested exception is org.apache. ...
- JSON-fastjson
fastjson 是alibaba的一个Json处理工具包. 1.使用 JSON.toJSONString 和 JSON.parseObject fastjson只需要掌握两个静态方法:JSO ...
- js+css实现骰子的随机转动
网上找的例子,然后增添了新的东西,在这里展示一下...... 效果图预览: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio ...
- CSS三种写法的优先级
在HTML文件中引入CSS样式有三种方法: 外部样式:通过link标签引入CSS样式: 内页样式:写在HTML页面里面的style标签里面: 行内样式:写在对应标签的style属性里面. 我知道一般情 ...
- java中的list时间排序
最初设想使用:时间long型 private void testTimes() throws InterruptedException{ Calendar cal=Calendar.getInstan ...
- 分享个刚写好的 android 的 ListView 动态加载类，功能全而代码少。
(转载声明出处:http://www.cnblogs.com/linguanh/) 简介: 该ListView 实现动态加载数据,为了方便用户充分地自定义自己的数据源.点击事件,等核心操作, ...
- 负margin的原理以及应用
负margin在布局中往往起到意想不到的效果,比如在多栏等高布局中就是用该技巧. 虽说网络上关于负margin的实践有很多,但对margin负值为什么会出现这样的效果却没有多少讲解,本篇的目的就是阐述 ...
- ZOJ Problem Set - 1334 Basically Speaking ac代码及总结
这道题目不难,是一道简单的进制转换问题,但是发现了自己两个遗漏的知识点: 1.关于scanf (1)scanf函数在输入时是以回车或者空格作为一次输入的结束 (2)scanf函数在输入字符串的过程中是 ...
- struts2学习笔记--总结获取servletAPI的几种方式
struts2的Action放弃了request,response等ServletAPI,使得在业务层上更加独立,在有时候使用struts2进行Web开发的时候,不可避免的要在action中使用ser ...