Автор

10 06.2017
Расписание мероприятий для сайта на jQuery

Расписание мероприятий для сайта на jQuery


Простой шаблон, который позволяет отображать события на временной шкале, а также организовывать их группами (дни недели, конференц-залы и т. Д.).

 

ДЕМО
ИСХОДНИКИ

 

Мы часто сталкивались с этим веб-компонентом: когда мы проверяем график конференции или расписание занятий в нашем спортзале. С точки зрения веб-дизайнера, удобно использовать простой, отзывчивый шаблон, если вам нужно создать таблицу расписания. Итак, мы построили один!

 

Создание структуры

Структура HTML состоит из трех различных элементов: div.timeline для временной шкалы событий (09:00, 09:30, ..), div.events, которая включает список событий и div.event-modal для модального окна Используется для предоставления более подробной информации о выбранном событии.

<div class="cd-schedule">
<div class="timeline">
<ul>
<li><span>09:00</span></li>
<li><span>09:30</span></li>
<!-- additional elements here -->
</ul>
</div>

<div class="events">
<ul>
<li class="events-group">
<div class="top-info"><span>Monday</span></div>

<ul>
<li class="single-event" data-start="09:30" data-end="10:30" data-content="event-abs-circuit" data-event="event-1">
<a href="#0">
<em class="event-name">Abs Circuit</em>
</a>
</li>

<!-- other events here -->
</ul>
</li>

<li class="events-group">
<div class="top-info"><span>Tuesday</span></div>

<ul>
<!-- events here -->
</ul>
</li>

<!-- additional li.events-group here -->
</ul>
</div>

<div class="event-modal">
<header class="header">
<div class="content">
<span class="event-date"></span>
<h3 class="event-name"></h3>
</div>

<div class="header-bg"></div>
</header>

<div class="body">
<div class="event-info"></div>
<div class="body-bg"></div>
</div>

<a href="#0" class="close">Close</a>
</div>
</div>

 

Добавление стиля

На небольших устройствах (ширина окна меньше 800 пикселей) все события внутри .events-group выстраиваются горизонтально: мы устанавливаем display: flex в элемент .events-group > ul и overflow-x: scroll, чтобы события прокручивались.

.cd-schedule .events .events-group > ul {
  position: relative;
  padding: 0 5%;
  /* force its children to stay on one line */
  display: flex;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
}
 
.cd-schedule .events .single-event {
  /* force them to stay on one line */
  flex-shrink: 0;
  float: left;
  height: 150px;
  width: 70%;
  max-width: 300px;
}

Что касается мода .event-modal, он имеет фиксированное положение и перемещается вправо вне окна просмотра. Когда пользователь выбирает событие, класс .modal-is-open используется для перевода .event-modal обратно в область просмотра.

.cd-schedule .event-modal {
  position: fixed;
  z-index: 3;
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  visibility: hidden;
  transform: translateX(100%);
  transition: transform .4s, visibility .4s;
}
 
.cd-schedule.modal-is-open .event-modal {
  /* .modal-is-open class is added as soon as an event is selected */
  transform: translateX(0);
  visibility: visible;
}

На больших устройствах все события находятся в абсолютном положении и помещаются в расписание: верхнее положение и высота каждого события оцениваются с использованием атрибутов data-start и data-end самого события и задаются с использованием JavaScript (больше в Раздел обработки событий).

@media only screen and (min-width: 800px) {
  .cd-schedule .events {
    float: left;
    width: 100%;
  }
  .cd-schedule .events .events-group {
    width: 20%;
    float: left;
  }
  .cd-schedule .events .single-event {
    position: absolute;
    z-index: 3;
    /* top position and height will be set using js */
    width: calc(100% + 2px);
    left: -1px;
  }
}

Что касается .event-modal, анимация открытия / закрытия создается с использованием jQuery в сочетании с переходами и преобразованиями CSS (подробнее в разделе Обработка событий).

 

Обработка событий

Чтобы реализовать это расписание событий, мы создали объект SchedulePlan и использовали функции scheduleReset() и initEvents(), чтобы запустить расписание и присоединить обработчики событий к соответствующим элементам.

function SchedulePlan( element ) {
  this.element = element;
  this.timeline = this.element.find('.timeline');
  //...
  
  this.eventsWrapper = this.element.find('.events');
  this.eventsGroup = this.eventsWrapper.find('.events-group');
  this.singleEvents = this.eventsGroup.find('.single-event');
  //..
 
  this.scheduleReset();
  this.initEvents();
}

На больших устройствах метод scheduleReset() позволяет размещать события внутри расписания и устанавливать их высоту. Например, для оценки высоты мы вычисляем продолжительность события (конец-минус данных), делим его на «eventUnit» (в нашем случае это 30 минут), а затем умножаем его на высоту «временной шкалы» Единица (в нашем случае 50 пикселей).

var self = this;
this.singleEvents.each(function(){
  //place each event in the grid -> need to set top position and height
  var start = getScheduleTimestamp($(this).attr('data-start')), //getScheduleTimestamp converts hh:mm to timestamp
    duration = getScheduleTimestamp($(this).attr('data-end')) - start;
 
  var eventTop = self.eventUnitHeight*(start - self.timelineStart)/self.timelineUnitDuration,
    eventHeight = self.eventUnitHeight*duration/self.timelineUnitDuration;
  
  $(this).css({
    top: (eventTop -1) +'px',
    height: (eventHeight+1)+'px'
  });
});

