jquery mobile 学习_H5之家 - 中国HTML5教程资源分享第一站

引用js：

page：

设置设备的适配：

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

<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">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-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">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-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" 例： <div> <div><strong>I'm Block A</strong> and text inside will wrap</div> <div><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>12</span></li> </ul> 列表格式： <ul data-role="listview" data-theme="d" data-divider-theme="d"> <li data-role="list-divider">列表标题<span>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：表单结构：

隐藏标签：