jQuery Mobile Lesson 6

Nov 29, 2016

0 20720

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.

Example 51: Listing using jQuery mobile

 <!DOCTYPE html>
<html>
<head>
  <title>Script-Tutorials: Listing with jQuery Mobile</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
  <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
  <div data-role="page">
    <div data-role="header">
      <h1>Listing using jQuery Mobile</h1>
    </div>
    <div data-role="content">
      <ul data-role="listview">
        <li data-role="list-divider">List Items</li>
        <li>I am a list item!</li>
        <li>I am another list item!</li>
        <li data-role="list-divider">List Items with Links</li>
        <li><a href="#">I am a link in a list item!</a>
        </li>
        <li><a href="#">I am another link in a list item!</a>
        </li>
      </ul>
    </div>
  </div>
</body>
</html>

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.

Example 52: Using jQuery theme in listing components

<!DOCTYPE html>
<html>
<head>
  <title>Script-Tutorials: Cutomized icons in jQuery Mobile</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
  <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
  <section id="swatch-e" data-role="page" data-theme="e">
    <header data-role="header" data-theme="e">
      <h1>jQuery Mobile</h1>
    </header>
    <div class="content" data-role="content">
      <h3>Theming list view elements</h3>
      <ul data-role="listview" data-split-icon="star" data-divider-theme="e" data-count-theme="a">
        <li data-role="list-divider">Tutorial courses<span class="ui-li-count">3</span>
        </li>
        <li><a href="application.php">Microsoft Application</a><a href="order.php">Make order</a>
        </li>
        <li><a href="suite.php">Graphic suite</a><a href="apply.php">Apply now</a>
        </li>
        <li><a href="dkit.php">Developers kit</a><a href="request.php">Request now</a>
        </li>
      </ul>
    </div>
    <footer data-role="footer">
      <h1>footer</h1>
    </footer>
  </section>
</body>
</html>

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">

Example 53: Creating an inset list

<!DOCTYPE html>
<html>
<head>
  <title>Script-Tutorials: Listing with jQuery Mobile</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
  <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
  <div data-role="page">
    <div data-role="header">
      <h1>Listing using jQuery Mobile</h1>
    </div>
    <div data-role="content">
      <ul data-role="listview" data-inset="true">
        <li data-role="list-divider">List Items</li>
        <li>I am a list item!</li>
        <li>I am another list item!</li>
        <li data-role="list-divider">List Items with Links</li>
        <li><a href="#">I am a link in a list item!</a>
        </li>
        <li><a href="#">I am another link in a list item!</a>
        </li>
      </ul>
    </div>
  </div>
</body>
</html>

USING NUMBERED LISTS

To create a numbered list you need to start with an ol lement and include li elements inside it. Each li element is automatically numbered based on the position it is placed in the ol element.

Example 54: Using jQuery mobile to create numbered list

<!DOCTYPE html>
<html>
<head>
  <title>Script-Tutorials: Listing with jQuery Mobile</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
  <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
  <div data-role="page">
    <div data-role="header">
      <h1>Listing using jQuery Mobile</h1>
    </div>
    <div data-role="content">
      <ol data-role="listview">
        <li data-role="list-divider">Numbered List Items with Links</li>
        <li><a href="#">Polar</a>
        </li>
        <li><a href="#">Grizzly</a>
        </li>
        <li><a href="#">Brown</a>
        </li>
        <li><a href="#">Black</a>
        </li>
      </ol>
    </div>
  </div>
</body>
</html>

Example 55: Using jQuery mobile to create an inset numbered list

While this numbered list was not set up as an inset numbered list, it can be created as one by using the data-inset="true" attribute on the ol element.

