Mobile Jquery(II) Jquery mobile what can it do for you

Mobile Jquery(II) Jquery mobile what can it do for you

1. transition type
<li><a href="./speakers.html" data-transition="flip">Speakers</a></li>

There are 6 types:
slide              Slide right to left (left to right if tapping the Back button). This is the default.
slideup
slidedown
pop               Expand the new page (contract it if tapping the Back button). Great for dialogs and popups.
flip                Flip the old page out and the new page in, like flipping a card.
fade              Fade the new page in (fade it out if tapping the Back button).

2. data role type: button
<p><a href="./schedule.html" data-role="button">Button</a></p>

3. Collapsible content blocks
<div data-role="collapsible" data-state="collapsed">
      <h2>About this demo</h2>
      <p>This app rocks!</p>
      <p>This is the 3 line</p>
      <p>This is the 4 line</p>
</div>

4. Touch-optimized form elements
<form action="#" method="get">
</form>

just a form in content page.

text
<div data-role="fieldcontain">
       <label for="name">Your Name:</label>
       <input type="text" name="name" id="name" value=""  />
</div>

checkbox
<div data-role="controlgroup">
       <legend>Which Companies would you like?</legend>
       <input type="checkbox" name="company" id="handsome" class="custom" />
       <label for="handsome">Handsome</label>
      
       <input type="checkbox" name="company" id="ghca" class="custom" />
       <label for="ghca">GH-CA</label>
      
       <input type="checkbox" name="company" id="enrising" class="custom" />
       <label for="enrising">Enrising</label>
</div>

range
<div data-role="fieldcontain">
       <label for="quantity">Number of Items:</label>
       <input type="range" name="quantity" id="quantity" value="1" min="1" max="10"  />
</div>

select-slider
<div data-role="fieldcontain">
       <label for="gender">Gender:</label>
        <select name="gender" id="gender" data-role="slider">
          <option value="Man">Man</option>
          <option value="Woman">Woman</option>
        </select>
</div>

select-box
<div data-role="fieldcontain">
       <label for="shippingDate">Shipping Date:</label>
        <select name="shippingDate" id="shippingDate" data-native-menu="false">
<option value="standard">Standard: 7 day</option>
<option value="rush">Rush: 3 days</option>
<option value="express">Express: next day</option>
<option value="overnight">Overnight</option>
        </select>
</div>

submit-button
<div class="ui-body ui-body-b">
      <fieldset class="ui-grid-a">
        <div class="ui-block-a">
        <button type="submit" data-theme="d">Cancel</button>
        </div>
        <div class="ui-block-b">
        <button type="submit" data-theme="a">Order Ice Cream</button>
        </div>    
      </fieldset>
</div>

5. List views: Lists on steroids
List view with filter
<ul data-role="listview" data-inset="true" data-filter="true">
<li>
    <a href="#">The Grapes of Wrath</a>
        <a href="#">Buy This Book</a>
    </li>
    <li>
        <a href="#">The Trial</a>
        <a href="#">Buy This Book</a>
    </li>
    <li>
        <a href="#">A Tale of Two Cities</a>
        <a href="#">Buy This Book</a>
    </li>     
</ul>

listview with count
<ul data-role="listview" data-inset="true">
      <li><a href="#">SuperWidgets</a> <span class="ui-li-count">14</span></li>
      <li><a href="#">MegaWidgets</a> <span class="ui-li-count">0</span></li>
      <li><a href="#">WonderWidgets</a> <span class="ui-li-count">327</span></li>     
</ul>

6. theming
<p><a href="./schedule.html" data-role="button" data-theme="b">Button</a></p>

There are 5 type of themings: a, b, c, d, e

7. events
...snip...

references:
http://www.elated.com/articles/jquery-mobile-what-can-it-do-for-you/