Up to this point we’ve created a pretty simple, but good looking toolbar from just a single image using JQueryUI’s button widgets and some CSS trickery. We also looked at how using JQueryUI we transformed basic HTML Form elements into our buttons and yet they still retained their characteristics, such as a radio button group or checkboxes. Now, the last part of this tutorial will go over how to programmatically alter these button states and groups.
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.
Continuing from my previous tutorial, about creating a horizontal scrollable region using HTML and CSS. We can see that creating a horizontally scrollable region isn’t too hard, but the end result is rather basic, and has some minor issues. In particular, the size of the scrollable area was hardcoded and as a programmer, hardcoding is usually grounds for a public flogging. Besides the hardcoding, visually, it doesn’t look great, because the scrollbar is not proportional to the true width of the scrollable region. Of course, if you know how many items will be in your scrollable region, then you can calculate the width before hand, and then hardcoding isn’t so bad. But if you are working on an application, you might not know until after the page is rendered. So, how do we attempt to fix this?