jQuery Mobile学习笔记

?

总页面框架：<div data-role="page"></div>

引用js：

<script src="js/jquery-1.6.4.min.js"></script>
<script src="js/jquery.mobile-1.0.1.min.js"></script>

让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0：

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

详细的控件下面一一记录哈~~

>>>>>Toolbar：

?

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

例：
<div?data-role="header"?data-position="inline">?
<h1>Page Title</h1>
<a href="index.html" data-icon="gear" data-role="button">Button</a></h3>
</div>
<div data-role="navbar">
<ul>
<li><a href="a.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>

网格：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 data-theme="d" data-divider-theme="d">
<li data-role="list-divider">列表标题<span /><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" name="username" id="username" value="" placeholder="Username"/>
或者
<div data-role="fieldcontain" 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" 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>