Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.09.2014, 21:10
Аспирант
Отправить личное сообщение для serrrgggeee Посмотреть профиль Найти все сообщения от serrrgggeee
 
Регистрация: 15.08.2014
Сообщений: 46

объект document присваивается переменной
Здравствуйте есть такой код
(function($){
	$.fn.tm3DCircleCarousel = function(o){
		return this.each(function(){
			var $this = $(this),
				data =$this.data('tm3DCircleCarousel'),
				getObject = {
					container: 'body', // container of gallery
					transformClasses: '.scale100, .scale90, .scale80, .scale70, .scale60',
					clickableClasses: '.scale100',
					rightSideClass: '.rightSide', // class for right side items
					leftSideClass: '.leftSide',  // class for left side items
					cssProperty: 'marginLeft', // css property for changing (use marginTop, marginLeft, etc)
					itemOffset: 100, // offset of $items
					itemOffsetCenter: 0, // offset from center item 
					useCSS3Animation: true, // use css3 or jquery animation
					autoplay: {}, // autoplay parameters 
					reflections: {}, // reflections of images
					pagination: {}, // pagination for items
					next: '.nextButton', // next button selector
					prev: '.prevButton', // prev button selector
					onChange: function(element, middleIndex, length){}, // callback for on change images event 
					onInit: function(){}, // callback after initialization
					onUserActivate: function(){}, // callback: user do something (click or keyboard event)
					onShowActions: function(){}, // callback: gallery is activates
					onHideActions: function(){}, // callback: gallery is deactivates 
					constructor: function (params) {
						if ($this.length) {
							getObject.transformClasses = getObject.transformClasses.split(',');
							for (i=0;i<getObject.transformClasses.length;i++){
								getObject.transformClasses[i] = getObject.transformClasses[i].trim().substr(1);
							}
							getObject.clickableClasses = getObject.clickableClasses.split(',');
							for (i=0;i<getObject.clickableClasses.length;i++){
								getObject.clickableClasses[i] = getObject.clickableClasses[i].trim().substr(1);
							}						

							var $doc = $(document),
								$container = $this.parents(getObject.container),
								$items = $this.find('>li'), // items (li)
								$a = $items.find('>a'), // anchors of items
								length = $items.length, // length of $items
								itemsOrder = [], // order of $items
								middleIndex = Math.round(length *.5), // index of middle item, if $items 9, this index -- 5
								reflectionsDefaults = { // reflection defaults parameters
									enable: false,
									reflectionClass: '.reflection',
									startColor: 'rgba(0,0,0,1)',
									endColor: 'rgba(0,0,0,0.8)'
								},
								autoplayDefaults = { // autoplay defaults
									enable: false,
									timeout: 12000,
									id: 0
								},
								paginationDefaults = { // autoplay defaults
									enable: false,
									activeClass: '.active',
									paginationClass: '.pagination',
									$this: null,
									$li: null,
									$a: null
								},
								$prev = $(getObject.prev, $container[0]), // prevoius button
								$next = $(getObject.next, $container[0]), // next button
								galleryActive = false, // active status for gallery
								isFirstActionDone = false; // first user actions flag

					        init();
					    }

						function init(){
							// set length
							length = (length % 2 === 0) ? (length-1) : length;

							// hide last item, if length of $items is even
							($items.length > length) && ($items.eq(length).css('display','none'));

							// fill order items array
							for (var i=0;i<length;i++){
								itemsOrder.push(i);
							}

							// set reflections
							getObject.reflections = $.extend(reflectionsDefaults, o.reflections);
							getObject.reflections.enable&&createReflections();

							// set autoplay
							getObject.autoplay = $.extend(autoplayDefaults, o.autoplay);
							getObject.autoplay.enable&&stopAutoplay();

							// set order for items
							setOrder();

							// pagination 
							paginationInit();

							var autoplayEnable = getObject.autoplay.enable;
							// listeners
							$this
								.on({
									showGallery: function(e){
										if (!galleryActive){	
											getObject.onShowActions();	
											setListeners(galleryActive = true);
										}
									},
									hideGallery: function(e){
										if (galleryActive){	
											getObject.onHideActions();								
											getObject.autoPlayState = false;
											setListeners(galleryActive = false);
										}
									}})
								.trigger('showGallery')
								// .trigger('goto', '0')
								.on('firstAction', firstAction);

							// on keydown event, event always on 
							$doc.on('keydown', keyboardEvents);

							// check autoplay
							if (autoplayEnable) {
								getObject.autoplay.enable = true;
								startAutoplay();
							}
						}

						// on/off all listeners for plugin
						function setListeners(state){
							if (state) {
								$prev.on('click', clickPrev);
								$next.on('click', clickNext);
								$a.on('click', clickItem);
								$this.on({'go': go, 'goto': goTo});
								if ($.fn.swipe) {
									$this.swipe({
										swipeLeft:function(event, direction, distance, duration, fingerCount) {
											galleryActive&&clickNext();
										},
										swipeRight:function(event, direction, distance, duration, fingerCount) {
											galleryActive&&clickPrev();
										}
									});
								}
							} else {
								$prev.off('click', clickPrev);
								$next.off('click', clickNext);
								$a.off('click', clickItem);
								$this.off({'go': go, 'goto': goTo});
							}
						}

						function keyboardEvents(e){
							if (galleryActive) {
								switch (e.keyCode) {
									case 37: clickPrev(); break;	
									case 39: clickNext(); break;	
								}
							}
						}

						// set css rules for $items, one of main functions
						function setOrder() {
							// call method onChange for inner callback out of script
							getObject.onChange($items.eq(itemsOrder[middleIndex]), itemsOrder[middleIndex]===0 ? length : itemsOrder[middleIndex], length);

							getObject.pagination.enable&&paginationSet(itemsOrder[middleIndex]);

							for (var j=0; j<length; j++){
								var	i = itemsOrder[j],
								 	$this = $items.eq(i),
									img = $this.find('img'),
									w = img.width(),
									h = img.height(),
									diffIndex = j - (middleIndex-1),
									diffIndexAbs = Math.abs(j - (middleIndex-1)),
									newIndex = (diffIndex % middleIndex),
									prop = getObject.cssProperty,
									coeff = 0,
									classToAdd = '',
									cssProperties = {
										'width': w,
										'height': h,
										'left' : '50%'
									};

								if (diffIndex > 0) { 
									coeff = 1;
									classToAdd = ' ' + getObject.rightSideClass.substr(1);
								}
								else if (diffIndex < 0) {
									coeff = -1;
									classToAdd = ' ' + getObject.leftSideClass.substr(1);
								}
								cssProperties[prop] = (-w*.5 + newIndex*getObject.itemOffset) + coeff*getObject.itemOffsetCenter;

								if (getObject.useCSS3Animation) {
									cssProperties['zIndex'] = (middleIndex - diffIndexAbs);
									$this
										.attr('class', getObject.transformClasses[diffIndexAbs] + classToAdd)
										.css(cssProperties);
								} else {
									$this
										.attr('class', getObject.transformClasses[diffIndexAbs] + classToAdd)
										.css({'zIndex': (middleIndex - diffIndexAbs)})
										.stop()
										.animate(cssProperties);
								}
							}
						}
Ответить с цитированием
  #2 (permalink)  
Старый 13.09.2014, 21:12
Аспирант
Отправить личное сообщение для serrrgggeee Посмотреть профиль Найти все сообщения от serrrgggeee
 
Регистрация: 15.08.2014
Сообщений: 46

document javascript присваивается переменной
// create reflections with $items
						function createReflections(){
							$items.each(function(i){
								var $this = $(this),
									img = $this.find('img'),
									rClass = getObject.reflections.reflectionClass.substr(1);

								$.when( img.parent().after('<canvas class="'+rClass+'"></canvas>') )
									.then(function(d){ 
										var canvas = d.siblings(getObject.reflections.reflectionClass);
										if (canvas[0].getContext) {
											var refl = {
												context: canvas[0].getContext("2d"),
												width: canvas.width(),
												height: canvas.height()
											}
											canvas.attr({'width': refl.width, 'height': refl.height});

											// draw a piece of image
											refl.context.drawImage(img[0], 0, img.height()-refl.height, refl.width, refl.height, 0, 0, refl.width, refl.height);
											// draw gradient for reflection
											refl.context.globalCompositeOperation = "destination-out";
											var gradient = refl.context.createLinearGradient(0, 0, 0, refl.height);
											gradient.addColorStop(0, getObject.reflections.startColor);
											gradient.addColorStop(1, getObject.reflections.endColor);
											refl.context.fillStyle = gradient;
											refl.context.fillRect(0, 0, refl.width, refl.height);
										}
									})
							})
						}

						// function for move to previous item
						function prev(e){
							itemsOrder.unshift(itemsOrder.pop());
							setOrder();
							return false;
						}

						// function for  move to next item
						function next(e){
							itemsOrder.push(itemsOrder.shift());
							setOrder();
							return false;
						}

						// function for  move to previous item with stop autoplay
						function clickPrev(e){
							$this.trigger('firstAction');
							stopAutoplay();					
							prev(e);
							return false;
						}

						// function for  move to next item with stop autoplay
						function clickNext(e){	
							$this.trigger('firstAction');
							stopAutoplay();					
							next(e);
							return false;
						}

						function firstAction(e){
							if (!isFirstActionDone) {
								isFirstActionDone = true;
								getObject.onUserActivate();
							}
						}

						// function for d(param) step shift
						function go(e, d){
							var diff, wayFunc;
							function getFunc(diff){
								// return function for moving items (previous or next) 
								return (diff > 0) ? clickNext : clickPrev;
							}
							if (!d) {
								var ind = $(e.target).parents('li').index();
								diff = ind - $items.eq(itemsOrder[middleIndex-1]).index();
							} else {
								diff = parseInt(d);
							}
							wayFunc = getFunc(diff);
							diff = Math.abs(diff);
							while (diff > 0){
								wayFunc();
								diff--;
							}
						}

						// move by index
						function goTo(e, d){
							if (d) {
								d = parseInt(d);
								$items.eq(d) && $a.eq(d).trigger('click');
							}
						}

						// item click listener
						function clickItem(e){
							var objClasses = $(this).parent().attr('class').split(' ');
							for (var i=0;i < objClasses.length;i++){								
								if ($.inArray(objClasses[i], getObject.clickableClasses)) {
									go(e);
									return false;
								} else {
									go(e);
								}
							}
						}

						// initialize pagination
						function paginationInit(){
							getObject.pagination = $.extend(paginationDefaults, o.pagination);
							if (getObject.pagination.enable) {
								getObject.pagination.$this = $(getObject.pagination.paginationClass)
								getObject.pagination.$li = getObject.pagination.$this.find('li');
								getObject.pagination.$a = getObject.pagination.$this.find('a');
								getObject.pagination.$a
									.on('click', function(e){
										clickItem(e);
										return false;
									});
							}	
						}

						// set active pagination item
						function paginationSet(ind){
							if (getObject.pagination.enable && getObject.pagination.$a) {
								var $li = getObject.pagination.$li,
									actClass = getObject.pagination.activeClass.substr(1);
								$li
									.siblings().removeClass(actClass).end()
									.eq(ind-1).addClass(actClass);
							}
						}

						// autoplay start function 
						function startAutoplay(){
							getObject.autoplay.id = setTimeout(function(){
								if(getObject.autoplay.enable){
									next();
									startAutoplay();
								}
							}, getObject.autoplay.timeout);
						}

						// autoplay start function 
						function stopAutoplay(){
							clearTimeout(getObject.autoplay.id);
						}
					}
				}
			
			data?object=data:$this.data({tm3DCircleCarousel: getObject});
    		typeof o=='object' && $.extend(getObject, o);
    		getObject.me || getObject.constructor(getObject.me=$this);
		});
	}
})(jQuery);

