You can create your own ListBox. Take a Button and attach an onclick event
that opens up a PopupPanel. You can then put whatever you want inside the
PopupPanel, then when an option is clicked you can update the text in the
button to reflect the selection.

You can look at the pyjamas.ui.AutoComplete for an example. Or take a look
at the ReferenceInput class I wrote here:
https://github.com/damoti/damoti-client/blob/master/Input.py

An AutoComplete is just a glorified dropdown. You can take the same concept
and dumb it down for some static values.

The advantage of using the PopupPanel is that then you have absolute
freedom of how to style the contents of the drop down and you can make the
Button do/look anyway you want.

If you're artistically/CSS challenged, you could try adapting the Bootstrap
button dropdown CSS to work with your custom Pyjs widget:
http://twitter.github.com/bootstrap/components.html#buttonDropdowns

Basically in pyjs build up the same DOM that they are showing in the
example and then just include the bootstrap CSS in your HTML file and your
Pyjs widget will look like the bootstrap example. If you go that route you
won't even need to use the PopupPanel. The Bootstrap example does use
JavaScript to show/hide the drop down, but you can reverse engineer that
functionality very easily:

Use your favorite browsers developer tools, then watch the DOM tree of the
drop down button as you click and unclick it. You'll see classes being
added and removed (to show/hide the drop down, etc). Then all you have to
do is replicate that in your pyjs code, attach the appropriate events and
set the appropriate classes/attributes/visibility. If that fails just look
at the Bootstrap javascript implementation but I think you should be able
to figure it out from just watching the DOM changes in your browser
developer tool panel.

It would be cool if someone converted Bootstrap library to pyjs. It's not
hard, just time consuming. You'll learn A LOT!

On Tue, Dec 18, 2012 at 5:18 PM, Matt <[email protected]> wrote:
>
> Is there a way to style individual elements in a ListBox? I've seen some
people ask similar questions WRT GWT, but most answers are 'use a different
container' (none of which exist in Pyjamas). If there is another container
in Pyjamas that will work, I'm more than happy to switch.
>
> My end goal is to have a drop down containing bold, left-aligned,
unselectable section headers followed by right-aligned, selectable items.
All I can seem to get is standard text.
>
> I guess this boils down to two questions:
> 1. How does one style a ListBox element?
> 2. How does one make a ListBox element un-selectable?
>
> Thanks in advance!
>
> Matt
>
> --
>
>
>

-- 



Reply via email to