Created By Adrian Statescu

AjaxTabs - Unobtrusive Tabs + Ajax

#1

var myAjaxTabs = new AjaxTabs($$('#tabContainers div.container'),

                      $$('#tabs li'), {

                      firstShow: 0,
 
                      selectedSectionClass: 'selectedSection',

                      selectedTabClass: 'selectedTab',

                      urls: ['urls/page1.html','urls/page2.html',

                             'urls/page3.html','urls/page4.html'],

                      requestOptions: {

                      link: 'cancel',

                      evalScripts: true,

                      onSuccess: function(response) {

                                $('log1').innerHTML += ' '+ response;
                       }
                      },

                      onShow: function(tab,url) {
                                         
                                $('log2').innerHTML += ' ' + tab.firstChild.nodeValue;                                                     
                      }
}); 

This is the content of the first Tab

Christian Heilmann lays out seven rules to better unobtrusive JavaScript, including not making assumptions about JavaScript, the browser and the document. Work with structured markup. If you are traversing a document, maybe there's a solution that can take advantage of CSS's selector mechanism instead. Work with browsers and users. Better understanding of events, and playing nice with namespace, scope, and patterns. And of course, think about the next developer, so keep the code maintainable.

This is the content of the second Tab

Another Douglas Crockford video. This time Douglas talks about the Document Object Model, about how Java failed, and JavaScript evolved thanks to DHTML and DOM. He talks about how to use DOM to traversing and manipulating elements in an HTML document, walking the DOM, making elements, innerHTML, as well as Events, memory leaks. He talks about the cracks in DOM, and how we must be prepared to back off when we hit the browser limits of DOM.

This is the content of the third Tab

Christian Heilmann's excellent guide to writing unobtrusive JavaScript. Takes the reader from the inline JavaScript world right through to a clean dynamically attached events with all the JavaScript code in external files. Covers DOM Scripting. This is the key reference to unobtrusive scripting.

This is the content of the fourth Tab

