Календарь приёма объявлений
Небольшой пример из повседневной практики. Организация меняет реквизиты, и они вступят в силу через пару недель. На сайте идет приём объявлений и объявления принимаются на несколько месяцев в перед, в нашем случаи нельзя допустить несколько факторов: принимать объявления на ближайшие месяцы со старыми реквизитам, ограничить прием на ближайшие месяцы, другими словами этот процесс остановить нельзя.
Что мы делаем на примере календаря. У нас есть два месяца действующий и следующий, ближайший.
Ряд нового функционала:
при выборе дня в действующем месяце, скрыть доступные дни в следующем месяце.
при выборе дня с ближайшем месяце скрыть дни в действующем
запустить пересчет стоимости объявления
Начнем работать, просмотрев код видим что дни лежат в элементах имеющих класс date, а элемент содержащий в себе дни месяца имеет класс month. Так как нам было бы удобнее если у каждого месяца был свой уникальный класс, добавляем в код генерации календаря номер месяца в году month_12 это январь. Конечно можно и пойти другими путями.
Теперь мы можем отслеживать что новые клики по дням в каждом месяце, переходим к созданию обработчиков, глубоко зарываться не станем, тут важна сама простоя логика для данного хака.
Создадим две jquery функции, первая отслеживает нажатие дня в действующем месяце, вторая в ближайшем, в нашем примере это декабрь 2013 и январь 2014.
//нажали на декабре$(".month_12 .date").live("click", function() {alert('убираем все январь');});//нажали на январе$(".month_1 .date").live("click", function() {alert('убираем все декабрь');});
При клике следует заменять ячейки активные на неактивные в противоположном месяце, тут нужно чуточку подверстать. Ячейка в календаре дающая возможность выбора содержит вот такой html код:
<div class="free_smi"><a class="niceCheck"><div class="date">22</div><input type="checkbox" name="month[]" value="1-22-2014-2043" class="info_chek number_week_04" week="04"></a></div>
А нам надо его привести у виду : <div class="no_smi"> <div class="date"> 22 </div> </div>. Как поступить ну первое что приходит в голову это скрыть весь этот код через hide() и добавить выше него <div class="no_smi"> <div class="date"> 22 </div> </div>с каким то новым атрибутом class, для того чтобы потом быстро его выловить и применить наши действия, получится такой код <div class="no_smi noVigodNomer"> <div class="date"> 22 </div> </div>. Добавленный класс имеет имя noVigodNomer ,которое не использовалось раньше в календаре, чтобы не было конфликта имен.
Первый код у нас получается такой, нажимаем на день выхода в январе и запускаем обработку нажатия. Обходим все выходы в календаре на январь, он тут имеет класс month_1, вставляем выше кода активного выхода наш код с неактивным выходом, а активных код делаем невидимым, обратите внимание, что не удаляем его.
Результат на скриншоте ниже.
$(".month_12 .free_smi .niceCheck .date").live("click", function() {// alert('убираем все январь');var monHideVihod = obhodMont('.month_1');if (monHideVihod == 0) {$('.month_1 .free_smi').each(function(i, elem) { //делаю обход и заменю все выходы на обычные дниvar dateFreeVihod = $(this, $('.date')).text();$(this).before('<div class="no_smi noVigodNomer" ><div class="date">' + dateFreeVihod + '</div></div>');//новый код$(elem).hide();//скрывю что выходы активные});} else {// alert(monHideVihod + ' \n уже скрыты все выходы \n в это месяце');}});
Та как дней у нас может быть несколько нам нужно обойти все эти дни применяем для этого each которая даст возможность подсчитать количество активных дней для приема объявлений. Стоит учесть два момента, если мы нажали на отмену в декабре необходимо сделать проверку на количество выбранных дней в выбранном месяце, если их больше нуля нам необходимо отобразить активные выходы в январе, и также для января. Функция monHideVihod будет искать выходы в не активном месяце, функция myCountVihod будет искать в активном используется в отслеживании клика по уже скрытым дням.
//нажали на уже выбранный день$(".month_12 .free_smi_checked .niceCheck").live("click", function() {// alert('нажали на уже выбранный день');var myCountVihod = obhodMontMyVihod('.month_12');if (myCountVihod == 0) { // alert(myCountVihod + ' дней возвращаем');$('.month_1 .noVigodNomer').each(function(i, elem) {var dateFreeVihod = $(this, $('.date')).text();$(this).next().show();$(elem).remove();//удалем до этого созданный нами блок});} else {// alert(myCountVihod + '\n еще есть выходы \n в этом месяце');}});
Ну вот в общем то и получилась игрушка позволяющая скрывать противоположный месяц при подаче объявлений и возвращать его если клиент передумал, и решил подать на январь.
Календарь приёма объявлений - Генератор расширений Joomla и многое другое на нашем сайте посвященном работе расширений, компонентов, модулей, плагинов для линейки Joomla. Отправляйте ссылку на страницу своим друзьям и в социальные сети воспользовавшись графическими иконками выше.