Когда пользователь выбирает событие, функция load() jQuery используется для загрузки содержимого только что выбранного события (data-content используется для определения загружаемого содержимого файла).
В дополнение к этому, на больших устройствах .event-modal анимируется, чтобы показать содержимое события. Во-первых, .event-modal помещается поверх выбранного события, а его высота и ширина изменяются так, чтобы они были равны единицам выбранного события; То элементы .header-bg и .body-bg масштабируются для создания анимации морфинга; В конце этой анимации обнаруживается модальный контент.

SchedulePlan.prototype.openModal = function(event) {
	var self = this;
	var mq = self.mq();
	this.animating = true;
 
	//update event name and time
	this.modalHeader.find('.event-name').text(event.find('.event-name').text());
	this.modalHeader.find('.event-date').text(event.find('.event-date').text());
	this.modal.attr('data-event', event.parent().attr('data-event'));
 
	//update event content
	this.modalBody.find('.event-info').load(event.parent().attr('data-content')+'.html .event-info > *', function(data){
		//once the event content has been loaded
		self.element.addClass('content-loaded');
	});
 
	this.element.addClass('modal-is-open');
 
	if( mq == 'mobile' ) {
		self.modal.one(transitionEnd, function(){
			self.modal.off(transitionEnd);
			self.animating = false;
		});
	} else {
		//change modal height/width and translate it
		self.modal.css({
			top: eventTop+'px', //this is the selected event top position
			left: eventLeft+'px', //this is the selected event left position
			height: modalHeight+'px', //this is the modal final height
			width: modalWidth+'px', //this is the modal final width
		});
		transformElement(self.modal, 'translateY('+modalTranslateY+'px) translateX('+modalTranslateX+'px)');
 
		//set modalHeader width
		self.modalHeader.css({
			width: eventWidth+'px',  //this is the selected event width
		});
		//set modalBody left margin
		self.modalBody.css({
			marginLeft: eventWidth+'px',
		});
 
		//change modalBodyBg height/width and scale it
		self.modalBodyBg.css({
			height: eventHeight+'px',
			width: '1px',
		});
		transformElement(self.modalBodyBg, 'scaleY('+HeaderBgScaleY+') scaleX('+BodyBgScaleX+')');
 
		//change modal modalHeaderBg height/width and scale it
		self.modalHeaderBg.css({
			height: eventHeight+'px',
			width: eventWidth+'px',
		});
		transformElement(self.modalHeaderBg, 'scaleY('+HeaderBgScaleY+')');
		
		self.modalHeaderBg.one(transitionEnd, function(){
			//wait for the  end of the modalHeaderBg transformation and show the modal content
			self.modalHeaderBg.off(transitionEnd);
			self.animating = false;
			self.element.addClass('animation-completed');
		});
	}
};

Примечание:

Мы выполнили простую функцию load(), чтобы загрузить новый html-контент, но вы можете заменить его вызовом $.ajax, чтобы обрабатывать ошибки, запрос sendSend и т. Д. В соответствии с вашим проектом.

 

Вот и всё!


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru


Статьи по темеjQuery

07 04.2013
Расписание мероприятий для сайта на jQuery

Просматривая слайдер контента вы наверняка замечали навигацию в нем, которая позволяет осуществить быструю перемотку в нужное место. Зачастую эта навигация представлена в виде простых точек, или обычных стрелок, что не дает посетителю представления о том, какой элемент будет следующим. Сегодня мы рассмотрим как добиться красивого эффекта при наведении на изображение в меню навигации, который будет реализован с помощью CSS3. Идея заключается в раскрытии круговой навигации со стрелкой, а также пузырика с миниатюрой.


12 09.2013
Расписание мероприятий для сайта на jQuery

Мы уже не раз рассказывали о важности интеграции социальных сетей на вашем сайте. Они позволят не только увеличить оборот посетителей но и привлечь постоянных читателей сайта, что соответственно увеличит ядро аудитории. В сегодняшнем уроке мы рассмотрим как создать достаточно простые но привлекательные социальные кнопки для сайта, для этого мы будем использовать только CSS, что значительно ускорит загрузку страницы.


28 09.2013
Расписание мероприятий для сайта на jQuery

Мировая глобализация операционной системы от майков продолжатся, дизайнеры уже массово переделывают свой дизайн под стиль Metro UI, кому-то он нравится, у других-вызывает отвращение, но тем не менее что-то новое всегда имеет место быть. В данном уроке мы рассмотрим как создать замечательную галерею с эффектом увеличения и слайдом в стиле дизайна Metro UI. Галерея будет полностью копировать интерфейс пуска нашумевшей восьмерки. Кроме этого мы добавили настройки, где вы сможете применить различные эффекты.


29 09.2014
Расписание мероприятий для сайта на jQuery

На многих сайтах реализована функция всплывающего окна при входе на сайт. Такой элемент позволяет преподнести посетителю необходимую информацию, которая, на мнение, автора, является ценной для посетителя или на оборот-предупреждающей.


105 Публикаций

Раскрутка в соцсетях

В данном блоге описано где и как сделать накрутку групп, сообществ и личных страничек в популярных социальных сетях и тест платных сайтов занимающихся накруткой.


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close