程序博客网 > 债券行情软件

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

来源：互联网 发布：债券行情软件 编辑：程序博客网 时间：2024/06/06 12:27

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

  • 工具栏组件
  • 格式化组件
  • 按钮组件
  • 列表组件
  • 表单组件
1.工具栏组件（页头、页脚）：
定位：
内联模式——页面长度超过可见高度时，页脚将被隐藏，同时页头只在滚动条在顶部时才可见（默认模式）。
标准固定模式——data-position=“fixed”，用户滚动页面内容时，工具栏会自动隐藏，滚动完成时，固定工具栏会再次在顶部或底部对应的位置出现。
全屏固定模式——data-position=”fixed”/data-fullscreen=”true”在点击屏幕时才出现的隐藏的固定工具栏，再次点击时，又会消失。

=================================================
<div data-role=”page” data-fullscreen=”true”>
<!–全屏固定模式 –>
  <div data-role=”header” data-position=”fixed”>
<!–添加工具栏按钮。一般工具栏一般右侧使用肯定动作，左侧使用否定动作。
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> <!–添加logo标题，高度会自适应，但height<125px–>
   <a href=”settings” data-icon=”gear” data-theme=”b”>Settings</a>
<!–如果不用JM的页头样式，则在data-role=”header“下加一个<div></div>标签，在里面添加内容即可–>
  </div>

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

<!–页脚中每个a元素都会渲染为按钮，可以添加任意数量的按钮，加一个class=”ui-bar“视觉效果会好一些–>
  <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个一下，以便让它们全部显示为一行。
仿微信样式：
[html] view plain copy
print?
  1. <div data-role=“header” data-position=“fixed”>  
  2.   <h1>Home</h1>  
  3.   <div data-role=“navbar”>  
  4.     <ul>  
  5.       <li><a href=“#index” data-icon=“home”>Home</a>  
  6.       <li><a href=“#contacts” data-icon=“search”>Contacts</a>  
  7.       <li><a href=“#events” data-icon=“info”>Events</a>  
  8.       <li><a href=“#news” data-icon=“grid”>News</a>  
  9.     </ul>  
  10.   </div>  
  11. </div>  
<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”
[html] view plain copy
print?
  1. <div data-role=“footer” data-position=“fixed”>  
  2.   <div data-role=“navbar”>  
  3.     <ul>  
  4.       <li><a href=“#index” <span style=“background-color: rgb(51, 204, 255);”>class=“ui-btn-active”</span>>Home</a>  
  5.       <li><a href=“#contacts”>Contacts</a>  
  6.       <li><a href=“#events”>Events</a>  
  7.       <li><a href=“#news”>News</a>  
  8.     </ul>  
  9.   </div>  
  10. </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>>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相同）：
[html] view plain copy
print?
  1. <!DOCTYPE html>  
  2. <html>  
  3.  <head>  
  4.      <!– Typical jQuery Mobile header goes here –>  
  5.  </head>  
  6.   
  7.  <body>  
  8.     <div data-role=“page” id=“home”>  
  9.   
  10.     <div data-role=“header”>  
  11.             <h1>Home</h1>  
  12.   
  13.     </div>  
  14.   
  15.     <div data-role=“content”>  
  16.             <p>This is content for the home</p>  
  17.     </div>  
  18.   
  19.     <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”>  
  20.       <div data-role=“navbar”>  
  21.        <ul>  
  22.          <li><a data-icon=“home” <span style=“background-color: rgb(51, 204, 255);”>class=“ui-btn-active ui-state-persist”</span>>Home</a></li>  
  23.          <li><a href=“#help” data-icon=“alert”>Help</a></li>  
  24.        </ul>  
  25.       </div>  
  26.      </div>  
  27.   
  28.  </div>  
  29.   
  30.   
  31.  <div data-role=“page” id=“help”>  
  32.   
  33.     <div data-role=“header”>  
  34.             <h1>Help</h1>  
  35.      </div>  
  36.   
  37.     <div data-role=“content”>  
  38.             <p>This is content for Help</p>  
  39.      </div>  
  40.   
  41.     <div data-role=“footer” <span style=“background-color: rgb(51, 204, 255);”>data-id=“main”</span>  position=“fixed”>  
  42.       <div data-role=“navbar”>  
  43.        <ul>  
  44.          <li><a href=“#home” data-icon=“home”>Home</a></li>  
  45.          <li><a data-icon=“alert” <span style=“background-color: rgb(51, 204, 255);”>class=“ui-btn-active ui-state-persist”</span>>Help</a></li>  
  46.        </ul>  
  47.       </div>  
  48.      </div>  
  49.   
  50.     </div>  
  51.   
  52.  </body>  
  53.  </html>  