не пойму что делает эта инструкция var $doc = $(document),
и последние data?object=data:$this.data({tm3DCircleCarousel: getObject});
typeof o=='object' && $.extend(getObject, o);
getObject.me || getObject.constructor(getObject.me=$this);
Ответить с цитированием
  #3 (permalink)  
Старый 13.09.2014, 22:06
Лаборант :-)
Отправить личное сообщение для Pavel M. Посмотреть профиль Найти все сообщения от Pavel M.
 
Регистрация: 08.11.2011
Сообщений: 806

Сообщение от serrrgggeee
не пойму что делает эта инструкция var $doc = $(document)
создается переменная с именем $doc
и ей присваивается объект jQuery содержащий верхний элемент html - document

часто переменным с jQuery объектом дается имя с символом '$' в начале
Ответить с цитированием
  #4 (permalink)  
Старый 13.09.2014, 22:19
Аспирант
Отправить личное сообщение для serrrgggeee Посмотреть профиль Найти все сообщения от serrrgggeee
 
Регистрация: 15.08.2014
Сообщений: 46

а смысл если понятно что верхний элемент body
Ответить с цитированием
  #5 (permalink)  
Старый 13.09.2014, 22:25
Аватар для MallSerg
Профессор
Отправить личное сообщение для MallSerg Посмотреть профиль Найти все сообщения от MallSerg
 
