Category Archives: JS

Собрать с страницы все input и вывести ключ/значение

// Получаем все элементы input на странице
var inputs = document.querySelectorAll('input');

// Создаем объект для хранения данных с использованием reduce
var inputData = Array.from(inputs).reduce(function(acc, input) {
  acc[input.name] = input.value;
  return acc;
}, {});

// Выводим объект с данными в консоль
console.log(inputData);

// Получаем все элементы input на странице

var inputs = document.querySelectorAll('input');

// Создаем объект для хранения данных с использованием reduce

var inputData = Array.from(inputs).reduce(function(acc, input) {

acc[input.name] = input.value;

return acc;

}, {});

// Выводим объект с данными в консоль

console.log(inputData);

JavaScript печать элемента на странице

Для вызова печати контента средствами JS реализуем такую функцию:

function printElement(selector) {
    const WinPrint = window.open('','','left=50,top=50,width=800,height=640,toolbar=0,scrollbars=1,status=1');
    WinPrint.document.write('');
    WinPrint.document.write(prtContent.innerHTML);
    WinPrint.document.write('');
    WinPrint.document.close();
    WinPrint.focus();
    WinPrint.print();
}

function printElement(selector) {

const WinPrint = window.open('','','left=50,top=50,width=800,height=640,toolbar=0,scrollbars=1,status=1');

WinPrint.document.write('');

WinPrint.document.write(prtContent.innerHTML);

WinPrint.document.write('');

WinPrint.document.close();

WinPrint.focus();

WinPrint.print();

}

И вызовем ее:

printElement(document.querySelector('.qr-code-view-page .area-qr-code'));

1	printElement(document.querySelector('.qr-code-view-page .area-qr-code'));

JavaScript поиск массива в массиве

Дано: Фильтр по услугам: клейка обоев, выравнивание полов, покраска стен. Список работников, работник может делать что-то одно или несколько услуг. Фильтр (множество чекбоксов) Результаты (множество) Нужно вывести работников которые соответствуют хотя бы одному из фильтров по услугам. Представим что в фильтре выбраны некие услуги [1,2,3,5,6] Трансформации массива map

// вернет [true, undefined, undefined, undefined, undefined]
[1,2,3,5,6].map(function (element) {
	if ([1,10].indexOf(element) !== -1) {
		return true;
	}
});

// вернет [true, undefined, undefined, undefined, undefined]

[1,2,3,5,6].map(function (element) {

if ([1,10].indexOf(element) !== -1) {

return true;

}

});

// вернет [undefined, undefined, undefined, undefined, undefined]
[1,2,3,5,6].map(function (element) {
	if ([21,10].indexOf(element) !== -1) {
		return true;
	}
});

// вернет [undefined, undefined, undefined, undefined, undefined]

[1,2,3,5,6].map(function (element) {

if ([21,10].indexOf(element) !== -1) {

return true;

}

});

findIndex Вернет индекс из… Read More »

Js пример класса для slick Slider

Js ООП Class Slick slider

class SlickSlider {
    constructor(id, countShow, countScroll, idArrows, idDots) {
        this.elem = id;
        this.slidesToShow = countShow;
        this.slidesToScroll = countScroll;
        this.appendArrows = $(idArrows);
        this.appendDots = $(idDots);
        this.responsives = [];
    }

    get initSlider() {
        return this.init();
    }

    init() {
        let options = this.slider();
        if (this.responsives) {
            options.responsive = this.responsives;
        }
        $(this.elem).slick(options);
    }
    slider() {
        return {
            slidesToShow: this.slidesToShow,
            slidesToScroll: this.slidesToScroll,
            dots: true,
            appendArrows: this.appendArrows,
            appendDots: this.appendDots,
            touchThreshold: 10
        }
    }
    addResponsive(weight, mobileShow, mobileScroll) {
        let obj =  {
            breakpoint: weight,
            settings: {
                slidesToShow: mobileShow,
                slidesToScroll: mobileScroll
            }
        };

        this.responsives.push(obj);
    }
}

let slider = new SlickSlider('.slider-item-four', 4, 1, '.slider-control-four', '.slider-control-four .slider-dots');

slider.addResponsive(1680,3,1);
slider.addResponsive(1580, 2, 1);

slider.initSlider;

