Набор основных используемых скриптов на сайте
Не большая сборка скриптов, для работы сайта. Все взято с просторов интернета, нет общего источника. Что-то там, что-то тут..
$(document).ready(function () {
Задается маска тедефона всем input на сайте с типом tel
Для работы необходим скрипт jquery.maskedinput.min.js
$('input[type=tel]').mask('+7 (999) 999-99-99');
В статьях часто используются картинки и необходимо их увеличивать при клике на них. Можно добавить новый класс fullscreen
$('.content-text>img:not(.fullscreen), .content-text p>img:not(.fullscreen), .fullscreen').click(function(){ $.fancybox.open([{src:$(this).attr('src')}],{"padding":"0"}); });
Для слайдов на страницах хорош в использованиии slick позволяет реализовать большинство необходимых задач
Настройки сладера
$('.main-about_slider').slick({ dots: true, //включаем точки arrows:false, // отключаем стрелки infinite: true, //прогоняем по кругу speed: 300, //скорость прокрутки fade:true, //режим затухания slidesToShow: 1, //показывать слайдов autoplay: true, //авто запуск autoplaySpeed: 2000, // через сколько начала запуска dotsClass:'about-dots', // класс обертки точек });
$('.constr-slider').slick({ dots: true, arrows:true, //включаем стрелки infinite: true, speed: 300, slidesToShow: 4, autoplay: false, dotsClass:'constr-dots', prevArrow:'<button type="button" class="constr-prev fas fa-arrow-left"></button>', //задаем стрелочки назад и следующий nextArrow:'<button type="button" class="constr-next fas fa-arrow-right"></button>', responsive:[ {breakpoint:1100, settings: { slidesToShow:3, // уменьшаем количество слайдов, адаптив } }, {breakpoint:800, settings: { slidesToShow: 2, } }, {breakpoint: 500, settings: { slidesToShow: 1, } } ] });
получаем значения слайдов
$('.constr-slider').on('beforeChange', function(event, slick, currentSlide, nextSlide){ console.log(currentSlide+'--'+nextSlide+'--'+slick.slideCount ); });
получение слайдера с выводом количества слайдов и номера текущего слайда
$('.homes-slides').on('init reInit', function(event, slick) { $(this).parent().find('.homes-counter').html(1 + '/<span>' + slick.slideCount+'</span>'); }); $('.homes-slides').slick({ dots: false, arrows:true, infinite: true, speed: 300, slidesToShow: 1, autoplay: false, dotsClass:'homes-dots', prevArrow:'<button type="button" class="homes-prev fal fa-long-arrow-left"></button>', nextArrow:'<button type="button" class="homes-next fal fa-long-arrow-right"></button>', }); $('.homes-slides').on('init reInit afterChange', function(event, slick, currentSlide, nextSlide) { let i = (currentSlide ? currentSlide : 0) + 1; $(this).parent().find('.homes-counter').html(i + '/<span>' + slick.slideCount+'</span>'); })
табы на странице
$('.header-tab>li').on('click', function(e){ e.preventDefault(); $('.header-tab>li.active').removeClass('active'); $('.tab-content>.active').removeClass('active'); $(this).addClass('active'); $('.tab-content>.tab-'+$(this).data('tab')).addClass('active'); });
табы на странице, разметка
<ul class="header-tab"> <li class="active" data-tab="1">Описание товара <li data-tab="2">Характеристики </ul> <div class="tab-content"> <div class="tab-1 active"> </div> <div class="tab-2"> </div> </div>
аккардеон, если надо
$('.akkord-header').on('click', function(){ if ($(this).hasClass('active')){ $(this).removeClass('active'); $(this).parent('.akkord-item').children('.akkord-content').slideUp('slow'); }else{ $('.akkord-header').removeClass('active'); $('.akkord-content').slideUp('slow'); $(this).addClass('active'); $(this).parent('.akkord-item').children('.akkord-content').slideDown('slow'); } });
бутерброд меню
$('.navbar-toggle').click(function(){ $('.menu').slideToggle( "slow", function() { if($(this).css('display') === 'none'){ $(this).removeAttr('style'); } }); $(this).toggleClass('active'); });
модальное(попав) окно fancybox, с функцией передачи параметров и скрытия полей
$('.callback').fancybox({ afterLoad: function(instance, slide) { var title = slide.opts.$orig.data('title'); var hide = slide.opts.$orig.data('hide'); var mess = slide.opts.$orig.data('page'); if (title) { $('#modal_title').text(title); }else{ $('#modal_title').text('Оставте заявку'); } $('.ajax-form .form-control').show(); // console.log(hide); if (hide) { var h=hide.split(','); $.each(h,function(i,elem){ $('#'+ $.trim(elem)).hide(); }); } if (mess){ $('#mess').text(mess); }else{ $('#mess').text(''); } } });
Примерный вид кнопки вызова модального окна
<a href="#callback" class="btn btn-secondary callback"
data-title="Заказать звонок"
data-hide="mess,email"
data-page="Текст какой-то, любой">
Заказать звонок</a>
включаем кнопку Наверх и Фиксированное меню
$(document).on("scroll", function() { if ($(document).scrollTop() > 200) { //$("#top-menu").addClass("active"); $("#top").addClass("active"); } else { //$("#top-menu").removeClass("active"); $("#top").removeClass("active"); } });
скролл на верх по кнопке Наверх
$("#top").on('click', function(e) { // prevent default anchor click behavior e.preventDefault(); // animate $('html, body').animate({ scrollTop: $('#header').offset().top }, 1100, function() { // when done, add hash to url // (default click behaviour) //window.location.hash = this.hash; }); });
много уровневое меню, для ПК и Мобилок, не идеал, но хоть так
function click_hover(){ var ww = document.body.clientWidth; if (ww > 1200) { $('.drop-menu').hover(function(){ $(this).children('.sub-menu').slideDown( "fast");}, function(){ $(this).children('.sub-menu').slideUp('fast', function(){$(this).stop(true);}); } ); } else { $('.drop-menu>span, .drop-menu>a').click(function(e){ e.preventDefault(); if ($(this).parent().children('.sub-menu').is(':visible')){ $(this).parent().children('.sub-menu').slideUp("fast", function() { if($(this).css('display') === 'none'){ $(this).removeAttr('style'); } }); }else{ $(this).parent().parent().find('.menu-down').children('.sub-menu').slideUp("fast"); $('.drop-menu').removeClass('menu-down'); $(this).parent().children('.sub-menu').slideDown( "fast"); } $(this).parent().toggleClass('menu-down'); }); } }; /*запуск фукции меню*/ click_hover(); /* варианты перезапуска меню, при изменении Экрана*/ // Listen for resize changes /* window.addEventListener("resize", function() { // Get screen size (inner/outerWidth, inner/outerHeight) cat_drown(); //click_hover(); }, false);*/ // Listen for orientation changes window.addEventListener("orientationchange", function() { // Announce the new orientation number click_hover(); }, false);
});
отключаем сообщения об успешной отправке Обратной связи
$(document).ready(function() { // Removing AjaxForm success message if (typeof(AjaxForm) != 'undefined') { AjaxForm.Message.success = function() {}; } }); /*выводим свое сообщения об успешной отправке Обратной связи*/ // Show AjaxForm success message in modal $(document).on('af_complete', function(event, response) { var form = response.form; if (response.success) { $.fancybox.close(); $.fancybox.open('<div class="modal" id="popup-call"><div class="popup-title">' + response.message + '</div></div>',[{ opts : { afterShow : setTimeout(function(){$.fancybox.close()}, 2000) } }]); } });
Запуск функций после обновления списка фильтрации плагином mSearch2
$(document).on('mse2_load', function(e, data) { //console.log(e, data); homes_slides(); callback(); });
Изменяем итоговую сумму в строке корзины miniShop
<td class="count"> <form method="post" class="ms2_form form-inline" role="form"> <input type="hidden" name="key" value="{$product.key}"/> <div class="form-group"> <input type="number" name="count" value="{$product.count}" class="input-sm form-control"/> <button class="btn btn-default" type="submit" name="ms2_action" value="cart/change"></button> </div> </form> </td> <td> {set $itog = $product.price|replace:" ":"" * $product.count} <span class="cart-sum rub">{$itog}</span> </td>
$(document).ready(function () { miniShop2.Callbacks.add('Cart.change.response.success', 'cart_change_ok', function(response) { $('#'+response.data.key+' .cart-sum').text($('#'+response.data.key+' input[name="count"]').val()*$('#'+response.data.key+' .cart-val').text().replace(' ','')); }); });
Скрывать окно при клике вне его
$(document).mouseup(function (e){ // событие клика по веб-документу var div = $(".city_key"); // тут указываем ID элемента if (!div.is(e.target) // если клик был не по нашему блоку && div.has(e.target).length === 0) { // и не по его дочерним элементам div.hide(); // скрываем его } });
Комментарии ()