A Layout Grid allows you to place controls in columns next to each other. This recipe shows you how to add multiple form controls to the page footer using a layout grid.
Copy the full code of this recipe from the code/03/footer-layoutgrid
sources folder. This code can be launched using the URL http://localhost:8080/03/footer-layoutgrid/main.html
.
Create
main.html
and add a footer to its page. Add a layout grid to the page footer and add form controls to this layout grid, as shown in the following code:<div data-role="footer" data-position="fixed" class="ui-bar"> <fieldset class="ui-grid-a"> <div class="ui-block-a" data-role="fieldcontain"> <label for="syncslider">Sync (mins):</label> <input type="range" name="syncslider" id="syncslider" value="5" min="1" max="60"/> </div> <div class="ui-block-b"> <div data-role="fieldcontain"> <fieldset...