Making the User Interface more appealing
As we discussed earlier in the semester, the way an HTML page interacts with a user is through an HTML form and its elements (inputs, buttons, checkboxes, drop-down lists, radio buttons, etc.). However, the default look and feel of the HTML forms is very unappealing for today's web. And one would need to write considerable amount of CSS rules to make it look better. Here is where jQuery UI can help us, by providing a ready to use supply of styled elements as well as ways to incorporate them into our pages.
jquery UI is a library of user interface (UI) plugins that offers interactions, widgets, and effects. Visit the links below if you are interested to see demos of all these plugins.
- Interactions are elements with which the user can interact to change their position in the page. They include draggables, droppables, sortables, selectables and resizables.
- Widgets are self-contained UI components that add certain functionalities to the page. They include dialogs, menus, tabs, datepicker, progressbar and many more.
- Effects are a series of plugins that allow us to do more animations with our elements such as bouncing, shaking, exploding, pulsating, and more. To see demos of such effects visit this page and select an effect from the drop-down list.
Choosing and including jQuery UI
While including jQuery into our HTML files was easy (we simply set the src
attribute of the <script> tag to an absolute URL), for the jQuery UI we will
need to do a bit more work, depending on how much customization for the UI we want.
In lab this week, you will learn how to set up your page to use jQuery UI.
Examples of jQuery UI plugins
We have created a simple HTML page that contains a few jQuery UI widgets, effects, and interactions.
The examples show how to:
- Create an accordion and provide several options for its appearance and behavior.
- Create a menu of tabs and control their appearance.
- Style a button with an arrow and use it to slideToggle a div. The div contains draggable elements.
- Convert a set of radio buttons to a buttonset and use them to perform different effects on a div (shake, puff, bounce).
- Create a datepicker
In including jQuery UI plugins in the page, two steps are necessary:
- Create an HTML element with an attribute ID, so that it's unique on the page.
- Select the element with jQuery and apply to it the jQuery UI method that converts it into one of the plugins.
// Create the accordion
$( "#accordion" ).accordion();
// Create a tabs plugin
$("#tabs").tabs();
// Create a button widget that has an icon on the left side
$("#jumblegame button").button({
icons: {
secondary: "ui-icon-triangle-1-s"
}
});
// Turn all spans of a div into draggable elements contained within a certain space
$('#dragarea span').draggable({containment: "#content"});
// Apply the "bounce" effect
$("#boxForEffects").effect("bounce", {distance: 50, times: 4}, 2000);
In addition to creating plain widgets, interactions, or applying effects, each of the jQuery UI methods takes options in the form of Javascript literal objects, that can provide more flexibility and control over the interaction experience.
The importance of CSS in the UI
You remember that to use jQuery UI we did two things: linked to a CSS file and included a JS file. Part of what a jQuery UI method does is to apply multiple CSS classes to our HTML elements, so that they look in a certain way. In the screenshot below, you can notice how the container of the tabs and every tab element have multiple CSS classes added dynamically. Recognizing that jQuery UI does this is important, because sometimes these default classes will make a plugin look in a way that doesn't suit your page. For example, a tabs plugin usually stretches across the whole page and to make it fit into a certain section, we had to add some CSS to the class that controls its layout:
.ui-tabs-nav {
overflow: hidden;
}
.tabs() method.