Mar 10th, 2010 by Barker Design
Introducing MooTools NextPrev
One thing I love doing is duplicating OS functionalities. One of the things your OS allows you to do easily is move from one item to another. Most of the time you’re simply trying to get to the next or the previous item. MooTools NextPrev is a compact javascript class that allows you to move about a collection of items quickly using human terms.
The MooTools Class
var NextPrev = new Class({
Implements: [Options,Events],
options: {
baseEvent: 'keyup',
eventContainer: document,
eventCheckNext: function(e){
return true;
},
eventCheckPrevious: function(e){
return true;
},
onLoad: $empty,
onNext: $empty,
onPrevious: $empty,
startIndex: 0
},
initialize: function(collection,options) {
this.setOptions(options);
this.collection = $$(collection);
if(this.options.container == document) this.options.container = document.body;
this.index = this.options.startIndex;
if(this.options.baseEvent) {
$(this.options.eventContainer).addEvent(this.options.baseEvent,function(e) {
if(this.options.eventCheckNext(e)) {
this.move.bind(this)('next');
}
else if(this.options.eventCheckPrevious(e)) {
this.move.bind(this)('previous');
}
}.bind(this));
}
this.fireEvent('load',[this.collection[this.index]]);
},
move: function(norp) {
var previous = this.index;
switch($type(norp)) {
case 'string':
var ev = 'next';
if(norp == 'next') {
var plus = this.index + 1;
this.index = this.collection[plus] ? plus : 0;
}
else {
var minus = this.index - 1;
this.index = this.collection[minus] ? minus : this.collection.length-1;
ev = 'previous';
}
this.fireEvent(ev,[this.collection[this.index],this.collection[previous]]);
break;
case 'element':
this.index = this.collection.indexOf(norp) || 0;
break;
default:
this.index = norp;
break;
}
this.fireEvent('change',[this.collection[this.index],this.collection[previous]]);
return this;
}
});
The following are arguments, options, and events for NextPrev:
Arguments
- collection: The collection of elements..
- options: The instance options.
Options
- baseEvent: (defaults to ‘keyup’) The event to listen to.
- eventContainer: (defaults to document) The event listener container.
- eventCheckNext: (defaults to function) The function that decides if the conditions to trigger a “next” have been met.
- eventCheckPrevious: (defaults to function) The function that decides if the conditions to trigger a “previous” have been met.
- startIndex: (defaults to 0) The starting index for the collection.
Events
- change: Fired when the index changes.
- load: Fired every time the class is initialized.
- next: Fired when the next directive is triggered.
- previous: Fired when the previous directive is triggered.
Public Methods
- move: May be passed the Strings “next” or “prev”, or a DOM node.
Sample Usage
var np2 = new NextPrev($$('#images img'),{
eventCheckNext: function(e) {
if(e) e.stop(e);
return e.key == 'right';
},
eventCheckPrevious: function(e) {
if(e) e.stop(e);
return e.key == 'left';
},
onNext: function(cur,prev) {
prev.removeClass('featured');
cur.addClass('featured');
},
onPrevious: function(cur,prev) {
prev.removeClass('featured');
cur.addClass('featured');
},
onLoad: function(cur) {
cur.addClass('featured');
}
});
The code above hijacks the “left” and “right” keys, moving forward and backward in the collection depending on which key was pressed.
NextPrev is extremely simple but also quite flexible. You decide the events, keys, actions, etc — the plugin simple allows for simple control of position in the list. Have ideas for this class? Know what you’d use it for? Let me know!
Don’t forget to follow me on Twitter and be sure to visit Script & Style for the best Javascript and CSS articles around!Sponsor the David Walsh Blog and get your brand in front of several thousand users per day!
Introducing MooTools NextPrev
Related posts:
- Create a Simple News Scroller Using MooTools, Part I: The Basics
- Introducing MooTools ScrollSidebar
- Introducing MooTools LinkAlert
- Introducing MooTools Dotter
- Create a Simple Slideshow Using MooTools, Part II: Controls and Events
Authors