<!DOCTYPE html>
<html>
<head>
  <title>Script-Tutorials: Listing with jQuery Mobile</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
  <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
  <div data-role="page">
    <div data-role="header">
      <h1>Listing using jQuery Mobile</h1>
    </div>
    <div data-role="content">
      <ol data-role="listview" data-inset="true">
        <li data-role="list-divider">Numbered List Items with Links</li>
        <li><a href="#">Polar</a>
        </li>
        <li><a href="#">Grizzly</a>
        </li>
        <li><a href="#">Brown</a>
        </li>
        <li><a href="#">Black</a>
        </li>
      </ol>
    </div>
  </div>
</body>
</html>

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

<!DOCTYPE html>
<html>
<head>
  <title>Script-Tutorials: Listing with jQuery Mobile</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
  <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
  <div data-role="page">
    <div data-role="header">
      <h1>Listing using jQuery Mobile</h1>
    </div>
    <div data-role="content">
      <ul data-role="listview">
        <li data-role="list-divider">List Items with Links and a Count</li>
        <li><a href="#">Bugs<span class="ui-li-count">5</span></a>
        </li>
        <li><a href="#">Comments<span class="ui-li-count">12</span></a>
        </li>
        <li><a href="#">Suggestions<span class="ui-li-count">8</span></a>
        </li>
        <li><a href="#">Tickets<span class="ui-li-count">27</span></a>
        </li>
      </ul>
    </div>
  </div>
</body>
</html>

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.

Example 57: Using jQuery mobile to add thumbnails in List

<!DOCTYPE html>
<html>
<head>
  <title>Script-Tutorials: Listing with jQuery Mobile</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
  <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
  <div data-role="page">
    <div data-role="header">
      <h1>Listing using jQuery Mobile</h1>
    </div>
    <div data-role="content">
      <ul data-role="listview">
        <li data-role="list-divider">List Items with Links and Thumbnails</li>
        <li>
          <a href="#"><img src="images/virgin.jpg" alt="A Virgin" />Virgin</a>
        </li>
        <li>
          <a href="#"><img src="images/tear.jpg" alt="Tears" />Tears</a>
        </li>
        <li><img src="images/scholar.jpg" alt="Scholars" />Scholars</li>
        <li><img src="images/studying.jpg" alt="Study" />Study</li>
      </ul>
    </div>
  </div>
</body>
</html>

ADDING ICONS TO LIST ITEMS
Example 58: Using jQuery mobile to add icons to List items

<!DOCTYPE html>
<html>
<head>
  <title>Script-Tutorials: Listing with jQuery Mobile</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
  <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
  <div data-role="page">
    <div data-role="header">
      <h1>Listing using jQuery Mobile</h1>
    </div>
    <div data-role="content">
      <ul data-role="listview">
        <li data-role="list-divider">List Items with Links and Thumbnails</li>
        <li>
          <a href="#"><img class="ui-li-icon" src="images/virgin.jpg" alt="A Virgin" />Virgin</a>
        </li>
        <li>
          <a href="#"><img class="ui-li-icon" src="images/tear.jpg" alt="Tears" />Tears</a>
        </li>
        <li><img class="ui-li-icon" src="images/scholar.jpg" alt="Scholars" />Scholars</li>
        <li><img class="ui-li-icon" src="images/studying.jpg" alt="Study" />Study</li>
      </ul>
    </div>
  </div>
</body>
</html>

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.

Example 59: Using jQuery mobile to create a split List

<!DOCTYPE html>
<html>
<head>
  <title>Script-Tutorials: Listing with jQuery Mobile</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
  <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
  <div data-role="page">
    <div data-role="header">
      <h1>Listing using jQuery Mobile</h1>
    </div>
    <div data-role="content">
      <ul data-role="listview" data-split-theme="e">
        <li data-role="list-divider">Split List</li>
        <li>
          <a href="#">
            <h3>First link in a split list</h3>
            <p>The icon on the right is the default icon</p>
          </a>
          <a href="#" title="Second Link">Second link in a split list</a>
        </li>
        <li>
          <a href="#">
            <img class="ui-li-icon" src="images/cable_car2.jpg" alt="Cars on route" />
            <h3>Use with an icon</h3>
            <p>Yep, you can use icons with split lists</p>
          </a>
          <a href="#" title="Another link">Another split list link</a>
        </li>
        <li>
          <a href="#">
            <img src="images/cable_car1.jpg" alt="Cars on wires" />
            <h3>Use with a thumbnail</h3>
            <p>Wow, you can also use thumbnails in split lists.</p>
          </a>
          <a href="#" title="Titles are accessible">Another split list link</a>
        </li>
      </ul>
    </div>
  </div>
