jQuery Mobile Lesson 6

Our sixth jQuery Mobile tutorial – final article in this series. Today we discuss how to create ul-li lists, how to theme the lists, numbered lists. Also we explain how to use thumbnails and icons in the lists, how to make search and login forms using different form elements. All examples are supported with code snippets.

CREATING A STANDARD LIST

Using HTML, you can make a standard list by creating a ul element and placing li elements inside it. To make a standard list in jQuery Mobile you follow the same setup only you need to add an attribute of data-role="listview" to the ul element.

THEMING LIST VIEW ELEMENTS

For added flexibility in list views, jQuery Mobile has implemented some specific dataattributes for theming dividers, count bubbles, and split buttons.
To theme a list divider, you can either apply a data-theme attribute to it directly, or you can use data-divider-theme attribute, which you can apply to the parent ul tag.
For count bubbles, use the data-count-theme attribute. You can apply it to the containing ul tag to theme all count bubbles in the list, or to individual list items to specify different count bubble themes within a given list.
Use the data-split-theme and data-split-icon attributes to theme split buttons. The data-split-theme attribute allows you to specify the theme of the right button in split buttons, and can be applied to either the containing ul or to individual list items.

CREATING AN INSET LIST
To create an inset list, you start by creating a standard list and then add an attribute of data-inset="true" to the ul element. We change the first line to make our list inset: <ul data-role="listview" data-inset="true">

ADDING A COUNT TO LIST IN JQUERY MOBILE

A style that is popular with some messaging or email apps is to display the number of items, or count of items, contained within a subsection or link. You can replicate this style using an element with class="ui-li-count" inside your li elements.

Example 56: Using jQuery mobile to Implement a Count in a Standard List

ADDING ICONS AND THUMBNAILS IN LISTING USING JQUERY

When you are styling a list you may want to include an icon or thumbnail image with each item in the list. This is not only possible but is easy to do.ADDING A THUMBNAIL
A thumbnail image is a preview or smaller version of a full-sized image. Thumbnail images can be added to list items by including them inside an a element in your li element.

CREATING A SPLIT LIST

A split list is a list that contains list items that have more than one link in them. When you place two a elements inside an li element, jQuery Mobile automatically creates a split list.
The first a element takes the majority of space of the list item leaving the second a element a small section with space for an icon on the right side of the list item. Because split lists are automatically created by adding a second link, you can mix other list extras together.

SEARCHING LIST CONTENT

If you are using a list to display a large number of items you may want to include a search filter to help users navigate through your selection to find what they need.
Creating a search filter is easier than you might think. All you need to do is add an attribute of data-filter="true" to the ul element of your list.

ENHANCING FORMS WITH JQUERY MOBILE

jQuery Mobile has exceptional support for forms on mobile devices. Each element has been restyled to be accessible and easily usable on a mobile device. Keep in mind that some of the form styles vary slightly depending on the platform and mobile browser that you are using.
Standard input Elements

Now that we’ve seen the use of text elements, let’s take a look at some other input elements styled with jQuery Mobile.

RADIO BUTTONS AND CHECK BOXES

Radio buttons are useful when you want to present more than one option to the user but have the user select only one of them. They remind me of multiple-choice tests, or those “fill in the bubble” forms. jQuery Mobile takes radio buttons a bit further than your standard radio button by using the label element to display the radio button on a touch-friendly bar.
To create a radio button you start with an input element and then use an attribute of type="radio". You also want to give your radio button the value and id attributes. To make multiple radio buttons work together, you must give them all the same name. Your radio button should look similar to the following snippet: <input type="radio" name="radio-1" id="radio-1" value="Option 1" />
You can group radio buttons together inside a div or a fieldset using a controlgroup, and they will display without any breaks between them. If you use the fieldset element, you can also use the legend element to give a description for the group.
If you want your radio buttons to appear horizontally you can use an attribute of data-role="controlgroup" and the attribute data-type="horizontal". This, however, makes your radio buttons appear as a row of standard buttons instead of a row of radio buttons.
Check boxes are similar to radio buttons, but they allow the user to select as many of the options as they want instead of just one. Just like radio buttons, you must include a label element for each checkbox element as jQuery Mobile uses it to create the touch-friendly bar. To create a check box you start with an input element and add an attribute of type="checkbox". Your check box should look similar to the following snippet:<input type="checkbox" name="checkbox-1" id="checkbox-1" />
You can group check boxes together by using a container element with an attribute of data-role="controlgroup".

