Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Что не так с плагином (https://javascript.ru/forum/dom-window/80072-chto-ne-tak-s-plaginom.html)

рони 23.04.2020 18:55

Цитата:

Сообщение от Янковиц
Интересно, в чём причина?

на момент установки плагина
на странице ещё не было элемента, jquery продолжает работать, кто - то считает что это минус jquery, и всё должно было рухнуть , кто - то что это плюс что ничего не случилось. :)

Янковиц 27.04.2020 16:57

Небольшое дополнение. Добавил в плагин callback функции moveStart и moveEnd.
(function($){
	// настройки со значением по умолчанию
	var defaults = {
		speed: 500,
		moveStart: function() {},
		moveEnd: function() {},
	};

	// наши будущие публичные методы
	var methods = {
		xDown: null,                                                        
		yDown: null,
		// инициализация плагина
		init: function( options, args ) {
			// настройки, будут индивидуальными при каждом запуске
			var options = $.extend({}, defaults, options);				
			// инициализируем лишь единожды
			if (!this.data('sSlider')) {
			
				this.data('sSlider', options);
				
				// добавим событий
				var slider      = this,
					child_class = slider.find('*[data-element="box"]').children().eq(0).attr('class');
					
				$(document)
					.on('mousedown touchend', '*[data-direction]', function(e){
						methods.move( slider, $(this).data('direction'), options );
					})
			}
			return this;
		},
		// двигаем слайдер
		move: function( slider, direction, options ) {
			var block  = slider.find('*[data-element="box"]'),
				items  = block.children(),
				first  = items.eq(0),
				last   = items.eq(-1);
			
			if( first.is( ':animated' ) ) {
				return;
			}
			items.stop(true, true);
			
			options.moveStart.call( slider, direction );
			
			if ( direction === 'prev' ) {	
				first.animate({
					marginLeft: 0 - first.outerWidth()
				}, options.speed, function() {
					first.css('margin-left', 0)
						.appendTo( first.parent() );
				});
			} else {
				last.prependTo(last.parent())
					.css('margin-left','-'+last.outerWidth()+'px')
						.animate({marginLeft:0}, options.speed);
			}
			
			setTimeout(function () {
				options.moveEnd.call( slider, direction );
			}, options.speed);
		},
	};

	$.fn.sSlider = function(method){
		if ( methods[method] ) {
			// если запрашиваемый метод существует, мы его вызываем
			// все параметры, кроме имени метода прийдут в метод
			// this так же перекочует в метод
			return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
		} else if ( typeof method === 'object' || ! method ) {
			// если первым параметром идет объект, либо совсем пусто
			// выполняем метод init
			return methods.init.apply( this, arguments );
		} else {
			// если ничего не получилось
			$.error('Method "' + method + '" not found');
		}
	};
})(jQuery);

Затем вызываю слайдер:

$(function() {
		$('.glider').sSlider({
			moveStart: function( slider, direction ) {
				console.log( slider );
				console.log( direction );
			},
		});
	});


При этом console.log из строки 04 показывает "prev" или "next", а в строке 05 "undefined". Хотя сначала я ожидал увидеть DOM элемент $('.glider'), а затем направление direction. Что я делаю не так?

рони 27.04.2020 17:22

Янковиц,
$(function() {
		$('.glider').sSlider({
			moveStart: function(direction ) {
				console.log( this );
				console.log( direction );
			},
		});
	});

рони 27.04.2020 17:25

Янковиц,
или так
options.moveStart.call( null  , slider, direction );

или так
options.moveStart.call( slider , slider, direction );

для moveStart: function( slider, direction )

рони 27.04.2020 17:29

Янковиц,
Метод call
func.call(context, arg1, arg2, ...) сначала идёт контекст (this), а потом уже аргументы.

Янковиц 27.04.2020 17:48

Спасибо большое

Янковиц 28.04.2020 17:27

Стало необходимо запускать процессы более 1 раза на странице. Я понимаю, что нужно использовать что-то вроде этого:
return this.each(function() {
                var $this = $(this);
            });

Но совершенно не знаю, в какой момент

рони 28.04.2020 17:32

Янковиц,
вместо строк 18 - 31

Янковиц 28.04.2020 17:37

На строку 20 ругается: index.html:20 Uncaught TypeError: this.data is not a function

рони 28.04.2020 17:43

Цитата:

Сообщение от Янковиц
this.data is not a function

Цитата:

Сообщение от Янковиц
var $this = $(this);

:-?


Часовой пояс GMT +3, время: 08:00.