Sorry to take so long to reply. I was out of the office on Thursday. << normal rules of the Document Object Model apply regardless of the hierarchy of JavaScript>>
Thanks Teddy, but I'm trying to get a handle on the tabs themselves. Once I do that, I can work all kinds of magic with Javascript. I know how to traverse the DOM, but I'm at a loss when I can't see the generated code in its entirety. I know that DIVs are created for each layoutarea but I don't know what the hierarchy is for a tab. Also, I'm looking for more information on registering events for tabs and possibly passing parameters via these newly registered events. ed ______________________________________________________________________ Ed Szwedo Web Development Team Lead CSC 109 TW Alexander Drive, Building NCC, Mail Drop N176-05, Research Triangle Park, NC 27711 Information Technology Infrastructure Solutions | Office: (919)541-3955 | Fax: (919)541-3641 | [email protected] | www.csc.com From: "Teddy R. Payne" <[email protected]> To: [email protected] Date: 05/27/2009 02:09 PM Subject: Re: [ACFUG Discuss] Using tabs in CFLAYOUT Ed, <cflayout> tags generate HTML that JavaScript is rendered against. A <cflayout name="test" type="hbox"></cflayout> will create a <div id="test"></div> when returned to the browser. Now, the normal rules of the Document Object Model apply regardless of the hierarchy of JavaScript created in CF using your example like: ColdFusion.Layout.getTabLayout('catalogSearch'); Here is a quick example of changing the color of the text of the items inside of a <cflayout> box: <html> <head> <title></title> <script language="javascript" type="text/javascript"> function updateElement() { var element = document.getElementById("catalog"); element.style.color = 'blue'; } </script> </head> <body> <cflayout name="catalog" type="hbox"> Sample text </cflayout> <script language="javascript" type="text/javascript"> updateElement(); </script> </body> </html> The update function is fired after the HTML child elements have been created on the page. You could use <body onload="updateElement()"> also. So having this flexibility, there is nothing to prevent you from creating behaviors using other JS libraries. I know this may not be a "nod" to stay with a CF approach, but sometimes it is quicker to use what you know until you have more time to follow an approach where you may need more research or understading of the API. You probably could ahve wrote the JS for the code you provided in less time up front and then combine more research into leveraging cflayout with a combined approach with another JS library. As for your question about what other people use, I am a fan of the jQuery approach because of the non-obtrusive code behavior where you create events. e.g. $(document).ready(function(){ updateElement(); }); My apologies for simplifying your example. Cheers, Teddy R. Payne, ACCFD Google Talk - [email protected] On Wed, May 27, 2009 at 10:52 AM, <[email protected]> wrote: I have both a specific and a general question for the group. Specific question: Anyone know how to use the underlying Ext lib to register events? My goal is to register the same events for all tabs. The events will change the color of the tab text onmouseover and change it back onmouseout. So far, I've had partial success in registering an event for one tab as shown below. In this proof-of-concept exercise, I was hoping that the called functions, 'doOnmouseover ' and 'doOnmouseout' would know which tab was being acted on, and I could say something like "this.el.dom.firstChild.firstChild.firstChild.style.color = 'black';" While the events get registered properly, I had to hard code the reference to a tab to get it to work. In general, I've had to do a lot of digging to get this far. For example, it took half a day for me to find "indexTab.el.dom.firstChild.firstChild.firstChild.style.color " is the way to access the text color of a tab. Which leads to my general question: What is the best JS library to use for tabs? jQuery and jQuery UI? What are people using? And if I decide to stay with cflayout and the Ext lib, are there some tutorials or groups that would help me? Many thanks. <cflayout name="catalogSearch" type="Tab"> <cflayoutarea name="catalog" title="Catalog Search"> [Catalog Search code] </cflayoutarea> <cflayoutarea name="index" title="Index Search"> [Index Search code] </cflayoutarea> </cflayout> <cfset ajaxOnLoad("setup")> function setup(){ var mytabs = ColdFusion.Layout.getTabLayout ('catalogSearch'); var indexTab = mytabs.getTab("index"); indexTab.el.on({ 'mouseover': { fn : doOnmouseover, scope: this }, 'mouseout': { fn : doOnmouseout,, scope: this } }); } doOnmouseover = function(){ var mytabs = ColdFusion.Layout.getTabLayout ('catalogSearch'); var indexTab = mytabs.getTab("index"); indexTab.el.dom.firstChild.firstChild.firstChild.style.color = 'black'; } doOnmouseout = function(){ var mytabs = ColdFusion.Layout.getTabLayout ('catalogSearch'); var indexTab = mytabs.getTab("index"); indexTab.el.dom.firstChild.firstChild.firstChild.style.color = 'gray'; } ______________________________________________________________________ Ed Szwedo Web Development Team Lead CSC 109 TW Alexander Drive, Building NCC, Mail Drop N176-05, Research Triangle Park, NC 27711 Information Technology Infrastructure Solutions | Office: (919)541-3955 | Fax: (919)541-3641 | [email protected] | www.csc.com ------------------------------------------------------------- To unsubscribe from this list, manage your profile @ http://www.acfug.org?fa=login.edituserform For more info, see http://www.acfug.org/mailinglists Archive @ http://www.mail-archive.com/discussion%40acfug.org/ List hosted by FusionLink ------------------------------------------------------------- ------------------------------------------------------------- To unsubscribe from this list, manage your profile @ http://www.acfug.org?fa=login.edituserform For more info, see http://www.acfug.org/mailinglists Archive @ http://www.mail-archive.com/discussion%40acfug.org/ List hosted by http://www.fusionlink.com -------------------------------------------------------------
