Header Buttons with Text and Icons

Description

We also attached an icon to each button with the data-icon attribute.

To create a text-only button simply remove the data-icon attribute.

Within a header, buttons are positioned according to their semantic order.

For example, the first button will be left-aligned and the second button will be right-aligned.

If your header only contains a single button you can right-align the button by adding class="ui-btn-right" to the button's markup.

Example


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Header Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
  href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head><!--from  w w w. j  a  v  a2  s .c  om-->
<body>

  <div data-role="page" data-theme="b">
    <div data-role="header" data-position="inline">
      <a href="#" data-icon="delete">Cancel</a>
      <h1>Add Review</h1>
      <a href="#" data-icon="check">Done</a>
    </div>

    <div data-role="content">
      <fieldset data-role="controlgroup" data-theme="c">
        <legend>Rating:</legend>
        <input type="radio" name="radio-choice-1" id="radio-choice-1"
          value="choice-1" data-theme="c" /> 
        <label for="radio-choice-1">Go
          see it!</label> 
        <input type="radio" name="radio-choice-1"
          id="radio-choice-2" value="choice-2" data-theme="c" /> 
        <label
          for="radio-choice-2">Don't waste your time.</label>
        <br> 
        <label
          for="comments">Comments:</label>
        <textarea cols="40" rows="8" name="comments" id="comments"
          data-theme="d"></textarea>
      </fieldset>

    </div>
  </div>

</body>
</html>

Click to view the demo





















Home »
  jQuery Mobile »
    Tutorial »




jQuery_Mobile
Form
List
Layout
Theme