jquery mobile学習

I'm just a div with bar classes and a Button

.ui-dialog .ui-header, .ui-dialog .ui-content, .ui-dialog .ui-footer { 	max-width: 500px; 	margin: 10% auto 15px auto; }

       ：data-overlay-theme="a | b | c | d | e"

    ：data-transition="fade | pop | flip |  turn | flow | slide | slideup | slidedown | none"

<div data-role="collapsible-set">

<div data-role="collapsible" data-collapsed="false">	

<h3>Section 1</h3>	

<p>I'm the collapsible set content for section B.</p>	

</div>	

<div data-role="collapsible">	

<h3>Section 2</h3>	

<p>I'm the collapsible set content for section B.</p>	

</div>

</div>

  ：class="ui-grid"

 
 
 
  
两列 (ui-grid-a)
 
  
三列(ui-grid-b)
 
  
四列 (ui-grid-c)
 
  
五列 (ui-grid-d)
 
 
 
 
 ：
  
<div class="ui-grid-a">	
  
<div class="ui-block-a"><strong>I'm Block A</strong> and text inside will wrap</div>	
  
<div class="ui-block-b"><strong>I'm Block B</strong> and text inside will wrap</div>
  
</div>
  
>>>>>List Views: 
リスト:data-role=「listview」
一般的なリスト:
<ul data-role="listview" data-theme="g">	
  
<li><a href="acura.html">Acura</a></li>	
  
<li><a href="audi.html">Audi</a></li>	
  
<li><a href="bmw.html">BMW</a></li>
  
</ul>
  
ネストされたリスト、行をクリックするとネストされたリストに入ります.
<ul data-role="listview">	
  
<li>		
  
<h3>Animals</h3>		
  
<p>All your favorites from aarkvarks to zebras.</p>
  
<ul>
  
<li>Pets
  
<ul>				
  
<li><a href="">Canary</a></li>				
  
<li><a href="">Cat</a></li>			
  
</ul>	
  
</li>
  
    ：<ol data-role="listview"><li></li><li></li></ol>
  
    ：  <a>  
  
      ：
  
<ul data-role="listview" data-split-icon="gear" data-split-theme="d">	
  
<li>
  
<a href="#    1"><img src="" /><h3>Broken Bells</h3><p>Broken Bells</p></a>
  
<a href="#    2" data-rel="dialog" data-transition="slideup">Purchase album</a>
  
</li></ul>
  
    ：
  
<li data-role="list-divider"data-dividertheme=“a”>A</li>
  
    ：
  
<ul data-role="listview" data-filter="true" data-filter-theme=“a”></ul>
  
   ：
  
<ul data-role="listview" data-theme="g">	
  
<li><a href="#">Acura</a><span class="ui-li-count">12</span></li>	
  
<li><a href="#">Audi</a><span class="ui-li-count">12</span></li>
  
</ul>
  
    ：
  
<ul data-role="listview" data-theme="d" data-divider-theme="d">	
  
<li data-role="list-divider">    <span class="ui-li-count">2</span></li>	
  
<li><a href="#"><h3>  </h3> <p><strong>   </strong></p>
  
<p>  </p><p class="ui-li-aside"><strong>6:24</strong>PM</p></a>
  
</li>
  
</ul>
  
  /    ：
  
<ul data-role="listview">       
  
<li><a href="#"><img src="" /><h3>Broken Bells</h3><p>Broken Bells</p></a></li>
  
</ul>
  
   ：<ul data-role="listview" data-inset="true">
  
ListViewのプラグインを呼び出す:$('#mylist').listview(); 
更新リスト:$('#mylist').listview('refresh'); 
>>>>> 
Form Elements:  
フォーム構造:
 ... 
 
ラベルを非表示:
<label for="username" class="ui-hidden-accessible">Username:</label>
  
<input type="text" name="username" id="username" value="" placeholder="Username"/>
  
  
  
<div data-role="fieldcontain" class="ui-hide-label">	
  
<label for="username">Username:</label>	
  
<input type="text" name="username" id="username" value="" placeholder="Username"/>
  
</div>
  
      ：disable & enable
  
    ： data-role="fieldcontain"
  
      ：
  
チェックボックス:
$("input[type='checkbox']").prop("checked",true).checkboxradio("refresh");
  
ラジオボックス:
$("input[type='radio']").prop("checked",true).checkboxradio("refresh");
  
ドロップダウンメニュー:
var myselect = $("#selectfoo");myselect[0].selectedIndex = 3;myselect.selectmenu("refresh");
  
Sliders: 
$("input[type='range']").val(60).slider("refresh");
  
スイッチ:
var myswitch = $("#selectbar");myswitch[0].selectedIndex = 1;myswitch.slider("refresh");
  
元の生態を保つ:data-role=“none”
スライダ:Input slider:
スイッチ:
Flip switch:NoYes

ラジオチェック:type="radio"type="checkbox"水平配列
、ラジオボックスnameは一致します.
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">    	
<legend>Choose a pet:</legend>         	
<input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />         	
<label for="radio-choice-1">Cat</label>         	
<input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2"  />         	
<label for="radio-choice-2">Dog</label>         	
<input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3"  /> 
<label for="radio-choice-3">Pig</label> 
</fieldset>
</div>
  
    ：   data-native-menu="false"
  
<div data-role="fieldcontain">		
  
<label for="select-choice-5" class="select">Shipping method:</label>		
<select name="select-choice-5" id="select-choice-5" data-native-menu="false">		
<option>Choose one...</option>			
<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>