用于事件管理的一款H5移动网页应用模板

Mobile Events ( Calendar ) App

h5, template, calendar

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 4324
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

$(document).ready(function() {
    $('.time').append(time);
    createEvent(event1.img, 'event1');
    createEvent(event2.img, 'event2');
    createEvent(event3.img, 'event3');
    createEvent(event4.img, 'event4');
    createEvent(event5.img, 'event5');
    setFirstImage();
    updateBehind();
});

$('.bottomPopup').on('click', '.goingButton', function() {
    toggleGoing();
});

$('.bottomMenu').on('click', '.browse', function() {
    toggleAttendList();
});

$('.attendList').on('click', '.back', function() {
    toggleAttendList();
});

var event1 = {
        img: '/uploads/161001/normal1.jpg',
        title: 'Web Design',
        loc: 'London, UK',
        date: '12th Dec 2017',
        attending: 'Attend'
    },
    event2 = {
        img: '/uploads/161001/normal2.jpg',
        title: 'Fashion',
        loc: 'Dublin, Ireland',
        date: '17th Dec 2017',
        attending: 'Attend'
    },
    event3 = {
        img: '/uploads/161001/normal3.jpg',
        title: 'Photography',
        loc: 'New York, USA',
        date: '19th Dec 2017',
        attending: 'Attend'
    },
    event4 = {
        img: '/uploads/161001/normal4.jpg',
        title: 'Robotics',
        loc: 'Los Angeles, USA',
        date: '22th Dec 2017',
        attending: 'Attending'
    },
    event5 = {
        img: '/uploads/161001/normal5.jpg',
        title: 'Comedy',
        loc: 'Manchester, UK',
        date: '21th Dec 2017',
        attending: 'Attend'
    };

var eventsTotal = 0;

function createEvent(img, id) {
    $('ul.images').append('<li class="img" id="' + id + '" style="background-image: url(\'' + img + '\');"><div class="attend"></div></li>');
    eventsTotal++;
}

function setFirstImage() {
    $('ul li.img').last().addClass('sel');
    var name = $('.sel').attr('id')
    selectedEventDetails(name);
}

$('ul').on('click', '.p1', function() {
    $('ul li.img.sel').addClass('m').removeClass('sel');
    $(this).addClass('sel').removeClass('p1');
    updateSel();
    updateBehind();
});

$('ul').on('click', '.sel', function() {
    $(this).toggleClass('full');
    $('.bottomPopup').toggleClass('full');
    $('.topBar').toggleClass('full');
    updateBehind();
});

$('.navArrow').click(function() {
    $('ul li.img.sel').next().addClass('sel').removeClass('m p1 p2');
    $('ul li.img.sel').prev().removeClass('sel');
    updateSel();
    updateBehind();
});

function updateSel() {
    var name = $('.sel').attr('id')
    selectedEventDetails(name);
}

function selectedEventDetails(event) {
    var topDetails = '<div class="eventName">' + window[event].title + '</div>';
    topDetails += '<div class="eventPlace">' + window[event].loc + '</div>';
    topDetails += '<div class="eventDate">' + window[event].date + '</div>';
    $('.topDetails').html(topDetails);
    var attending = window[event].attending;

if (attending == 'Attending') {
        $('#' + event + ' .attend').addClass('Attending').html('<i class="fa fa-check"></i> Attending');
    } else {
        $('#' + event + ' .attend').removeClass('Attending').html('');
    }
    var bottomPopup = '<div class="goingButton ' + attending + '">' + attending + '</div>';
    bottomPopup += '<div class="eventName">' + window[event].title + '</div>';
    bottomPopup += '<div class="eventPlace">' + window[event].loc + '</div>';
    bottomPopup += '<div class="eventDate">' + window[event].date + '</div>';
    bottomPopup += '<div class="cal"><i class="fa fa-plus-circle"></i> Add to my calendar</div>';
    $('.bottomPopup').html(bottomPopup);
}

var dt = new Date();
var getMinutes = dt.getMinutes();
if (dt.getMinutes() <= 9) {
    getMinutes = '0' + getMinutes;
} else {
    getMinutes = getMinutes;
}
var time = dt.getHours() + ":" + getMinutes;

编译

CSS

