Pro jQuery Mobile

Footer bar

The footer component is nearly identical to the header with only minor differences. The main difference is the footer is more flexible in regards to the placement of its buttons. For example, when working with the header the first button was left-aligned and the second button was right-aligned. The footer positions its buttons inline and in sequential order from left to right. This flexibility allows us to style our footer as a toolbar or tab bar. We will see examples of both but first let’s begin with the basics.

Footer Basics

There are a few points of importance about the footer. They include:

• The footer is defined with the data-role="footer" attribute.
• The footer positions its buttons inline and in sequential order from left to ...