引用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>