How To Use Low Pro For jQuery

03 FEB

It seems that my initial version of Low Pro for jQuery has gotten enough interest to continue with it but, as always, my previous post was extremely lacking in actual detail about how to use the damn thing. So without further ado here we go. It’s pretty simple really and, as its a port of a subset of Low Pro for Prototype, anything that goes for that also goes for jLow.

Heh, let’s not call it that again. Bad.

Anyway, on with the show…

Class-based OO

In order for Low Pro behavior classes to work with jQuery we need a class implementation. The one I’ve based this on is the version from Prototype originally based on Alex Arnell’s work. This is detailed in this article on the prototype site. The only difference is that instead of using Class.create you use $.klass:

Draggable = $.klass({
  initialize: function(options) { },
  onmousedown: function() {}
});

GhostedDraggable = $.klass(Draggable, {
  onmousedown: function($super) {
    // do extra stuff here then call original method...
    $super();
  }
});

Attaching the behavior class to elements

To attach the behavior class to some elements you can use the attach method:

$('div.product').attach(GhostedDraggable, { anOption: thing });

attach creates a new instance of the given behavior class for each element in the collection and attaches them to these elements. Any subsequent arguments are passed to the class’s initialize function. A few magic things happen here. First, this.element in the behavior instance is set to a dollared version of the element it’s attached to. Secondly, every method beginning with on (eg. onclick, onsubmit etc) gets bound as an event handler on the attached element. However, in the event handler functions themselves, this points to the behavior instance rather than the element so you can call it’s other methods. You can obviously get to the element by using this.element if you need to though.

And for the bonus round…

So, that’s about all there is to it. One added bonus is that if you are using livequery then Low Pro will automatically use it to attach any new behaviors after the DOM is changed without you needing to worry about it.

Here’s a super simple example behavior that simply adds and removes a CSS class name when it is hovered over. It’s about as bare bones as you can get while showing off most of the features:

Hover = $.klass({
  initialize: function(hoverClass) {
    this.hoverClass = hoverClass;
  },
  onmouseover: function() {
    this.element.addClass(this.hoverClass);
  },
  onmouseout: function() {
    this.element.removeClass(this.hoverClass);
  }
});

jQuery(function($) {
  $('span.name').attach(Hover, 'myClassName');
});

For more information about how you might use behavior classes take a look at this article. ANother good point of reference is the built-in Remote.Link and Remote.Form behaviors that are built in to Low Pro. Take a look at the source Also a Low Pro site is on its way shortly. As I use it more myself I’ll post more real examples but you can post any questions to the Low Pro list.

10 Comments (Closed)

Fairy nuff

dood89dood89 at 04.02.08 / 17PM

This has come just at the right time for me as I’ve recently moved to jQuery from Prototype.

One question… what would be an elegant way to namespace the behaviour classes with jQuery e.g. MyApp.Links.Hover.

James HillJames Hill at 04.02.08 / 18PM

Nice gateway from prototype to jQuery, Dan.

I would take caution in writing all jQuery code on top of low pro though, due to understandability. Converting to writing code that is not dependent on low pro is probably good, because it is more understandable to the jQuery community and is more inline with jQuery’s philosophy of chaining and simplicity.

I do realize that everyone has their own flavor and different backgrounds, so I’m certainly not going to stop anyone from writing this way.

Thanks for sharing, Dan.

MarcMarc at 04.02.08 / 19PM

James: Good point. So far I’ve tended to keep all my behaviors more or less in the global namespace but it would be good to keep in jQuery’s tidy spirit.

Off hand the first approach would be to declar and attach them all within a function so that they only exist within a closure but thats not always appropriate. Otherwise, you could extend the jQuery object like plugins do. I slightly worry about that becoming the new global namespace in jQuery though. All plugins litter that namespace and Im wondering whether there might start to be clashes.

Marc: Yeah, totally. straight up chaining and normal plugins are appropriate in many situations. I think Low Pro behaviors are great for structuring UIs and perhaps creating widgets and components.

DanDan at 04.02.08 / 21PM

As far as Namespaing, my first thought would be to create a single new namespace for Low Pro. Something short but unlikely to collide (but that’s always the tricky part.)

LPjQ={};

LPjQ.Draggable = $.klass({ initialize: function(options) { }, onmousedown: function() {} });

LPjQ.GhostedDraggable = $.klass(LPjQ.Draggable, { onmousedown: function($super) { // do extra stuff here then call original method… $super(); } });

timothytoetimothytoe at 04.02.08 / 21PM

I would take caution in writing all jQuery code on top of low pro though, due to understandability.

It really depends on the size of the application. One should ALWAYS think twice before a layer of abstraction. I’m writing a big app now and it’s about 10% jQuery DOM stuff and about 90% big-ass-app. Low Pro (or Base or js.class) might actually make my code easier to read.

For small apps, I don’t even think about OO beyond JS prototypes.

timothytoetimothytoe at 04.02.08 / 22PM

timothytoe: I think Low Pro behaviors will aid understanding of larger apps as well. Chaining looks simple up to a point then it starts to get a little sticky.

I’m thinking about the namespace issue a bit. what about $b?

$b.TabNav, $b.Hover etc?

You could then nest up if you wanted to…hmm.

DanDan at 05.02.08 / 13PM

Have some manual that I can translate to Portuguese? Thanks, nice job.

EvandroEvandro at 15.02.08 / 03AM

This is quite helpful. Thanks.

Andreas BeierlAndreas Beierl at 18.03.08 / 19PM

Thank you so much for this plugin! I’ve been writing a lot of reusable code at work, and this has allowed me to create a few classes now, such as automatically initialising validation on forms, as well has handling it’s onfocus and submit events into one compact piece of code

Tane PiperTane Piper at 28.04.08 / 15PM

About This Article

Related Linkage del.icio.us del.icio.us RSS feed

javascript

jquery

lowpro