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

7479Re: [ydn-javascript] Re: Hyperlinks and dynamic pages inside Tabview contents

Expand Messages
  • Matt Sweeney
    Dec 13, 2006
      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.
        

      You can pass the tabView instance as the 4th arg to your Event listener.  See: <http://developer.yahoo.com/yui/docs/YAHOO.util.Event.html#addListener> for more details on Event listeners.

      From what I understand, these clicks will always occur in the "activeTab", so you can just do:
      tabView.get('activeTab').set('dataSrc',elTarget);
      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.

      The simplest approach would be to assign the listener to the content container rather than the entire tabview.

      You can avoid adding an ID to the content container by using getElementsByClassName:
      YAHOO.util.Event.on(tabView.getElementsByClassName('yui-content', 'div')[0], 'click', clickHandler);
      But keep in mind the content needs to be ready in that case.

      Matt

      jcyrnh wrote:
      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
      
      
      
      
      
      
      
              
      
            
      
      
      
       
      Yahoo! Groups Links
      
      <*> To visit your group on the web, go to:
          http://groups.yahoo.com/group/ydn-javascript/
      
      <*> Your email settings:
          Individual Email | Traditional
      
      <*> To change settings online go to:
          http://groups.yahoo.com/group/ydn-javascript/join
          (Yahoo! ID required)
      
      <*> To change settings via email:
          mailto:ydn-javascript-digest@yahoogroups.com 
          mailto:ydn-javascript-fullfeatured@yahoogroups.com
      
      <*> To unsubscribe from this group, send an email to:
          ydn-javascript-unsubscribe@yahoogroups.com
      
      <*> Your use of Yahoo! Groups is subject to:
          http://docs.yahoo.com/info/terms/
       
      
      
      
        

    • Show all 10 messages in this topic