<!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”
[html] view plain copy
print?
  1. <div data-role=“content”>  
  2.   
  3. <div data-role=“collapsible”>  
  4.   <h2>History of Rome</h2>  
  5.   <p>There is archaeological evidence of human occupation of the Rome area from at   
  6.      least 14,000 years, but the dense layer of much younger debris obscures   
  7.      Palaeolithic and Neolithic sites.[11] Evidence of stone tools, pottery and   
  8.      stone weapons attest to at least 10,000 years of human presence.  
  9.   </p>  
  10. </div>  
  11.   
  12. <div data-role=“collapsible” data-collapsed=“true”> <!–已展开–>  
  13.   <h2>Government of Rome</h2>  
  14.   <p>Rome constitutes one of Italy’s 8,101 communes, and is the largest both in terms   
  15.      of land area and population. It is governed by a mayor, currently Gianni Alemanno,   
  16.      and a city council.  
  17.   </p>  
  18. </div>  
  19.   
  20. </div>  
<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>
嵌套可折叠内容：
[html] view plain copy
print?
  1. <div data-role=“content”>  
  2.   <div data-role=“collapsible”>  
  3.      <h2>Rome</h2>  
  4.      <div data-role=“collapsible”>  
  5.        <h3>History</h3>  
  6.        <p>There is archaeological evidence of human occupation of the Rome area from   
  7.           at least 14,000 years, but the dense layer of much younger debris obscures   
  8.           Palaeolithic and Neolithic sites.[11] Evidence of stone tools, pottery and   
  9.           stone weapons attest to at least 10,000 years of human presence. </p>  
  10.      </div>  
  11.      <div data-role=“collapsible” data-collapsed=“true”>  
  12.        <h3>Government</h3>  
  13.        <p>Rome constitutes one of Italy’s 8,101 communes, and is the largest both in   
  14.           terms of land area and population. It is governed by a mayor, currently    
  15.           Gianni Alemanno, and a city council. </p>  
  16.      </div>  
  17.    </div>  
  18.   
  19.    <div data-role=“collapsible”>  
  20.      <h2>Madrid</h2>  
  21.      <div data-role=“collapsible”>  
  22.        <h3>History</h3>  
  23.        <p>Although the site of modern-day Madrid has been occupied since pre-historic   
  24.           times,[23] in the Roman era this territory belonged to the diocese of   
  25.           Complutum (present-day Alcalá de Henares).</p>  
  26.      </div>  
  27.      <div data-role=“collapsible” data-collapsed=“true”>  
  28.        <h3>Government</h3>  
  29.        <p>The City Council consists of 57 members, one of them being the Mayor,   
  30.           currently Alberto Ruiz-Gallardón Jiménez. The Mayor presides over the   
  31.           Council.</p>  
  32.      </div>  
  33.    </div>  
  34. </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>
手风琴部件（多个可折叠内容）
[html] view plain copy
print?
  1. <div data-role=“page” id=“home”>  
  2.   
  3.    <div data-role=“header”>  
  4.         <h1>@firt</h1>  
  5.    </div>  
  6.   
  7.    <div data-role=“content” data-theme=“b”>  
  8.   
  9.       <!– This defines the whole collapsible set (accordion) –>  
  10.         <div data-role=“collapsible-set”>  
  11.          <div data-role=“collapsible” data-collapsed=“false”>  
  12.                 <h2>Books</h2>  
  13.              <ul>  
  14.                 <li>Programming the Mobile Web</li>  
  15.                 <li>jQuery Mobile: Up & Running</li>  
  16.                 <li>Mobile HTML5</li>  
  17.              </ul>  
  18.          </div>  
  19.          <div data-role=“collapsible” data-collapsed=“true”>  
  20.                 <h2>Talks</h2>  
  21.              <ul>  
  22.                 <li>Velocity Conference</li>  
  23.                 <li>OSCON</li>  
  24.                 <li>Mobile World Congress</li>  
  25.                 <li>Google DevFest</li>  
  26.              </ul>  
  27.          </div>  
  28.        </div>  
  29.       <!– end of collapsible set (accordion) –>  
  30.   
  31.    </div>  
  32.   
  33. </div>  
  34.       
<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分别表示网格的第一列至第五列。
[html] view plain copy
print?
  1. <div data-role=“content”>  
<div data-role="content">
[html] view plain copy
print?
  1. <pre name=“code” class=“html”>  <section class=“ui-grid-a”>  
  2.     <div class=“ui-block-a”>Column 1</div>  
  3.     <div class=“ui-block-b”>Column 2</div>  
  4.   </section>  
<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>
<section class=”ui-grid-b”>
[html] view plain copy
print?
  1. <!– Row 1 –>  
  2.    <div class=“ui-block-a”>Cell 1.1</div>  
  3.    <div class=“ui-block-b”>Cell 1.2</div>  
  4.    <div class=“ui-block-c”>Cell 1.3</div>  
  5.    <!– Row 2 –>  
  6.    <div class=“ui-block-a”>Cell 2.1</div>  
  7.    <div class=“ui-block-b”>Cell 2.2</div>  
  8.    <div class=“ui-block-c”>Cell 2.3</div>  
  9.  </section>  
  10. lt;/div>  
 <!-- 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”，默认情况下占满整个屏幕。
