In Oomph, we provide a paging metaphor so that a user can page through the various Microformats that are discovered on a page.
I was just looking at the code and thought some others might find it useful how we built it using jQuery. Here’s the crux of the code:
1: if (hCalendarCollection.length > 1){
2:
3: var eventNext = oomph('<span class="iwmf_Next">Next ></span>').bind('click',function(event)
4: {
5: currentHCalendar = currentHCalendar + 1;
6: if (currentHCalendar <= oomph('.iwmf_vEventContainer').size()){
7: oomph('.iwmf_vEventContainer').hide(animationSpeed);
8: var current = oomph('.iwmf_vEventContainer')[currentHCalendar - 1];
9: oomph(current).show(animationSpeed);
10: }
11: else
12: currentHCalendar = currentHCalendar - 1;
13: oomph('#iwmf_hCalendarNum').text(currentHCalendar + ' of ' + hCalendarCollection.length);
14:
15: });
16:
17: var eventPrev = oomph('<span class="iwmf_Prev">< Prev</span>').bind('click',function(event)
18: {
19: currentHCalendar = currentHCalendar - 1;
20: if (currentHCalendar >= 1){
21: oomph('.iwmf_vEventContainer').hide(animationSpeed);
22: var current = oomph('.iwmf_vEventContainer')[currentHCalendar - 1];
23: oomph(current).show(animationSpeed);
24: }
25: else
26: currentHCalendar = 1;
27: oomph('#iwmf_hCalendarNum').text(currentHCalendar + ' of ' + hCalendarCollection.length);
28:
29: });
30:
31: oomph(mainEventContainer).append(eventNext);
32: oomph(mainEventContainer).append('<span id="iwmf_hCalendarNum" >' + currentHCalendar + ' of ' + hCalendarCollection.length + '</span>');
33: oomph(mainEventContainer).append(eventPrev);
34:
In a nutshell, here’s what I’m doing. Prior to this code, I’ve generated a bunch of tags as follows: <li class=”iwmf_vEventContainer”>. Then, in the code above, I wire up the pagination.
In line 1, I don’t even bother continuing if there is only one item.
In line 3, I generate a span tag on the fly and bind it to the click event.
In line 5, because they’ve clicked next, I increment my counter variable.
In line 6, I check to see if they’ve reached the end of the items, like good old EOF in ADO. If they haven’t, I proceed. If they have, I make sure to reverse the increment I’ve done in the else clause.
In line 7, I go ahead and hide everything that matches the class tag of iwmf_vEventContainer. I have a constant defined for animation speed.
In line 8, I show the current one.
In line 13, I update the UI with the new # of total #.
Line 17 – 29 is a lot of similar code for doing the reverse. There were enough differences between going forward and backward that I didn’t factor it into a common function. Maybe next time. :)
In lines 31-33, I go ahead and append these items to the tree.
That’s it!