Да чтобы и дизайн применялся автоматически, когда праздник наступит, а потом сам становился дизайном по умолчанию? Многие предлагают сделать проверку времени на стороне сервера и подключить нужный макет. Некоторые предпочитают вручную менять шаблоны. Ах, какое расточительство. Ведь можно просто определить текущее время на стороне клиента при помощи javascript объекта класса Date, и назначить класс оформления документа body, и согласно классу описать изменения в макете. Ведь, по существу, расположения модулей и сама структура макета не изменяются. Мы просто приукрашаем дизайн, а не меняем оформление в корне.

   Давайте рассмотрим приведенное предложение по смене дизайна далее:

   Итак, например, дизайнер предлагает 4 вида меню для сайта такси на каждое время года:

   Давайте напишем небольшой кроссбраузерный скрипт, который с легкостью определит время и согласно ему присвоит нужные классы элементу документа – тегу body:

<script type="text/javascript"> 
 window.onload = setClassOfTime; 
  function setClassOfTime(){ 
     var season        = new Date(); 
     var currentMonth  = season.getMonth(); 
     var currentDate   = season.getDate(); 
     var currentDayOfWeek = season.getDay(); 
     switch(currentDayOfWeek){ 
         case 0: 
                 currentDayOfWeek = ' monday'; 
             break; 
         case 1: 
                 currentDayOfWeek = ' tuesday'; 
             break; 
         case 2: 
                 currentDayOfWeek = ' wednesday'; 
             break; 
         case 3: 
                 currentDayOfWeek = ' thursday'; 
             break; 
         case 4: 
                 currentDayOfWeek = ' friday'; 
             break; 
         case 5: 
                 currentDayOfWeek = ' saturday'; 
             break; 
         case 6: 
                 currentDayOfWeek = ' sunday'; 
             break; 
     }; 
   
     var currentTime   = season.getHours(); 
     var currentMinutes = season.getMinutes(); 
     ++currentMinutes; 
     var currentHour   = currentTime; 
     currentTime       = (currentTime > 6 && currentTime < 12) ? ' morning' : ((currentTime >= 12 && currentTime < 18) ? ' day' : ((currentTime >= 18 && currentTime < 22) ? ' evening' : (((currentTime >= 22)||(currentTime >= 0 && currentTime < 6)) ? ' night' : ''))); 
   
   
     var currentYear   = season.getFullYear(); 
     var sesonMenu     = ''; 
         switch(currentMonth){ 
            case 11: 
             switch(currentDate){ 
                case 25: 
                         seasonMenu += ' сhristmas'; 
                     break; 
             }; 
             sesonMenu += ' winter december'; 
             break; 
            case 0: 
             switch(currentDate){ 
                case 1: 
                         sesonMenu += ' new-year'; 
                     break; 
                case 7: 
                         seasonMenu += ' сhristmas'; 
                     break; 
             }; 
             sesonMenu += ' winter january'; 
             break; 
            case 1: 
             switch(currentDate){ 
                case 14: 
                         sesonMenu += ' valentines-day'; 
                     break; 
                case 23: 
                         sesonMenu += ' mens-day'; 
                     break; 
             }; 
             sesonMenu += ' winter february'; 
             break; 
           case 2: 
             switch(currentDate){ 
                case 8: 
                         sesonMenu += ' womens-day'; 
                     break; 
             }; 
             sesonMenu += ' spring march'; 
             break; 
           case 3: 
             sesonMenu += ' spring april'; 
             break; 
           case 4: 
             switch(currentDate){ 
                 case 1: 
                         sesonMenu += ' labor-day'; 
                     break; 
                 case 9: 
                         sesonMenu += ' great-victory-day'; 
                     break; 
             }; 
             sesonMenu += ' spring may'; 
             break; 
           case 5: 
             switch(currentDate){ 
                 case 1: 
                         sesonMenu += ' international-childrens-day'; 
                     break; 
             }; 
             sesonMenu += ' summer june'; 
             break; 
           case 6: 
             sesonMenu += ' summer jule'; 
             break; 
           case 7: 
             sesonMenu += ' summer august'; 
             break; 
           case 8: 
             sesonMenu += ' autumn september'; 
           break; 
           case 9: 
             sesonMenu += ' autumn october'; 
             break; 
           case 10: 
             sesonMenu += ' autumn november'; 
             break; 
         }; 
   
         sesonMenu += ' day'+currentDate; 
         sesonMenu += ' year'+currentYear; 
         sesonMenu += currentDayOfWeek; 
         sesonMenu += currentTime; 
         sesonMenu += ' hour'+currentHour; 
         sesonMenu += ' minutes'+currentMinutes; 
   
         document.body.className += sesonMenu; 
 }; 
 </script> 

   Добавляем эту функцию после тега <head> или в любое удобное место. И все.

   Примечание автора: для jQuery советую вам использовать jQuery(document).ready( function(){}) для вызова этой функции, а для mootools window.addEvent('domready', function(){});. Тогда ваше оформление будет применено сразу после получения html документа с сервера, но до его полной загрузки. Для посетителя применение оформления произойдет еще во время загрузки, а не после загрузки страницы полностью.

   После загрузки к тегу body добавляется соответствующий класс и применяется css оформление.

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

Какие классы оформления предлагает данная функция setClassOfTime?

  • .winter, .spring, .summer, .autumn – классы оформления для времени года, соответственно для зимы, весны, лета и осени;
  • .day1 - .day31 – классы оформления для дней месяца с 1 по 31;
  • .year[ number] – класс оформления для текущего года, например .year2013;
  • .minutes1 – .minutes59 – класс оформления для каждой минуты с первой по 59 ю;
  • .january, .february, .march, .april, .may, .june, .jule, .august, .september, .october, .november, .december – классы оформления для января, февраля, марта, апреля, мая, июня, июля, августа, сентября, октября, ноября и декабря соответственно;
  • .monday,.tuesday, .wednesday, .thursday, .friday, .saturday., .sunday – классы оформления для понедельника, вторника, среды, четверга, пятницы, субботы, воскресенья соответственно;
  • .hour0 - .hour23 – классы оформления для каждого часа в сутках с 0 по 23 часа;
  • классы оформления для праздников:
    • .сhristmas – класс оформления под рождество (25 января, или 7 января);
    • .new-year – класс оформления под новый год;
    • .valentines- day – класс оформления на день Святого Валентина для (14 февраля);
    • .mens- day – класс оформления на День Советской Армии, День Защитника Отечества (мужской день) (23 февраля);
    • .womens- day – класс оформления на Международный Женский День (8 марта);
    • .labor- day – класс оформления на 1 мая (День Труда);
    • .great- victory- day – класс оформления на День Победы (9 мая);
    • .international- childrens- day – класс оформления на Международный День Детей (1 июня);
    • .morning, .day, .evening, .night – классы оформления для утра, дня, вечера и ночи соответственно.

   При помощи этого простого скрипта, и используя эти классы, Вы можете с легкостью «оживить» сайт практически в зависимости от времени года, или времени суток, от стрелки часов, и от минутной стрелки, в зависимости от дня месяца, года. Вы всегда сможете создать особое праздничное настроение для Вашего посетителя. А так как данные классы применяются к тегу body, вы можете переопределить любой другой класс в контексте документа и его поведение. Выше в иерархии dom только дерево корень дерева документа html.

   Во второй части статьи мы рассмотрим подробнее код функции, а также научимся добавлять собственные праздники в список классов тега body

Больше информации о веб технологиях можно узнать из нашего перечня всех статей на сайте:

Добавить комментарий


Яндекс.Метрика