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>