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!