Javascript help

[Tina]

I don't write much javascript so I was hoping to get some direction here on
how best to approach a problem.

I want to do a tab folder approach where maybe I have some image buttons
that look like folder tabs at the top that are client side buttons. For
each button I have a panel with different server side controls on it. When
a button is hit I want to make the appropriate panel visible and the rest of
the panels invisible (or maybe I just have to change the Z value?)

I suppose I should use html panels (<div>) instead of web control panels?

Any help would be much appreciated.

Thanks,
T

 

[Guest]

Tina,
You really don't need to worry about javascript to do this. In ASP.NET 1.1,
there is the Microsoft IE WebControls suite which provides a TabStrip and
MultiView set of controls that work together to do this.
In ASP.NET 2.0, there are built - in controls for this.
Peter

 

[Laurent Bugnion]

Hi,

I don't write much javascript so I was hoping to get some direction here on
how best to approach a problem.

I want to do a tab folder approach where maybe I have some image buttons
that look like folder tabs at the top that are client side buttons. For
each button I have a panel with different server side controls on it. When
a button is hit I want to make the appropriate panel visible and the rest of
the panels invisible (or maybe I just have to change the Z value?)

I suppose I should use html panels (<div>) instead of web control panels?

Any help would be much appreciated.

Thanks,
T

There are different approaches to this problem. First you must decide if
the "tab switch" happens on the server (i.e. if a roundtrip will be
made) or on the client (pure javascript switch).

If you decide yourself for the first one, you must render one "tab" only
on the server. When the "tab button" is clicked, it must submit the form
to the server, where you can decode the action and render the
appropriate tab.

If you want to do everything on the client, then it's a bit more
complicated. You must render all the tabs on the server first, and then
find a way to "hide" the ones you don't want to display. This can be
done either by setting the Z-index, but I wouldn't do this. The Z-index
can only be used if the DIV are absolutely positioned, and absolute
positioning should be used with care, especially if your HTML pages may
run in different browsers.

I would rather use the "display" CSS attribute, setting it to "block" or
"none" using JavaScript. Another way is to use DOM Level 2 to get the
corresponding node, and to "remove" it from the DOM tree, saving it
temporarily in the browser's memory. This is tricky, but I already did
that and it works well.

Note that the "Panel" web control does nothing more than render a DIV
HTML tag, so it doesn't make much of a difference if you use one or the
other.

My recommendation is: First decide if you want a server-side tab
switching or a client-side one. Then only you decide what strategy you
want to follow.

Ask again if something is not clear.

HTH,
Laurent

 

[Tina]

Those controls are no longer available for download as per Microsoft.

(See Peter Huang's [msft] reply to DeanBlakely on the webControls forum.)

T