jquery mobile 學習

 引用js：

<link rel="stylesheet" href="../jquery.mobile-1.1.0/jquery.mobile-1.1.0.css" />
<script src="../jquery.mobile-1.1.0/jquery-1.7.2.js"></script>
<script src="../jquery.mobile-1.1.0/jquery.mobile-1.1.0.js"></script>

page：

<div data-role="page"></div>

設置設備的適配：

讓文檔的寬度與設備的寬度保持1:1，並且文檔最大的寬度比例是1.0：

<meta name="viewport" content="width=device-width, initial-scale=1">

 

<div data-role="header |content| footer | navbar"></div>：

<div data-role="header" data-position="inline"> 
<h1>Page Title</h1>
<a href="index.html" data-icon="gear" class="ui-btn-right">Options</a>
</div>
主題樣式：data-theme="a | b | c | d | e"

位置固定：data-pisition="fixed"

全屏樣式：data-fullscreen="true"

返回按鈕：data-rel="back" 

反向過渡：data-direction="reverse"

按鈕位置：data-role="button"      class="ui-btn-right"

自定義導航菜單： class="ui-bar ui-bar-b"

例：

<div class="ui-bar ui-bar-b">
<h3>I'm just a div with bar classes and a <a href="#" data-role="button">Button</a></h3>
</div>
<div data-role="navbar">
<ul>
<li><a href="a.html" class="ui-btn-active">One</a></li>
<li><a href="b.html">Two</a></li>
</ul>
</div>

鏈接：

打開對話框：<a href="#" data-rel="dialog">Dialog link</a>

對話框大小設置：

.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"

>>>>>Buttons：

<a href="index.html" data-role="button">Link button</a> 

小按鈕：data-mini="true"

 按鈕上的圖標：data-icon="arrow-l | arrow-r | arrow-u | arrow-d | delete | plus | minus | check | gear | refresh | forward | back | grid | star | alert | info | home | search"

圖標位置：data-iconpos="top | bottom | left | right"

無文字按鈕：data-iconpos="notext"

自定義圖標：data-icon="myicon"   .ui-icon-myicon{ }

按鈕並列：data-inline="true"

按鈕組：data-role="controlgroup"

水平按鈕組：data-type="horizontal"

例：
<div data-role="controlgroup" data-type="horizontal">
<a href="index.html" data-role="button">Yes</a>
<a href="index.html" data-role="button">No</a>
<a href="index.html" data-role="button">Maybe</a>
</div>

 >>>>>Content：

 標題：h1 、h2。。。；文本區域；圖片；

可折疊： data-role="collapsible"

內容主題：data-content-theme=“a”

默認展開：data-collapsed="false"

小號折疊：data-mini="true"

可折疊組：data-role="collapsible-set"

例：

<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： 表單結構：

<form action="form.php" method="post"> ... </form>

隱藏標簽：

<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"

滑塊：
<label for="slider-0">Input slider:</label>
<input type="range" name="slider" id="slider-0" value="60" min="0" max="100" step="50"data-highlight="true"data-theme="a" data-track-theme="b"/>

開關：
<div data-role="fieldcontain">
<label for="flip-c">Flip switch:</label>
  <select name="slider" id="flip-c" data-role="slider" data-theme="a">
  <option value="no">No</option>
  <option value="yes">Yes</option>
  </select> 
</div>

單選復選：type="radio" type="checkbox"水平排列<fieldset data-role="controlgroup" data-type="horizontal"> ,單選框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>