Creating Custom JQueryUI Buttons for a Toolbar – Part 2

So continuing from yesterdays post (click here in case you missed it), we’ll take a look at the next step; grouping the buttons and working with other input types, like Radio Buttons and Checkboxes. Once that’s done, we can look at what it takes to disable buttons or entire groups of buttons.

Grouping

Grouping the toolbar buttons is as easy as encasing each group in another DIV or SPAN tag. The benefit of this is you can then disable entire groups of buttons using a single JQuery command. Let’s take a look at the code below:

<!-- Group01-->
<div id="group01">
<button id="tb_1">Custom Button 1</button>
<button id="tb_2">Custom Button 2</button>
<button id="tb_3">Custom Button 3</button>
<button id="tb_4">Custom Button 4</button>
</div>
<!-- Group02 -->
<div id="group02">
<button id="tb_PacMan">PacMan</button>
<button id="tb_Zoom">Zoom</button>
<button id="tb_X">NO</button>
</div>

Nothing really groundbreaking here, we just put grouped them. The only problem now though, is DIV tags don’t align themselves next to each other, they stack, so we need to dive back into our CSS and make them line up.

Hmm, not exactly what we want.

All we need to do is add the following CSS into our file and the problem goes away.

#group01,
#group02 {
float: left;
padding-right:4px;
}

Note that the padding-right is optional, and just adds a little separation between the two groups. 

Checkboxes and Radio Buttons

The use of button form elements are fine, but what if you want a button that toggles, or a group of them to toggle between each element? You could use fancy JQuery to make the button toggle when clicked, but why bother when you can use form elements that do that already? My friends, this is where form checkboxes and radio buttons come in. Using the same ideas we already covered we can easily accomplish these toggle buttons. We add the following code into our document body:

<div id="group02">
<input type="checkbox" id="tb_A"><label for="tb_A">Option A</label></input>
<input type="checkbox" id="tb_B" checked><label for="tb_B">Option B</label></input>
<input type="checkbox" id="tb_C"><label for="tb_C">Option C</label></input>
</div>

As you can see, the above code is standard form code for a set of checkboxes, the difference is their id tags. If you assign them as JQueryUI Button types they will transform from basic form elements into nice buttons we want for our toolbar. One thing to notice though, the second checkbox has the checked attribute, which means by default when our toolbar comes up the middle option will already be selected. When you load up the toolbar, you won’t really notice any difference between the button elements and the checkbox elements, but when you click checkbox and toggle it, the button will recess and stay that way. Click it again, it goes back to normal! But what about toggling related buttons in a group? Well, that’s just radio buttons!

The code below shows a new group added to the HTML body, which is just a series of radio button tags, of course we assign our id tags to the input tags which is where the magic happens:

<div id="group03">
<input type="radio" name="radioSet" id="tb_PacMan" checked>
<label for="tb_PacMan">PacMan</label>
</input>
<input type="radio" name="radioSet" id="tb_Zoom">
<label for="tb_Zoom">PacMan</label>
</input>
<input type="radio" name="radioSet" id="tb_X">
<label for="tb_X">NO</label>
</input>
</div>

Notice that it’s customary to have at least one item in a radio group to be checked, so I checked the first one. Oh, and just a word about the label tags, they are the element that gets transformed into our button. They also serve as the text that appears when you leave your mouse pointer on top of the toolbar button – handy.

If you want to look at the code so far, here’s a zip file containing everything up to this point.

Up to this point it’s important to note that we have a nice looking toolbar that can easily be changed with minor code changes and we only had to work with ONE image, not multiple! 

That’s all I have time for today. Next lesson will be actually coding to affect the buttons, disabling and re-enabling them individually or by group.