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" 属性。
   创建 元素并指定 id，元素上加上 data-type="search" 属性。这样就能创建基本的搜索字段。
   将 元素放置于一个表单中，表单

元素使用 "ui-filterable" 类 - 该类会调整搜索字段与过滤元素的外边距。
   接着为过滤的元素添加 data-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="#">Alberta>
15                     li>
16                     <li>
17                         <a href="#">Billya>
18                     li>
19                     <li>
20                         <a href="#">Boba>
21                     li>
22                     <li>
23                         <a href="#">Calvina>
24                     li>
25                     <li>
26                         <a href="#">Camerona>
27                     li>
28                     <li>
29                         <a href="#">Chloea>
30                     li>
31                     <li>
32                         <a href="#">Christinaa>
33                     li>
34                     <li>
35                         <a href="#">Dianaa>
36                     li>
37                     <li>
38                         <a href="#">Gabriela>
39                     li>
40                     <li>
41                         <a href="#">Glena>
42                     li>
43                     <li>
44                         <a href="#">Ralpha>
45                     li>
46                     <li>
47                         <a href="#">Valariea>
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日