Набор основных используемых скриптов на сайте
Не большая сборка скриптов, для работы сайта. Все взято с просторов интернета, нет общего источника. Что-то там, что-то тут..
$(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(); // скрываем его
}
});
Комментарии ()