JQuerymobile实例源代码

首页我们先来解释一下下JQuerymobile是什么，jQuery Mobile是JQuery 框架的一个组件（而非jquery的移动版本）。jQuery Mobile是一款基于HTML5的用户界面系统 是用于创建移动 Web 应用的前端开发框架，可以应用于智能手机与平板电脑，而且使用 HTML5 和 CSS3 最小的脚本来布局网页。

我们先一部分一部分讲解，最后在为大家附上完整代码。

 

1 滑出面板

我们再来解释一下其中一些属性的作用吧。

data-role="panel"属性用来创建面板。
data-display 属性来控制面板的展示方式:
   ① overlay在内容上显示面板
   ② push是同时"推动"面板和页面。
   ③ reveal默认值，将页面像幻灯片一样从屏幕划出，将面板显示出来。

 1 <div data-role="panel" id="revealPanel" data-display="reveal"> 2     <p>已打卡127天</p> 3     <a href="#"><img src="img/a.PNG">张三</a><br> 4     <span>☆☆☆☆☆</span><br> 5     <span>编辑个性签名...</span> 6         <div class="message"> 7             <ul> 8                 <li>了解会员特权</li> 9                 <li>QQ钱包</li>10                 <li>个性装扮</li>11                 <li>我的收藏</li>12                 <li>我的相册</li>13                 <li>我的文件</li>14                 <li>免流量特权</li>15             </ul>16         </div>17 </div>

 

2 元素的过滤

   data-position="right"让面板出现在屏幕的右侧
   data-inset="true"：列表样式的圆角和边缘。
   元素的 data-autodividers="true" 属性设置可以根据字母顺序排列的列表。
   data-role="listview"：列表视图。
   
   你想过滤的元素必须使用 data-filter="true" 属性。
   创建 <input> 元素并指定 id，元素上加上 data-type="search" 属性。这样就能创建基本的搜索字段。
   将 <input> 元素放置于一个表单中，表单 <form> 元素使用 "ui-filterable" 类 - 该类会调整搜索字段与过滤元素的外边距。
   接着为过滤的元素添加 data-input 属性。该值需要是 <input> 元素的 id。

 1 <div data-role="panel" id="overlayPanel" data-display="overlay" data-position="right"> 2                 <h2>我的通讯录</h2> 3                 <form class="ui-filterable"> 4                     <input id="myFilter" data-type="search" placeholder="根据名称搜索.."> 5                 </form> 6                 <ul data-role="listview" data-filter="true" data-input="#myFilter" data-autodividers="true" data-inset="true"> 7                     <li> 8                         <a href="#">张三</a> 9                     </li>10                     <li>11                         <a href="#">李四</a>12                     </li>13                     <li>14                         <a href="#">Albert</a>15                     </li>16                     <li>17                         <a href="#">Billy</a>18                     </li>19                     <li>20                         <a href="#">Bob</a>21                     </li>22                     <li>23                         <a href="#">Calvin</a>24                     </li>25                     <li>26                         <a href="#">Cameron</a>27                     </li>28                     <li>29                         <a href="#">Chloe</a>30                     </li>31                     <li>32                         <a href="#">Christina</a>33                     </li>34                     <li>35                         <a href="#">Diana</a>36                     </li>37                     <li>38                         <a href="#">Gabriel</a>39                     </li>40                     <li>41                         <a href="#">Glen</a>42                     </li>43                     <li>44                         <a href="#">Ralph</a>45                     </li>46                     <li>47                         <a href="#">Valarie</a>48                     </li>49                 </ul>50             </div>

 

3 页面顶部工具条

 data-role="header"  是在页面顶部创建的工具条 (通常用于标题或者搜索按钮)
 data-dismissible   指定面板是否可以通过点击面板外部区域来关闭。有两个参数 true | false 
 data-swipe-close  指定是否可以通过滑动来关闭。有两个参数 true | false 
    
 使用 ui-icon 类将图标添加到按钮上
 ui-btn-b 修改按钮颜色为黑色，字体为白色(默认为灰色背景，黑色字体)。
 ui-corner-all 为按钮添加圆角 
 ui-mini 制作小按钮 
 ui-shadow 为按钮添加阴影
 ui-icon-bars/ui-icon-plus:图标样式
 ui-btn-icon-notext只想显示图标
 默认情况下，所有图标都是白色的。 如果需要改变图标颜色为黑色，可以在元素添加 "ui-alt-icon"

1 <div data-role="header">2       <a href="#revealPanel" data-swipe-close="true" class="ui-btn ui-corner-all ui-icon-bars ui-btn-icon-notext"></a>3       <a href="#" class="ui-btn ui-btn-right ui-shadow ui-corner-all ui-icon-plus ui-btn-icon-notext"></a>5       <p align="center">消息</p>6  </div>

 

4 页面内容

 data-role="main" 定义了页面的内容，比如文本， 图片，表单，按钮等。
 "ui-content" 类用于在页面添加内边距和外边距。
 列表视图就是在在ul或ol标签中添加data-role="listview"属性。
 列表样式的圆角和边缘，使用 data-inset="true" 属性设置

 1 <div data-role="main" class="ui-content"> 2                  3          <a href="#overlayPanel" class="ui-btn">搜索</a> 4                  5           <ul data-role="listview" data-inset="true"> 6                 <li> 7                    <a href="#pagetwo" data-transition="slide" data-direction="reverse"><img src="img/a.PNG">张三(点击跳转页面)</a> 8                  </li> 9                   <li>10                      <a href="#"><img src="img/b.PNG">李四</a>11                   </li>12                   <li>13                      <a href="#"><img src="img/c.PNG">王二</a>14                   </li>15                   <li id="listview1">16                      <a href="#"><img src="img/a.PNG">张五(向左滑动切换页面)</a>17                   </li>18           </ul>19 </div>

 

5 页面底部工具条

 data-role="footer" 用于创建页面底部工具条。
 使用 data-role="navbar" 属性来定义导航栏
 使用 data-icon 属性在导航按钮上添加图标

 1 <div id="footer" data-role="footer" data-position="fixed"> 2             <div data-role="navbar"> 3                  <ul> 4                     <li> 5                         <a href="#" data-icon="comment">消息</a> 6                     </li> 7                     <li> 8                        <a href="user.html" data-icon="user">联系人</a> 9                     </li>10                     <li>11                       <a href="#" data-icon="star">动态</a>12                     </li>13                   </ul>14             </div>15    </div>

 

6 点击需要跳转的页面(子页)

 data-fullscreen="true/false"规定工具栏是否一直固定在顶部或底部
 data-tap-toggle= true | false 规定用户是否能够通过点击改变工具栏的可见性
 如需创建一个可折叠的内容块，需要为容器添加 data-role="collapsible" 属性。
 默认情况下，内容是被折叠起来的。如需在页面加载时展开内容，请使用 data-collapsed="false"
 data-role="collapsibleset"当一个新的块被展开时，所有其他的块都会被折叠起来。
 data-mini= true | false 规定按钮是小尺寸还是常规尺寸

 data-collapsed-icon="carat-r":定义折叠面板的图标。

【本文由“程序员小刘”发布，2017年10月28日