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 <http://www.fusionlink.com>
> -------------------------------------------------------------
