移动端旅游报价日历插件

最新推荐文章于 2023-10-28 18:57:52 发布

BetterGG

最新推荐文章于 2023-10-28 18:57:52 发布

阅读量1.9k

点赞数

分类专栏：插件文章标签：日历插件

本文链接：https://blog.csdn.net/BetterGG/article/details/80570183

版权

插件专栏收录该内容

8 篇文章 0 订阅

订阅专栏

首先声明，此插件为我同事所写，所以此篇博客为转载类型，但因没有选择转载类型时需要的链接，才选择原创类型，如有同行需要请标明出处：（作者：lus）
预览效果：

此插件当 arrayJSON 为空时，加载的月份为当前月，月份个数由 index 控制。

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" href="common.css">
    <style>
    	/* 没有 common.css 文件，添加以下注释 css*/
    	/*
	html {font-size:62.5%;}
	body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td {margin:0; padding:0;}
	.fs10 {font-size:1.0rem;}
	*/

        .ZYCalender .dateZone{
            width: 100%;
            margin: auto;
            background: #f5f5f5;
            color:#666;
            position: -webkit-sticky;
            position: sticky;
            top: 0;
            z-index: 999;
        }
        .ZYCalender .tbody{
            background: #f3f3f3;
            padding-bottom: 4.5rem;
        }
        .ZYCalender .tbody td{
            background: #fff;
            text-align: center;
            height: 4.4rem;
            font-size: 1.4rem;
            color: #666;
            width: 14.2%;
            border: 2px solid #fff;
        }
        .ZYCalender .tbody td .con{
            height: 4.4rem;
            font-size: 1.4rem;
        }
        .ZYCalender .tbody td p{
            line-height: 14px;
        }
        .ZYCalender .tbody .sel{
            background: #cab970;
            border-radius: 5px;
        }
        .ZYCalender .tbody tr{
            vertical-align: top;
        }
        .ZYCalender .dateZone td{
            background: #f5f5f5;
            width: 14.2%;
            font-size: 1.4rem;
            text-align: center;
            height: 45px;
        }
        .ZYCalender .dateZone .colo{
            color: #ffd101;
        }
        .ZYCalender .dateTable{
            width: 100%;
            margin: auto;
        }
        .ZYCalender .tbody .itemMonth{
            margin-bottom: 10px;
            background: #fff;
            padding: 10px 5px;
        }
        .ZYCalender .tbody .month{
            width: 100%;
            text-align: center;
            padding: 8px 0;
            font-size: 1.6rem;
        }
        .ZYCalender .hover{
            font-size: 1.2rem;
            display: inline-block;
            width: 60%;
            background: #ffd101;
            color: #ba0003;
            text-align: center;
            border-radius: 5px;
        }
        .confirm{
            width: 100%;
            height: 4.0rem;
            background: #eb8300;
            position: fixed;
            bottom: 0;
            z-index: 999;
            text-align: center;
            font-size: 1.8rem;
            color: #fff;
            line-height: 4.0rem;
        }
    </style>
</head>
<body>
	<div class="ZYCalender"></div>
	<div class="confirm">提交</div>
</body>
<script src="calender.js"></script>
<script>
    var arrayJSON = [
        {
            id: '0',
            date: '2017-12-29',
            price: '￥ 123',
            number: '>9人'
        },
        {
            id: '1',
            date: '2017-12-30',
            price: '￥ 123',
            number: '>9人'
        },
        {
            id: '2',
            date: '2017-12-31',
            price: '￥ 123',
            number: '>9人'
        },
        {
            id: '3',
            date: '2018-02-01',
            price: '￥ 123',
            number: '>9人'
        },
        {
            id: '4',
            date: '2018-02-02',
            price: '￥ 123',
            number: '>9人'
        },
        {
            id: '5',
            date: '2018-02-03',
            price: '￥ 123',
            number: '>9人'
        },
        {
            id: '6',
            date: '2018-02-04',
            price: '￥ 123',
            number: '>9人'
        },
        {
            id: '7',
            date: '2018-02-05',
            price: '￥ 123',
            number: '>9人'
        },
        {
            id: '8',
            date: '2018-02-06',
            price: '￥ 123',
            number: '>9人'
        },
        {
            id: '9',
            date: '2018-02-07',
            price: '￥ 123',
            number: '>9人'
        },
        {
            id: '10',
            date: '2018-02-08',
            price: '￥ 123',
            number: '>9人'
        },
        {
            id: '11',
            date: '2018-02-09',
            price: '￥ 123',
            number: '>9人'
        }
    ];
    new ZYCalender({
        element: document.querySelector('.ZYCalender'),
        color: '#fff',
        arrayJSON: arrayJSON,
        confirmBtn: document.querySelector('.confirm'),
        callback: function (e) {
            console.log(e)
        }
    })
