Небольшое дополнение. Добавил в плагин 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. Что я делаю не так?
