In Jquery Mobile there are 2 standard types of toolbars: Header and Footer. The header is typically the first element inside a mobile web page and the footer is typically the last. Both these toolbars usually contain buttons, links and text. In this post today, we will take a look at these 2 toolbars in Jquery Mobile. Lets's take a look at the code below.
As you can see in the HTML above, the structure clearly shows that we have the header as the first element of the Jquery Mobile page and the footer as the last element of the page. The title text is normally an H1 heading element but it's possible to use any heading level (H1-H6) to allow for semantic flexibility. For example, a page containing multiple mobile "pages" may use a H1 element on the home "page" and a H2 element on the secondary pages. All heading levels are styled identically by default to maintain visual consistency as you can see in the above example, we have used H3.
Now, let's see how we can add buttons to these toolbars. We will add 2 buttons in the header - the back button and another options button. In the footer we will just add a single button. Adding the buttons to the header and footer varies slightly. Let's take a look at the example below.
jQuery Mobile has a feature to automatically create and append "back" buttons to any header, though it is disabled by default. If you use the attribute
Adding buttons to the footer is a little tricky. Any link or valid button markup added to the footer will automatically be turned into a button. To save space the buttons in the toolbars are set to inline styling so that the button is only as wide as the text and the icons in it. To include padding on the bar, we will be required to add a class "ui-bar" to the footer. You can try removing the class from the footer in the above example to see the results for yourself.
With this we conclude our discussion on Jquery Mobile header and footer toolbars. Hope you have followed the code samples and hope this tutorial helps you use toolbars more effectively in your Jquery Mobile projects. There is a comprehensive list of examples that you might find exciting and helpful. Do leave a comment and share your thoughts.
As you can see in the HTML above, the structure clearly shows that we have the header as the first element of the Jquery Mobile page and the footer as the last element of the page. The title text is normally an H1 heading element but it's possible to use any heading level (H1-H6) to allow for semantic flexibility. For example, a page containing multiple mobile "pages" may use a H1 element on the home "page" and a H2 element on the secondary pages. All heading levels are styled identically by default to maintain visual consistency as you can see in the above example, we have used H3.
Now, let's see how we can add buttons to these toolbars. We will add 2 buttons in the header - the back button and another options button. In the footer we will just add a single button. Adding the buttons to the header and footer varies slightly. Let's take a look at the example below.
jQuery Mobile has a feature to automatically create and append "back" buttons to any header, though it is disabled by default. If you use the attribute
data-rel="back" on an anchor, any clicks on that anchor will mimic the back button, going back one history entry and ignoring the anchor's default href. This is particularly useful when linking back to a named page, such as a link that says "home", or when generating "back" buttons with JavaScript, such as a button to close a dialog. The header plugin looks for its immediate children and automatically sets the first link button the extreme left of the header and the next link button to the extreme right. So in the above example you will see the "Back" button aligned to the left and the "Options" button aligned to the right.Adding buttons to the footer is a little tricky. Any link or valid button markup added to the footer will automatically be turned into a button. To save space the buttons in the toolbars are set to inline styling so that the button is only as wide as the text and the icons in it. To include padding on the bar, we will be required to add a class "ui-bar" to the footer. You can try removing the class from the footer in the above example to see the results for yourself.
With this we conclude our discussion on Jquery Mobile header and footer toolbars. Hope you have followed the code samples and hope this tutorial helps you use toolbars more effectively in your Jquery Mobile projects. There is a comprehensive list of examples that you might find exciting and helpful. Do leave a comment and share your thoughts.
Comments
Post a Comment
Please leave your comments here...