class SlickSlider {

constructor(id, countShow, countScroll, idArrows, idDots) {

this.elem = id;

this.slidesToShow = countShow;

this.slidesToScroll = countScroll;

this.appendArrows = $(idArrows);

this.appendDots = $(idDots);

this.responsives = [];

}

get initSlider() {

return this.init();

}

init() {

let options = this.slider();

if (this.responsives) {

options.responsive = this.responsives;

}

$(this.elem).slick(options);

}

slider() {

return {

slidesToShow: this.slidesToShow,

slidesToScroll: this.slidesToScroll,

dots: true,

appendArrows: this.appendArrows,

appendDots: this.appendDots,

touchThreshold: 10

}

addResponsive(weight, mobileShow, mobileScroll) {

let obj = {

breakpoint: weight,

settings: {

slidesToShow: mobileShow,

slidesToScroll: mobileScroll

}

};

this.responsives.push(obj);

}

let slider = new SlickSlider('.slider-item-four', 4, 1, '.slider-control-four', '.slider-control-four .slider-dots');

slider.addResponsive(1680,3,1);

slider.addResponsive(1580, 2, 1);

slider.initSlider;

jQuery check init plugin for element

Проверка плагина примененного к элементу jQuery

$('.catalog_filter_list:data(flickity)')

1	$('.catalog_filter_list:data(flickity)')

Нужно применить атрибут

$('ELEMENT:data(ПЛАГИН)')

1	$('ELEMENT:data(ПЛАГИН)')

pjax reload containter

$.pjax.reload({container: '#pjax-shops-list', timeout: 5000, data: {city:id}, replace:false});

1	$.pjax.reload({container: '#pjax-shops-list', timeout: 5000, data: {city:id}, replace:false});

Jquery no submit input key enter

Запретить отправку формы при нажатие на Enter в input можно следующим способом:

$('#formID').on('keyup keypress', function(e) {
    let keyCode = e.keyCode || e.which;
    if (keyCode === 13) {
        e.preventDefault();
        return false;
    }
});

$('#formID').on('keyup keypress', function(e) {

let keyCode = e.keyCode || e.which;

if (keyCode === 13) {

e.preventDefault();

return false;

}

});

Lazy load images/Отложенная загрузка картинок

let images = $('div.images img')
$.each(images, function( i, img ){
    let src = $(img).data('src');

    // check if img set
    if(src.length == 0){
        return;
    }

    // show image
    $(img).attr('src', src);

});

let images = $('div.images img')

$.each(images, function( i, img ){

let src = $(img).data('src');

// check if img set

if(src.length == 0){

return;

}

// show image

$(img).attr('src', src);

});

example

function lazyLoaderReady() {
    let banners = $('.slider_banner .slider_banner_item a img[data-src]');
    if (banners.length !== 0) {
        lazyShowImages(banners);
    }

    let slidersWithProducts = $('.itemSlider div li a .itemImg img[data-src]');
    if (slidersWithProducts.length !== 0) {
        lazyShowImages(slidersWithProducts);
    }
}
lazyLoaderReady();

function itemsInCategory() {
    let products = $('#products-list-view .items .item li a .itemImg img[data-src]');
    if (products.length > 0) {
        lazyShowImages(products);
    }
}

function lazyShowImages(images) {
    $.each(images, function( i, img ){
        let src = $(img).data('src');
        console.log(src);
        console.log($(img).attr('data-src'));
        // check if img set
        if (src) {
            if (src.length === 0) {
                return;
            }

            $(img).fadeTo(500,0.30, function() {
                $(img).attr("src", src);
            }).fadeTo(500,1);
            $(img).attr('data-src', null);
        }
    });
}

function lazyLoaderReady() {

let banners = $('.slider_banner .slider_banner_item a img[data-src]');

if (banners.length !== 0) {

lazyShowImages(banners);

}

let slidersWithProducts = $('.itemSlider div li a .itemImg img[data-src]');

if (slidersWithProducts.length !== 0) {

lazyShowImages(slidersWithProducts);

}

lazyLoaderReady();

function itemsInCategory() {

let products = $('#products-list-view .items .item li a .itemImg img[data-src]');

if (products.length > 0) {

lazyShowImages(products);

}

function lazyShowImages(images) {

$.each(images, function( i, img ){

let src = $(img).data('src');

console.log(src);

console.log($(img).attr('data-src'));

// check if img set

if (src) {

if (src.length === 0) {

return;

}

$(img).fadeTo(500,0.30, function() {

$(img).attr("src", src);

}).fadeTo(500,1);

$(img).attr('data-src', null);

}

});

}

Yii2 прелоудер/preloader для формы

$('#auth-form').on('ajaxBeforeSend', function (event, jqXHR, settings) {
    $('section.authForm .loader').show();
}).on('ajaxComplete', function (event, jqXHR, textStatus) {
    $('section.authForm .loader').hide();
});

$('#auth-form').on('ajaxBeforeSend', function (event, jqXHR, settings) {

$('section.authForm .loader').show();

}).on('ajaxComplete', function (event, jqXHR, textStatus) {

$('section.authForm .loader').hide();

});

Добавление картинки при загрузке JS предпросмотр

function readURL(input) {

    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#image').attr('src', e.target.result);
        };

        reader.readAsDataURL(input.files[0]);
    }
}

$("#imgInput").change(function(){
    readURL(this);
});

//http://jsfiddle.net/YJG79/16/

function readURL(input) {

if (input.files && input.files[0]) {

var reader = new FileReader();

reader.onload = function (e) {

$('#image').attr('src', e.target.result);

};

reader.readAsDataURL(input.files[0]);

}

$("#imgInput").change(function(){

readURL(this);

});

//http://jsfiddle.net/YJG79/16/