body {
    background: lightgrey;
    font-family: helvetica, arial;
    font-weight: 100;
}
.ios {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 750px;
    background: white;
    overflow: hidden;
}
.logo {
    position: absolute;
    top: 20px;
    right: -90px;
    color: white;
    background: #49b349;
    padding: 20px 120px;
    transform: rotate(45deg);
}
.topBar {
    position: absolute;
    font-size: .8em;
    width: 390px;
    padding: 0 5px;
    z-index: 999;
    transition: .5s;
}
.topBar.full {
    color: white;
}
.topBar div {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    display: inline-block;
}
.topDetails {
    position: absolute;
    top: 45px;
    left: 45px;
}
.navArrow {
    position: absolute;
    top: 55%;
    left: -3.5%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    transition: .5s;
}
.navArrow.show {
    left: 3.5%;
}
ul {
    list-style: none;
}
.img {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    height: 500px;
    width: calc(100% - 100px);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
    box-shadow: 0px 0px 30px -10px black;
    transition: 0.5s;
}
.img.m {
    left: -45%;
    opacity: .6;
    transform: translate(-50%, -50%) scale(0);
}
.img.sel {
    left: 45%;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    cursor: pointer;
    z-index: 2;
}
.img.sel.full {
    width: 110%;
    height: 90%;
    top: 40%;
    left: 50%;
    border-radius: 0;
}
.img.p1 {
    left: 55%;
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(.9);
    cursor: alias;
}
.img.p2 {
    left: 64%;
    opacity: 0.4;
    transform: translate(-50%, -50%) scale(.8);
    pointer-events: none;
}
.img.p3 {
    left: 72%;
    opacity: 0.1;
    transform: translate(-50%, -50%) scale(.7);
    pointer-events: none;
}
.bottomPopup {
    position: absolute;
    bottom: -200px;
    width: calc(100% - 40px);
    height: calc(200px - 40px);
    background: white;
    transition: .5s;
    padding: 20px;
    z-index: 2;
}
.bottomPopup.full {
    bottom: 0px;
}
.eventName {
    display: inline-block;
    font-size: 1.8em;
    float: left;
}
.eventPlace {
    display: inline-block;
    margin-top: 10px;
    font-size: 1em;
    float: left;
    clear: left;
}
.eventPlace:before {
    font-family: FontAwesome;
    content: "\f041";
    margin-right: 8px;
}
.eventDate {
    display: inline-block;
    margin-top: 10px;
    font-size: .7em;
    float: left;
    clear: left;
}
.goingButton {
    display: inline-block;
    background: grey;
    color: white;
    padding: 10px 20px;
    width: 76px;
    font-size: 1.1em;
    float: right;
    text-align: center;
    cursor: pointer;
}
.goingButton.Attending {
    background: #49b349;
}
.attend.Attending {
    position: absolute;
    bottom: 16px;
    left: 16px;
    background: white;
    border: 1px solid lightgrey;
    border-radius: 6px;
    color: black;
    padding: 5px 10px;
    font-size: .8em;
    font-weight: 900;
}
.bottomPopup .cal {
    position: absolute;
    width: 100%;
    bottom: 20px;
    left: 0;
    text-align: center;
    cursor: pointer;
    border-top: 1px solid lightgrey;
    padding-top: 20px;
}
.bottomPopup .cal:hover i {
    color: #49b349;
}
.topBar .sig {
    left: 5%;
}
.topBar .blueTooth {
    left: 93%;
}
.topBar .batt {
    left: 97%;
}
.bottomMenu {
    position: absolute;
    width: calc(100% - 100px);
    margin: 0 50px;
    bottom: 30px;
    z-index: 1;
}
.bottomMenu div {
    display: inline-block;
    float: left;
    cursor: pointer;
}
.bottomMenu .browse {
    float: right;
}
.attendList {
    position: absolute;
    background: white;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 998;
    left: 100%;
    transition: .5s;
}
.attendList.show {
    left: 0%;
}
.attendList h3 {
    padding: 20px 30px 10px;
}
.attendList ul {
    padding: 0px 45px;
    margin-top: -10px;
    height: calc(100% - 130px);
    overflow: auto;
}
.attendList ul li {
    border: 1px solid lightgrey;
    padding: 10px 14px;
    display: inline-block;
    border-radius: 6px;
    margin-top: 10px;
}
.attendList .back {
    position: absolute;
    cursor: pointer;
    bottom: 20px;
    left: 20px;
}

HTML

</div>
        <div class='navArrow'><i class='fa fa-chevron-left'></i>
        </div>
        <ul class='images'>
        </ul>
        <div class='bottomPopup'>
            <div class="goingButton">Go</div>
        </div>
        <div class='bottomMenu'>
            <div class='ham'>
                <i class="fa fa-bars" aria-hidden="true"></i>
            </div>
            <div class='browse'>
                Events I'm attending <i class="fa fa-arrow-circle-o-right"></i>
            </div>
        </div>
    </div>
    <div class='attendList'>
        <h3>Events You're Attending:</h3>
        <ul></ul><i class='fa fa-chevron-left back'></i>
    </div>
</div>

Mobile Events ( Calendar ) App

h5, template, calendar

编辑器支持Emmet

快捷键

Mobile Events ( Calendar ) App

h5, template, calendar

使用纯CSS实现一款很棒的材料化设计日历（日程安排 | 计划管理）移动应用页面模板

HTML5一款电商限时折扣类移动应用网页模板

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：