你的位置:首页 > 网页设计

[网页设计]自适应备忘录 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"  >
  <header>
  <div ><h1>客户信息</h1><a href="#" ></a></div>
  <div >
      <h2 >9月2016</h2>
       <table>
            <thead >
              <tr>
                  <td><span >周日<span></td>
                  <td><span >周日<span></td>
                  <td><span >周日<span></td>
                  <td><span >周日<span></td>
                  <td><span >周日<span></td>
                  <td><span >周日<span></td>
                <td><span >周日<span></td>
              </tr>
            </thead>
            <tbody >
              <tr >
              <td><span ></span></td>
              <td><span ></span></td>
              <td><span ></span></td>
              <td><span ></span></td>
              <td><span >1</span></td>
              <td><span >2</span></td>
              <td><span >3</span></td>
              </tr>
              <tr >
              <td><span >4</span></td>
              <td><span >5</span></td>
              <td><span >6</span></td>
              <td><span >7</span></td>
              <td><span >8</span></td>
              <td><span >9</span></td>
              <td><span >10</span></td>
              </tr>
              <tr >
              <td><span >11</span></td>
              <td><span >12</span></td>
              <td><span >13</span></td>
              <td><span >14</span></td>
              <td><span >15</span></td>
              <td><span >16</span></td>
              <td><span >17</span></td>
              </tr>
              <tr >
              <td><span >18</span></td>
              <td><span >19</span></td>
              <td><span >20</span></td>
              <td><span >21</span></td>
              <td><span >22</span></td>
              <td><span >23</span></td>
              <td><span >24</span></td>
              </tr>
              <tr >
              <td><span >25</span></td>
              <td><span >26</span></td>
              <td><span >27</span></td>
              
              <td><span >30</span></td>
              <td><span ></span></td>
              </tr>
            </tbody>
          </table>
  </div>

 </header>
<article >
  <div >
    <div >
    <!--  <div date-day="19" date-month="9" date-year="2016" data-number="0" >
              <span ><b></b></span><div><a ></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 >16:52</p>                 
              </div>
      </div>
        <div date-day="19" date-month="9" date-year="2016" data-number="0" >
              <span ><b></b></span><div><a ></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 >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   date-day="'+ events[i].day +'" date-month="' + events[i].month +'" date-year="'+ events[i].year +'" data-number="'+ i +'"><span ><b ></b></span><div><a ></a><p>'+ events[i].description +'</p><p >16:52</p></div></div>');


                }
                else
                {
                $('.list').append('<div    date-day="'+ events[i].day +'" date-month="' + events[i].month +'" date-year="'+ events[i].year +'" data-number="'+ i +'"><span ><b ></b></span><div><a ></a><p>'+ events[i].description +'</p><p >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 >' + mon + '</span></td><td><span >' + tue + '</span></td><td><span >' + wed + '</span></td><td><span >' + thur + '</span></td><td><span >' + fri + '</span></td><td><span >' + sat + '</span></td><td><span >' + sund + '</span></td>');
                } else if (monthDay === 'Tue') {
                    $('thead.head tr').append('<td><span >' + tue + '</span></td><td><span >' + wed + '</span></td><td><span >' + thur + '</span></td><td><span >' + fri + '</span></td><td><span >' + sat + '</span></td><td><span >' + sund + '</span></td><td><span >' + mon + '</span></td>');
                } else if (monthDay === 'Wed') {
                    $('thead.head tr').append('<td><span >' + wed + '</span></td><td><span >' + thur + '</span></td><td><span >' + fri + '</span></td><td><span >' + sat + '</span></td><td><span >' + sund + '</span></td><td><span >' + mon + '</span></td><td><span >' + tue + '</span></td>');
                } else if (monthDay === 'Thu') {
                    $('thead.head tr').append('<td><span >' + thur + '</span></td><td><span >' + fri + '</span></td><td><span >' + sat + '</span></td><td><span >' + sund + '</span></td><td><span >' + mon + '</span></td><td><span >' + tue + '</span></td><td><span >' + wed + '</span></td>');
                } else if (monthDay === 'Fri') {
                    $('thead.head tr').append('<td><span >' + fri + '</span></td><td><span >' + sat + '</span></td><td><span >' + sund + '</span></td><td><span >' + mon + '</span></td><td><span >' + tue + '</span></td><td><span >' + wed + '</span></td><td><span >' + thur + '</span></td>');
                } else if (monthDay === 'Sat') {
                    $('thead.head tr').append('<td><span >' + sat + '</span></td><td><span >' + sund + '</span></td><td><span >' + mon + '</span></td><td><span >' + tue + '</span></td><td><span >' + wed + '</span></td><td><span >' + thur + '</span></td><td><span >' + fri + '</span></td>');
                } else if (monthDay === 'Sun') {
                    $('thead.head tr').append('<td><span >' + sund + '</span></td><td><span >' + mon + '</span></td><td><span >' + tue + '</span></td><td><span >' + wed + '</span></td><td><span >' + thur + '</span></td><td><span >' + fri + '</span></td><td><span >' + 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 >' + index + '</span></td>');
                } else if (index < 15) {
                    $('tbody.event-calendar2 tr.row2').append('<td date-month="' + monthNumber + '" date-day="' + index + '" date-year="' + yearNumber + '"><span >' + index + '</span></td>');
                } else if (index < 22) {
                    $('tbody.event-calendar2 tr.row3').append('<td date-month="' + monthNumber + '" date-day="' + index + '" date-year="' + yearNumber + '"><span >' + index + '</span></td>');
                } else if (index < 29) {
                    $('tbody.event-calendar2 tr.row4').append('<td date-month="' + monthNumber + '" date-day="' + index + '" date-year="' + yearNumber + '"><span >' + index + '</span></td>');
                } else if (index < 32) {
                    $('tbody.event-calendar2 tr.row5').append('<td date-month="' + monthNumber + '" date-day="' + index + '" date-year="' + yearNumber + '"><span >' + 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[]').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');
});