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

Re: [ydn-javascript] Add DataTable with Tab Control

Expand Messages
  • Satyam
    http://www.satyam.com.ar/yui/2.6.0/TableWithDetails.html
    Message 1 of 2 , Nov 24, 2009
    View Source
    • 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.