Регистрация: 07.03.2011
Сообщений: 1,127

Верхний элемент боди только у идиотов которые не понимают что такое html страница
смысл в кеширонии jquery объекта
Ответить с цитированием
  #6 (permalink)  
Старый 13.09.2014, 22:31
Аспирант
Отправить личное сообщение для serrrgggeee Посмотреть профиль Найти все сообщения от serrrgggeee
 
Регистрация: 15.08.2014
Сообщений: 46

что то не пойму, можно по подробней
Ответить с цитированием
  #7 (permalink)  
Старый 14.09.2014, 18:26
Аспирант
Отправить личное сообщение для serrrgggeee Посмотреть профиль Найти все сообщения от serrrgggeee
 
Регистрация: 15.08.2014
Сообщений: 46

я самоучка и некоторые вещи понимаю двойственно, может найдется здесь тот кто мне объяснит или нет?
Ответить с цитированием
  #8 (permalink)  
Старый 14.09.2014, 22:46
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

Сообщение от serrrgggeee
я самоучка и некоторые вещи понимаю двойственно, может найдется здесь тот кто мне объяснит или нет?

http://es5.javascript.ru/x7.html#x7.6
Цитата:
Этот стандарт добавляет еще два специфических символа: Знак доллара ($) и символ подчёркивания (_) — они допускаются в любом месте IdentifierName.