</script>
</html>

JS:

/*
 *   by lus
 *   luszy.com
 * */
(function (window, undefined) {
    "use strict";
    var ZYCalender = function(params){
        this.extend(this.params, params);
        this.init();
    };
    ZYCalender.prototype = {
        params: {
            element: false,
            index : 4,                   // 展示的月份个数
            bgColor : "#f5f5f5",         // 开始结束中间颜色
            color: '#ffd101',            // 选中的文字颜色
            arrayJSON: '',
            confirmBtn: '',
            callback: function () { }
        },
        init: function () {
            var self = this,
                ii,
                tHTML,
                currentYear,
                currentMonth,
                setCurrentDate,
                firstDay,
                month,
                DaysInMonth = [],
                Ntd,
                Ntr,
                createTd,
                anyTd,
                p;
            self.element = this.params.element;
            self.index = this.params.index;
            self.confirm = this.params.confirmBtn;
            self.arrayJSON = this.params.arrayJSON;
            self.dayDate = [];
            self.dayDateWeek = [];

            if(!this.params.element || this.params.element.nodeType !== 1) return;
            var html = "<table class='dateZone border-b' data-fixed=''>" +
                "<tr>" +
                "<td class='colo'>日</td>" +
                "<td>一</td>" +
                "<td>二</td>" +
                "<td>三</td>" +
                "<td>四</td>" +
                "<td>五</td>" +
                "<td class='colo'>六</td>" +
                "</tr>" +
                "</table>" +
                "<div class='tbody'></div>";
            self.element.innerHTML = html;
            if(self.arrayJSON){
                var arr = [], index;
                self.arrayJSON.forEach(function (element, index) {
                    arr.push(element.date.substring(0, element.date.length - 3));
                });
                index = self.removeRepeatArray(arr);
                for(var i = 0; i < index.length; i++){
                    ii = i;
                    tHTML = "<div class='itemMonth border-b'>" +
                        "<p class='month'></p>" +
                        "<table class='table' style='width: 100%;position: relative'>" +
                        "<tbody class='dateTable'></tbody>" +
                        "</table>" +
                        "</div>";
                    self.element.querySelector('.tbody').insertAdjacentHTML('beforeEnd', tHTML);
                    currentYear = index[ii].substring(0, 4);
                    currentMonth = index[ii].substring(5, 7);
                    setCurrentDate = new Date(currentYear, currentMonth - 1, 1);
                    firstDay = setCurrentDate.getDay();
                    self.element.querySelectorAll('.month')[ii].innerHTML = currentYear + '年' + currentMonth + '月';
                    if (self.isLeapYear(currentYear)) {
                        DaysInMonth = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
                    } else {
                        DaysInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
                    }
                    Ntd = firstDay + DaysInMonth[currentMonth - 1];
                    Ntr = Math.ceil(Ntd / 7);
                    for (var j = 0; j < Ntr; j++) {
                        self.element.querySelectorAll('.dateTable')[ii].insertAdjacentHTML('beforeEnd', '<tr></tr>');
                    }
                    createTd = self.element.querySelectorAll('.dateTable')[ii].querySelectorAll('tr');
                    createTd.forEach(function(element, index) {
                        for (var m = 0; m < 7; m++) {
                            element.insertAdjacentHTML('beforeEnd', '<td></td>')
                        }
                    });
                    anyTd = self.element.querySelectorAll('.dateTable')[ii].querySelectorAll('td');
                    for (var n = 0; n < DaysInMonth[currentMonth - 1]; n++) {
                        p = firstDay++;
                        anyTd[p].innerHTML = '<div class="con">'+ (n + 1) +'</div>';
                        self.arrayJSON.forEach(function (element) {
                            if(
                                currentMonth === element.date.substring(5, 7) &&
                                currentYear === element.date.substring(0, 4) &&
                                n + 1 === parseInt(element.date.substring(8, 10))
                            ){
                                anyTd[p].querySelector('.con').insertAdjacentHTML('beforeEnd', '<p class="fs10" data-id="'+ element.id +'" data-price="'+ element.price +'">' + '<span>' + element.price + '</span>'+ '<br>' + '<span>' + element.number+ '</span>' + '</p>');
                                anyTd[p].querySelector('.con').classList.add('border')
                            }
                        });
                    }
                }
            } else {
                for(var i = 0; i < self.index; i++){
                    ii = i;
                    tHTML = "<div class='itemMonth  border-b'>" +
                        "<p class='month'></p>" +
                        "<table class='table' style='width: 100%;position: relative'>" +
                        "<tbody class='dateTable'></tbody>" +
                        "</table>" +
                        "</div>";
                    self.element.querySelector('.tbody').insertAdjacentHTML('beforeEnd', tHTML);
                    var currentDate = new Date();
                    currentDate.setMonth(currentDate.getMonth() + ii);
                    currentYear = currentDate.getFullYear();
                    currentMonth = currentDate.getMonth();
                    setCurrentDate = new Date(currentYear, currentMonth, 1);
                    firstDay = setCurrentDate.getDay();
                    month = currentMonth + 1;
                    if (month < 10) {
                        self.element.querySelectorAll('.month')[ii].innerHTML = currentYear + '年' + '0' + month + '月';
                    } else {
                        self.element.querySelectorAll('.month')[ii].innerHTML = currentYear + '年' + month + '月';
                    }
                    if (self.isLeapYear(currentYear)) {
                        DaysInMonth = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
                    } else {
                        DaysInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
                    }

                    Ntd = firstDay + DaysInMonth[currentMonth];
                    Ntr = Math.ceil(Ntd / 7);
                    for (var j = 0; j < Ntr; j++) {
                        self.element.querySelectorAll('.dateTable')[ii].insertAdjacentHTML('beforeEnd', '<tr></tr>');
                    }
                    createTd = self.element.querySelectorAll('.dateTable')[ii].querySelectorAll('tr');
                    createTd.forEach(function(element, index) {
                        for (var m = 0; m < 7; m++) {
                            element.insertAdjacentHTML('beforeEnd', '<td></td>')
                        }
                    });
                    anyTd = self.element.querySelectorAll('.dateTable')[ii].querySelectorAll('td');
                    for (var n = 0; n < DaysInMonth[currentMonth]; n++) {
                        anyTd[firstDay++].innerText = (n + 1);
                    }
                }
            }
            self.initSelect();
            self.addEvent(self.confirm, 'click', function (event) {
                event.preventDefault();
                self.date = '';
                self.price = '';
                self.id = '';
                self.day = [];
                var sels = self.element.querySelectorAll('.sel');
                for(var u = 0; u < sels.length; u++){
                    var id = sels[u].querySelector('p') ? sels[u].querySelector('p').getAttribute('data-id') : '';
                    var day = sels[u].innerText.substring(0, 2) < 10 ? '0' + sels[u].innerText.substring(0, 2) : sels[u].innerText.substring(0, 2);
                    var startDayArrays = sels[u].offsetParent.previousSibling.innerText.split('');
                    var startDayArrayYear = [],
                        startDayArrayMonth = [],
                        startDayYear = "",
                        startDayMonth = "",
                        date = '',
                        price = '';
                    for (var g = 0; g < 4; g++) {
                        startDayArrayYear.push(startDayArrays[g])
                    }
                    startDayYear = startDayArrayYear.join('');
                    for (var f = 5; f < 7; f++) {
                        startDayArrayMonth.push(startDayArrays[f])
                    }
                    startDayMonth = startDayArrayMonth.join('');
                    date = startDayYear + '-' + startDayMonth + '-' + day;
                    price = sels[u].querySelector('p') ? sels[u].querySelector('p').getAttribute('data-price') : '';

                    if(!self.arrayJSON){
                        self.day.push(date);
                    } else {
                        self.price = price;
                        self.date = date;
                        self.id = id;
                    }
                }
                if(!self.arrayJSON) {
                    if (!self.day)  return;
                } else {
                    if (!self.date)  return;
                }
                self.callback();
            });
        },
        initSelect: function () {
            var self = this;
            var strDays = new Date().getDate();
            var arry = [];
            var arry1 = [];
            self.element.querySelector('.tbody').querySelectorAll('td').forEach(function(element, index) {
                if (element.innerText !== '') {
                    arry.push(element);
                }
            });
            if(!self.arrayJSON){
                for (var i = 0; i < strDays - 1; i++) {
                    arry[i].style.color = '#ccc';
                }
                for (var i = strDays - 1; i < arry.length; i++) {
                    arry1.push(arry[i])
                }
                self.selectDate(arry1)
            } else {
                self.selectDate(arry)
            }
        },
        isLeapYear: function(year) {
            return (year % 4 === 0) && (year % 100 !== 0 || year % 400 === 0);
        },
        selectDate: function(arry1) {
            var self = this;
            self.bgColor = self.params.bgColor;
            self.color = self.params.color;
            self.element = self.params.element;

            for(var i = 0; i < arry1.length; i++){
                (function(j){
                    arry1[j].onclick = function () {
                        if(self.arrayJSON){
                            arry1.forEach(function (element, index) {
                                element.classList.remove('sel');
                                element.style.color = '';
                            });
                            arry1[j].classList.add('sel');
                            arry1[j].style.color = self.color;

                        } else {
                            if(arry1[j].classList.contains('sel')){
                                arry1[j].style.background = '';
                                arry1[j].style.color = '';
                                arry1[j].classList.remove('sel');
                            } else {
                                arry1[j].setAttribute('data-type', 'start');
                                arry1[j].classList.add('sel');
                            }
                            self.checkColor(self.color, self.bgColor);
                        }
                    }
                })(i)
            }
        },
        callback: function() {
            var self = this;
            if (self.params.callback && typeof (self.params.callback) === "function") {
                self.params.callback({
                    date: self.date || '',
                    price: self.price || '',
                    id: self.id  || '',
                    day: self.day || ''
                });
            }
        },
        checkColor: function(color, bgColor) {
            var self = this;
            var sel = self.element.querySelectorAll('.sel');
            for (var i = 0; i < sel.length; i++) {
                sel[i].style.background = bgColor;
                sel[i].style.color = color;
            }
        },
        removeRepeatArray: function (arr) {
            return arr.filter(function (item, index, self) {
                return self.indexOf(item) === index;
            });
        },
        addEvent: function (elm, type, fn) {
            if (window.attachEvent) {
                elm.attachEvent("on" + type, fn)
            } else if (window.addEventListener) {
                elm.addEventListener(type, fn, false);
            } else {
                elm["on" + type] = fn;
            }
        },
        extend: function (a, b) {
            for (var key in b) {
                if (b.hasOwnProperty(key)) {
                    a[key] = b[key];
                }
            }
            return a;
        }
    };
    window.ZYCalender = ZYCalender;
})(window);

