h1 to h6 are always centered in header and footer.

Panel

Welcome to JQuery Mobile

This is data-role="main" with a class of ui-content that gives us padding on the sides to give us a good looking paragraph. Our Header and Footer are position fixed thanks to data-position="fixed" in the header and footer tags.

Hi I'm a PopUp

In the link to get to the PopUp it's important to put data-rel="popup" so it behaves as a popUp instead of going to a different page

3 positions for PopUp's: data-position-to="window" This will Pop in the middle of window data-position-to="origin" This will Pop next to link that triggered it data-position-to="#[id Name]" This will make it Pop near whatever id you want

This is a dialog box.

This is it's own page and it can have header and footer or not it's your choise.

This page is dedicated to all the diferent Buttons

Here are a couple of diferent Buttons

input buttons need a type="button" and a value="nameOfButton" for display

Buttons need a class="ui-btn"

I'm a back a href tag!!

a href buttons need a class="ui-btn" too this is a back button and it will send you back from where you came from thanks to data-rel="back"

These 3 buttons are attached to each other just thanks to a div with a data-role="controlgroup" data-type="horizontal"

These 3 are displayed vertical with a class="ui-btn-inline" this makes it not take up all the width of the screen if you want it in the middle just add a style="text align center"

I don't take up the full width of the screen

This button takes on theme-b otherwise it's theme-a just add a class="ui-btn-b"

Button with shadow class="ui-shadow"

Button with round corners class="ui-corner-all"

Little button by having class="ui-mini"

Icons are awsome you can do so much with them:
The basic icon is a button with a class="ui-btn ui-btn-inline ui-icon-(nameOfIcon) ui-btn-icon-left" Just add class="ui-icon-(nameOfIcon)" Example class="ui-icon-check".
ui-btn-notext for just icon display with no extra space.
ui-nodisc-icon will take the grey disk out of the icon.
ui-alt-icon to change theme color.

Form Time

You did it!

The form has been submitted. Get out of here.

Lists

Single Collapsible List

Click and see what happens

Hello. This is a single Collapsible. If you wanna make a group of Collapsibles check out the example below.







Collapsible list Group

The visible part has to be some kind of heading from h1 to h6

If you want a gruop of collapsibles just put the 2 or 3 or how many you want div data-role="collapsible" in a other div with data-role="collapsibleset" and they will stack together looking awsome.

Click Here

Suprise!!!!

Click Here

Me again!!!!! Collapsibles are Awsome




Lists

With dividers




This List has a filter for search perpeses