Creating Radio Buttons and Check Boxes in a Form using jQuery mobileExample 64: Creating radio buttons and check boxes in a form using jQuery mobile

THE SELECT ELEMENT

The select element is a little different from the previous elements because it doesn’t extend the input element. Instead it acts like a container for option elements. Each option element has a value and contains some text. The text for each option element appears when the select element is clicked or tapped. When the user is shown the list of option elements and selects one of them, the value within the selected option element becomes the value of the select element.
With jQuery Mobile the select element is styled as a button with an arrow pointing down. It also takes up as much space as is available and can be used with a container that has an attribute of data-role="fieldcontain" to place the label and select elements on the same line (if there is enough space onscreen).

EXTENDED INPUT ELEMENTS
Mobile devices have a few new ways of collecting user input. Some of these ways have existed with desktop browsers for quite some time, but they are not used enough to be considered common.
When thinking about the various control or input features of a mobile device, often included is a slider to change settings, a flip toggle switch to change from one setting to another, and a search feature. All three of these are supported in jQuery Mobile.

SLIDER

The slider is typically used on pages where a user would click and drag or tap and drag to select a value rather than type it. This makes the slider great for use as a volume control, brightness or opacity control and even for use on pages that perform calculations. Take a look at the following code and see whether you can tell what each attribute does.<input type="range" name="slider" id="slider" value="10" min="0" max="100" />
The attribute type="range" is what jQuery Mobile looks for to create the slider, and yes even though it is a type="range", it is still called a slider. There isn’t anything special about the name and id attributes; they work just like they do with other input elements. The value attribute, however, is important because it sets where the slider button or handle starts. The min attribute sets how low the slider can go, while the max attribute sets how high the slider is allowed to go.
You should use a label with each slider you include on your page. This should be done not only for display and accessibility reasons, but also because it is required when using jQuery Mobile.

Using Sliders Inside a FormExample 66: Using jQuery mobile to add sliders inside a form

FLIP TOGGLE SWITCH

The flip toggle switch is pretty much a binary toggle. Either it is turned on, or it is turned off. This is common in settings where you turn various parts of your mobile device on or off. To create a flip toggle switch you need to start with a select element that has two option elements. You then need to add an attribute of data-role="slider" to the select element. Just like the other input elements, you can also wrap the flip toggle switch inside a container with the data-role="fieldcontain" to keep the label and the flip toggle switch on the same line (if space is available).

SEARCH INPUT

The search input is a new type of input that is part of the HTML5 specifications. This input is an enhanced text field that has an icon to help users know what it is for. When the user starts typing an “x” icon appears that when tapped or clicked erases all the user text entry in the field.
To create a search input, use the following one-line snippet: <input type="search" name="search-input" id="search-input" value="" />
As with the other elements we’ve covered this hour, be sure to include a label to increase your form accessibility. You can also use a container with data-role="fieldcontain" to keep the label and search input on the same line when enough room is available onscreen.

USING PLUG-INS

Because plug-ins covers anything that is added to the base library, they can be included through different means. Some plug-ins are JavaScript files that you include along with jQuery Mobile, and others are additional CSS files. We’re going to take a quick look at using the 960 grid plug-in with a page that is using jQuery Mobile.

The 960 grid is a popular grid system that is in use on desktop websites. It allows pages to be flexible and allows content to grow and shrink based on the viewable space of the browser. The jQuery Mobile port of the 960 grid plug-in for this system can be found at http://jeromeetienne.github.com/jquery-mobile-960/.

Hello there! My name is Andrew and I have been doing web development for years. Frankly, not only web-development, and system-development too. This site is the place where I get to teach and share my experience for the web. Read more