jqueryhtmlcssjquery-uijquery-ui-button

How is the "N-in-one" or "pill" button effect effected?


I want to use what I think is called the "pill" button that can be seen here: http://jqueryui.com/themeroller/ (the "Choice 1 | Choice 2 | Choice 3" widget)

Here's a screen shot:

enter image description here

What html and/or css and/or jquery is required to achieve that look? I want to be able to highlight 0..all of the buttons (based on which ones are applicable at the time/in the current state).


Solution

  • Read the information about "buttonset" here. In short, you create a container with several radio buttons in it, and apply buttonset to the container, and you will get a radio control that's styled as jQuery UI buttons.