Loading ...
Sorry, an error occurred while loading the content.

Add DataTable with Tab Control

Expand Messages
  • codedude11
    Hi Group, I am looking to add a YUI DataTable into a tab which I am building via the YUI Tab Control. I did see an example of a table inside a tab, however
    Message 1 of 2 , Nov 24, 2009
    • 0 Attachment
      Hi Group,

      I am looking to add a YUI DataTable into a tab which I am building via the YUI Tab Control. I did see an example of a table inside a tab, however those tabs were made using HTML, not using the Yahoo defined AddTab() function. Is there a simple way I can add a table into a tab?

      My code is below.

      Thank you for any advice.

      <html>
      <title>Invoice Protocol Using YUI</title>
      <head>
      <!-- Combo-handled YUI CSS files: -->
      <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.8.0r4/build/assets/skins/sam/skin.css">
      <!-- Combo-handled YUI JS files: -->
      <script type="text/javascript" src="http://yui.yahooapis.com/combo?2.8.0r4/build/utilities/utilities.js&2.8.0r4/build/container/container-min.js&2.8.0r4/build/resize/resize-min.js&2.8.0r4/build/layout/layout-min.js&2.8.0r4/build/menu/menu-min.js"></script>

      <!-- Combo-handled YUI CSS files: -->
      <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.8.0r4/build/tabview/assets/skins/sam/tabview.css">
      <!-- Combo-handled YUI JS files: -->
      <script type="text/javascript" src="http://yui.yahooapis.com/combo?2.8.0r4/build/yahoo-dom-event/yahoo-dom-event.js&2.8.0r4/build/element/element-min.js&2.8.0r4/build/tabview/tabview-min.js"></script>



      <script type="text/javascript">
      (function() {
      var Dom = YAHOO.util.Dom,
      Event = YAHOO.util.Event;


      var initTopMenu = function() {
      /*
      Instantiate a MenuBar: The first argument passed to the
      constructor is the id of the element in the page
      representing the MenuBar; the second is an object literal
      of configuration properties.
      */

      var oMenuBar = new YAHOO.widget.MenuBar("productsandservices", {
      autosubmenudisplay: true,
      hidedelay: 750,
      lazyload: true,
      effect: {
      effect: YAHOO.widget.ContainerEffect.FADE,
      duration: 0.25
      }
      });

      /*
      Define an array of object literals, each containing
      the data necessary to create a submenu.
      */

      var aSubmenuData = [

      {
      id: "communication",
      itemdata: [
      { text: "360", url: "http://360.yahoo.com" },
      { text: "Alerts", url: "http://alerts.yahoo.com" },
      { text: "Avatars", url: "http://avatars.yahoo.com" },
      { text: "Groups", url: "http://groups.yahoo.com " },
      { text: "Internet Access", url: "http://promo.yahoo.com/broadband" },
      {
      text: "PIM",
      submenu: {
      id: "pim",
      itemdata: [
      { text: "Yahoo! Mail", url: "http://mail.yahoo.com" },
      { text: "Yahoo! Address Book", url: "http://addressbook.yahoo.com" },
      { text: "Yahoo! Calendar", url: "http://calendar.yahoo.com" },
      { text: "Yahoo! Notepad", url: "http://notepad.yahoo.com" }
      ]
      }

      },
      { text: "Member Directory", url: "http://members.yahoo.com" },
      { text: "Messenger", url: "http://messenger.yahoo.com" },
      { text: "Mobile", url: "http://mobile.yahoo.com" },
      { text: "Flickr Photo Sharing", url: "http://www.flickr.com" },
      ]
      },

      {
      id: "shopping",
      itemdata: [
      { text: "Auctions", url: "http://auctions.shopping.yahoo.com" },
      { text: "Autos", url: "http://autos.yahoo.com" },
      { text: "Classifieds", url: "http://classifieds.yahoo.com" },
      { text: "Flowers & Gifts", url: "http://shopping.yahoo.com/b:Flowers%20%26%20Gifts:20146735" },
      { text: "Real Estate", url: "http://realestate.yahoo.com" },
      { text: "Travel", url: "http://travel.yahoo.com" },
      { text: "Wallet", url: "http://wallet.yahoo.com" },
      { text: "Yellow Pages", url: "http://yp.yahoo.com" }
      ]
      },

      {
      id: "entertainment",
      itemdata: [
      { text: "Fantasy Sports", url: "http://fantasysports.yahoo.com" },
      { text: "Games", url: "http://games.yahoo.com" },
      { text: "Kids", url: "http://www.yahooligans.com" },
      { text: "Music", url: "http://music.yahoo.com" },
      { text: "Movies", url: "http://movies.yahoo.com" },
      { text: "Radio", url: "http://music.yahoo.com/launchcast" },
      { text: "Travel", url: "http://travel.yahoo.com" },
      { text: "TV", url: "http://tv.yahoo.com" }
      ]
      },

      {
      id: "information",
      itemdata: [
      { text: "Downloads", url: "http://downloads.yahoo.com" },
      { text: "Finance", url: "http://finance.yahoo.com" },
      { text: "Health", url: "http://health.yahoo.com" },
      { text: "Local", url: "http://local.yahoo.com" },
      { text: "Maps & Directions", url: "http://maps.yahoo.com" },
      { text: "My Yahoo!", url: "http://my.yahoo.com" },
      { text: "News", url: "http://news.yahoo.com" },
      { text: "Search", url: "http://search.yahoo.com" },
      { text: "Small Business", url: "http://smallbusiness.yahoo.com" },
      { text: "Weather", url: "http://weather.yahoo.com" }
      ]
      }
      ];


      /*
      Subscribe to the "beforerender" event, adding a submenu
      to each of the items in the MenuBar instance.
      */

      oMenuBar.subscribe("beforeRender", function () {

      if (this.getRoot() == this) {

      this.getItem(0).cfg.setProperty("submenu", aSubmenuData[0]);
      this.getItem(1).cfg.setProperty("submenu", aSubmenuData[1]);
      this.getItem(2).cfg.setProperty("submenu", aSubmenuData[2]);
      this.getItem(3).cfg.setProperty("submenu", aSubmenuData[3]);

      }

      });


      /*
      Call the "render" method with no arguments since the
      markup for this MenuBar instance is already exists in
      the page.
      */

      oMenuBar.render();
      };

      var initLeftMenu = function() {
      /*
      Instantiate a Menu: The first argument passed to the
      constructor is the id of the element in the page
      representing the Menu; the second is an object literal
      of configuration properties.
      */

      var oMenu = new YAHOO.widget.Menu("productsandservices2", {
      position: "static",
      hidedelay: 750,
      lazyload: true,
      effect: {
      effect: YAHOO.widget.ContainerEffect.FADE,
      duration: 0.25
      }
      });


      /*
      Define an array of object literals, each containing
      the data necessary to create a submenu.
      */

      var aSubmenuData = [

      {
      id: "communication2",
      itemdata: [
      { text: "360", url: "http://360.yahoo.com" },
      { text: "Alerts", url: "http://alerts.yahoo.com" },
      { text: "Avatars", url: "http://avatars.yahoo.com" },
      { text: "Groups", url: "http://groups.yahoo.com " },
      { text: "Internet Access", url: "http://promo.yahoo.com/broadband" },
      {
      text: "PIM",
      submenu: {
      id: "pim2",
      itemdata: [
      { text: "Yahoo! Mail", url: "http://mail.yahoo.com" },
      { text: "Yahoo! Address Book", url: "http://addressbook.yahoo.com" },
      { text: "Yahoo! Calendar", url: "http://calendar.yahoo.com" },
      { text: "Yahoo! Notepad", url: "http://notepad.yahoo.com" }
      ]
      }

      },
      { text: "Member Directory", url: "http://members.yahoo.com" },
      { text: "Messenger", url: "http://messenger.yahoo.com" },
      { text: "Mobile", url: "http://mobile.yahoo.com" },
      { text: "Flickr Photo Sharing", url: "http://www.flickr.com" },
      ]
      },

      {
      id: "shopping2",
      itemdata: [
      { text: "Auctions", url: "http://auctions.shopping.yahoo.com" },
      { text: "Autos", url: "http://autos.yahoo.com" },
      { text: "Classifieds", url: "http://classifieds.yahoo.com" },
      { text: "Flowers & Gifts", url: "http://shopping.yahoo.com/b:Flowers%20%26%20Gifts:20146735" },
      { text: "Real Estate", url: "http://realestate.yahoo.com" },
      { text: "Travel", url: "http://travel.yahoo.com" },
      { text: "Wallet", url: "http://wallet.yahoo.com" },
      { text: "Yellow Pages", url: "http://yp.yahoo.com" }
      ]
      },

      {
      id: "entertainment2",
      itemdata: [
      { text: "Fantasy Sports", url: "http://fantasysports.yahoo.com" },
      { text: "Games", url: "http://games.yahoo.com" },
      { text: "Kids", url: "http://www.yahooligans.com" },
      { text: "Music", url: "http://music.yahoo.com" },
      { text: "Movies", url: "http://movies.yahoo.com" },
      { text: "Radio", url: "http://music.yahoo.com/launchcast" },
      { text: "Travel", url: "http://travel.yahoo.com" },
      { text: "TV", url: "http://tv.yahoo.com" }
      ]
      },

      {
      id: "information2",
      itemdata: [
      { text: "Downloads", url: "http://downloads.yahoo.com" },
      { text: "Finance", url: "http://finance.yahoo.com" },
      { text: "Health", url: "http://health.yahoo.com" },
      { text: "Local", url: "http://local.yahoo.com" },
      { text: "Maps & Directions", url: "http://maps.yahoo.com" },
      { text: "My Yahoo!", url: "http://my.yahoo.com" },
      { text: "News", url: "http://news.yahoo.com" },
      { text: "Search", url: "http://search.yahoo.com" },
      { text: "Small Business", url: "http://smallbusiness.yahoo.com" },
      { text: "Weather", url: "http://weather.yahoo.com" }
      ]
      }
      ];


      // Subscribe to the Menu instance's "beforeRender" event

      oMenu.subscribe("beforeRender", function () {

      if (this.getRoot() == this) {

      this.getItem(0).cfg.setProperty("submenu", aSubmenuData[0]);
      this.getItem(1).cfg.setProperty("submenu", aSubmenuData[1]);
      this.getItem(2).cfg.setProperty("submenu", aSubmenuData[2]);
      this.getItem(3).cfg.setProperty("submenu", aSubmenuData[3]);

      }

      });


      /*
      Call the "render" method with no arguments since the
      markup for this Menu instance is already exists in the page.
      */

      oMenu.render();
      };


      Event.onDOMReady(function() {
      var layout = new YAHOO.widget.Layout({
      units: [
      { position: 'top', height: 28, scroll: null, zIndex: 2, body:'Header (Menus will go here)' },
      // { position: 'right', header: 'Right', width: 300, resize: true, footer: 'Footer', collapse: true, scroll: true, body: 'right1', animate: true, gutter: '5' },
      { position: 'bottom', height: 30, body: 'bottom1', body: 'Footer (Status and error messages will go here)' },
      { position: 'left', header: 'Left', width: 200, body: 'left1', gutter: '5', scroll: null, zIndex: 1 },
      { position: 'center', body: 'center1', gutter: '5 0' }
      ]
      });

      layout.on('render', function() {
      YAHOO.util.Event.onContentReady("productsandservices", initTopMenu);
      YAHOO.util.Event.onContentReady("productsandservices2", initLeftMenu);
      });

      layout.render();




      var tabView = new YAHOO.widget.TabView();

      tabView.addTab( new YAHOO.widget.Tab({
      label: 'Invoice Summary',
      content: '<h3>This section will contain the invoice summary information.</h3><img src="invoice_summary.GIF">',
      active: true
      }));

      tabView.addTab( new YAHOO.widget.Tab({
      label: 'Invoice Details',
      content: '<ul><li><a href="#">Lorem ipsum dolor sit amet.</a></li><li><a href="#">Lorem ipsum dolor sit amet.</a></li></ul>'

      }));

      tabView.addTab( new YAHOO.widget.Tab({
      label: 'Call Details',
      content: '<form action="#"><fieldset><legend>Lorem Ipsum</legend><label for="foo"> <input id="foo" name="foo"></label><input type="submit" value="submit"></fieldset></form>'

      }));
      // YAHOO.log("The example has finished loading; as you interact with it, you'll see log messages appearing here.", "info", "example");

      tabView.appendTo('center1');

      });
      })();

      </script>
      </head>

      <body class=" yui-skin-sam">
      <div id="top1"></div>
      <div id="bottom1"></div>
      <div id="left1"></div>
      <div id="center1"></div>
      </body>
      </html>
    • Satyam
      http://www.satyam.com.ar/yui/2.6.0/TableWithDetails.html
      Message 2 of 2 , Nov 24, 2009
      • 0 Attachment
        http://www.satyam.com.ar/yui/2.6.0/TableWithDetails.html

        codedude11 escribió:
        > Hi Group,
        >
        > I am looking to add a YUI DataTable into a tab which I am building via the YUI Tab Control. I did see an example of a table inside a tab, however those tabs were made using HTML, not using the Yahoo defined AddTab() function. Is there a simple way I can add a table into a tab?
        >
        > My code is below.
        >
        > Thank you for any advice.
        >
        > <html>
        > <title>Invoice Protocol Using YUI</title>
        > <head>
        > <!-- Combo-handled YUI CSS files: -->
        > <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.8.0r4/build/assets/skins/sam/skin.css">
        > <!-- Combo-handled YUI JS files: -->
        > <script type="text/javascript" src="http://yui.yahooapis.com/combo?2.8.0r4/build/utilities/utilities.js&2.8.0r4/build/container/container-min.js&2.8.0r4/build/resize/resize-min.js&2.8.0r4/build/layout/layout-min.js&2.8.0r4/build/menu/menu-min.js"></script>
        >
        > <!-- Combo-handled YUI CSS files: -->
        > <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.8.0r4/build/tabview/assets/skins/sam/tabview.css">
        > <!-- Combo-handled YUI JS files: -->
        > <script type="text/javascript" src="http://yui.yahooapis.com/combo?2.8.0r4/build/yahoo-dom-event/yahoo-dom-event.js&2.8.0r4/build/element/element-min.js&2.8.0r4/build/tabview/tabview-min.js"></script>
        >
        >
        >
        > <script type="text/javascript">
        > (function() {
        > var Dom = YAHOO.util.Dom,
        > Event = YAHOO.util.Event;
        >
        >
        > var initTopMenu = function() {
        > /*
        > Instantiate a MenuBar: The first argument passed to the
        > constructor is the id of the element in the page
        > representing the MenuBar; the second is an object literal
        > of configuration properties.
        > */
        >
        > var oMenuBar = new YAHOO.widget.MenuBar("productsandservices", {
        > autosubmenudisplay: true,
        > hidedelay: 750,
        > lazyload: true,
        > effect: {
        > effect: YAHOO.widget.ContainerEffect.FADE,
        > duration: 0.25
        > }
        > });
        >
        > /*
        > Define an array of object literals, each containing
        > the data necessary to create a submenu.
        > */
        >
        > var aSubmenuData = [
        >
        > {
        > id: "communication",
        > itemdata: [
        > { text: "360", url: "http://360.yahoo.com" },
        > { text: "Alerts", url: "http://alerts.yahoo.com" },
        > { text: "Avatars", url: "http://avatars.yahoo.com" },
        > { text: "Groups", url: "http://groups.yahoo.com " },
        > { text: "Internet Access", url: "http://promo.yahoo.com/broadband" },
        > {
        > text: "PIM",
        > submenu: {
        > id: "pim",
        > itemdata: [
        > { text: "Yahoo! Mail", url: "http://mail.yahoo.com" },
        > { text: "Yahoo! Address Book", url: "http://addressbook.yahoo.com" },
        > { text: "Yahoo! Calendar", url: "http://calendar.yahoo.com" },
        > { text: "Yahoo! Notepad", url: "http://notepad.yahoo.com" }
        > ]
        > }
        >
        > },
        > { text: "Member Directory", url: "http://members.yahoo.com" },
        > { text: "Messenger", url: "http://messenger.yahoo.com" },
        > { text: "Mobile", url: "http://mobile.yahoo.com" },
        > { text: "Flickr Photo Sharing", url: "http://www.flickr.com" },
        > ]
        > },
        >
        > {
        > id: "shopping",
        > itemdata: [
        > { text: "Auctions", url: "http://auctions.shopping.yahoo.com" },
        > { text: "Autos", url: "http://autos.yahoo.com" },
        > { text: "Classifieds", url: "http://classifieds.yahoo.com" },
        > { text: "Flowers & Gifts", url: "http://shopping.yahoo.com/b:Flowers%20%26%20Gifts:20146735" },
        > { text: "Real Estate", url: "http://realestate.yahoo.com" },
        > { text: "Travel", url: "http://travel.yahoo.com" },
        > { text: "Wallet", url: "http://wallet.yahoo.com" },
        > { text: "Yellow Pages", url: "http://yp.yahoo.com" }
        > ]
        > },
        >
        > {
        > id: "entertainment",
        > itemdata: [
        > { text: "Fantasy Sports", url: "http://fantasysports.yahoo.com" },
        > { text: "Games", url: "http://games.yahoo.com" },
        > { text: "Kids", url: "http://www.yahooligans.com" },
        > { text: "Music", url: "http://music.yahoo.com" },
        > { text: "Movies", url: "http://movies.yahoo.com" },
        > { text: "Radio", url: "http://music.yahoo.com/launchcast" },
        > { text: "Travel", url: "http://travel.yahoo.com" },
        > { text: "TV", url: "http://tv.yahoo.com" }
        > ]
        > },
        >
        > {
        > id: "information",
        > itemdata: [
        > { text: "Downloads", url: "http://downloads.yahoo.com" },
        > { text: "Finance", url: "http://finance.yahoo.com" },
        > { text: "Health", url: "http://health.yahoo.com" },
        > { text: "Local", url: "http://local.yahoo.com" },
        > { text: "Maps & Directions", url: "http://maps.yahoo.com" },
        > { text: "My Yahoo!", url: "http://my.yahoo.com" },
        > { text: "News", url: "http://news.yahoo.com" },
        > { text: "Search", url: "http://search.yahoo.com" },
        > { text: "Small Business", url: "http://smallbusiness.yahoo.com" },
        > { text: "Weather", url: "http://weather.yahoo.com" }
        > ]
        > }
        > ];
        >
        >
        > /*
        > Subscribe to the "beforerender" event, adding a submenu
        > to each of the items in the MenuBar instance.
        > */
        >
        > oMenuBar.subscribe("beforeRender", function () {
        >
        > if (this.getRoot() == this) {
        >
        > this.getItem(0).cfg.setProperty("submenu", aSubmenuData[0]);
        > this.getItem(1).cfg.setProperty("submenu", aSubmenuData[1]);
        > this.getItem(2).cfg.setProperty("submenu", aSubmenuData[2]);
        > this.getItem(3).cfg.setProperty("submenu", aSubmenuData[3]);
        >
        > }
        >
        > });
        >
        >
        > /*
        > Call the "render" method with no arguments since the
        > markup for this MenuBar instance is already exists in
        > the page.
        > */
        >
        > oMenuBar.render();
        > };
        >
        > var initLeftMenu = function() {
        > /*
        > Instantiate a Menu: The first argument passed to the
        > constructor is the id of the element in the page
        > representing the Menu; the second is an object literal
        > of configuration properties.
        > */
        >
        > var oMenu = new YAHOO.widget.Menu("productsandservices2", {
        > position: "static",
        > hidedelay: 750,
        > lazyload: true,
        > effect: {
        > effect: YAHOO.widget.ContainerEffect.FADE,
        > duration: 0.25
        > }
        > });
        >
        >
        > /*
        > Define an array of object literals, each containing
        > the data necessary to create a submenu.
        > */
        >
        > var aSubmenuData = [
        >
        > {
        > id: "communication2",
        > itemdata: [
        > { text: "360", url: "http://360.yahoo.com" },
        > { text: "Alerts", url: "http://alerts.yahoo.com" },
        > { text: "Avatars", url: "http://avatars.yahoo.com" },
        > { text: "Groups", url: "http://groups.yahoo.com " },
        > { text: "Internet Access", url: "http://promo.yahoo.com/broadband" },
        > {
        > text: "PIM",
        > submenu: {
        > id: "pim2",
        > itemdata: [
        > { text: "Yahoo! Mail", url: "http://mail.yahoo.com" },
        > { text: "Yahoo! Address Book", url: "http://addressbook.yahoo.com" },
        > { text: "Yahoo! Calendar", url: "http://calendar.yahoo.com" },
        > { text: "Yahoo! Notepad", url: "http://notepad.yahoo.com" }
        > ]
        > }
        >
        > },
        > { text: "Member Directory", url: "http://members.yahoo.com" },
        > { text: "Messenger", url: "http://messenger.yahoo.com" },
        > { text: "Mobile", url: "http://mobile.yahoo.com" },
        > { text: "Flickr Photo Sharing", url: "http://www.flickr.com" },
        > ]
        > },
        >
        > {
        > id: "shopping2",
        > itemdata: [
        > { text: "Auctions", url: "http://auctions.shopping.yahoo.com" },
        > { text: "Autos", url: "http://autos.yahoo.com" },
        > { text: "Classifieds", url: "http://classifieds.yahoo.com" },
        > { text: "Flowers & Gifts", url: "http://shopping.yahoo.com/b:Flowers%20%26%20Gifts:20146735" },
        > { text: "Real Estate", url: "http://realestate.yahoo.com" },
        > { text: "Travel", url: "http://travel.yahoo.com" },
        > { text: "Wallet", url: "http://wallet.yahoo.com" },
        > { text: "Yellow Pages", url: "http://yp.yahoo.com" }
        > ]
        > },
        >
        > {
        > id: "entertainment2",
        > itemdata: [
        > { text: "Fantasy Sports", url: "http://fantasysports.yahoo.com" },
        > { text: "Games", url: "http://games.yahoo.com" },
        > { text: "Kids", url: "http://www.yahooligans.com" },
        > { text: "Music", url: "http://music.yahoo.com" },
        > { text: "Movies", url: "http://movies.yahoo.com" },
        > { text: "Radio", url: "http://music.yahoo.com/launchcast" },
        > { text: "Travel", url: "http://travel.yahoo.com" },
        > { text: "TV", url: "http://tv.yahoo.com" }
        > ]
        > },
        >
        > {
        > id: "information2",
        > itemdata: [
        > { text: "Downloads", url: "http://downloads.yahoo.com" },
        > { text: "Finance", url: "http://finance.yahoo.com" },
        > { text: "Health", url: "http://health.yahoo.com" },
        > { text: "Local", url: "http://local.yahoo.com" },
        > { text: "Maps & Directions", url: "http://maps.yahoo.com" },
        > { text: "My Yahoo!", url: "http://my.yahoo.com" },
        > { text: "News", url: "http://news.yahoo.com" },
        > { text: "Search", url: "http://search.yahoo.com" },
        > { text: "Small Business", url: "http://smallbusiness.yahoo.com" },
        > { text: "Weather", url: "http://weather.yahoo.com" }
        > ]
        > }
        > ];
        >
        >
        > // Subscribe to the Menu instance's "beforeRender" event
        >
        > oMenu.subscribe("beforeRender", function () {
        >
        > if (this.getRoot() == this) {
        >
        > this.getItem(0).cfg.setProperty("submenu", aSubmenuData[0]);
        > this.getItem(1).cfg.setProperty("submenu", aSubmenuData[1]);
        > this.getItem(2).cfg.setProperty("submenu", aSubmenuData[2]);
        > this.getItem(3).cfg.setProperty("submenu", aSubmenuData[3]);
        >
        > }
        >
        > });
        >
        >
        > /*
        > Call the "render" method with no arguments since the
        > markup for this Menu instance is already exists in the page.
        > */
        >
        > oMenu.render();
        > };
        >
        >
        > Event.onDOMReady(function() {
        > var layout = new YAHOO.widget.Layout({
        > units: [
        > { position: 'top', height: 28, scroll: null, zIndex: 2, body:'Header (Menus will go here)' },
        > // { position: 'right', header: 'Right', width: 300, resize: true, footer: 'Footer', collapse: true, scroll: true, body: 'right1', animate: true, gutter: '5' },
        > { position: 'bottom', height: 30, body: 'bottom1', body: 'Footer (Status and error messages will go here)' },
        > { position: 'left', header: 'Left', width: 200, body: 'left1', gutter: '5', scroll: null, zIndex: 1 },
        > { position: 'center', body: 'center1', gutter: '5 0' }
        > ]
        > });
        >
        > layout.on('render', function() {
        > YAHOO.util.Event.onContentReady("productsandservices", initTopMenu);
        > YAHOO.util.Event.onContentReady("productsandservices2", initLeftMenu);
        > });
        >
        > layout.render();
        >
        >
        >
        >
        > var tabView = new YAHOO.widget.TabView();
        >
        > tabView.addTab( new YAHOO.widget.Tab({
        > label: 'Invoice Summary',
        > content: '<h3>This section will contain the invoice summary information.</h3><img src="invoice_summary.GIF">',
        > active: true
        > }));
        >
        > tabView.addTab( new YAHOO.widget.Tab({
        > label: 'Invoice Details',
        > content: '<ul><li><a href="#">Lorem ipsum dolor sit amet.</a></li><li><a href="#">Lorem ipsum dolor sit amet.</a></li></ul>'
        >
        > }));
        >
        > tabView.addTab( new YAHOO.widget.Tab({
        > label: 'Call Details',
        > content: '<form action="#"><fieldset><legend>Lorem Ipsum</legend><label for="foo"> <input id="foo" name="foo"></label><input type="submit" value="submit"></fieldset></form>'
        >
        > }));
        > // YAHOO.log("The example has finished loading; as you interact with it, you'll see log messages appearing here.", "info", "example");
        >
        > tabView.appendTo('center1');
        >
        > });
        > })();
        >
        > </script>
        > </head>
        >
        > <body class=" yui-skin-sam">
        > <div id="top1"></div>
        > <div id="bottom1"></div>
        > <div id="left1"></div>
        > <div id="center1"></div>
        > </body>
        > </html>
        >
        >
        >
        > ------------------------------------
        >
        > Yahoo! Groups Links
        >
        >
        >
        > ------------------------------------------------------------------------
        >
        >
        > No virus found in this incoming message.
        > Checked by AVG - www.avg.com
        > Version: 9.0.709 / Virus Database: 270.14.80/2523 - Release Date: 11/24/09 08:46:00
        >
        >
      Your message has been successfully submitted and would be delivered to recipients shortly.