Автор

16 03.2013
Создание красивого календаря

Создание красивого календаря



С помощью подобного календаря, например, можно вести собственный дневник в Интернете или напоминать Вашим посетителям о каких-либо важных датах. Если его немного доработать, можно сделать интересное решение с автоматическим добавлением событий.

Лично я применил календарь на сайте Усадьба «Сказка» по просьбе заказчика!

 

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

Первым делом формируем структуру календаря на HTML:

<table cellspacing="0">
<thead>
<tr>
<th>Mon</th><th>Tue</th><th>Wed</th>
<th>Thu</th><th>Fri</th><th>Sat</th>
<th>Sun</th>
</tr>
</thead>
<tbody>
<tr>
<td class="padding" colspan="3"></td>
<td> 1</td>
<td> 2</td>
<td> 3</td>
<td> 4</td>
</tr>
<tr>
<td> 5</td>
<td> 6</td>
<td> 7</td>
<td> 8</td>
<td class="today"> 9</td>
<td>10</td>
<td>11</td>
</tr>
<tr>
<td>12</td>
<td class="date_has_event">
13
</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
</tr>
<tr>
<td>19</td>
<td>20</td>
<td>21</td>
<td class="date_has_event">
22
</td>
<td>23</td>
<td>24</td>
<td>25</td>
</tr>
<tr>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td>31</td>
<td class="padding"></td>
</tr>
</tbody>
<tfoot>
<th>Mon</th><th>Tue</th><th>Wed</th>
<th>Thu</th><th>Fri</th><th>Sat</th>
<th>Sun</th>
</tfoot>
</table>

Для отображения текущей даты используется класс "today", для отображения даты с каким-либо событием - "date_has_event".

Теперь, чтобы добавить текст для отображения достаточно после числа добавить следующий код:

<div class="events">
<ul>
<li>
<span class="title">Event 1</span>
<span class="desc">Lorem ipsum dolor sit amet, consectetu adipisicing elit.</span>
</li>
<li>
<span class="title">Event 2</span>
<span class="desc">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
</li>
</ul>
</div>

Также обратите внимание, что обязательно необходимо использовать класс "events".

Далее наступает черед CSS магии и jQuery волшебства:

<script src="js/jquery-1.3.min.js" type="text/javascript"> </script>
<script src="js/coda.js" type="text/javascript"> </script>
<link rel="stylesheet" href="css/master.css" type="text/css" media="screen" charset="utf-8" />

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

Как Вы видите используется минимум кода, технология спрайтов для изображения, а также красивые эффекты для появления сообщений.

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

Спасибо за внимание!

 

Исходники: скачать
Демо: смотреть

Источник урока: www.stefanoverna.com


vk.com/club.ssdru

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


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

18 01.2017
Создание красивого календаря

Профессиональный веб-дизайн не обходится без создания цветовой схемы. Во всемирной паутине существует множество инструментов для достижения цветовой «нирваны». Кажется, что они совершенно разные, но многие из них – всего лишь измененные версии более популярных и полезных инструментов.


19 04.2013
Создание красивого календаря

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


30 10.2017
Создание красивого календаря

Все современные браузеры, кроме IE9- поддерживают CSS transitions и CSS animations, которые позволяют реализовать анимацию средствами CSS, без привлечения JavaScript.


15 08.2013
Создание красивого календаря

Прогресс веб-дизайна не стоит на месте,большие гиганты ит-индустрии диктуют нам правила и направления в разработке дизайна, совсем недавно все стали переводить свои дизайны в минимализм, а именно в тренд Metro UI, объемные сайты постепенно стали исчезать ведь им производят рестайлинг, в скором времени будем на них любоваться как на динозавров. Буквально за несколько недель, с момента показа новой iOS 7, произошел легкий сдвиг в сознании не только у дизайнеров, но и у пользователей, имя ему — плоский дизайн.


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close