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

ES6 101 - Map

Spatial Unlimited changes to The UI Dev After being hosted on blogger 😣 for the last 6 years 📆, this page has finally been moved to Github.io This means a few things for you, dear reader! You will be redirected to the new page shortly! ⏩ ⏩ ⏩ Once crapy HTML is now better looking Markdown ! 😍 😍 The entire blog is a Github repo ! 😍 😍 Spatial Unlimited is now The UI Dev 😍 😍
Post a Comment
Read more

Jquery Mobile - Theming listview icons

    After exploring all the standard listview types in the series of examples on listview, you must have observed that for a linked list, Jquery Mobile displays a standard "arrow-r" icon to the extreme right of the list. However, you don't want the standard "arrow-r" icon and you need some custom icon there.     Jquery Mobile provides a set of icons that can be used along with listviews in place of the standard "arrow-r" icon. To override the standard icon, set the data-icon attribute on the desired list item to the name of a standard icon. We will see a complete list of icons in the following example.     However, before proceeding to the example, let us also consider a case where we do not wish to have any icon on the list item. This too can be achieved by setting the value of data-icon attribute to false. We will also include this in our example that follows.     Hope you have followed this post. Do drop a line in case you fi...
Post a Comment
Read more

Jquery Mobile Form - Slider control

    Input field of type range is newly introduced in HTML5 and is very well styled. The style is further enhanced when using the Jquery Mobile framework and we will see how this can be done in today's post. Jquery Mobile styles the range input type with capsule-corners and adds a circular handle to the slider.   The input's value is used to configure the starting position of the handle and the value is populated in the text input. Specify the min and max attribute values to set the slider's range. If you want to constrain input to specific increments, add the step attribute.   As you drag the slider's handle, the framework will update the native input's value (and vice-versa) so they are always in sync; this ensures that the value is submitted with the form.     The range input elements are available in 2 flavors/sizes - regular and mini. Adding a data attribute data-mini="true" to the input tag renders a smaller sized input el...
Post a Comment
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

Two maps on the same page - Side-by-side

    How good I am feeling to post a code example after such a long time! It's been all "news" over the past so many posts! Well now that I am finally doing a code example, I am posting a very highly requested code sample. Placing two Google Maps on the same page (Now that's simple you would say!), but side by side. Now this is the thing that most people struggle with. Well, implementing the second part is also very simple, as you will see in today's code.     Let's see the code. Here it is!     The output of the above code will be as seen in the result section above.     As most of you will realize, there are two maps, one centered at "Pune" and other at "Noida". Why I chose these two locations? Well, just like that!...The main issue of concern is how the maps appeared side-by-side and not one below the other as would be normal behavior of two "div" elements used in the same page. Now here is the trick! Check out the...
10 comments
Read more