On 06/17/2009 05:23 PM, kingdomain wrote:
> Yes, sorry, it's on the site that has all the getting started stuff
> here:
>
> http://code.google.com/webtoolkit/gettingstarted.html
>
> The main thing I'm trying to understand is: are they using traditional
> CSS tricks with floating panels, margins, etc. and getting some mouse
> event off the background to dynamically manipulate the CSS, or are
> they doing something slick with the GWT widgets that I haven't seen in
> the docs/samples (e.g., with animation, per alex.d above).
>
> It's a very cool effect that I'd love to incorporate. I can't see how
> it's just a Disclosure Panel...
>
> Thanks!
> John
Hi John,
This is a css/javascript trick
I was going to say that you can also see it in use at the w3c.org
website, but it's been redesigned from the last time I saw it (which was
where I first learned this UI).
I don't know if the webpage is using GWT. One doesn't need GWT to handle
this particular user interface.
Each display toggle is an HTML div that when clicked toggles the CSS
style of its associated HTML div (e.g. node0) between "display: block"
and "display:none". Each div is defined as follows:
<div id="node0" style="display: none">
leaf1<br>
leaf2<br>
leaf3<br>
</div>
Which causes the browser to collapse the div block. The initial HTML
specifies this style so the block's collapsed on page load.
The toggle can be defined in HTML as follows:
<div onclick="toggle('node0');">+</div>
There's usually some whitespace and a border around the toggle character
to give the user a fighting chance to hit the element with the cursor
hotspot.
toggle is a javascript routine that takes its argument, does a
getElementById and toggles the style as noted above. It also sets the
div contents to indicate that the block has been expanded.
The technique allows for arbitrary complexity.
As far as placing the panel on the left, that's usually accomplished via
the "float" and "clear" properties.
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Google Web Toolkit" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/Google-Web-Toolkit?hl=en
-~----------~----~----~----~------~----~------~--~---
