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

7464Re: Hyperlinks and dynamic pages inside Tabview contents

Expand Messages
  • jcyrnh
    Dec 13, 2006
      This seems like a good approach, and I am about half way there. i can
      see events triggering and get the src of the link to travel to, etc.
      However I have two stumbling blocks.

      1) How do I tell the active tab to load the new source. I imagine it
      is something like tabView.getTab(0).set('dataSrc',elTarget); but it
      doesn't recognize tabView. Further I am unclear how to determinine
      the index of the tab during the event.

      2) How do I tell it not to trigger on clicking on the tab labels? If
      I was coding the tabs in html that would be easy, but they are
      dynamically made so I don't have an ID for just the content divs, only
      the div that holds everything including the labels.

      YAHOO.example.init = function() {
      var tabView = new YAHOO.widget.TabView({id: 'savvyUserTabs'});

      <cfset counter = 1>
      <cfloop collection="#tabsystem#" item="Temp">
      <cfoutput>
      tabView.addTab(new YAHOO.widget.Tab({
      label: '#tabsystem[temp].label#',
      dataSrc: '#tabsystem[temp].src#&page_ID=#page_ID#',
      active: <cfif tabsystem[temp].label eq activetab OR activetab
      eq temp>true<cfelse>false</cfif>,
      cacheData: #tabsystem[temp].cache# /* only load once */
      }));
      </cfoutput>
      <cfset counter = counter + 1>
      </cfloop>


      YAHOO.util.Event.onContentReady('savvyUserTabsContainer', function() {
      tabView.appendTo('savvyUserTabsContainer');
      });

      };


      function clickHandler(e) {
      //get the resolved (non-text node) target:
      var elTarget = YAHOO.util.Event.getTarget(e);
      //walk up the DOM tree looking for an <li>
      //in the target's ancestry; desist when you
      //reach the container div
      while (elTarget.id != "savvyUserTabsContainer") {
      //are you an A?
      if(elTarget.nodeName.toUpperCase() == "A") {
      //yes, an A: so write out a message to the log
      tabView.getTab(0).set('dataSrc',elTarget);
      //and then stop looking:
      break;
      } else {
      //wasn't the container, but wasn't an li; so
      //let's step up the DOM and keep looking:
      elTarget = elTarget.parentNode;
      }
      }
      }
      //attach clickHandler as a listener for any click on
      //the container div:
      YAHOO.util.Event.on("savvyUserTabsContainer", "click", clickHandler);

      YAHOO.example.init();

      --- In ydn-javascript@yahoogroups.com, Eric Miraglia <miraglia@...> wrote:
      >
      > Richard,
      >
      > Matt's suggestion is a good one. Note that there are a few good
      > resources for you if that approach — Event Delegation — is a new one
      > to you:
      >
      > http://developer.yahoo.com/yui/examples/event/event-delegation.html
      > http://icant.co.uk/sandbox/eventdelegation/
      >
      > Regards,
      > Eric
      >
      > _____________________________________________
      > Eric Miraglia
      > Yahoo! Presentation Platform Engineering
      >
      >
      >
      > On Dec 4, 2006, at 10:34 AM, Matt Sweeney wrote:
      >
      > > Another approach would be to listen for clicks on the containing
      > > element, and if the target element meets certain critera (its an
      > > anchor, has an href, etc.), handle as needed.
      > >
      > > This can be accomplished with a single listener, and then you can
      > > avoid managing listeners on your dynamic content.
      > >
      > > Matt
      > >
      > > otrorichard wrote:
      > >> Sorry my delayed answer (my job), but I think is very hard catch
      > >> every
      > >> event and filtering its tags. Is there a simpler way?
      > >>
      > >>
      > >>
      > >> --- In ydn-javascript@yahoogroups.com, Nige White <nigelw@> wrote:
      > >>
      > >>> You'll have to search for them all (document.getElementsByTagName
      > >>> ("a")) and use YAHOO.util.Event to give them onclick listeners
      > >>> which stop the event, and load the url into the tab using
      > >>> YAHOO.util.Connect. otrorichard wrote:
      > >>>> Hi everyone,
      > >>>>
      > >>>> Two questions:
      > >>>>
      > >>>> The simplest, How make a hyperlink inside tabview content and
      > >>>> the new
      > >>>> page keeps inside the tab and no outside, like a new page?
      > >>>>
      > >>>> All the hyperlinks in the tabview examples point to "#".
      > >>>>
      > >>>> The second one.
      > >>>> I need to put inside a tabview content a php-based search page,I
      > >>>> can
      > >>>> get the first page, but the paging is impossible.
      > >>>> Note: Outside the tabview my search pages work fine.
      > >>>>
      > >>>> thanks in advanced.
      > >>>>
      > >>>> Richard
      > >>>>
      > >>>>
      > >>>>
      ___________________________________________________________________
      > >>>> __ This message has been checked for all known viruses. Virus
      > >>>> scanning powered by Messagelabs http://www.messagelabs.comFor
      > >>>> more information e-mail : hostmaster@
      > >>>
      ____________________________________________________________________
      > >>> _ This message has been checked for all known viruses. Virus
      > >>> scanning powered by Messagelabs http://www.messagelabs.com For
      > >>> more information e-mail : hostmaster@
      > >>
      > >>
      > >>
      > >> Yahoo! Groups Links
      > >>
      > >>
      > >>
      > >>
      > >>
      > >>
      > >>
      > >
      > >
      > >
      >
    • Show all 10 messages in this topic