You can build a normal webpage and put it into a jQuery Mobile site. It works, however, it doesn’t give you all the effects of a regular jQuery Mobile Look and Feel. To add that mobile feel, you will want to add some classes to an existing website – to give the full enhancement, and make the mobile site easier to use.
By grouping content together, you can show a relationship between two or more parts on the page, and likewise, show a separation between other sections on the website.
Most of that can be accomplished by adding some classes to existing tags.
Headers
For example, in a header tag, you can add the classes ui-bar and ui-bar-a. This puts a solid background behind your header. The ui-bar defines that we want this to have a background to make it stand out.
The ui-bar-a, defines which theme we are using for that bar. Using the additional –
For example:
Test Header
Different Theme Header
If you want to incorporate a rounded border, add the class ui-corner-all to the tag. For example:
Test Header with rounded corners
Containers of Text
You can put a div around a section of text, and then style it. This helps groups text together. This is increases the visual relatedness of blocks of text, and can help group your text with your associated header. This also means you may have different containers for different sections on the same virtual page in your jQuery Mobile website.
You may use the classes: ui-body and ui-body-a to put a white background around a block of text.
For example:
A section of text....
Likewise we can apply a theme by adding the class ui-body-
Section Containers
Alternately, you may add the div around the header tag, and the block of text, treating it as one large group.
Then you can apply those sane classes to the large block, even creating some custom styles if you wanted.
Different Theme Header
A section of text....
Grouping and Dividing Content in jQuery Mobile was originally found on Access 2 Learn
