jQuery Mobile学习笔记（三）——UI组件
这一章，详细学习一下常用的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表示应用图标
–>
===============================
导航栏：data-role=”navbar”，一组链接组成的一系列互斥选项。通常放在页脚。导航栏的元素控制在6个一下，以便让它们全部显示为一行。
仿微信样式：
- <div data-role=“header” data-position=“fixed”>
- <h1>Homeh1>
- <div data-role=“navbar”>
- <ul>
- <li><a href=“#index” data-icon=“home”>Homea>
- <li><a href=“#contacts” data-icon=“search”>Contactsa>
- <li><a href=“#events” data-icon=“info”>Eventsa>
- <li><a href=“#news” data-icon=“grid”>Newsa>
- ul>
- div>
- div>
- <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>>Homea>
- <li><a href=“#contacts”>Contactsa>
- <li><a href=“#events”>Eventsa>
- <li><a href=“#news”>Newsa>
- ul>
- div>
- div>
- >
- <html>
- <head>
- head>
- <body>
- <div data-role=“page” id=“home”>
- <div data-role=“header”>
- <h1>Homeh1>
- div>
- <div data-role=“content”>
- <p>This is content for the homep>
- 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>>Homea>li>
- <li><a href=“#help” data-icon=“alert”>Helpa>li>
- ul>
- div>
- div>
- div>
- <div data-role=“page” id=“help”>
- <div data-role=“header”>
- <h1>Helph1>
- div>
- <div data-role=“content”>
- <p>This is content for Helpp>
- 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”>Homea>li>
- <li><a data-icon=“alert” <span style=“background-color: rgb(51, 204, 255);”>class=“ui-btn-active ui-state-persist”span>>Helpa>li>
- ul>
- div>
- div>
- div>
- body>
- html>
Home
This is content for the home
data-id="main" position="fixed">
Help
This is content for Help
data-id="main" position="fixed">
2.1可折叠内容data-role=”collapsible”
- <div data-role=“content”>
- <div data-role=“collapsible”>
- <h2>History of Romeh2>
- <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 Romeh2>
- <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>
History of Rome
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.
Government of Rome
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.
- <div data-role=“content”>
- <div data-role=“collapsible”>
- <h2>Romeh2>
- <div data-role=“collapsible”>
- <h3>Historyh3>
- <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>Governmenth3>
- <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>Madridh2>
- <div data-role=“collapsible”>
- <h3>Historyh3>
- <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>Governmenth3>
- <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>
Rome
History
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.
Government
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.
Madrid
History
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).
Government
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.
- <div data-role=“page” id=“home”>
- <div data-role=“header”>
- <h1>@firth1>
- div>
- <div data-role=“content” data-theme=“b”>
- <div data-role=“collapsible-set”>
- <div data-role=“collapsible” data-collapsed=“false”>
- <h2>Booksh2>
- <ul>
- <li>Programming the Mobile Webli>
- <li>jQuery Mobile: Up & Runningli>
- <li>Mobile HTML5li>
- ul>
- div>
- <div data-role=“collapsible” data-collapsed=“true”>
- <h2>Talksh2>
- <ul>
- <li>Velocity Conferenceli>
- <li>OSCONli>
- <li>Mobile World Congressli>
- <li>Google DevFestli>
- ul>
- div>
- div>
- div>
- div>
@firt
Books
- Programming the Mobile Web
- jQuery Mobile: Up & Running
- Mobile HTML5
Talks
- Velocity Conference
- OSCON
- Mobile World Congress
- Google DevFest
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 1div>
- <div class=“ui-block-b”>Column 2div>
- section>
Column 1
Column 2
-
- <div class=“ui-block-a”>Cell 1.1div>
- <div class=“ui-block-b”>Cell 1.2div>
- <div class=“ui-block-c”>Cell 1.3div>
-
- <div class=“ui-block-a”>Cell 2.1div>
- <div class=“ui-block-b”>Cell 2.2div>
- <div class=“ui-block-c”>Cell 2.3div>
- section>
- lt;/div>
Cell 1.1
Cell 1.2
Cell 1.3
Cell 2.1
Cell 2.2
Cell 2.3
创建按钮的三种方式：
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!”>
Click me!
- <a href=“#” data-role=“button” data-inline=“true”>Button 1a>
Button 1- <div <span style=“background-color: rgb(51, 204, 255);”>data-role=“controlgroup”span>>
- <a href=“#” data-role=“button”>Button 1a>
- <a href=“#” data-role=“button”>Button 2a>
- <a href=“#” data-role=“button”>Button 2a>
- div>
- <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 1a>
- <a href=“#” data-role=“button” data-inline=“true”>Button 2a>
- <a href=“#” data-role=“button” data-inline=“true”>Button 2a>
- div>
- <a href=”#” data-role=”button” data-shadow=”false” data-corners=”false”>Helpa>
Help- <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”>Tweeta>
Tweet
- <a href=“#” data-role=“button” data-icon=“help” data-iconpos=“right”>Helpa>
- <a href=“#” data-role=“button” data-icon=“help” data-iconpos=“left”>Helpa>
- <div data-role=“controlgroup”>
- <a href=“#” data-role=“button” data-icon=“help” data-iconpos=“bottom”>Helpa>
- <a href=“#” data-role=“button” data-icon=“help” data-iconpos=“top”>Helpa>
- div>
Help
Help
| 图标 | 值 | 图标 | 值 |
|---|---|---|---|
| 向左箭头 | arrow-l | 刷新 | refresh |
| 向右箭头 | arrow-r | 向前动作 | forward |
| 向上箭头 | arrow-u | 向后动作 | back |
| 向下箭头 | arrow-d | 网格 | grid |
| 删除（X） | delete | 星星 | star |
| 加号 | plus | 警报（警号） | alert |
| 减号 | minus | 信息（i） | info |
| 检查标记（√） | check | 主页图标 | home |
| 齿轮图标 | gear | 搜索图标 | search |