CSS

@charset "UTF-8";
/*20151010*/

/*cssreset*/
html,body {height:100%; line-height:1.5; color:#333;background:#fff; -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-text-size-adjust:none; -moz-user-select:none; -webkit-font-smoothing:antialiased;}
html {font-size:62.5%;}
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td {margin:0; padding:0;}
body,button,input,select,textarea,li,dt,dd,div,td,p,span {font-size:1.2rem; font-family:Microsoft Yahei,arial,verdana;}
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary {display:block;}
audio,canvas,progress,video {display:inline-block; vertical-align:baseline;}
audio:not([controls]) {display:none; height:0;}
[hidden],template {display:none;}
svg:not(:root) {overflow:hidden;}
h1,h2,h3,h4,h5,h6 {font-size:1.4rem; font-weight:normal; font-family:Microsoft Yahei,arial,verdana;}
address,cite,dfn,em,var {font-style:normal;}
code,kbd,pre,samp {font-family:courier new,courier,monospace;}
ul,ol {list-style:none outside none;}
span {font-size:100%;}
a {color:#333; text-decoration:none;}
a:hover {text-decoration:none;}
a:active {color:#21adc2; outline:0;}
a:focus {outline:0;}
legend {color:#666;}
fieldset,img {border:0 none;}
img {vertical-align:bottom;}
button,input,select,textarea {margin:0; padding:0; outline:none; line-height:1.8rem;-webkit-appearance:none;}
button {cursor:pointer;}
input[type="radio"],input[type="checkbox"] {position:relative; top:2px;}
table {border-collapse:collapse; border-spacing:0;}
* {-moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;}

/*scroll-bar*/
.myScrollbarV {position:absolute; top:2px; right:1px; bottom:2px; z-index:100; width:3px;}
.myScrollbarV>div {position:absolute; z-index:100; width:100%; background:#ccc;}

/*color*/
.c777 {color:#777;}
.c666 {color:#666;}
.c333 {color:#333;}
.c555 {color:#555;}
.c999 {color:#999;}
.cccc {color:#ccc;}
.cfff {color:#fff;}
.cff8d00{color:#ff8d00}
.c8d8d8d{color:#8d8d8d}
.cea8300{color:#ea8300}
.cba0003{color:#ba0003}
.c75a207{color:#75a207}
.cef4900{color:#ef4900}
.cf39800{color:#f39800}
.cfc5105{color:#fc5105}
.cf46f72{color:#f46f72}
.cff4040{color:#ff4040}

.cca8f8f{color:#ca8f8f}
.c179cff{color:#179cff}
.c38bafe{color:#38bafe}

/*link-color*/
a.c666 {color:#666;}
a.c666:hover {color:#06c;}

/*font*/
.fs08 {font-size:0.8rem;}
.fs10 {font-size:1.0rem;}
.fs11 {font-size:1.1rem;}
.fs12 {font-size:1.2rem;}
.fs13 {font-size:1.3rem;}
.fs14 {font-size:1.4rem;}
.fs15 {font-size:1.5rem;}
.fs16 {font-size:1.6rem;}
.fs17 {font-size:1.7rem;}
.fs18 {font-size:1.8rem;}
.fs19 {font-size:1.9rem;}
.fs20 {font-size:2.0rem;}
.fs21 {font-size:2.1rem;}
.fs22 {font-size:2.2rem;}
.fs23 {font-size:2.3rem;}
.fs24 {font-size:2.4rem;}
.fs26 {font-size:2.6rem;}
.fs28 {font-size:2.8rem;}
.fs30 {font-size:3.0rem;}
.fs32 {font-size:3.2rem;}
.fs34 {font-size:3.4rem;}
.fs30 {font-size: 3.0rem}
.fs35 {font-size: 3.5rem}
.fs36 {font-size: 3.6rem}
.fs38 {font-size: 3.8rem}
.fs40 {font-size: 4.0rem}
.fs45 {font-size: 4.5rem}
.fs50 {font-size: 5.0rem}
.ffy {font-family:tahoma,arial,sans-serif;}
.fb {font-weight: bold;}
.letterSpace {letter-spacing: 1px;}

/*control*/
.input {height:18px; line-height:18px; padding:3px 5px; border:1px solid #ddd;}
.select {padding:2px; border:1px solid #ddd;}
.textarea {padding:8px; color:#666; width: 100%; height: 70px;}

/*ellipsis*/
.ellipsis {overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; }
.ellipsis2 {overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.ellipsis3 {overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; }

/*overflow*/
.ofvisible {overflow:visible;}

/*cover-background*/
.coverbg {position:absolute; top:0; left:0; z-index:9998; background:#000; filter:alpha(opacity=50); opacity:0.5;}

/*float*/
.fl {float:left;}
.fr {float:right;}

/*margin-padding*/
.mt5 {margin-top:5px;}
.mr5 {margin-right:5px;}
.ml5 {margin-left:5px;}
.mt8 {margin-top:8px;}
.mt10 {margin-top:10px;}
.mt15 {margin-top:15px;}
.mt20 {margin-top:20px;}
.mt23 {margin-top:23px;}
.mt25 {margin-top:25px;}
.mt30 {margin-top:30px;}
.mt35 {margin-top:35px;}
.mt40 {margin-top:40px;}
.mr6 {margin-right:6px;}
.mr10 {margin-right:10px;}
.mr15 {margin-right:15px;}
.mb10 {margin-bottom:10px;}
.mb20 {margin-bottom:20px;}
.ml5 {margin-left:5px;}
.ml10 {margin-left:10px;}
.ml15 {margin-left:15px;}
.ml20 {margin-left:20px;}
.mg {margin: 0 auto; }
.mgl {margin: 0 10px; }
.pd {padding:10px;}
.pl5 {padding:5px;}
.pl {padding:0 10px 0 0;}
.pr {padding:10px 0 10px 10px;}
.pr2 {padding:10px 20px 10px 10px;}
.pdl {padding:0 10px;}
.pd15 {padding:0 15px;}
.pdl2 {padding:0 20px 0 10px;}
.pdr {padding:10px 0;}
.pdr8 {padding:8px 0;}
.pt2 {padding-top:2px;}
.pt5 {padding-top:5px;}
.pt6 {padding-top:6px;}
.pt8 {padding-top:8px;}
.pt9 {padding-top:9px;}
.pt10 {padding-top:10px;}
.pr5 {padding-right:5px;}
.pr10 {padding-right:10px;}
.pr20 {padding-right:20px;}
.pb5 {padding-bottom:5px;}
.pb10 {padding-bottom:10px;}
.pl5 {padding-left:5px;}
.pl10 {padding-left:10px;}

/*background-color*/
.bgd4d4d4 {background-color: #d4d4d4}
.bgffffff {background-color: #FFFFFF}
.bgf1f1f1 {background-color: #f1f1f1}
.bgf5f5f5 {background-color: #f5f5f5}
.bgf8f8f8 {background-color: #f8f8f8}
.bgf3f5f6 {background-color: #f3f5f6}
.bg5d5d5d {background-color: #5d5d5d}
.bgfff1d6 {background-color: #fff1d6}
.bgffd101 {background-color: #ffd101}
.bgeb8300 {background-color: #eb8300}
.bg000000 {background-color: #000000}
/*text-alignment*/
.txtl {text-align:left;}
.txtc {text-align:center;}
.txtr {text-align:right;}
.txtj {text-align:justify; text-justify:distribute-all-lines; text-align-last:justify; text-indent:25px;}
/*top-bottom*/
.t44 {top:44px;}
.b50 {bottom:50px;}

/*clearfix*/
.clearfix:after {clear:both; content:"."; display:block; height:0; visibility:hidden;}
.clearfix {zoom:1;}

/*layout*/
.name_layout {position:absolute; top:0; right:0; bottom:0; left:0;}
.name_scroller {position:relative; width:100%;}

/*button*/
.name_btn {}

/*header*/
.name_header {}

/*footer*/
.name_footer {}

/* 弹性盒子属性 --横向*/
.rowBox{ display:-webkit-box; display:-webkit-flex; -webkit-flex:row;}
.rowCon{ -webkit-box-flex: 1;-webkit-flex: 1;flex: 1; }
/* 弹性盒子属性 --竖向*/
.verBox{ display:-webkit-flex; -webkit-box-orient: vertical;-webkit-flex-flow: column;flex-flow: column;}

.hidden{display : none;}

.loading_more{
	display: block;
	height: 2.0em;
	width: 100%;
	text-align: center;
}
.loading_more:before {
	display: inline-block; vertical-align: text-bottom;
	content: ' ';
	height: 16px;
	width: 16px;
	margin-right: 6px;
	background: url(../image/loading_more.gif) no-repeat center;
	-webkit-background-size: contain;
	background-size: contain;
}
.loading_more:after {
	content: '加载更多';
}

/*边框样式*/
.border-t,.border-b,.border-l,.border-r,.border-tb,.border,.border-radius {
    position: relative;
}
.border-l:before,.border-r:after {
	width: 1px;
    height: 100%;
    background-color: #dddddd;
    display: block;
    content: '';
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: auto;
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
    pointer-events: none;
}
.border-t:before,.border-b:after {
	width: 100%;
    height: 1px;
    background-color: #dddddd;
    display: block;
    content: '';
    position: absolute;
    z-index: 2;
    left: 0;
    right: auto;
    -webkit-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
    pointer-events: none;
}
.border-l:before {
    right: auto;
    left: 0;
}
.border-r:after {
    right: 0;
    left: auto;
}
.border-t:before {
    bottom: auto;
    top: 0;
}
.border-b:after {
    bottom: 0;
    top: auto;
}
.border:after {
    display: block;
    content: '';
    position: absolute;
    top: 0;
    bottom: auto;
    left: 0;
    right: auto;
    -webkit-transform-origin: 0 0;
    -webkit-transform: scale(1);
    pointer-events: none;
    border: 1px solid #dddddd;
    border-radius: 5px;
}
.border-radius:after {
    display: block;
    content: '';
    position: absolute;
    top: 0;
    bottom: auto;
    left: 0;
    right: auto;
    -webkit-transform-origin: 0 0;
    -webkit-transform: scale(1);
    pointer-events: none;
    border: 1px solid #dddddd;
    border-radius: 50%;
}
@media screen and (-webkit-min-device-pixel-ratio:1.5) {
    .border:after,
    .border-radius:after {
        right: -100%;
        bottom: -100%;
        -webkit-transform: scale(0.5);
    }
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
    .border-r:after,
    .border-l:before  {
    	-webkit-transform: scaleX(1);
                transform: scaleX(1);
    }
    .border-t:before,
    .border-b:after  {
    	-webkit-transform: scaleY(1);
                transform: scaleY(1);
    }
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .border-r:after,
    .border-l:before {
    	-webkit-transform: scaleX(0.5);
                transform: scaleX(0.5);
    }
    .border-t:before,
    .border-b:after  {
    	-webkit-transform: scaleY(0.5);
                transform: scaleY(0.5);
    }
}
@media only screen and (-webkit-min-device-pixel-ratio: 3) {
    .border-r:after,
    .border-l:before {
    	-webkit-transform: scaleX(0.333);
                transform: scaleX(0.333);
    }
    .border-t:before,
    .border-b:after  {
    	-webkit-transform: scaleY(0.333);
                transform: scaleY(0.333);
    }
}
/*单选、多选、开关*/
.radio,
.checkbox {
    width: 1.8rem;
    height: 1.8rem;
    background-color: #f1f1f1;
    border: solid 1px #f1f1f1;
    -webkit-border-radius: 0.6rem;
    border-radius: 0.6rem;
    font-size: 0.8rem;
    margin: 0;
    padding: 0;
    position: relative;
    display: inline-block;
    vertical-align: top;
    cursor: default;
    -webkit-appearance: none;
    -webkit-user-select: none;
            user-select: none;
    -webkit-transition: background-color ease 0.2s;
            transition: background-color ease 0.2s;
}
.checkbox {
    border-radius: 0.1rem;
}
.radio:checked,
.radio.checked,
.checkbox:checked,
.checkbox.checked {
    background-color: #ffd101;
    border: solid 1px #ffd101;
    text-align: center;
    background-clip: padding-box;
}
.radio:checked:before,
.radio.checked:before,
.checkbox:checked:before,
.checkbox.checked:before,
.radio:checked:after,
.radio.checked:after,
.checkbox:checked:after,
.checkbox.checked:after {
    content: '';
    width: 0.6rem;
    height: 0.4rem;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -0.33rem;
    margin-top: -0.33rem;
    background: transparent;
    border: 1px solid #ffffff;
    border-top: none;
    border-right: none;
    z-index: 2;
    -webkit-border-radius: 0;
            border-radius: 0;
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
}
.radio:disabled,
.radio.disabled,
.checkbox:disabled,
.checkbox.disabled {
    background-color: #dddddd;
    border: solid 1px #dddddd;
}
.radio:disabled:before,
.radio.disabled:before,
.radio:disabled:after,
.radio.disabled:after,
.checkbox:disabled:before,
.checkbox.disabled:before,
.checkbox:disabled:after,
.checkbox.disabled:after {
    content: '';
    width: 0.5rem;
    height: 0.3rem;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -0.25rem;
    margin-top: -0.25rem;
    background: transparent;
    border: 1px solid #ffffff;
    border-top: none;
    border-right: none;
    z-index: 2;
    -webkit-border-radius: 0;
            border-radius: 0;
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
}
.switch {
    width: 4.0rem;
    height: 2.4rem;
    position: relative;
    vertical-align: top;
    border: 1px solid #f3f3f3;
    background-color: #f3f3f3;
    border-radius: 2.3rem;
    background-clip: content-box;
    display: inline-block;
    outline: none;
    -webkit-appearance: none;
            appearance: none;
    -webkit-user-select: none;
            user-select: none;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    -webkit-background-clip: padding-box;
            background-clip: padding-box;
    -webkit-transition: all 0.2s linear;
            transition: all 0.2s linear;
}
.switch:before {
    width: 2.4rem;
    height: 2.2rem;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    background-color: #fff;
    content: '';
    -webkit-transition: left 0.2s;
            transition: left 0.2s;
}
.switch:checked {
    border-color: #ffd101;
    background-color: #ffd101;
}
.switch:checked:before {
    left: 1.4rem;
}

/* 添加遮罩 */
.mask {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0;
    z-index: 8;
    visibility: hidden;
    -webkit-transition-duration: 300ms;
          	transition-duration: 300ms;
}
.mask.mask-in {
	visibility: visible;
  	opacity: 1;
}
.mask.mask-out {
	opacity: 0;
}
/*栅格类*/
.row {
	overflow: hidden;
	margin: 0;
}
.row-padded {
	margin-left: -0.125rem;
	margin-right: -0.125rem;
}
.row-padded [class*=aui-col-xs-] {
	padding: 0.125rem;
}
.col-xs-1,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9,.col-xs-10,.col-xs-11,.col-xs-5 {
	position: relative;
	float: left;
}
.col-xs-12 { width: 100%; }
.col-xs-11 { width: 91.66666667%; }
.col-xs-10 { width: 83.33333333%; }
.col-xs-9 { width: 75%; }
.col-xs-8 { width: 66.66666667%; }
.col-xs-7 { width: 58.33333333%; }
.col-xs-6 { width: 50%; }
.col-xs-5 { width: 41.66666667%; }
.col-xs-4 { width: 33.33333333%; }
.col-xs-3 { width: 25%; }
.col-xs-2 { width: 16.66666667%; }
.col-xs-1 { width: 8.33333333%; }
.col-5 { width: 20%; }

BetterGG

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
移动端旅游报价日历插件

首先声明，此插件为我同事所写，所以此篇博客为转载类型，如有同行需要请标明出处：（作者：lus）预览效果：此插件当 arrayJSON 为空时，加载的月份为当前月，月份个数由 index 控制。HTML：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;
复制链接

扫一扫