Справочник функций

Ваш аккаунт

Войти через: 
Забыли пароль?
Регистрация
Информацию о новых материалах можно получать и без регистрации:

Почтовая рассылка

Подписчиков: -1
Последний выпуск: 19.06.2015

Перекрытие выполнения при вызове одного и того же плагина JQuery

26K
23 декабря 2013 года
maddy
19 / / 20.11.2008
Здравствуйте, сейчас учусь более-менее писать что-то свое на JS + Jquery и встала задача о написании плагина карусельки.
Плагин я написал, вроде бы как, ну по крайней мере, он работает, но при попытке размещения нескольких каруселек на одной странице получаем, что кнопки управления первой (верхней) срабатывают и для нижней, нижние же, как положено работают только для своей карусели.
Ниже листинг плагина

Код:
(function($){
  var carousel_action = {
    init: function(params) {
      var options, defaults, length;
      defaults = {
        element:false,
        number: 3,
        show_nums:false,
        show_controls: true,
        effect: 'simple',
        speed:500
      };      
      options = $.extend({}, defaults, params );
      if (options.element == false) {
        console.log('Параметр element не определен');
        return false;
      }
      element = {};
      element.length = options.element.length;
      element.object = $(this);
      element.width = options.element.outerWidth(true);      
      element.display = element.length/options.number;
      if (element.display > 0 && options.show_controls == true) {
        carousel_action.controls({element:element, options:options});        
        element.object.find(element.controls.all).click(function(e){
          element.controls.active = $(this);
          carousel_action.slide({element:element, options:options});
          element.controls.all.removeClass('active');
          element.controls.active.addClass('active');
          e.preventDefault();
        });
      }
    },
    controls: function(params) {
      var controls;      
      element.controls = {};        
      controls = $("<div/>",{
        class:"controls"
      }).prependTo(params.element.object);
      for (var i = 0; i < params.element.display; i++) {
        if (params.options.show_nums == true) {
          num = i+1;
        } else {
          num = "";
        }          
        $("<a/>",{
          href: "#slide-"+i,
          text: num,
          'data-num':i
        }).appendTo(controls);
      }
      element.controls.all = controls.children('a');
      element.controls.all.eq(0).addClass('active');      
    },
    slide: function(params) {      
      slide_width = params.element.width*params.options.number*params.element.controls.active.data('num')*(-1);
     
      if (params.options.effect == false) {
        params.element.object.css("margin-left", slide_width);  
      } else if (params.options.effect == "simple") {
        params.element.object.stop().animate({'margin-left': slide_width},params.options.speed);
      }
    }
  };
  $.fn.webicarousel = function( method ){
    if ( carousel_action[method] ) {
      return carousel_action[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
    } else if ( typeof method === 'object' || ! method ) {
      return carousel_action.init.apply( this, arguments );
    } else {
      $.error( 'Метод "' +  method + '" не найден в плагине KeyTabs' );
    }
  };
})(jQuery);
Подключаемся так

 
Код:
$(".slider").webicarousel({
     element: $(".slide"),
     number: 1,
     show_nums:true
});        
$(".projects").webicarousel({
     element: $(".project"),
     number: 3
});
Подскажите, пожалуйста, где и что я делаю не так
Реклама на сайте | Обмен ссылками | Ссылки | Экспорт (RSS) | Контакты
Добавить статью | Добавить исходник | Добавить хостинг-провайдера | Добавить сайт в каталог