The difference between the two of them is that the "Handlers" example is rather slow when the list is very large while the "Delegation" example can be extended as much as you want to without adding more overhead. The latter example is also a lot easier to change. Try the following button to dynamically add another list item with a nested list to each of them (this is done by changing the innerHTML property and appending a string - much like you'd do it with an Ajax call were you to use.

Go To: Tab 1

Status:

AJAX worked:

Tab Loaded:





#2

var myTabs = new Tabs( $$('#divContainers div'),

                       $$('.yahoo-tabs li a'), 

                       { selectedTabClass:'selected', firstShow: 1 }
);

This is the content of the first Tab

Christian Heilmann lays out seven rules to better unobtrusive JavaScript, including not making assumptions about JavaScript, the browser and the document. Work with structured markup. If you are traversing a document, maybe there's a solution that can take advantage of CSS's selector mechanism instead. Work with browsers and users. Better understanding of events, and playing nice with namespace, scope, and patterns. And of course, think about the next developer, so keep the code maintainable.

This is the content of the second Tab

Another Douglas Crockford video. This time Douglas talks about the Document Object Model, about how Java failed, and JavaScript evolved thanks to DHTML and DOM. He talks about how to use DOM to traversing and manipulating elements in an HTML document, walking the DOM, making elements, innerHTML, as well as Events, memory leaks. He talks about the cracks in DOM, and how we must be prepared to back off when we hit the browser limits of DOM.

This is the content of the third Tab

Christian Heilmann's excellent guide to writing unobtrusive JavaScript. Takes the reader from the inline JavaScript world right through to a clean dynamically attached events with all the JavaScript code in external files. Covers DOM Scripting. This is the key reference to unobtrusive scripting.

This is the content of the fourth Tab

The difference between the two of them is that the "Handlers" example is rather slow when the list is very large while the "Delegation" example can be extended as much as you want to without adding more overhead. The latter example is also a lot easier to change. Try the following button to dynamically add another list item with a nested list to each of them (this is done by changing the innerHTML property and appending a string - much like you'd do it with an Ajax call were you to use.





#3

       var myBasicAjaxTabs = new AjaxTabs( $$('#areaContainers div'),

                                           $$('.google-tabs li a'),

                                           {selectedTabClass:'selected',

                                            firstShow: 1,

                                            urls: [ 'files/book1.php',

                                                    'files/book2.php',

                                                    'files/book3.php',

                                                    'files/book4.php']}                                                
                                          );

This is the content of the first Tab

Christian Heilmann lays out seven rules to better unobtrusive JavaScript, including not making assumptions about JavaScript, the browser and the document. Work with structured markup. If you are traversing a document, maybe there's a solution that can take advantage of CSS's selector mechanism instead. Work with browsers and users. Better understanding of events, and playing nice with namespace, scope, and patterns. And of course, think about the next developer, so keep the code maintainable.

This is the content of the second Tab

Another Douglas Crockford video. This time Douglas talks about the Document Object Model, about how Java failed, and JavaScript evolved thanks to DHTML and DOM. He talks about how to use DOM to traversing and manipulating elements in an HTML document, walking the DOM, making elements, innerHTML, as well as Events, memory leaks. He talks about the cracks in DOM, and how we must be prepared to back off when we hit the browser limits of DOM.

This is the content of the third Tab

Christian Heilmann's excellent guide to writing unobtrusive JavaScript. Takes the reader from the inline JavaScript world right through to a clean dynamically attached events with all the JavaScript code in external files. Covers DOM Scripting. This is the key reference to unobtrusive scripting.

This is the content of the fourth Tab

The difference between the two of them is that the "Handlers" example is rather slow when the list is very large while the "Delegation" example can be extended as much as you want to without adding more overhead. The latter example is also a lot easier to change. Try the following button to dynamically add another list item with a nested list to each of them (this is done by changing the innerHTML property and appending a string - much like you'd do it with an Ajax call were you to use.





#4


   var mySimpleTabs = new Tabs( $$('.mootabs-panel div'),
                                $$('.mootabs-title li'), 
                                {
                                  selectedTabClass:'active',
                                  firstShow: 0
                                }
                              );

This is the content of the first Tab

Christian Heilmann lays out seven rules to better unobtrusive JavaScript, including not making assumptions about JavaScript, the browser and the document. Work with structured markup. If you are traversing a document, maybe there's a solution that can take advantage of CSS's selector mechanism instead. Work with browsers and users. Better understanding of events, and playing nice with namespace, scope, and patterns. And of course, think about the next developer, so keep the code maintainable.

This is the content of the second Tab

Another Douglas Crockford video. This time Douglas talks about the Document Object Model, about how Java failed, and JavaScript evolved thanks to DHTML and DOM. He talks about how to use DOM to traversing and manipulating elements in an HTML document, walking the DOM, making elements, innerHTML, as well as Events, memory leaks. He talks about the cracks in DOM, and how we must be prepared to back off when we hit the browser limits of DOM.

This is the content of the third Tab

The main difference in OOP as opposed to functional programming is that the data and code are bundled together into one entity, which is known as an object. Object-oriented applications are usually split up into a number of objects that interact with each other. Each object is usually an entity of the problem, which is self-contained and has a bunch of properties and methods. The properties are the object's data, which basically means the variables that belong to the object. The methodsif you are coming from a functional backgroundare basically the functions that the object supports. Going one step further, the functionality that is intended for other objects to be accessed and used during interaction is called an object's interface

This is the content of the third Tab

Christian Heilmann's excellent guide to writing unobtrusive JavaScript. Takes the reader from the inline JavaScript world right through to a clean dynamically attached events with all the JavaScript code in external files. Covers DOM Scripting. This is the key reference to unobtrusive scripting.





#class Tabs

  var Tabs = new Class({

          Implements: [Options,Events],

          options: {
                     selectedTabClass: 'selected',
                     selectedSectionClass: 'selected',
                     firstShow: 0,
                    
                     onShow: $empty,
                     onHide: $empty
                   },          

          tabs: [],

          initialize: function(containers, tabs, options) {

                this.setOptions(options);                

                containers = $$(containers); 
                
                $$(tabs).each(function(tab,index){

                      this.addSection(tab,containers[index]);

                }, this);
                 
                //show the Panel specified in the options
                this.show(this.options.firstShow);
          },

          addSection: function(tab,container) {

               this.tabs.include(tab);

               tab.store('container',container);

               this.attach(tab);
          },

          attach: function(tab) {

               tab.addEvent('click',function(event){

                     event.preventDefault();

                     this.show(this.tabs.indexOf(tab));

               }.bind(this)); 

          },

          show: function(index) {

              if(this.current == index) {return;}

              this.tabs.each(function(tab,i){

                 var container = tab.retrieve('container');

                 if(index == i) {
                                  container.setStyle('display','block');

                                  tab.addClass(this.options.selectedTabClass);

                                  container.addClass(this.options.selectedSectionClass);

                                  //this.fireEvent('onShow',[i, tab, container]);
                               }

                           else

                                {

                                  tab.removeClass(this.options.selectedTabClass);

                                  container.removeClass(this.options.selectedSectionClass);

                                  container.setStyle('display','none');

                                    if(this.current === i || !$chk(this.current)) {

                                                 //this.fireEvent('onHide',[i, tab, container]);
                                    }//end-if
                                }
 
              }, this);//end each  

              this.current = index; 

          }
 
  }); //end Class

#class AjaxTabs


  var AjaxTabs = new Class({

        Extends: Tabs,

        options:{
                 //by default we will cache the results
                 cache: true,

                 //URLs  
                 urls: [],

                 //create request options
                 requestOptions:{} 
                },

        show: function(index, force) {

            //get the tab
            var tab = this.tabs[index];

            var url = this.options.urls[index] || tab.get('href');

            //if the url isn t set OR (we re caching and the tab s data is already loaded) 
            //THEN execute the method in the Tabs class

             if(!url || force || (this.options.cache && tab.retrieve('loaded')) ) {

                this.parent(index); 

              //otherwise we are going to fetch the data from server
             } else { 

                this.fetchTabContent(index,url);
             }
            
        },

       fetchTabContent: function(index,url) {

            //get the tab
            var tab = this.tabs[index]; 

           //get the container we re going to update
            var container = tab.retrieve('container');

           //see if we are an instance for this tab
            var request = tab.retrieve('tabAjax');

          //if not we need to create one

           if(!request) {

               request = new Request.HTML($merge(this.options.requestOptions,

                                                {update: container,url: url})
 
                                      ).addEvent('onSuccess',function(){
                                                                       this.show(index,true);                                                                                                                                           
                                                                       tab.store('loaded',true);
                                                                       this.fireEvent('onShow',[tab,url]);
                                                              }.bind(this)
                                          );//end-request.HTML
              
              tab.store('tabAjax', request);

           }//end-if

           request.send();            
       }
 

    });