Automating headers and footers in jQueryMobile using jQuery and CSS classes

Most web apps require headers and footers on each page ... except the login page. A logout icon is not needed on the login page, for example. Headers also need a title that varies from page to page. Other than that, most headers and footers are the same. This tutorial explains how jQuery can be used inside jQueryMobile to deliver this functionality without making changes or duplicating code in each page. The use of CSS classes and data-attributes is demonstrated for this time-saving and configurable option.

1 favorite thumb_down thumb_up 0 comments visibility_off  Remove from Watchlist visibility  Add to Watchlist

Outline/structure of the Session

1. Downloading and installing jQuery and jQueryMobile (10 minutes)

2. Creating a default index.html page with jQuery and jQueryMobile (10 minutes)

3. Linking to two more pages (15 minutes)

4. Adding header and footer to each page (except the first) ... the long way (15 minutes)

5. Creating CSS classes and data-attributes to reduce the programming, including showing the active page link separately (20 minutes)

6. Using jQuery to tie this all together in the pageshow event (10 minutes)

7. Q&A (10 minutes)

Learning Outcome

How to use jQuery classes to automate header and footer creation

Target Audience

Developer, Programmer, Project Manager

schedule Submitted 3 years ago

Comments Subscribe to Comments

comment Comment on this Submission