CODEWITHSUNDEEP
javascriptjquery
linuxatico
linuxatico

Reputation: 1896

jquery method as a javascript's class method

is it possible to insert a jquery function in a javascript class? For example I have the following JS class:

function FloatingImage() {
    var delay, duration;

    var moveRight = function($image)
    {

        $image.delay(delay).animate(
        { 
            left: $image.parent().width() - $image.width()
        }, 
        {
            duration: duration,
            complete: function(){ moveLeft($image) }
        });
    },
    moveLeft = function($image){
        $image.delay(delay).animate({
            left: 0
        }, {
            duration: duration,
            complete: function(){ moveRight($image) }
        });
    };

    this.constructor = function (delay, duration) {

        this.delay = delay;
        this.duration = duration;
    };
}

The following support function:

function rand(l,u) // lower bound and upper bound
 {
     return Math.floor((Math.random() * (u-l+1))+l);
 }

And then calling it, assuming there are 2 divs #imgleft and #imgright with both 2 images as background, with:

$(function(){
    var $imageL = $('#imgleft'),
        $imageR = $('#imgright');

    var fi1 = new FloatingImage();
        fi1.constructor(rand(400,600), rand(1500,3000));
    var fi2 = new FloatingImage();
        fi2.constructor(rand(400,600), rand(1500,3000));

    fi1.moveRight($imageL);
    fi2.moveLeft($imageR);
});

Upvotes: 0

Views: 101

Answers (2)

Pierre Buyle
Pierre Buyle

Reputation: 4873

The FloatingImage function itself is the constructor, so it should be the one that receive the delay and duration parameters. The be available as method on the object instance build by this constructor you need to attach the function to the object. Otherwise, they will not be accessible outside the constructor's scope. Finally, in the complete callbacks, you need to call the method on the object.

function FloatingImage(delay, duration) {
  var self = this;
  this.moveRight = function($image) {
    $image.delay(delay).animate({ 
      left: $image.parent().width() - $image.width()
    },{
      duration: duration,
      complete: function(){ self.moveLeft($image) }
    });
  },
  this.moveLeft = function($image){
    $image.delay(delay).animate({
      left: 0
    },{
       duration: duration,
       complete: function(){ self.moveRight($image) }
    });
  };
}

But this does not seems to be a very good OO pattern. A better jQuery-ish way to do it would be to build a jQuery plugin:

$.fn.floatingImage = function(options) {
  var settings = $.extend( {
    direction: 'left',
    delay    : 400,
    duration : 400
  }, options);
  var self = this;
  self.delay(settings.delay).animate({
    left: (settings.direction === 'left') ? 0 : (this.parent().width() - this.width()),
  }, {
    duration: settings.duration,
    complete: function() {
      self.floatingImage({
        direction: (settings.direction === 'left') ? 'right' : 'left',
        delay: settings.delay,
        duration: settings.duration
      });
    }
  });
  // Return the jQuery object to allow methods chaining. 
  return self;
}    

$(function(){
  $('#imgleft').floatingImage({delay: rand(400,600), duration: rand(1500,3000)});
  $('#imgright').floatingImage({delay: rand(400,600), duration: rand(1500,3000), direction: 'right'});
});

Upvotes: 1

Joseph
Joseph

Reputation: 119837

YES. jQuery IS JavaScript, there is no difference.

But your "class" will not be portable anymore. It assumes that when you use that "class", you have jQuery loaded and the objects you pass are jQuery objects since you used delay and animate.

Upvotes: 1

Related Questions