Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 23.04.2020, 17:09
Профессор
Отправить личное сообщение для Янковиц Посмотреть профиль Найти все сообщения от Янковиц
 
Регистрация: 17.11.2014
Сообщений: 403

Что не так с плагином
Учусь писать свои плагины для Jquery. В частности слайдер. Вот что пока есть:
(function($){
		// настройки со значением по умолчанию
		var defaults = { speed: 500 };

		// наши будущие публичные методы
		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;
					$(document)
						.on('click', '*[data-direction]', function(e){
							e.preventDefault();
							methods.move( this, $(this).data('direction'), options );
						});
				}
				return this;
			},
			// контейнер со слайдами
			move: function( slider, direction, options ) {
				var slider = $(slider),
					block  = slider.find('*[data-element="box"]'),
					items  = block.children(),
					first  = items.eq(0);
					last   = items.eq(-1);
					
				console.log( methods.init );
				
				if( first.is( ':animated' ) ) {
					return;
				}
				items.stop(true, true);
				
				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);
				}
			},
		};

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


Застопорился в методе move. Я пытаюсь обратиться к родительскому блоку .glider, который заявлен в $('.glider').sSlider(); Но в методе move: function( slider, direction, options ), параметре slider какая-то дичь. Я не могу получить к нему доступ, чтобы обратиться к дочерним. Надеюсь на любую помощь.

Последний раз редактировалось Янковиц, 23.04.2020 в 17:11.
Ответить с цитированием
  #2 (permalink)  
Старый 23.04.2020, 17:49
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

Янковиц,
строка 23
methods.move( this slider, $(this).data('direction'), options );
Ответить с цитированием
  #3 (permalink)  
Старый 23.04.2020, 18:16
Профессор
Отправить личное сообщение для Янковиц Посмотреть профиль Найти все сообщения от Янковиц
 
Регистрация: 17.11.2014
Сообщений: 403

Тот же самый результат. В строках 30 и 31, результат null
(function($){
	// настройки со значением по умолчанию
	var defaults = { speed: 500 };

	// наши будущие публичные методы
	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;
				$(document)
					.on('click', '*[data-direction]', function(e){
						e.preventDefault();
						methods.move( slider, $(this).data('direction'), options );
					});
			}
			return this;
		},
		// двигаем слайдер
		move: function( slider, direction, options ) {
			console.log( $(slider).width() );
			console.log( slider.width() );
			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);
			
			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);
			}
		},
	};

	$.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);
$('.glider').sSlider();
Ответить с цитированием
  #4 (permalink)  
Старый 23.04.2020, 18:33
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

Янковиц,
вы строку 19 проверьте, что там у вас
Ответить с цитированием
  #5 (permalink)  
Старый 23.04.2020, 18:36
Профессор
Отправить личное сообщение для Янковиц Посмотреть профиль Найти все сообщения от Янковиц
 
Регистрация: 17.11.2014
Сообщений: 403

