This demonstration shows how it's done. Although the goal is a simple one, some of the gotchas with regard to state changes in the buttons are tricky to work out. But once you do, here's what the end result looks like.
The key to making these buttonset style adjustments is making the labels display as block. Also supplying the surrounding
div
container with a width
. That gives us the basic change we're after in terms of alignment. The trick part is making this layout work with the hover and the active states. These state classes are added to the label elements by the buttonset widget.Since these labels belong to a tightly-knit group, the top and bottom borders are pressed up against one another. That's easy enough to take care of by applying a
transparent
top or bottom border to certain elements, depending where they are in relation to other elements, and the state of those other elements. The part I couldn't figure out for the life of me was the hover state. My selector worked just fine, as I was hoping to handle all the border hacks using just CSS, but the property change just wouldn't take.The workaround is the two JavaScript event handlers for the
mouseenter
and mouseleave
events, which just adds, then removes, the ui-transparent-border-top
class. Strange that this approach works and the CSS-based one did not.The final task is an easy one — rearrange the border classes. While the original, horizontal layout was using left and right border classes from the CSS framework, we'll need to remove these, and add corners around the top and bottom instead. This done with a single line of JavaScript — while maintaining readability of course.
No comments :
Post a Comment