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.
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 –
<h1 class="ui-bar ui-bar-a">Test Header</h1> <h1 class="ui-bar ui-bar-b"> Different Theme Header</h1>
If you want to incorporate a rounded border, add the class ui-corner-all to the tag. For example:
<h1 class="ui-bar ui-bar-a ui-corner-all"> Test Header with rounded corners </h1>
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.
<div class="ui-body"> <p>A section of text....</p> </div>
Likewise we can apply a theme by adding the class ui-body-
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.
<div class="ui-body"> <h1 class="ui-bar ui-bar-b"> Different Theme Header</h1> <p>A section of text....</p> </div>