Using Callbacks

May 7th, 2009


Demo of using callbacks to alter the functionality of tabs. You can get the options here and the tabs plugin here.

Tab 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pretium aliquet risus a tristique. Proin pellentesque, urna sit amet vestibulum mollis, leo magna placerat ligula, ac tincidunt urna libero in nisi. Quisque blandit lorem id libero pulvinar vel viverra urna consequat. Sed nisl nibh, condimentum vel tincidunt in, bibendum id magna. Pellentesque eleifend est sed odio sollicitudin ultricies. Morbi porta metus nec nulla imperdiet pulvinar. Sed tincidunt augue id dui consectetur eleifend. Sed sit amet eros sit amet est viverra tristique. Quisque lorem tellus, faucibus sed vulputate nec, malesuada ac libero. Nulla facilisi. Morbi tincidunt sagittis enim, in viverra lorem mollis eget. In hac habitasse platea dictumst. Vivamus nec fermentum neque. Nulla facilisi.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pretium aliquet risus a tristique. Proin pellentesque, urna sit amet vestibulum mollis, leo magna placerat ligula, ac tincidunt urna libero in nisi. Quisque blandit lorem id libero pulvinar vel viverra urna consequat. Sed nisl nibh, condimentum vel tincidunt in, bibendum id magna. Pellentesque eleifend est sed odio sollicitudin ultricies. Morbi porta metus nec nulla imperdiet pulvinar. Sed tincidunt augue id dui consectetur eleifend. Sed sit amet eros sit amet est viverra tristique. Quisque lorem tellus, faucibus sed vulputate nec, malesuada ac libero. Nulla facilisi. Morbi tincidunt sagittis enim, in viverra lorem mollis eget. In hac habitasse platea dictumst. Vivamus nec fermentum neque. Nulla facilisi.

  1. var loadItem = new function() {
  2.     this.createLoading = function(tabs){
  3.         $(‘.tab’ + tabs.getCurrentTab()).html($(‘<div class=”loading“><img src=”http://trulyevil.com/images/loading.gif“ /></div>’)).show();
  4.         return true;
  5.     };
  6.     this.get = function(tabs, url){
  7.         $.get(url, function(data) { loadItem.loadData(tabs, data) });
  8.         return true;
  9.     };
  10.     this.loadData = function(tabs, data){
  11.         $(‘.tab’ + tabs.getCurrentTab()).html(data);
  12.     };
  13.     this.afterloading = function(tabs){
  14.         $(‘.tab’ + tabs.getCurrentTab()).show();
  15.         return true;
  16.     };
  17. };
  19. var options = {
  20.                 tab0 : { 
  21.                             beforeLoad : function() { return loadItem.createLoading(this) },
  22.                             onload : function() { return loadItem.get(this, “/scripts/get.cgi?url=www.google.com”) },
  23.                             afterload : function() { return loadItem.afterloading(this) }
  24.                         },
  25.                 tab1 : { 
  26.                             beforeLoad : function() { return loadItem.createLoading(this) },
  27.                             onload : function() { return loadItem.get(this, “/scripts/get.cgi?url=www.google.com”) },
  28.                             afterload : function() { return loadItem.afterloading(this) }
  29.                         },
  30.                 tab2 : { 
  31.                             beforeLoad : function() { return loadItem.createLoading(this) },
  32.                             onload : function() { return loadItem.get(this, “/scripts/get.cgi?url=www.google.com”) },
  33.                             afterload : function() { return loadItem.afterloading(this) }
  34.                         },
  35.             };
  36. $(document).ready(function() {
  37.         $(‘div.tabs’).tabs(options);
  38. });
Bookmark and Share
Comments are closed.