Toolbars in jQuery Mobile are used to enhance the headers and footers of the pages. We have already used headers and footers in our page, so now it is time to make them a bit fancier and add some functionality to our app.
Toolbars is probably one of the easiest jQuery Mobile widgets to implement, especially if you already have a header or footer. To show how easy this is, we are going to change our existing header and footer sections into toolbars.
Before we get started, let's jot down our plan:
Create a
Homebutton in our header.Move our
Eventsbutton from the content to our header.Stylize our
Contactbutton in our footer to look like a toolbar button.
This doesn't seem like a whole lot of stuff to do, but it will make a beautiful difference in our mobile app. To begin, we'll create a Home button.