Piyush Jain | Techbirds

To Persist the header and footer just add the attribute “data-id” in header and footer both.



In above code sample we add the data-id attribute in both header(data-id=”page_header”) and footer(data-id=”page_footer”); add these same id to all other pages where you want to persist header and footer.



91 total views, 2 views today

The current version of jQuery Mobile supports iOS (iPhone, iPad, iPod Touch), Android, Blackberry OS6, HP’s webOS, Mozilla’s Fennec and Opera Mobile. In the future, other platforms will be added including Windows Mobile, Symbian, MeeGo and more.

One of the goals of the project is to extend the reach of jQuery to aid in building sites for the mobile Web, in addition to the so-called “desktop” Web, where it’s already heavily-used. With jQuery Mobile, developers will be able to reach mobile Web users on a variety of mobile operating systems – not just those whose mobile Web browser is considered “top-tier,” like the WebKit-based browsers on the iPhone and Android.

To support the various browsers now available, jQuery Mobile provides dynamic interfaces that adapt to the different OS’s, “degrading gracefully” where features are not supported by the browser in question. Top browsers are categorized as “A” or “B” grade, while low quality browsers are given a “C” grade and barely functional browsers get an “F.” You can see the grades on this chart here. The alpha release of jQuery Mobile focuses on just A-grade browsers.

According to jQuery Mobile’s site, the full feature set includes the following:

  • Progressive Enhancement: jQuery Mobile is build around the principle of progressive enhancement, “taking a fully functional HTML web page, layering on additional JavaScript functionality, and giving capable browsers a top-of-the-line experience.” This means a jQuery Mobile app will work in more browsers, guaranteed, even those that don’t support JavaScript.
  • Graceful Degradation: Less capable browsers will still receive the best possible experience that their platform can handle.
  • Accessibility: All jQuery Mobile components are ARIA accessible. They are keyboard navigable (on a desktop computer) and can be navigated using a screen reader.
  • Simplicity: jQuery Mobile is completely markup-driven requiring no JavaScript configuration, making it easy to get started.
  • Small File Size: The JavaScript for the alpha release is only 12KB and the CSS is a mere 6KB. Very few images are used in the design of the framework (mostly icons) – instead making heavy use of CSS.
  • Theming: jQuery Mobile has a comprehensive theming structure built from the ground up. The final 1.0 relase will include a “Themeroller” tool.

28 total views, no views today