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-r