When you add buttons to the page header, they line up to the left side of the header and only one button can be positioned to the right side by default. This recipe shows you how to add four buttons to the header, with two of them positioned to the right-hand side.
Copy the full code of this recipe from the code/03/multiple-header-buttons
sources folder. This code can be launched using the URL http://localhost:8080/03/multiple-header-buttons/main.html
.
Create a new stylesheet called
jqm.css
and define two new custom styles as given in the following code:.ui-btn-nexttoleft { position: absolute; left: 80px; top: .4em; } .ui-btn-nexttoright { position: absolute; right: 80px; top: .4em; }
Include the previous stylesheet in the
<head>
tag ofmain.html
as shown in the following code:<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" /> <link rel="stylesheet...