利用jmSlip寫一個移動端頂部日曆選擇組件

-Advertisement-

可滾動選日期，並限制哪些日期可選和不可選。主要用來根據後臺返回生成一個日期選擇器。具體實現可關註jmslip: https://github.com/jiamao/jmSlip 示例：http://slip.jm47.com/demo/calendar/index.html ...

可滾動選日期，並限制哪些日期可選和不可選。

主要用來根據後臺返回生成一個日期選擇器。

具體實現可關註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:

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

Html5 dataset--自定義屬性

dataset--自定義屬性 HTMLElement.dataset data-*屬性集元素上保存數據 liujl div.dataset. 屬性名值 id “123456” accountName “liujl” name “劉江龍” email “[email protected]” mobi... ...
angular學習的一些小筆記(中)之雙向數據綁定

...
使用highlight.js高亮你的代碼

在逛別人的博客的時候，看見別人的代碼的例子使用了高亮的語法，無論是java，js還是php等等語言，都會自動的對關鍵字進行高亮。於是在前幾天自己寫了一個博客，遇到code時，自然就想到了別人網站如何漂亮，巴拉巴拉。開始了正式的搗鼓。在搗鼓之前去別的網站看了看。這裡貼上簡書的效果：其中的關鍵字 ...
原型鏈-面向面試

總有人問我面試時候原型鏈怎麼寫，作為一位職場老司機，面試界的白神。身經百戰，擼出以下的代碼怎麼樣，看懂的是不是覺得以上的代碼清新脫俗，煥然一新沒看懂的，在這裡解釋下首先我定義了interviewer（面試官）和handsome （英俊）2個函數。然後給他們2個的原型加了點東西，當然主要是h ...
上傳照片預覽 js 方法

圖片預覽的 javascript 本地操作早期瀏覽器，不能將本地圖片作為頁面元素處理，要實現圖片預覽需要將圖片先上傳到伺服器，再從伺服器取得進行預覽現代的瀏覽器功能越來越全面，因此可以實現對一些數據的本地處理 Chrome MsEdge(ie11) Firefox 上圖的html ...
ajax使用中發現的問題與深入擴展(for迴圈中嵌套ajax)

在學習ajax的過程中，我曾經遇到過這樣的一個問題，為了得到一個詳情列表，我要先向伺服器去請求得到索引表，簡單描述就是ajax中的success中的for迴圈中再次嵌套了ajax，結果第二層success中的ajax的success並不能取得上層ajax的success中的值。我先使用ajax發送 ...
JS中substring()方法（用於提取字元串中介於兩個指定下標之間的字元）

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script type="text/javascript"> //substring()方法用於提取字元串中介於兩個指定下標之間的 ...
敢於MVC，MVVM,MVP的區別

MVC, MVP和MVVM都是用來解決界面呈現和邏輯代碼分離而出現的模式。以前只是對它們有部分的瞭解，沒有深入的研究過，對於一些裡面的概念和區別也是一知半解。現在一邊查資料，並結合自己的理解，來談一下對於這三種模式思想的理解，以及它們的區別。歡迎各位高手拍磚。閱讀目錄: 一. MVC, MVP, ...