Сообщение от serrrgggeee
var $doc = $(document)
ссылка на объект документа была сохранена в переменной $doc не просто так, а с особым символическим смыслом - дальше будет короче писать и ссылку на объект документа в выражении $(document) не получать

Сообщение от serrrgggeee
data?object=data:$this.data({tm3DCircleCarousel: getObject});
http://es5.javascript.ru/x11.html#x11.12
http://es5.javascript.ru/x9.html#x9.2
тернарный оператор, следовательно первая часть (после ?) выполнится, когда ToBoolean(data) вернёт true

Сообщение от serrrgggeee
typeof o=='object' && $.extend(getObject, o);
http://es5.javascript.ru/x11.html#x11.11
Цитата:
Если ToBoolean(lval) равно false, вернуть lval.
перевожу:
если левая часть (выражение, которое в общем выражении расположено слева от &&) после применения ToBoolean вернёт false, то вернуть результат вычисления этого левого выражения и дальше алгоритм не выполнять

true && alert("good");


false && alert("fuck");



дальше сам, думаю, должно было стать понятным, что нужно читать

оригинал
http://www.ecma-international.org/pu...T/Ecma-262.pdf

Последний раз редактировалось bes, 14.09.2014 в 22:49.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
посылка переменной kent0026 jQuery 5 04.01.2014 17:34
Создать объект в объекте Bryant-24 Общие вопросы Javascript 3 10.07.2013 16:06
Как значение переменной вставить в имя переменной? jsgogo Общие вопросы Javascript 3 02.06.2013 12:11
Не получается получить document открытого окна Dim@ Общие вопросы Javascript 1 20.05.2012 15:52
Передать ссылку на объект а не объект возникновения события Blazze Events/DOM/Window 0 11.10.2011 00:45