n.fn.init [prevObject: n.fn.init(1), context: document, selector: ".glider"]
length: 0
prevObject: n.fn.init [document, context: document]
context: documentDOMStringList, origin: "file://", protocol: "file:", host: "", …}
implementation: DOMImplementation {}
compatMode: "CSS1Compat"
characterSet: "UTF-8"
charset: "UTF-8"
inputEncoding: "UTF-8"
contentType: "text/html"
doctype: html
documentElement: html
xmlEncoding: null
xmlVersion: null
xmlStandalone: false
domain: ""
referrer: ""
cookie: ""
lastModified: "04/23/2020 18:44:47"
readyState: "complete"
title: "CodePen - Just another CSS UI"
dir: ""
body: body
head: head
images: HTMLCollection(5) [img, img, img, img, img]
embeds: HTMLCollection []
plugins: HTMLCollection []
links: HTMLCollection(13) [a, a, a, a, a, a, a, a, a, a, a, a, a]
forms: HTMLCollection []
scripts: HTMLCollection(2) [script, script]
currentScript: null
defaultView: Window {parent: Window, opener: null, top: Window, length: 0, frames: Window, …}
designMode: "off"
onreadystatechange: null
anchors: HTMLCollection []
applets: HTMLCollection []
fgColor: ""
linkColor: ""
vlinkColor: ""
alinkColor: ""
bgColor: ""
all: HTMLAllCollection(131) [html, head, meta, title, script, link#daria-css, script, body, div.glider.container, div.glider__post.padt, div.glider__post_count, div.glider__share, div.slider__share_item.facebook, div.slider__share_item.twitter, div.slider__share_item.pinterest, div.slider__share_item.vk, img, div.glider__post_item, img, div.glider__post_data, h2, a, p, div.glider__arrow, span.glider__arrow_prev, svg, path, span.glider__arrow_next, svg, path, div.glider__box.padt, div.glider__box_item, div.block_title, h2.padr, img, span.block_title_all.padl, a, svg, path, span, div.glider__item, div.post__data, span.post__data_item, i.date, span.post__data_item, i.views, h2, a, div.glider__item, div.post__data, span.post__data_item, i.date, span.post__data_item, i.views, h2, a, div.glider__item, div.post__data, span.post__data_item, i.date, span.post__data_item, i.views, h2, a, div.glider__box_item, div.block_title, h2.padr, img, span.block_title_all.padl, a, svg, path, span, div.glider__item, div.post__data, span.post__data_item, i.date, span.post__data_item, i.views, h2, a, div.glider__item, div.post__data, span.post__data_item, i.date, span.post__data_item, i.views, h2, a, div.glider__item, div.post__data, span.post__data_item, i.date, span.post__data_item, i.views, h2, a, div.glider__box_item, div.block_title, h2.padr, …]
scrollingElement: html
onpointerlockchange: null
onpointerlockerror: null
hidden: false
visibilityState: "visible"
wasDiscarded: false
webkitVisibilityState: "visible"
webkitHidden: false
onbeforecopy: null
onbeforecut: null
onbeforepaste: null
onfreeze: null
onresume: null
onsearch: null
onsecuritypolicyviolation: null
onvisibilitychange: null
fonts: FontFaceSet {onloading: null, onloadingdone: null, onloadingerror: null, ready: Promise, status: "loaded", …}
oncopy: null
oncut: null
onpaste: null
activeElement: body
styleSheets: StyleSheetList {0: CSSStyleSheet, 1: CSSStyleSheet, length: 2}
pointerLockElement: null
fullscreenElement: null
adoptedStyleSheets: []
onabort: null
onblur: null
oncancel: null
oncanplay: null
oncanplaythrough: null
onchange: null
onclick: null
onclose: null
oncontextmenu: null
oncuechange: null
ondblclick: null
ondrag: null
ondragend: null
ondragenter: null
ondragleave: null
ondragover: null
ondragstart: null
ondrop: null
ondurationchange: null
onemptied: null
onended: null
onerror: null
onfocus: null
onformdata: null
oninput: null
oninvalid: null
onkeydown: null
onkeypress: null
onkeyup: null
onload: null
onloadeddata: null
onloadedmetadata: null
onloadstart: null
onmousedown: null
onmouseenter: null
onmouseleave: null
onmousemove: null
onmouseout: null
onmouseover: null
onmouseup: null
onmousewheel: null
onoperadetachedviewchange: null
onoperadetachedviewcontrol: null
onpause: null
onplay: null
onplaying: null
onprogress: null
onratechange: null
onreset: null
onresize: null
onscroll: null
onseeked: null
onseeking: null
onselect: null
onstalled: null
onsubmit: null
onsuspend: null
ontimeupdate: null
ontoggle: null
onvolumechange: null
onwaiting: null
onwheel: null
onauxclick: null
ongotpointercapture: null
onlostpointercapture: null
onpointerdown: null
onpointermove: null
onpointerup: null
onpointercancel: null
onpointerover: null
onpointerout: null
onpointerenter: null
onpointerleave: null
onselectstart: null
onselectionchange: null
onanimationend: null
onanimationiteration: null
onanimationstart: null
ontransitionend: null
children: HTMLCollection [html]
firstElementChild: html
lastElementChild: html
childElementCount: 1
fullscreenEnabled: true
fullscreen: false
onfullscreenchange: null
onfullscreenerror: null
webkitIsFullScreen: false
webkitCurrentFullScreenElement: null
webkitFullscreenEnabled: true
webkitFullscreenElement: null
onwebkitfullscreenchange: null
onwebkitfullscreenerror: null
rootElement: null
featurePolicy: FeaturePolicy {}
onpointerrawupdate: null
pictureInPictureElement: null
pictureInPictureEnabled: true
nodeType: 9
nodeName: "#document"
isConnected: true
ownerDocument: null
parentNode: null
parentElement: null
childNodes: NodeList(2) [html, html]
firstChild: html
lastChild: html
previousSibling: null
nextSibling: null
nodeValue: null
textContent: null
Ответить с цитированием
  #6 (permalink)  
Старый 23.04.2020, 18:36
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

Янковиц,
и лучше не загадка из куска кода, а минимальный макет, пусть и не рабочий.
Ответить с цитированием
  #7 (permalink)  
Старый 23.04.2020, 18:37
Профессор
Отправить личное сообщение для Янковиц Посмотреть профиль Найти все сообщения от Янковиц
 
Регистрация: 17.11.2014
Сообщений: 403

То есть, как я понимаю, всё null
Это 19 строка
Ответить с цитированием
  #8 (permalink)  
Старый 23.04.2020, 18:42
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

Янковиц,
попробуйте так
$(function() {
$('.glider').sSlider();

});
Ответить с цитированием
  #9 (permalink)  
Старый 23.04.2020, 18:48
Профессор
Отправить личное сообщение для Янковиц Посмотреть профиль Найти все сообщения от Янковиц
 
Регистрация: 17.11.2014
Сообщений: 403

Заработало!
Ответить с цитированием
  #10 (permalink)  
Старый 23.04.2020, 18:48
Профессор
Отправить личное сообщение для Янковиц Посмотреть профиль Найти все сообщения от Янковиц
 
Регистрация: 17.11.2014
Сообщений: 403

Интересно, в чём причина?
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Не работает if(true){}, что не так? switch001 Javascript под браузер 5 09.08.2013 10:17
Баги Opera пишем сюда devote Оффтопик 101 08.08.2013 05:56
Извините что создаю еще одну тему, но мне нужна помощь и ваше мнение megaupload Оффтопик 11 27.05.2013 12:58
Посоветуйте новику, что я делаю не так danil-n2 Общие вопросы Javascript 5 26.04.2013 21:22
http://gigalit.info - Мои контакты Маэстро Ваши сайты и скрипты 70 08.12.2011 03:12