Skip to main content

Jquery Mobile Toolbars - Header and Footer

    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 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.

Labels:

Comments

Post a Comment

Please leave your comments here...

Recommended for You

Is Google cheating?

               I found this piece of interesting fact, accidently while browsing the internet. Google shows different maps for India, China and USA. Confused hun! Well don’t be…Just read on… In Indian version of Google Maps, you can see Arunachal Pradesh and eastern part of Jammu and Kashmir as integral part of India. In US version of Google Maps, you can see Arunachal Pradesh and Jammu and Kashmir as a disputed region. In the Chinese version of the Google Maps, you can see Arunachal Pradesh and JnK as not a part of India.                 Many people complained this issue to Google. A Google employee responded : “ We do show different versions of this border, because we required to by law. Indian law requires us to show it one way, and the Chinese law requires us to show it another way . If we can legally do so, we strive to present b...
5 comments
Read more

Retriving co-ordinates...

         We have seen 2 Google Maps API v3 examples wherein we have retrieved the latitude-longitude co-ordinates of the point of click on the map. In the first example we have displayed the co-ordinates in the information window and in the second , we have displayed the co-ordinates in a form in the information window.         Today we will create a code to retrieve the latitude longitude co-ordinates in a text box while simultaneously a marker appears on the map as well. So, here goes the code. <html> <head> <title> Google Maps API v3 - Adding marker on Click and retrieving the co-ordinates in a text box </title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> var map;    //When using event as a parameter to a function declare map, strictly as a global variable fun...
5 comments
Read more

Form info window

         Today we will look at a Google Maps API v3 example to add a form in the information bubble! This is usually required when we wish to accept some data/information from the user! This data can be saved to a server in the form of an XML file or a database! The information can then be retrieved back at a later stage, when necessary!          In this example we will only look at form in the information bubble! The connectivity part with the server will be discussed in another post! So, today's code snippet is as seen below! <html> <head> <title> Google Maps API v3 - Adding marker and info window on Click and creating a form in the infowindow with the lat-lng information in it. </title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> var map;    //When using ev...
5 comments
Read more

Drive along - Cool coding

         This is something that will demonstrate to you the power of mapping! This is a Google Maps API v2 example, but just copy and paste the code in an html file and you will see something very cool! This will prove that mapping is real fun!          Let's have a look at the code first. Copy this code in your html file. Don't worry about the length of the code and the post in general. Just execute the code and you will surely enjoy what you see! <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <title> Drive Along </title> <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAu3HXU_hLdVPTFGqLed_FCxT2yXp_ZAY8_ufC3CFXhHIE1NvwkxQbblEPYBGNoRsuuSU9aBfSq4VAZA" type="text/javascript"> </script> <script src="http://econym.org.uk/gmap/epoly.js" type="text/javascript"> ...
6 comments
Read more

A Giant called Google...

    Wondering what you will be reading in this post today and what is "Google Giant"! Well, I was working on a simple project a couple of months back and that is the time when I was amazed and by the size of data that Google Maps servers might be having! As most of the readers (developers and enthusiast included) would know or might have noticed, Google maps are rendered by stitching small images together. You must have observed this on quite a number of occasions, when you see grey tiles when you have a slow internet connection in particular. It takes time for the images or tiles as we call them to be displayed.     Let us try and estimate what could be the size of the Google Maps data! Before proceeding, let's make a few assumptions and considerations. 1. Let's consider the Google Street View maps only. 2. The zoom level that is considered for the calculations is 21 - the max zoom level allowed on Google Maps API. 3. All the numbers are just an esti...
6 comments
Read more