jQuery UI – Creating Different Buttons and Buttonsets

Once you have chosen a theme and installed jQueryUI, then it is time to start using it.

Button is one of the easiest, and most common items to use in jQueryUI. This is because it can be used to dress up a form, or to create nicer looking navigation (and inner content navigation) on a page.

Generally, web developers will use a link or a button tag, and apply the button method to it. This way if a user has JavaScript turned off, it still looks correct. Consider the following examples:

// button form element
$('button').button();

// a link tag, but designated by using a class
$('a.button').button();

// a submit button
('input[type=submit]').button();

Of course, that is just the simplest form. Button can do so much more.

Watch on YouTube

Toggle Buttons

A toggle button is a button that when you click on it, it changes its state. From either pressed to unpressed or vice versa. It holds its state until a user does something different. While not used for navigation, it is often used in forms and user interfaces.

Consider the following HTML code which uses a check box and a label to identify the check box. The label is important for jQueryUI, as this is what it will use to put into the button.

Toggle Example

Then the JavaScript for this would be something simple like:

// notice nothing special has to be done to handle the check box
// jQueryUI is smart enough on its own to know to handle this as a toggle
$( "#toggle" ).button();

If this was in a form, it would be handled just as a normal check box by the form processor. That is because jQueryUI will pass the right check (or unchecked) status to the checkbox when a user clicks on the button.

Watch On YouTube

Button Sets

A button set is a set of buttons . Think about in Word where you have Bold, Italic, Underline. Those buttons go together instead of being separate buttons. The buttons are even connected, so there is only one set of “ends” between the three buttons.

Consider the following HTML code that would be used to create a button set:

Notice the wrapper div. jQueryUI will need this wrapper to apply the button set to. Then it will apply the buttons within it. Use the following JavaScript code for that.

//apply the button set to the wrapper div, and let jQuery handle the rest.
$('#format').buttonset();

Radio Buttons

Radio buttons can be handled by the buttonset method in jQueryUI. In fact, it should be buttonset, since they are all related.

However, unlike a buttonset of check boxes, only one will be selected at a time. Luckily, jQueryUI will handle this for us. First we need our HTML

Notice that they use the label with the for attribute. This is what will display in the button text area.

For our JavaScript it will look a lot like the previous JavaScript that we’ve used. jQueryUI picks up the differences, and makes it work. It will also feed back to the radio buttons, to make sure that they submit the correct form info. This makes working with it extremely easy.

$('#radio').buttonset();

Watch on YouTube

Using Icons

Of course, it would be nice to use icons with our buttons. Maybe even instead of the text. jQuery luckily allows us to do this fairly easily. Icons are helpful if they are known by the end-user to more quickly identify and use the user interface.

To use an icon, we will need to pass a variety of parameters into the button method when it is created, unlike our previous examples where we’ve not needed to pass in any parameters. This will include the icons, which can have two (2) icons a primary and a secondary, and the text property. To pass these parameters, we will use a JavaScript Object.

// put a lock icon on the button
// do not have any text
$( '#first' ).button({
      icons: {
        primary: "ui-icon-locked"
      },
      text: false
    });

// put a lock icon on the button
// display the text
$( '#second' ).button({
      icons: {
        primary: "ui-icon-locked"
      }
    });

// put a gear icon on the button on the left side
// put a secondary icon of a downward triangle on the right side
// display the text
$( '#third' ).button({
      icons: {
        primary: "ui-icon-gear",
        secondary: "ui-icon-triangle-1-s"
      }
    });

// put a gear icon on the button
// include a downward triangle on the button as well
// do not have any text
$( '#fourth' ).button({
      icons: {
        primary: "ui-icon-gear",
        secondary: "ui-icon-triangle-1-s"
      },
      text: false
    });

Watch on YouTube

jQuery UI – Creating Different Buttons and Buttonsets was originally found on Access 2 Learn