</body>
</html>

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.

Example 60: Using jQuery mobile to create searching list content

<!DOCTYPE html>
<html>
<head>
  <title>Script-Tutorials: Listing with jQuery Mobile</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
  <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
  <div data-role="page">
    <div data-role="header">
      <h1>Listing using jQuery Mobile</h1>
    </div>
    <div data-role="content">
      <ul data-role="listview" data-filter="true">
        <li data-role="list-divider">Secondary Names</li>
        <li>Okeagu Chioma</li>
        <li>Nonso Diobi(S.P)</li>
        <li>Ikenna Okoye</li>
        <li>Agu Chidera</li>
        <li>Onyeka Ibezim</li>
        <li>Maduka Abum</li>
        <li>Felix Onah</li>
        <li>Mmadueke Oluchukwu</li>
        <li>Nneka Ebeonadi</li>
        <li>Cosmas Ugwuoke</li>
        <li>Chisom Okonkwo</li>
        <li>Marvelous Nnaemeka</li>
        <li>Umenna Julius</li>
        <li>Leonard Onah</li>
        <li>Ferdinand Okoro</li>
        <li>Shedrack Onah</li>
        <li>Umenna Vera</li>
      </ul>
    </div>
  </div>
</body>
</html>

CUSTOMIZING THE SEARCH FILTER TEXT ON AN INSET LIST

Example 61: Using jQuery mobile to create a search filter text on an inset list

<!DOCTYPE html>
<html>
<head>
  <title>Script-Tutorials: Listing with jQuery Mobile</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
  <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
  <div data-role="page">
    <div data-role="header">
      <h1>Listing using jQuery Mobile</h1>
    </div>
    <div data-role="content">
      <ul data-role="listview" data-filter="true" data-filter-placeholder="Find Album..." data-inset="true">
        <li data-role="list-divider">Adice</li>
        <li>Punishment</li>
        <li>Disgrace</li>
        <li>Disdain</li>
        <li>Insult</li>
        <li>Angry</li>
        <li>Ways mobile jQuery</li>
      </ul>
    </div>
  </div>
</body>
</html>

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

Example 62: Simple login form built using jQuery mobile

<!DOCTYPE html>
<html>
<head>
  <title>Script-Tutorials: Forms with jQuery Mobile</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
  <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
  <div data-role="page">
    <div data-role="header">
      <h1>Forms in jQuery Mobile</h1>
    </div>
    <div data-role="content">
      <form id="login" name="login" action="login.php" method="POST">
        <label for="username">Username: </label>
        <input type="text" name="username" id="username" value="" />
        <br />
        <label for="password">Password:</label>
        <input type="password" name="password" id="password" value="" />
        <br />
        <input type="hidden" name="hiddenInput" id="hiddenInput" value="secret message" />
        <input type="submit" name="loginSubmit" id="loginSubmit" value="Login" />
      </form>
    </div>
  </div>
</body>
</html>

Example 63: Using jQuery mobile data-role=”fieldcontain” attribute to align elements in a simple login form

The image below shows the image of aligned element of a simple login form

Notice that a little changes was done in our previous codes.
View the code below

