Heim > Artikel > Web-Frontend > Ausführliche Erläuterung des Beispielcodes für die benutzerdefinierte HTML5-Kalendersteuerung
Ausführliche Erläuterung des Beispielcodes für die benutzerdefinierte HTML5-Kalendersteuerung
- 黄舟Original
- 2017-03-31 13:23:403070Durchsuche
HTML5Beispiel für einen benutzerdefinierten KalenderSteuerelement Ausführlich Code-Erklärung
ys_datetime_selector.css
.ys-datetime-selector{
position:fixed;
left:0;
right:0;
top:0;
bottom:0;
background-color:rgba(0,0,0,0.3);
z-index: 999;
}
.ys-datetime-selector.display-hide{
transform: translate3d(100%,0,0);
-webkit-transform: translate3d(100%,0,0);
visibility: hidden;
}
.ys-datetime-selector .ys-datetime-selector-content{
position:absolute;
left:0;
right:0;
bottom:0;
background-color:#fff;
}
/* ======================================== ys-datetime-operation-bar ======================================== */
.ys-datetime-selector .ys-datetime-selector-content .ys-datetime-operation-bar{
height:45px;
line-height: 44px;
border-bottom:1px solid #e0e0e0;
text-align: center;
}
.ys-datetime-selector .ys-datetime-selector-content .ys-datetime-operation-bar span{
color:#333;
font-size:16px;
}
.ys-datetime-selector .ys-datetime-selector-content .ys-datetime-operation-bar a{
position:absolute;
top:0;
bottom:0;
padding:0 15px;
font-size:16px;
color:#4e9dcf;
}
.ys-datetime-selector .ys-datetime-selector-content .ys-datetime-operation-bar a.ys-datetime-cancel-btn{left:0;}
.ys-datetime-selector .ys-datetime-selector-content .ys-datetime-operation-bar a.ys-datetime-ok-btn{right:0;}
/* ======================================== ys-datetime-blocks ======================================== */
.ys-datetime-selector .ys-datetime-selector-content .ys-datetime-blocks{
position:relative;
height:170px;
-webkit-mask-box-image: -webkit-linear-gradient(top, rgba(0,0,0,0.2), rgba(0,0,0,0.4) 20%,rgba(0,0,0,0.6) 39%,
white 40%, white 60%,rgba(0,0,0,0.6) 41%, rgba(0,0,0,0.4) 80%,rgba(0,0,0,0.2));
-webkit-mask-box-image: linear-gradient(to top, rgba(0,0,0,0.2), rgba(0,0,0,0.2), rgba(0,0,0,0.4) 20%,rgba(0,0,0,0.6) 39%,
white 40%, white 60%,rgba(0,0,0,0.6) 41%, rgba(0,0,0,0.4) 80%,rgba(0,0,0,0.2));
}
.ys-datetime-selector .ys-datetime-selector-content .ys-datetime-blocks:before{
content:"";
position:absolute;
left:0;
right:0;
height:1px;
background-color:#cdcdcd;
top:68px;
}
.ys-datetime-selector .ys-datetime-selector-content .ys-datetime-blocks:after{
content:"";
position:absolute;
left:0;
right:0;
height:1px;
background-color:#cdcdcd;
bottom:68px;
}
.ys-datetime-selector .ys-datetime-selector-content .ys-datetime-blocks>div{
width:33.333%;
float:left;
}
.ys-datetime-selector .ys-datetime-selector-content .ys-datetime-blocks>div.block-hide{
display:none;
}
.ys-datetime-selector .ys-datetime-selector-content .ys-datetime-blocks>div.width-50{
width:50%;
}
.ys-datetime-selector .ys-datetime-selector-content .ys-datetime-blocks>div.width-100{
width:100%;
}
.ys-datetime-selector .ys-datetime-selector-content .ys-datetime-blocks .swiper-container{
height:170px;
}
.ys-datetime-selector .ys-datetime-selector-content .ys-datetime-blocks .swiper-container .swiper-slide{
height:34px;
line-height: 34px;
text-align: center;
}
/* ================================================== page animation start ================================================== */
.ys-datetime-selector .datetime-selector-animated{
animation-duration: 0.3s;
-webkit-animation-duration: 0.3s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
/* datetime-selector-slide-down-in */
.ys-datetime-selector .datetime-selector-slide-down-in{
animation-name:datetime-selector-slide-down-in;
-webkit-animation-name:datetime-selector-slide-down-in;
}
@keyframes datetime-selector-slide-down-in {
from{
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
to{
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@-webkit-keyframes datetime-selector-slide-down-in {
from{
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
to{
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
/* datetime-selector-slide-down-out */
.datetime-selector-slide-down-out{
animation-name:datetime-selector-slide-down-out;
-webkit-animation-name:datetime-selector-slide-down-out;
}
@keyframes datetime-selector-slide-down-out {
from{
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to{
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
}
@-webkit-keyframes datetime-selector-slide-down-out {
from{
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to{
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
}ys_datetime_selector.js
(function($){
var container = $(".ys-datetime-selector");
var currentYear = new Date().getFullYear();
var currentMonth = new Date().getMonth()+1;
var currentDate = new Date().getDate();
var currentDayCount = getMaxDateInMonth(currentYear,currentMonth);
var yearSwiper =null;
var monthSwiper =null;
var dateSwiper =null;
var callback = function(year,month,date){};
var html = "<div class='ys-datetime-selector display-hide'> "+
" <div class='ys-datetime-selector-content'> "+
" <div class='ys-datetime-operation-bar'> "+
" <a class='ys-datetime-cancel-btn'>取消</a>"+
" <span>选择日期</span> "+
" <a class='ys-datetime-ok-btn'>确定</a> "+
" </div> "+
" <div class='ys-datetime-blocks'> "+
" <div class='ys-datetime-year-block'> "+
" <div class='swiper-container'> "+
" <div class='swiper-wrapper'></div>"+
" </div> "+
" </div> "+
" <div class='ys-datetime-month-block'> "+
" <div class='swiper-container'> "+
" <div class='swiper-wrapper'></div>"+
" </div> "+
" </div> "+
" <div class='ys-datetime-date-block'> "+
" <div class='swiper-container'> "+
" <div class='swiper-wrapper'></div>"+
" </div> "+
" </div> "+
" <div style='clear:both;'></div> "+
" </div> "+
" </div> "+
"</div> ";
/* ======================================== initialize the page view ======================================== */
function render(){
container = $(html).appendTo("body");
yearSwiper = new Swiper(".ys-datetime-year-block .swiper-container", {
direction : "vertical",
freeMode:true,
freeModeSticky:true,
slidesPerView: "auto",
onTransitionEnd:function(swiper){
var activeIndex = swiper.activeIndex;
var slidesLen = swiper.slides.length;
if(activeIndex<20){
var firstYear = parseInt($(swiper.slides[0]).attr("data-year"));
var prevYears = [];
for(var i=firstYear-1;i>=firstYear-100;i--){
prevYears.push("<div class='swiper-slide' data-year='"+i+"'>"+i+"年</div>");
}
swiper.prependSlide(prevYears);
}else if(slidesLen-activeIndex<20){
var lastYear = parseInt($(swiper.slides[slidesLen-1]).attr("data-year"));
var nextYears = [];
for(var i=lastYear+1;i<=lastYear+100;i++){
nextYears.push("<div class='swiper-slide' data-year='"+i+"'>"+i+"年</div>");
}
swiper.appendSlide(nextYears);
}
// 计算这个月有多少天
currentYear = parseInt($(swiper.slides[activeIndex+2]).attr("data-year"));
updateDateSwiper();
}
});
var yearSlides = [];
for(var i=currentYear-2;i<=currentYear+102;i++){
yearSlides.push("<div class='swiper-slide' data-year='"+i+"'>"+i+"年</div>");
}
var prevYears = [];
for(var i=currentYear-3;i>currentYear-100;i--){
prevYears.push("<div class='swiper-slide' data-year='"+i+"'>"+i+"年</div>");
}
yearSwiper.appendSlide(yearSlides);
yearSwiper.prependSlide(prevYears);
monthSwiper = new Swiper(".ys-datetime-month-block .swiper-container", {
direction :"vertical",
freeMode:true,
freeModeMomentumRatio:0.2,
loop:true,
loopAdditionalSlides:24,
freeModeSticky:true,
slidesPerView:"auto",
onTransitionEnd:function(swiper){
var activeIndex = swiper.activeIndex;
if(isNaN(activeIndex)){
return;
}
// 计算这个月有多少天
currentMonth = parseInt($(swiper.slides[activeIndex+2]).attr("data-month"));
updateDateSwiper();
}
});
var monthSlides=[];
for(var i=1;i<=12;i++){
monthSlides.push("<div class='swiper-slide' data-month='"+i+"'>"+i+"月</div>");
}
monthSwiper.appendSlide(monthSlides);
monthSwiper.appendSlide(monthSlides);
monthSwiper.appendSlide(monthSlides);
dateSwiper = new Swiper(".ys-datetime-date-block .swiper-container", {
direction :"vertical",
loop : true,
freeMode:true,
freeModeMomentumRatio:0.2,
freeModeSticky:true,
slidesPerView:"auto",
onTransitionEnd:function(swiper){
var activeIndex = swiper.activeIndex;
if(isNaN(activeIndex)){
return;
}
// 计算这个月有多少天
currentDate = parseInt($(swiper.slides[activeIndex+2]).attr("data-date"));
}
});
var dateSlides=[];
for(var i=1;i<=currentDayCount;i++){
dateSlides.push("<div class='swiper-slide' data-date='"+i+"'>"+i+"日</div>");
}
dateSwiper.appendSlide(dateSlides);
}
/* ======================================== bind events ======================================== */
function bindEvents(){
container.on("click",function(e){
e.stopPropagation();
e.preventDefault();
container.find(".ys-datetime-selector-content").addClass("datetime-selector-slide-down-out");
});
container.on("click",".ys-datetime-selector-content",function(e){
e.stopPropagation();
e.preventDefault();
});
container.on("click",function(e){e.preventDefault();e.stopPropagation();});
container.on("click",".ys-datetime-cancel-btn",function(e){
e.stopPropagation();
e.preventDefault();
container.find(".ys-datetime-selector-content").addClass("datetime-selector-slide-down-out");
});
container.on("click",".ys-datetime-ok-btn",function(e){
e.stopPropagation();
e.preventDefault();
callback(currentYear,currentMonth,currentDate);
container.find(".ys-datetime-selector-content").addClass("datetime-selector-slide-down-out");
});
container.find(".ys-datetime-selector-content").on("animationend webkitAnimationEnd",function(){
if($(this).hasClass("datetime-selector-slide-down-out")){
container.addClass("display-hide");
}
$(this).removeClass("datetime-selector-slide-down-in").removeClass("datetime-selector-slide-down-out");
});
}
var initialized = false;
function init(){
if(initialized){
return;
}
initialized = true;
render();
bindEvents();
}
/* ======================================== common methods ======================================== */
function getMaxDateInMonth(year,month){
var date = new Date();
date.setFullYear(year);
date.setMonth(month);
date.setDate(0);
return date.getDate();
}
function updateDateSwiper(){
var nextDayCount = getMaxDateInMonth(currentYear,currentMonth);
if(currentDayCount>nextDayCount){
for(var i=currentDayCount-1;i>=nextDayCount;i--){
dateSwiper.removeSlide(i);
}
}else if(currentDayCount<nextDayCount){
for(var i=currentDayCount+1;i<=nextDayCount;i++){
dateSwiper.appendSlide("<div class='swiper-slide' data-date='"+i+"'>"+i+"日</div>");
}
}
currentDayCount = nextDayCount;
currentDate = parseInt($(dateSwiper.slides[dateSwiper.activeIndex+2]).attr("data-date"));
}
function showDateTime(options){
options = options||{};
var year = options.year;
var month = options.month;
var date = options.date;
var type = options.type||"year-month-date";
if(type=="year-month-date"){
container.find(".ys-datetime-year-block").removeClass("block-hide").removeClass("width-50").removeClass("width-100");
container.find(".ys-datetime-month-block").removeClass("block-hide").removeClass("width-50").removeClass("width-100");
container.find(".ys-datetime-date-block").removeClass("block-hide").removeClass("width-50").removeClass("width-100");
}else if(type=="year-month"){
container.find(".ys-datetime-date-block").addClass("block-hide");
container.find(".ys-datetime-year-block").addClass("width-50").removeClass("width-100").removeClass("block-hide");
container.find(".ys-datetime-month-block").addClass("width-50").removeClass("width-100").removeClass("block-hide");
}else if(type=="year"){
container.find(".ys-datetime-date-block").addClass("block-hide");
container.find(".ys-datetime-month-block").addClass("block-hide");
container.find(".ys-datetime-year-block").addClass("width-100");
}
callback = options.callback||callback;
currentYear = year||currentYear;
currentMonth = month||currentMonth;
currentDate = date||currentDate;
currentDayCount = getMaxDateInMonth(currentYear,currentMonth);
var yearSlidesLength = yearSwiper.slides.length;
var minYear = parseInt($(yearSwiper.slides[2]).attr("data-year"));
var maxYear = parseInt($(yearSwiper.slides[yearSlidesLength-3]).attr("data-year"));
if(currentYear<minYear){
var prevYears = [];
for(var i=minYear-3;i>currentYear-20;i--){
prevYears.push("<div class='swiper-slide' data-year='"+i+"'>"+i+"年</div>");
}
yearSwiper.prependSlide(prevYears);
yearSwiper.slideTo(17);
}else if(currentYear>maxYear){
var nextSlides = [];
for(var i=maxYear+2;i<=currentYear+20;i++){
nextSlides.push("<div class='swiper-slide' data-year='"+i+"'>"+i+"年</div>");
}
yearSwiper.appendSlide(nextSlides);
yearSwiper.slideTo(currentYear-minYear+1);
}else{
yearSwiper.slideTo(currentYear-minYear);
}
monthSwiper.slideTo(currentMonth+9);
dateSwiper.slideTo(currentDayCount-3+currentDate);
container.removeClass("display-hide");
container.find(".ys-datetime-selector-content").addClass("datetime-selector-animated").addClass("datetime-selector-slide-down-in");
}
var DateTimeWidget = {
show:function(options){
init();
showDateTime(options);
}
};
window.DateTimeWidget = DateTimeWidget;
})(jQuery);datetime.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta name="format-detection" content="telephone=no">
<!-- 导入CSS -->
<link href="dist/css/swiper.min.css" rel="stylesheet">
<link href="css/common/ys_datetime_selector.css" rel="stylesheet">
<!-- 导入JS -->
<script src="dist/js/jquery-1.11.3.min.js"></script>
<script src="dist/js/swiper.jquery.min.js"></script>
</head>
<body>
<script src="js/common/ys_datetime_selector.js"></script>
<script>
DateTimeWidget.show({
year:2018,
month:12,
date:31,
// type:"year",
callback:function(year,month,date){
console.log(year+"年"+month+"月"+date+"日");
}
});
</script>
</body>
</html>
Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung des Beispielcodes für die benutzerdefinierte HTML5-Kalendersteuerung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Beispielcode mit HTML5 zur Implementierung der Funktion zum Scannen von PC-QR-Codes und zum Auslösen des Hochladens von Ressourcen durch die WAP-SeiteNächster Artikel：Beispielcode mit HTML5 zur Implementierung der Funktion zum Scannen von PC-QR-Codes und zum Auslösen des Hochladens von Ressourcen durch die WAP-Seite
In Verbindung stehende Artikel
Mehr sehen- Das Vollbild-Bildlauf-Plug-in AlloyTouch erstellt in 30 Sekunden eine flüssige H5-Seite
- Tatsächlicher HTML5-Kampf und Analyse von Touch-Ereignissen (Touchstart, Touchmove und Touchend)
- Ausführliche Erläuterung der Beispiele für Bildzeichnungen in HTML5 Canvas 9
- Reguläre Ausdrücke und neue HTML5-Elemente
- So kombinieren Sie NodeJS und HTML5, um mehrere Dateien per Drag-and-Drop auf den Server hochzuladen