---恢复内容开始---
【jquery mobile小案例】效果图如下：
首先先创建一个页面主要使用data-role="page"这个指令，我们给它起个id="pageone"
<div data-role="page" id="pageone" data-transition="slide" data-direction="reverse"> </div>
把下面的内容写到这个DIV里面也就是pageone这个页面里。
<div data-role="panel" id="revealPanel" data-display="reveal"> <p>已打卡127天</p> <a href="#"><img src="img/a.PNG">张三</a><br> <span>☆☆☆☆☆</span><br> <span>编辑个性签名...</span> <div class="message"> <ul> <li>了解会员特权</li> <li>QQ钱包</li> <li>个性装扮</li> <li>我的收藏</li> <li>我的相册</li> <li>我的文件</li> <li>免流量特权</li> </ul> </div> </div>
解释一下上面一些指令的作用：
data-role="page" 是在浏览器中显示的页面。
data-transition="slide"页面过渡效果。
data-direction="reverse"页面页面从左向右滑动。不写页面从右向左滑动。
data-role="panel"属性来创建面板。
data-display 属性来控制面板的展示方式:
① overlay在内容上显示面板
② push是同时"推动"面板和页面。
③ reveal默认值，将页面像幻灯片一样从屏幕划出，将面板显示出来。
<div data-role="panel" id="overlayPanel" data-display="overlay" data-position="right"> <h2>我的通讯录</h2> <form class="ui-filterable"> <input id="myFilter" data-type="search" placeholder="根据名称搜索.."> </form> <ul data-role="listview" data-filter="true" data-input="#myFilter" data-autodividers="true" data-inset="true"> <li> <a href="#">张三</a> </li> <li> <a href="#">李四</a> </li> <li> <a href="#">Albert</a> </li> <li> <a href="#">Billy</a> </li> <li> <a href="#">Bob</a> </li> <li> <a href="#">Calvin</a> </li> <li> <a href="#">Cameron</a> </li> <li> <a href="#">Chloe</a> </li> <li> <a href="#">Christina</a> </li> <li> <a href="#">Diana</a> </li> <li> <a href="#">Gabriel</a> </li> <li> <a href="#">Glen</a> </li> <li> <a href="#">Ralph</a> </li> <li> <a href="#">Valarie</a> </li> </ul> </div>
上面一些指令的解释：
data-position="right"让面板出现在屏幕的右侧
data-inset="true"：列表样式的圆角和边缘。
如果你有一个字母顺序排列的列表，（例如一个电话簿）通过 <ol> 或者<ul>
元素的 data-autodividers="true" 属性设置可以配置为自动生成的项目的分隔。
data-role="listview"：列表视图。
你想过滤的元素必须使用 data-filter="true" 属性。
创建 <input> 元素并指定 id，元素上加上 data-type="search" 属性。这样就能创建基本的搜索字段。
将 <input> 元素放置于一个表单中，表单 <form> 元素使用 "ui-filterable" 类 - 该类会调整搜索字段与过滤元素的外边距。
接着为过滤的元素添加 data-input 属性。该值需要是 <input> 元素的 id。
<div data-role="header"> <a href="#revealPanel" data-swipe-close="true" class="ui-btn ui-corner-all ui-icon-bars ui-btn-icon-notext"></a> <!--<a href="#pushPanel" class="ui-btn ui-corner-all ui-icon-mail ui-btn-icon-notext"></a>--> <a href="#" class="ui-btn ui-btn-right ui-shadow ui-corner-all ui-icon-plus ui-btn-icon-notext"></a> <p align="center">消息</p> </div>
data-role="main" 定义了页面的内容，比如文本， 图片，表单，按钮等。
"ui-content" 类用于在页面添加内边距和外边距。
列表视图就是在在ul或ol标签中添加data-role="listview"属性。
列表样式的圆角和边缘，使用 data-inset="true" 属性设置
<div data-role="main" class="ui-content"> <a href="#overlayPanel" class="ui-btn">搜索</a> <ul data-role="listview" data-inset="true"> <li> <a href="#pagetwo" data-transition="slide" data-direction="reverse"><img src="img/a.PNG">张三(点击跳转页面)</a> </li> <li> <a href="#"><img src="img/b.PNG">李四</a> </li> <li> <a href="#"><img src="img/c.PNG">王二</a> </li> <li id="listview1"> <a href="#"><img src="img/a.PNG">张五(向左滑动切换页面)</a> </li> </ul> </div>
data-role="footer" 用于创建页面底部工具条。
使用 data-role="navbar" 属性来定义导航栏
使用 data-icon 属性在导航按钮上添加图标
在链接中添加data-rel="dialog"让用户点击链接时弹出对话框
<div id="footer" data-role="footer" data-position="fixed"> <div data-role="navbar"> <ul> <li> <a href="#" data-icon="comment" onclick="goTo('content.html')">消息</a> </li> <li> <a href="user.html" data-icon="user" onclick="goTo('content1.html')">联系人</a> </li> <li> <a href="#" data-icon="star" onclick="goTo('user.html')">动态</a> </li> </ul> </div> </div>
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":定义折叠面板的图标。
这样pageone里面的内容都弄好了。下面我们在建一个data-role="page" id为pagetwo。
<div data-role="page" id="pagetwo" data-theme="b"> </div>
在pageteo里面下如下内容
<div data-role="header" data-position="fixed" data-fullscreen="true" > <h1>欢迎来到我的主页</h1> </div> <div data-role="main" class="ui-content" > <a href="#pageone" data-transition="slide" data-direction="reverse">点击跳转页面(淡入第一个页面)</a> <div data-role="collapsibleset"> <div data-role="collapsible" data-collapsed-icon="carat-r" data-mini="true"> <h1>特别关心</h1> <ul data-role="listview"> <li><a href="#">张三</a></li> <li><a href="#">李四</a></li> <li><a href="#">王二</a></li> </ul> </div> <div data-role="collapsible" data-collapsed-icon="carat-r" data-mini="true"> <h1>分组一</h1> <ul data-role="listview"> <li><a href="#">张三</a></li> <li><a href="#">李四</a></li> <li><a href="#">王二</a></li> </ul> </div> <div data-role="collapsible" data-collapsed-icon="carat-r" data-mini="true"> <h1>分组二</h1> <ul data-role="listview"> <li><a href="#">张三</a></li> <li><a href="#">李四</a></li> <li><a href="#">王二</a></li> </ul> </div> </div> </div> <div data-role="footer" data-position="fixed" data-fullscreen="true"> <h1>底部文本</h1> </div> </div> <div data-role="page" id="class-page"> <div data-role="content"> <ul data-role="listview" id="listview2"> <li>向右滑动切换页面</li> <li>向右滑动切换页面</li> <li>向右滑动切换页面</li> </ul> </div> </div
这样一个小项目就完成了，赶快动起你的手敲一下试试吧！