<!DOCTYPE html>
<html>
<head>
  <title>Script-Tutorials: Forms with jQuery Mobile</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
  <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
  <div data-role="page">
    <div data-role="header">
      <h1>Forms in jQuery Mobile</h1>
    </div>
    <div data-role="content">
      <form id="login" name="login" action="login.php" method="POST">
        <div data-role="fieldcontain">
          <label for="username">Username: </label>
          <input type="text" name="username" id="username" value="" />
          <br />
        </div>
        <div data-role="fieldcontain">
          <label for="password">Password:</label>
          <input type="password" name="password" id="password" value="" />
          <br />
        </div>
        <input type="hidden" name="hiddenInput" id="hiddenInput" value="secret message" />
        <input type="submit" name="loginSubmit" id="loginSubmit" value="Login" />
      </form>
    </div>
  </div>
</body>
</html>

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 mobile
Example 64: Creating radio buttons and check boxes in a form using jQuery mobile

<!DOCTYPE html>
<html>
<head>
  <title>Script-Tutorials: Forms with jQuery Mobile</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
  <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
  <div data-role="page">
    <div data-role="header">
      <h1>Forms in jQuery Mobile</h1>
    </div>
    <div data-role="content">
      <form id="login" name="login" action="login.php" method="POST">
        <div class="ui-grid-a">
          <div class="ui-block-a">
            <fieldset>
              <legend>Radio Buttons:</legend>
              <input type="radio" name="radio-group-1" id="radio1" value="Male" checked="checked" />
              <label for="radio1">Male</label>
              <input type="radio" name="radio-group-1" id="radio2" value="Female" />
              <label for="radio2">Female</label>
            </fieldset>
            <fieldset data-role="controlgroup">
              <legend>Using a controlgroup:</legend>
              <input type="radio" name="radio-group-2" id="radio3" value="Boy" checked="checked" />
              <label for="radio3">Boy</label>
              <input type="radio" name="radio-group-2" id="radio4" value="Girl" />
              <label for="radio4">Girl</label>
            </fieldset>
          </div>
          <div class="ui-block-b">
            <fieldset>
              <legend>Checkboxes:</legend>
              <input type="checkbox" name="checkbox-1" id="checkbox-1" />
              <label for="checkbox-1">Advice</label>
              <input type="checkbox" name="checkbox-2" id="checkbox-2" />
              <label for="checkbox-2">Condemn</label>
            </fieldset>
            <fieldset data-role="controlgroup">
              <legend>Grouping checkboxes:</legend>
              <input type="checkbox" name="checkbox-3" id="checkbox-3" />
              <label for="checkbox-3">Microsoft</label>
              <input type="checkbox" name="checkbox-4" id="checkbox-4" />
              <label for="checkbox-4">Adobe</label>
            </fieldset>
          </div>
        </div>
      </form>
    </div>
  </div>
</body>
</html>

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).

Using the select Element with jQuery Mobile

Example 65: Using jQuery mobile to create select element in a form

<!DOCTYPE html>
<html>
<head>
  <title>Script-Tutorials: Forms with jQuery Mobile</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
  <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
  <div data-role="page">
    <div data-role="header">
      <h1>Forms in jQuery Mobile</h1>
    </div>
    <div data-role="content">
      <form id="login" name="login" action="login.php" method="POST">
        <label for="size-select">Select your Size:</label>
        <select name="size-select" id="size-select">
          <option value="small">small</option>
          <option value="medium">medium</option>
          <option value="large">large</option>
        </select>
        <div data-role="fieldcontain">
          <label for="radius-select">Choose a Radius</label>
          <select name="radius-select" id="radius-select">
            <option value="radius-5">5</option>
            <option value="radius-15">15</option>
            <option value="radius-25">25</option>
          </select>
        </div>
        <div data-role="fieldcontain">
          <fieldset data-role="controlgroup" data-type="horizontal">
            <legend>Set Time:</legend>
            <label for="hour-select">Hour</label>
            <select name="hour-select" id="hour-select">
              <option>Hour</option>
              <option value="hour-08">08</option>
              <option value="hour-09">09</option>
              <option value="hour-10">10</option>
            </select>
            <label for="minute-select">Minute</label>
            <select name="minute-select" id="minute-select">
              <option>Minute</option>
              <option value="minute-10">10</option>
              <option value="minute-20">20</option>
              <option value="minute-30">30</option>
            </select>
          </fieldset>
        </div>
      </form>
    </div>
  </div>
