Tuesday, June 2, 2015

jQueryMobile Accordion and Nested Collapsibles For Android and BlackBerry

Here we see Step by step How to create a jQueryMobile Accordion and Collapsibles For Android and BlackBerry
In this tutorial we build in 15 minutes a complete jQuery Mobile App , with Collapsible content and an Accordion, for use on all kind of Mobile screens :iPhone, Nexus , Acer , BlackBerry, Nokia,  and more...
This Mobile will look like this:
jQueryMobile Accordion and Nested Collapsibles For Android and BlackBerry

jQueryMobile Accordion and Nested Collapsibles For Android and BlackBerry  1



And this is the display on an emulator:
jQueryMobile Accordion and Nested Collapsibles For Android and BlackBerry   2



How to create a jQueryMobile Accordion and Nested Collapsibles For Android and BlackBerry



Since for this post we use the jQuery Mobile , which needs the  jQuery Frameworks,  enter http://jquerymobile.com/ and the  jQuery web site , to get the latest versions of the files on CDN  . We  will also be using a Mobile Emulator, therefore  please refer to this tutorial on installing the Ripple Emulator.
The basic   "First jQueryMobile App" explains the setup of the frameworks and emulator more in detail. Then add them at the Head of the HTML5 file:
jQueryMobile Accordion and Nested Collapsibles For Android and BlackBerry    3


Create a Page with a Header including a NavBar , using data-role="page" and data-role="header" fixed :
jQueryMobile Accordion and Nested Collapsibles For Android and BlackBerry  4



1) Collapsible Content with Nested collapsible block:


Now we create a Collapsible content using data-role="collapsible" with a nested collapsible block inside it:
jQueryMobile Accordion and Nested Collapsibles For Android and BlackBerry  5




2) Collapsible Accordion:


Now we create an Accordion using the directive data-role=collapsibleset, wrapping several collapsible block defined as we did before, as follows:


jQueryMobile Accordion and Nested Collapsibles For Android and BlackBerry   6


Just for the sake of the example, we add a Form in the second collapsible block:

jQueryMobile Accordion and Nested Collapsibles For Android

That's all. Just for completing a Mobile App, we add a Footer with a NavBar as follows:
jQueryMobile Accordion and Nested Collapsibles



We customized this Mobile using some style in a CSS3 file as follows:

jQueryMobile Accordion and  Collapsibles

And this is how this jQuery Mobile App looks like:

jQueryMobile Accordion

jQueryMobile Accordion and Nested Collapsibles For Android and BlackBerry

jQueryMobile

jQueryMobile Accordion and Nested Collapsibles For Android and BlackBerry

Accordion and Nested Collapsibles For Android and BlackBerry



Hoping this article was helpful...
Happy programming.....

      by Carmel Schvartzman


כתב: כרמל שוורצמן