jQuery Mobile学习笔记（三）——UI组件

来源：互联网发布：淘宝客吸引人的广告词编辑：程序博客网时间：2024/05/22 02:01

这一章，详细学习一下常用的JM组件。组件基本上可以分为一下几类：

工具栏组件
格式化组件
按钮组件
列表组件
表单组件

1.工具栏组件（页头、页脚）：

定位：

内联模式——页面长度超过可见高度时，页脚将被隐藏，同时页头只在滚动条在顶部时才可见（默认模式）。

标准固定模式——data-position=“fixed”，用户滚动页面内容时，工具栏会自动隐藏，滚动完成时，固定工具栏会再次在顶部或底部对应的位置出现。

全屏固定模式——data-position="fixed"/data-fullscreen="true"在点击屏幕时才出现的隐藏的固定工具栏，再次点击时，又会消失。

=================================================

<!--添加工具栏按钮。一般工具栏一般右侧使用肯定动作，左侧使用否定动作。

header中一个a元素相当于一个按钮，一个a元素，位于标题左侧，两个a元素，一个左一个右。可以使用class="ui-btn-right"/class="ui-btn-left"来强制制定按钮位置。

data-icon表示应用图标-->

<a href="logout" data-icon=”back“ data-rel="back">log out</a>
<h1><img src="images/logo.png"></h1> 
<a href="settings" data-icon="gear" data-theme="b">Settings</a>

</div>

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


<div data-role="footer" data-position="fixed" class="ui-bar">
<a href="refresh">Refresh</a>
<a href="filter">Filter</a>
<a href="search">Search</a>
<a href="add" data-theme="b">New Item</a>

</div>
</div>

===============================

导航栏：data-role="navbar"，一组链接组成的一系列互斥选项。通常放在页脚。导航栏的元素控制在6个一下，以便让它们全部显示为一行。

仿微信样式：

<div data-role="header" data-position="fixed">  <h1>Home</h1>  <div data-role="navbar">    <ul>      <li><a href="#index" data-icon="home">Home</a>      <li><a href="#contacts" data-icon="search">Contacts</a>      <li><a href="#events" data-icon="info">Events</a>      <li><a href="#news" data-icon="grid">News</a>    </ul>  </div></div>

被选中的元素：class="ui-btn-active"

<div data-role="footer" data-position="fixed">  <div data-role="navbar">    <ul>      <li><a href="#index" <span style="background-color: rgb(51, 204, 255);">class="ui-btn-active"</span>>Home</a>      <li><a href="#contacts">Contacts</a>      <li><a href="#events">Events</a>      <li><a href="#news">News</a>    </ul>  </div></div>

固定页脚，不会更新（data-role=”footer“中data-id相同）：

<!DOCTYPE html><html> <head>     <!-- Typical jQuery Mobile header goes here --> </head> <body>    <div data-role="page" id="home">    <div data-role="header">            <h1>Home</h1>    </div>    <div data-role="content">            <p>This is content for the home</p>    </div>    <div data-role="footer"<span style="background-color: rgb(255, 255, 255);"> </span><span style="background-color: rgb(51, 204, 255);">data-id="main"</span> position="fixed">      <div data-role="navbar">       <ul>         <li><a data-icon="home" <span style="background-color: rgb(51, 204, 255);">class="ui-btn-active ui-state-persist"</span>>Home</a></li>         <li><a href="#help" data-icon="alert">Help</a></li>       </ul>      </div>     </div> </div> <div data-role="page" id="help">    <div data-role="header">            <h1>Help</h1>     </div>    <div data-role="content">            <p>This is content for Help</p>     </div>    <div data-role="footer" <span style="background-color: rgb(51, 204, 255);">data-id="main"</span>  position="fixed">      <div data-role="navbar">       <ul>         <li><a href="#home" data-icon="home">Home</a></li>         <li><a data-icon="alert" <span style="background-color: rgb(51, 204, 255);">class="ui-btn-active ui-state-persist"</span>>Help</a></li>       </ul>      </div>     </div>    </div> </body> </html>

2.格式化组件

2.1可折叠内容data-role="collapsible"

<div data-role="content"><div data-role="collapsible">  <h2>History of Rome</h2>  <p>There is archaeological evidence of human occupation of the Rome area from at      least 14,000 years, but the dense layer of much younger debris obscures      Palaeolithic and Neolithic sites.[11] Evidence of stone tools, pottery and      stone weapons attest to at least 10,000 years of human presence.  </p></div><div data-role="collapsible" data-collapsed="true"> <!--已展开-->  <h2>Government of Rome</h2>  <p>Rome constitutes one of Italy's 8,101 communes, and is the largest both in terms      of land area and population. It is governed by a mayor, currently Gianni Alemanno,      and a city council.  </p></div></div>

嵌套可折叠内容：