</body>
</html>

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 Form
Example 66: Using jQuery mobile to add sliders inside a form

<!DOCTYPE html>
<html>
<head>
  <title>Script-Tutorials: Forms with jQuery Mobile</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
  <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
  <div data-role="page">
    <div data-role="header">
      <h1>Forms in jQuery Mobile</h1>
    </div>
    <div data-role="content">
      <form id="volume" name="volume" action="volume.php">
        <div data-role="fieldcontain">
          <label>Bass:</label>
          <input type="range" name="" id="" min="10" max="110" value="80" />
        </div>
        <div data-role="fieldcontain">
          <label>Mid:</label>
          <input type="range" name="" id="" min="0" max="90" value="80" />
        </div>
        <div data-role="fieldcontain">
          <label>Treble:</label>
          <input type="range" name="" id="" min="5" max="105" value="80" />
        </div>
      </form>
    </div>
  </div>
</body>
</html>

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).

Example 67: Using jQuery mobile to create flip toggle switch

<!DOCTYPE html>
<html>
<head>
  <title>Script-Tutorials: Forms with jQuery Mobile</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
  <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
  <div data-role="page">
    <div data-role="header">
      <h1>Flip in Forms using jQuery Mobile</h1>
    </div>
    <div data-role="content">
      <form id="flip" name="flip" action="flipswitch.php">
        <label for="flip-1">Brightness:</label>
        <select name="flip-1" id="flip-1" data-role="slider">
          <option value="Bright">Bright</option>
          <option value="Dark">Dark</option>
        </select>
        <div data-role="fieldcontain">
          <label for="flip-2">Flip switch:</label>
          <select name="flip-2" id="flip-2" data-role="slider">
            <option value="Loud">Loud</option>
            <option value="Silent">Silent</option>
          </select>
        </div>
      </form>
    </div>
  </div>
</body>
</html>

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.

Example 68: Creating search input using jQuery mobile

<!DOCTYPE html>
<html>
<head>
  <title>Script-Tutorials: Forms with jQuery Mobile</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
  <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
  <div data-role="page">
    <div data-role="header">
      <h1>Search in Forms using jQuery Mobile</h1>
    </div>
    <div data-role="content">
      <form id="search-form" name="search-form" action="search.php" method="get">
        <label for="search-1">Search the site:</label>
        <input type="search" name="search-1" id="search-1" value="" />
        <div data-role="fieldcontain">
          <label for="search-2">Find:</label>
          <input type="search" name="search-2" id="search-2" value="" />
        </div>
      </form>
    </div>
  </div>
</body>
</html>

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/.

Example 69: Using jQuery mobile plugins in the standard html markup settings

<!DOCTYPE html>
<html>
<head>
  <title>Developing with jQuery Mobile</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
  <link rel="stylesheet" href="http://jeromeetienne.github.com/jquery-mobile-960/css/jquery-mobile-fluid960.min.css" />
  <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
  <div data-role="page">
    <div data-role="header">
      <h1>960gs plugin example</h1>
    </div>
    <div data-role="content">
      <div class="container_12">
        <div class="grid_2"><a href="#" data-role="button">2 column</a>
        </div>
        <div class="grid_6">
          <a href="#" data-role="button">6 column</a>
          <p>The fluid grid allows this layout to adapt to screen size</p>
          <p>You can see how it adjusts by changing device orientation</p>
          <p>When orientation changes, the size of the columns changes</p>
        </div>
        <div class="grid_4">
          <a href="#" data-role="button">4 column</a>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

DEMOS: Simple but Responsive Site Layout in query

Demo 1: A Mobile Portfolio Site layout and preview