[html] view plain copy
 print?
  1. <a href=“#” data-role=“button”>Click me!</a>  
  2. <button data-theme=“b”>Click me too!</button>  
  3. <input type=“button” value=“Don’t forget about me!”>  
<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”，这种按钮不会占满屏幕宽度
[html] view plain copy
 print?
  1. <a href=“#” data-role=“button” data-inline=“true”>Button 1</a>  
<a href="#" data-role="button" data-inline="true">Button 1</a>
按钮组：
[html] view plain copy
 print?
  1. <div <span style=“background-color: rgb(51, 204, 255);”>data-role=“controlgroup”</span>>  
  2.   <a href=“#” data-role=“button”>Button 1</a>  
  3.   <a href=“#” data-role=“button”>Button 2</a>  
  4.   <a href=“#” data-role=“button”>Button 2</a>  
  5. </div>  
<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个）
[html] view plain copy
 print?
  1. <div data-role=“controlgroup” <span style=“background-color: rgb(51, 204, 255);”>data-type=“horizontal”</span>>  
  2.   <a href=“#” data-role=“button” data-inline=“true”>Button 1</a>  
  3.   <a href=“#” data-role=“button” data-inline=“true”>Button 2</a>  
  4.   <a href=“#” data-role=“button” data-inline=“true”>Button 2</a>  
  5. </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 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”不带圆角
[html] view plain copy
 print?
  1. <a href=”#” data-role=”button” data-shadow=”false” data-corners=”false”>Help</a>  
<a href="#” data-role="button” data-shadow="false” data-corners="false">Help</a>
按钮自定义图标：图标应该是白色或透明的背景，18X18像素，高分辨率设备（ios）下36X36像素，data-iconshadow=”false”移除图标阴影效果
[html] view plain copy
 print?
  1. <style>  
  2.    .ui-icon-myapp-tweet {  
  3.        background-image: url(icons/tweet.png);  
  4.    }  
  5.    @media only screen and (-webkit-min-device-pixel-ratio: 2) {  
  6.       .ui-icon-myapp-tweet {  
  7.           background-image: url(icons-hd/tweet.png) !important;  
  8.             background-size: 18px 18px;  
  9.       }  
  10. }  
  11. </style><pre name=“code” class=“html”><a href=“#” data-role=“button” data-icon=“myapp-tweet”>Tweet</a>  
<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
[html] view plain copy
 print?
  1. <a href=“#” data-role=“button” data-icon=“help” data-iconpos=“right”>Help</a>  
  2. <a href=“#” data-role=“button” data-icon=“help” data-iconpos=“left”>Help</a>  
  3. <div data-role=“controlgroup”>  
  4.   <a href=“#” data-role=“button” data-icon=“help” data-iconpos=“bottom”>Help</a>  
  5.   <a href=“#” data-role=“button” data-icon=“help” data-iconpos=“top”>Help</a>  
  6. </div>  
<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           
	
				
		









 债券行情软件
    		债券行情软件



原创粉丝点击



		

热门IT博客


男生眼中的萌妹子知乎男生眼中的萌妹子知乎




上交所待遇知乎上交所待遇知乎




鼠大王淘宝店




unity3d游戏制作




surfacepro mac 对比




linux的rename命令




nvidia smi windows




python 字典取值




二郎神和孙悟空知乎




好听的淘宝收件人名字




java酒店管理系统案例




java 方法重载 返回值




淘宝在哪里打印快递单




springboot源码分析pdf




淘宝活动海景房




木管乐器知乎




智百盛汽修软件怎么用?




云南菜 知乎




每天做俯卧撑 知乎




阿里云身份证验证接口



		

热门问题
    老师的惩罚
    人脸识别
    我在镇武司摸鱼那些年
    重生之率土为王
    我在大康的咸鱼生活
    盘龙之生命进化
    天生仙种
    凡人之先天五行
    春回大明朝
    姑娘不必设防，我是瞎子
    细纹刻纸
    刻纸图案大全
    刻纸素材
    刻纸图案大全大幅高清
    手工刻纸图案大全
    手工刻纸图案
    小清新唯美刻纸图案
    刻纸模板高清打印图
    刻纸工具
    剪纸刻纸图片
    刻纸图案打印
    纸刻
    文泰刻绘
    紫砂刻绘名家
    刻绘大师
    胡萝卜简单刻花教程
    北宋耀州窑刻花碗
    磁州窑刻花梅瓶
    宋耀州窑青釉刻花婴戏纹碗
    刻苦
    刻苦耐劳
    刻苦铭心
    刻苦学习
    刻苦钻研
    刻苦的成语
    形容学习刻苦
    刻苦学习名言
    刻苦学习的名言
    刻苦读书的成语
    刻苦学习的成语
    刻苦耐劳的意思和造句
    刻苦读书的故事
    关于刻苦学习的名言
    现代勤奋刻苦的故事
    关于勤奋刻苦的成语
    刻苦学习的例子
    形容刻苦读书的成语
    形容学习刻苦的成语
    刻苦学习的人
    形容刻苦的成语
    关于勤奋刻苦的诗句


	










程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里