<div data-role="content">  <div data-role="collapsible">     <h2>Rome</h2>     <div data-role="collapsible">       <h3>History</h3>       <p>There is archaeological evidence of human occupation of the Rome area from           at least 14,000 years, but the dense layer of much younger debris obscures           Palaeolithic and Neolithic sites.[11] Evidence of stone tools, pottery and           stone weapons attest to at least 10,000 years of human presence. </p>     </div>     <div data-role="collapsible" data-collapsed="true">       <h3>Government</h3>       <p>Rome constitutes one of Italy's 8,101 communes, and is the largest both in           terms of land area and population. It is governed by a mayor, currently            Gianni Alemanno, and a city council. </p>     </div>   </div>   <div data-role="collapsible">     <h2>Madrid</h2>     <div data-role="collapsible">       <h3>History</h3>       <p>Although the site of modern-day Madrid has been occupied since pre-historic           times,[23] in the Roman era this territory belonged to the diocese of           Complutum (present-day Alcalá de Henares).</p>     </div>     <div data-role="collapsible" data-collapsed="true">       <h3>Government</h3>       <p>The City Council consists of 57 members, one of them being the Mayor,           currently Alberto Ruiz-Gallardón Jiménez. The Mayor presides over the           Council.</p>     </div>   </div></div>

手风琴部件（多个可折叠内容）

<div data-role="page" id="home">   <div data-role="header">        <h1>@firt</h1>   </div>   <div data-role="content" data-theme="b">      <!-- This defines the whole collapsible set (accordion) -->        <div data-role="collapsible-set">         <div data-role="collapsible" data-collapsed="false">                <h2>Books</h2>             <ul>                <li>Programming the Mobile Web</li>                <li>jQuery Mobile: Up & Running</li>                <li>Mobile HTML5</li>             </ul>         </div>         <div data-role="collapsible" data-collapsed="true">                <h2>Talks</h2>             <ul>                <li>Velocity Conference</li>                <li>OSCON</li>                <li>Mobile World Congress</li>                <li>Google DevFest</li>             </ul>         </div>       </div>      <!-- end of collapsible set (accordion) -->   </div></div>

3.排版（类似表格）

网格不可见，占100%的宽度，没有内外边距，可定义2-5列

ui-grid-a表示2列，ui-grid-b表示3列，ui-grid-c表示4列，ui-grid-d表示5列；

ui-block-a/b/c/d/e分别表示网格的第一列至第五列。

<div data-role="content">

<pre name="code" class="html">  <section class="ui-grid-a">    <div class="ui-block-a">Column 1</div>    <div class="ui-block-b">Column 2</div>  </section>

 <!-- Row 1 -->    <div class="ui-block-a">Cell 1.1</div>    <div class="ui-block-b">Cell 1.2</div>    <div class="ui-block-c">Cell 1.3</div>    <!-- Row 2 -->    <div class="ui-block-a">Cell 2.1</div>    <div class="ui-block-b">Cell 2.2</div>    <div class="ui-block-c">Cell 2.3</div>  </section></div>

4.按钮

创建按钮的三种方式：button元素/input type="button"/data-role="button"，默认情况下占满整个屏幕。

<a href="#" data-role="button">Click me!</a><button data-theme="b">Click me too!</button><input type="button" value="Don't forget about me!">

内联按钮：data-inline="true"，这种按钮不会占满屏幕宽度

<a href="#" data-role="button" data-inline="true">Button 1</a>

按钮组：

<div <span style="background-color: rgb(51, 204, 255);">data-role="controlgroup"</span>>  <a href="#" data-role="button">Button 1</a>  <a href="#" data-role="button">Button 2</a>  <a href="#" data-role="button">Button 2</a></div>

一行按钮（少于5个）

<div data-role="controlgroup" <span style="background-color: rgb(51, 204, 255);">data-type="horizontal"</span>>  <a href="#" data-role="button" data-inline="true">Button 1</a>  <a href="#" data-role="button" data-inline="true">Button 2</a>  <a href="#" data-role="button" data-inline="true">Button 2</a></div>

效果：data-shadow="false"不带阴影 data-corners="false"不带圆角

<a href="#” data-role="button” data-shadow="false” data-corners="false">Help</a>

按钮自定义图标：图标应该是白色或透明的背景，18X18像素，高分辨率设备（ios）下36X36像素，data-iconshadow="false"移除图标阴影效果

<style>   .ui-icon-myapp-tweet {       background-image: url(icons/tweet.png);   }   @media only screen and (-webkit-min-device-pixel-ratio: 2) {      .ui-icon-myapp-tweet {          background-image: url(icons-hd/tweet.png) !important;            background-size: 18px 18px;      }}</style><pre name="code" class="html"><a href="#" data-role="button" data-icon="myapp-tweet">Tweet</a>

图标位置：相对文字的位置data-iconpos

<a href="#" data-role="button" data-icon="help" data-iconpos="right">Help</a><a href="#" data-role="button" data-icon="help" data-iconpos="left">Help</a><div data-role="controlgroup">  <a href="#" data-role="button" data-icon="help" data-iconpos="bottom">Help</a>  <a href="#" data-role="button" data-icon="help" data-iconpos="top">Help</a></div>

JM图标汇总图标值图标值向左箭头arrow-l刷新refresh向右箭头arrow-r向前动作forward向上箭头arrow-u向后动作back向下箭头arrow-d网格grid删除（X）delete星星star加号plus警报（警号）alert减号minus信息（i）info检查标记（√）check主页图标home齿轮图标gear搜索图标search

0 0