jQuery Mobile Overview

Class Object :

– Mini element : data-mini=”true/false”
– Theme                    : data-theme=”a/b/c/d/e”
– Icon Position            : data-iconpos=”bottom/top/middle”
– Input Place holder       : placeholder=”xxx”
– Data select horizontal   : data-type=”horizontal”

Class :
– Input Accessible          : ui-hidden-accessible
– Disabled                  : ui-disabled
– Hide Label                : ui-hide-label

Toolbars
– Navbar                   : data-role=”navbar”
– Header                   : <div data-role=”header”>
– Footer                   : <div data-role=”footer”>
– Icon Position            : data-iconpos=”bottom”
– Navbar                   : <div data-role=”navbar”><ul><li></li></ul></div>
– Position Fixed           : data-position=”fixed”
– Theming Bar              : data-theme=”a”(Dark) data-theme=”b” (Blue) data-theme=”c” (Gray)

data-theme=”d” (Gray) data-theme=”f” (Yellow)
 
Button :
– Button Basics            : data-role=”button”
– Button Icons             : data-icon=”delete”
– Inline buttons           : data-inline=”true”
– Grouped buttons          : <div data-role=”controlgroup”></div>
– Theming buttons          : data-theme=”a”(Dark) data-theme=”b” (Blue) data-theme=”c” (White)
data-theme=”d” (White) data-theme=”f” (Yellow)
– Button Active              : ui-btn-active [Class]

Content Formatting
– Coloumn                         : ui-grid-a (2) ui-grid-b (3) ui-grid-c (4) ui-grid-d (5) [Class]
– Collapsible                     : <div data-role=”collapsible”> </div>
– Collapsible Box                 : <div data-role=”collapsible-set”> [Collapsible] </div>
– Collapsible Active              : data-collapsed=”false” [Class]
– Collapsible Theme Header        : <div data-role=”collapsible-set” data-theme=”c” data-content-theme=”d”>

Form
– Basic                       : <form action=”form.php” method=”post”> … </form>
– Field Containt              : <div data-role=”fieldcontain”></div>
– Textarea                    : id=”textarea-a” id=”textarea” ex: <textarea name=”textarea” id=”textarea”></textarea>
– Search                      : id=”searc-basic” ex: <input type=”search” name=”search” id=”searc-basic” value=”” />
– Slider (Range)              : <label for=”slider-0″>Input slider:</label>
<input type=”range” name=”slider” id=”slider-0″ value=”60″ min=”0″ max=”100″ />
– Flip switch                 : <select name=”slider” id=”flip-c” data-role=”slider” data-theme=”a”>
– Radio                       : <fieldset data-role=”controlgroup”>
<input type=”radio” name=”radio-choice-1″ id=”radio-choice-2″ value=”choice-2″  />
<label for=”radio-choice-2″>Dog</label>
</fieldset>

Checkboxes:
$(“input[type=’checkbox’]”).prop(“checked”,true).checkboxradio(“refresh”);

Radios:
$(“input[type=’radio’]”).prop(“checked”,true).checkboxradio(“refresh”);
Selects:
var myselect = $(“#selectfoo”);
myselect[0].selectedIndex = 3;
myselect.selectmenu(“refresh”);
Sliders:
$(“input[type=’range’]”).val(60).slider(“refresh”);
Flip switches (they use slider):
var myswitch = $(“#selectbar”);
myswitch[0].selectedIndex = 1;
myswitch.slider(“refresh”);

Page transitions
fade
pop
flip
turn
flow
slidefade
slide
slideup
slidedown
none