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

TabView

Expand Messages
  • brad_balmer
    I m trying something simple first. I have: var myTabs = new YAHOO.widget.TabView( programMenu );
    Message 1 of 8 , May 8 11:40 AM
    • 0 Attachment
      I'm trying something simple first.

      I have:

      <script type="text/javascript">
      var myTabs = new YAHOO.widget.TabView("programMenu");
      </script>

      <div id="programMenu" class="yui-navset">
      <ul class="yui-nav">
      <li class="selected"><a href='link1'><em>Edit
      Programs</em></a></li>
      <li><a href="link2"><em>Edit Groups</em></a></li>
      <li><a href="link3"><em>Edit Users</em></a></li>
      </ul>
      <div class="yui-content">
      <div>
      link1 page data
      </div>
      </div>
      </div>

      What I would like is when I click on either link2 or link3 I am
      taken, first to the action and then to the page for the link.
      Instead, the link is not followed and I stay on link1's page.

      Is there something underneath that I need to set to follow the link?

      Thanks for any help
    • Ted Husted
      In the code sample, there are no divs for 2 and 3 link1 page data link2 page data
      Message 2 of 8 , May 8 1:26 PM
      • 0 Attachment
        In the code sample, there are no divs for "2" and "3"

        <div class="yui-content">
        <div>
        link1 page data
        </div>
        <!-- add: -->
        <div>
        link2 page data
        </div>
        <div>
        link3 page data
        </div>
        </div>
        </div>

        HTH, Ted.
        <http://www.geocities.com/planetyazaar/>


        Brad Balmer-2 wrote:
        >
        > I'm trying something simple first.
        >
        > I have:
        >
        > <script type="text/javascript">
        > var myTabs = new YAHOO.widget.TabView("programMenu");
        > </script>
        >
        > <div id="programMenu" class="yui-navset">
        > <ul class="yui-nav">
        > <li class="selected"> link1 <em>Edit
        > Programs</em> </li>
        > <li> link2 <em>Edit Groups</em> </li>
        > <li> link3 <em>Edit Users</em> </li>
        > </ul>
        > <div class="yui-content">
        > <div>
        > link1 page data
        > </div>
        > </div>
        > </div>
        >
        > What I would like is when I click on either link2 or link3 I am
        > taken, first to the action and then to the page for the link.
        > Instead, the link is not followed and I stay on link1's page.
        >
        > Is there something underneath that I need to set to follow the link?
        >
        > Thanks for any help
        >
        >
        >

        --
        View this message in context: http://www.nabble.com/TabView-tf3711438.html#a10383404
        Sent from the ydn-javascript mailing list archive at Nabble.com.
      • Tony Bibbs
        I ve got a tab that has a couple of the Rich Text Editors embedded in it. All seems to be working just fine except the height of the tab area doesn t
        Message 3 of 8 , Dec 22, 2007
        • 0 Attachment
          I've got a tab that has a couple of the Rich Text Editors embedded in it. All seems to be working just fine except the height of the tab area doesn't accommodate the editors (e.g. the editors spill outside the visual boundaries of the tab). I didn't see any Height settings on the Tab constructor so is there another way to control this?

          Thanks in advance,

          --Tony
        • Tony Bibbs
          Well, as I half expected this was of my own doing using the default CSS and one of the example I pasted in an inline style that was causing all the problems.
          Message 4 of 8 , Dec 22, 2007
          • 0 Attachment
            Well, as I half expected this was of my own doing using the default CSS and one of the example I pasted in an inline style that was causing all the problems. 

            --Tony

            ----- Original Message ----
            From: Tony Bibbs <tony@...>
            To: ydn-javascript@yahoogroups.com
            Sent: Saturday, December 22, 2007 4:30:08 PM
            Subject: [ydn-javascript] TabView

            I've got a tab that has a couple of the Rich Text Editors embedded in it. All seems to be working just fine except the height of the tab area doesn't accommodate the editors (e.g. the editors spill outside the visual boundaries of the tab). I didn't see any Height settings on the Tab constructor so is there another way to control this?

            Thanks in advance,

            --Tony


          • Hollywood
            I made a simple change to the FrameWorkup_Clean.html TabView example that shows that either a) the element-beta.js is not working properly or b) the
            Message 5 of 8 , Dec 26, 2007
            • 0 Attachment
              I made a simple change to the FrameWorkup_Clean.html TabView example that shows that either a) the element-beta.js is not working properly or b) the documentation for the Tab is wrong.  For the Tab's "beforeActiveChange" event it says "If handler returns false, the change will be cancelled, and the value will not be set."  So this should mean if you return a false from the handler, the tabs will not change state.  This does not happen, what happens is that it leaves it in limbo where both tabs are active.
               
              <!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">
              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.js"></script>
              <script type="text/javascript" src="../../build/tabview/tabview.js"></script>
              </head>
               
              <body class=" yui-skin-sam">
              <h1>Build from Markup</h1>
               
              <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"><p>Tab Three Content</p></div>
                  </div>
              </div>
              <script>
              (function() {
                  var tabView = new YAHOO.widget.TabView('demo');
               
                  var tab1 = tabView.getTab(1);
                  tab1.addListener('beforeActiveChange', function(e)
                  {
                      return false;
                  });
                 
                  YAHOO.log("The example has finished loading; as you interact with it, you'll see log messages appearing here.", "info", "example");
              })();
              </script>
              </body>
              </html>
               
              Any thoughts?
               
              P.S. Should note too that the example included with the "beforeActiveChange" reallly isn't really that relavent nor particularly helpful.
              P.P.S. Why is TabView not marked beta if it relies on the element-beta.js which *is* marked beta?  I ask because I was trying to figure out why the "beforeActiveChange" doesn't work, and in doing some debuging I ended up in the element-beta.js.  Any code that relies on beta code is by definition beta code.
            • Hollywood
              Should note as a piece of follow-up that the returning false from the beforeActiveTabChange event on the TabView works as expected based on the documentation.
              Message 6 of 8 , Dec 26, 2007
              • 0 Attachment
                Should note as a piece of follow-up that the returning false from the beforeActiveTabChange event on the TabView works as expected based on the documentation.
                ----- Original Message -----
                From: Hollywood
                Sent: Wednesday, December 26, 2007 7:12 PM
                Subject: TabView

                I made a simple change to the FrameWorkup_Clean.html TabView example that shows that either a) the element-beta.js is not working properly or b) the documentation for the Tab is wrong.  For the Tab's "beforeActiveChange" event it says "If handler returns false, the change will be cancelled, and the value will not be set."  So this should mean if you return a false from the handler, the tabs will not change state.  This does not happen, what happens is that it leaves it in limbo where both tabs are active.
                 
                <!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">
                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.js"></script>
                <script type="text/javascript" src="../../build/tabview/tabview.js"></script>
                </head>
                 
                <body class=" yui-skin-sam">
                <h1>Build from Markup</h1>
                 
                <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"><p>Tab Three Content</p></div>
                    </div>
                </div>
                <script>
                (function() {
                    var tabView = new YAHOO.widget.TabView('demo');
                 
                    var tab1 = tabView.getTab(1);
                    tab1.addListener('beforeActiveChange', function(e)
                    {
                        return false;
                    });
                   
                    YAHOO.log("The example has finished loading; as you interact with it, you'll see log messages appearing here.", "info", "example");
                })();
                </script>
                </body>
                </html>
                 
                Any thoughts?
                 
                P.S. Should note too that the example included with the "beforeActiveChange" reallly isn't really that relavent nor particularly helpful.
                P.P.S. Why is TabView not marked beta if it relies on the element-beta.js which *is* marked beta?  I ask because I was trying to figure out why the "beforeActiveChange" doesn't work, and in doing some debuging I ended up in the element-beta.js.  Any code that relies on beta code is by definition beta code.
              • Eric Miraglia
                Hollywood, I concur; the beforeActiveChange event s return value isn t functioning as specified. Please file a bug in SourceForge; we ll get on this for the
                Message 7 of 8 , Dec 26, 2007
                • 0 Attachment
                  Hollywood,

                  I concur; the beforeActiveChange event's return value isn't functioning as specified. 

                  Please file a bug in SourceForge; we'll get on this for the next release.


                  You've already noted what the current workaround is: Subscribe to the corresponding event at the TabView level and suppress the change from there if needed.

                  Regards,
                  Eric


                  ______________________________________________
                  Eric Miraglia
                  Yahoo! User Interface Library


                  On Dec 26, 2007, at 5:16 PM, Hollywood wrote:


                  Should note as a piece of follow-up that the returning false from the beforeActiveTabChan ge event on the TabView works as expected based on the documentation.
                  ----- Original Message -----
                  From: Hollywood
                  Sent: Wednesday, December 26, 2007 7:12 PM
                  Subject: TabView

                  I made a simple change to the FrameWorkup_ Clean.html TabView example that shows that either a) the element-beta. js is not working properly or b) the documentation for the Tab is wrong.  For the Tab's "beforeActiveChange " event it says "If handler returns false, the change will be cancelled, and the value will not be set."  So this should mean if you return a false from the handler, the tabs will not change state.  This does not happen, what happens is that it leaves it in limbo where both tabs are active.
                   
                  <!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">
                  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/javascri pt" src="../../build/ yahoo-dom- event/yahoo- dom-event. js"></script>
                  <script type="text/javascri pt" src="../../build/ element/element- beta.js"></script>
                  <script type="text/javascri pt" src="../../build/ tabview/tabview. js"></script>
                  </head>
                   
                  <body class=" yui-skin-sam">
                  <h1>Build from Markup</h1>
                   
                  <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"><p>Tab Three Content</p></div>
                      </div>
                  </div>
                  <script>
                  (function() {
                      var tabView = new YAHOO.widget. TabView(' demo');
                   
                      var tab1 = tabView.getTab( 1);
                      tab1.addListener( 'beforeActiveCha nge', function(e) 
                      { 
                          return false; 
                      });
                      
                      YAHOO.log("The example has finished loading; as you interact with it, you'll see log messages appearing here.", "info", "example");
                  })();
                  </script>
                  </body>
                  </html>
                   
                  Any thoughts?
                   
                  P.S. Should note too that the example included with the "beforeActiveChange " reallly isn't really that relavent nor particularly helpful.
                  P.P.S. Why is TabView not marked beta if it relies on the element-beta. js which *is* marked beta?  I ask because I was trying to figure out why the "beforeActiveChange " doesn't work, and in doing some debuging I ended up in the element-beta. js.  Any code that relies on beta code is by definition beta code.


                • umeshawasthi_80
                  Hi All, I am new to YUI and have just started my leraning path for it.i am learning about TabView and able to create it successfuly,but i want a slight
                  Message 8 of 8 , Oct 31, 2008
                  • 0 Attachment
                    Hi All,

                    I am new to YUI and have just started my leraning path for it.i am
                    learning about TabView and able to create it successfuly,but i want a
                    slight modification in it.

                    what i want is to show some text fields and some others HTML/YUI
                    component in one of the Tab field when the user click on the tab but
                    unable to figure it out how to do it.

                    In order to explain it more i want to use these Tabes to show certain
                    information to the user and aslo provide user the facility to
                    edit/update the information so i want the information to be displayed
                    in certain html component inside this TabView when the user click on
                    this tab.

                    can anybody show me the pointer how to do this??

                    thanks in advance
                    umesh
                  Your message has been successfully submitted and would be delivered to recipients shortly.