YUI Library JavaScript DHTML

  1. Home
  2. JavaScript DHTML
  3. YUI Library
  4. Build a TabView from JavaScript




    
Build from Script

/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
body {
  margin:0;
  padding:0;
}









Build from Script



  

This demonstrates how to build a TabView from JavaScript.


      




(function() {
    var tabView = new YAHOO.widget.TabView();
    tabView.addTab( new YAHOO.widget.Tab({
        label: 'lorem',
        content: '

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat.

',
        active: true
    }));
    tabView.addTab( new YAHOO.widget.Tab({
        label: 'ipsum',
        content: '
  • Lorem ipsum dolor sit amet.
  • Lorem ipsum dolor sit amet.
  • Lorem ipsum dolor sit amet.
  • Lorem ipsum dolor sit amet.
'
    }));
    tabView.addTab( new YAHOO.widget.Tab({
        label: 'dolor',
        content: '
Lorem Ipsum 
'
    }));
    YAHOO.log("The example has finished loading; as you interact with it, you'll see log messages appearing here.", "info", "example");
    tabView.appendTo('container');
})();





   
  
yui_2.7.0b.zip( 4,431 k)