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

Re: [ydn-javascript] Re: Subtabs using YUI Tabview

Expand Messages
  • Shishir Jain
    Thanks George for a quick reply. I m looking for a slightly different way of representing the subtabs. Subtabs should look like horizontal list of links like
    Message 1 of 3 , Apr 30, 2008
    • 0 Attachment
      Thanks George for a quick reply. I'm looking for a slightly different way of representing the subtabs. Subtabs should look like horizontal list of links like how news.yahoo.com uses. See the attachment for an example.

      I'm not sure if this look can directly be achieved by css from your example or it requires a separate control to create it.

      Thanks & Regards,
      Shishir Jain.



      On Wed, Apr 30, 2008 at 12:42 PM, George <codeexploiter@...> wrote:

      Hi Shishir,

      It is possible to have sub tabs within a tab. The following is a
      simple example. Make sure the the include files have correct path
      before loading the file in browser.

      If you are planning to have different CSS styles for the subtabs you
      have to redefine those items for your case.

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
      "http://www.w3.org/TR/html4/strict.dtd">
      <html>
      <head>
      <meta http-equiv="content-type" content="text/html;
      charset=utf-8">
      <title>Build from Markup</title>
      <style type="text/css">
      /*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;
      }
      </style>
      <link rel="stylesheet" type="text/css"
      href="../../build/fonts/fonts-min.css" />
      <link rel="stylesheet" type="text/css"
      href="../../build/tabview/assets/skins/sam/tabview.css" />
      <script type="text/javascript"
      src="../../build/yahoo-dom-event/yahoo-dom-event.js">
      </script>
      <script type="text/javascript"
      src="../../build/element/element-beta-min.js">
      </script>
      <script type="text/javascript"
      src="../../build/tabview/tabview-min.js">
      </script>
      <!--there is no custom header content for this example-->
      </head>
      <body class=" yui-skin-sam">
      <h1>Build from Markup</h1>
      <div class="exampleIntro">
      <p>
      This demonstrates how to build a TabView from markup.
      </p>
      </div>
      <!--BEGIN SOURCE CODE FOR EXAMPLE
      =============================== -->
      <div id="demo" class="yui-navset">
      <ul class="yui-nav">
      <li>
      <a href="#tab1"><em>Tab One Label</em></a>
      </li>
      <li class="selected">
      <a href="#tab2"><em>Tab Two Label</em></a>
      </li>
      <li>
      <a href="#tab3"><em>Tab Three Label</em></a>
      </li>
      </ul>
      <div class="yui-content">
      <div id="tab1">
      <p>
      Tab One Content
      </p>
      </div>
      <div id="tab2">
      <p>
      Tab Two Content
      </p>
      </div>
      <div id="tab3">
      <div id="demo1" class="yui-navset">
      <ul class="yui-nav">
      <li>
      <a href="#subtab1"><em>Tab One
      Label</em></a>
      </li>
      <li class="selected">
      <a href="#subtab2"><em>Tab Two
      Label</em></a>
      </li>
      </ul>
      <div class="yui-content">
      <div id="subtab1">
      <p>
      Tab One Content
      </p>
      </div>
      <div id="subtab2">
      <p>
      Tab Two Content
      </p>
      </div>
      </div>
      </div>
      </div>
      </div>
      </div>
      <script>
      (function(){
      var tabView1 = new YAHOO.widget.TabView('demo');
      var tabView2 = new YAHOO.widget.TabView('demo1');

      YAHOO.log("The example has finished loading; as you
      interact with it, you'll see log messages appearing here.", "info",
      "example");
      })();
      </script>
      <!--END SOURCE CODE FOR EXAMPLE
      =============================== -->
      </body>
      </html>

      --- In ydn-javascript@yahoogroups.com, "shishir_jain"
      <shishir.jain@...> wrote:
      >
      > Hello:
      >
      > I just wanted to know whether YUI Tabview supports Subtabs, natively
      > (Related horizontal list of links below the selected tab - e.g. as
      > shown in http://news.yahoo.com.) I couldn't find any example. Any
      > pointer or documentation about it would be useful.
      >
      > If it is not supported natively by YUI Tabview and if someone has
      > written an extension to it, it would be a great if it can be shared,
      > or if YUI team can add this extension.
      >
      > Thanks & Regards,
      > Shishir Jain.
      >


    Your message has been successfully submitted and would be delivered to recipients shortly.