jquerymobile实例介绍

【创建页面】
   data-role="page" 是在浏览器中显示的页面。。
   data-theme="b"更换主题，有a和b两种
   data-role="header" 是在页面顶部创建的工具条 (通常用于标题或者搜索按钮)
    
    使用 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"

<div data-role="page" id="pageone"  data-theme="b">
            <div data-role="header">
                <a href="#revealPanel"  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">
                <ul data-role="listview" data-split-icon="info" data-theme="b">
                    <li><a href=>
                      <img src="img/natalia0103151000057.jpg">
                      <h2>炸掉java</h2>
                      <p>java非常脆弱，已经被消灭</p></a>
                      <a href="#popup"data-rel = "dialog"data-position-to="window" data-transition="pop">详情</a>
                    </li>
                    <li><a href="#">
                      <img src="img/indexpage_43.jpg">
                      <h2>炸掉java</h2>
                      <p>java非常脆弱，已经被消灭</p></a>
                      <a>详情</a>
                    </li><li><a href="#">
                      <img src="img/indexpage_43.jpg">
                      <h2>炸掉java</h2>
                      <p>java非常脆弱，已经被消灭</p></a>
                      <a>详情</a>
                    </li><li><a href="#">
                      <img src="img/indexpage_43.jpg">
                      <h2>炸掉java</h2>
                      <p>java非常脆弱，已经被消灭</p></a>
                      <a>详情</a>
                    </li><li><a href="#">
                      <img src="img/indexpage_43.jpg">
                      <h2>炸掉java</h2>
                      <p>java非常脆弱，已经被消灭</p></a>
                      <a>详情</a>
                    </li><li><a href="#">
                      <img src="img/indexpage_43.jpg">
                      <h2>谈一场恋爱</h2>
                      <p>记绣榻闲时，并吹戏雨；雕阑曲处，同倚斜阳。</p></a>
                      <a>详情</a>
                    </li>
                    <li><a href=>
                      <img src="img/natalia0103151000057.jpg">
                      <h2>炸掉java</h2>
                      <p>java非常脆弱，已经被消灭</p></a>
                      <a href="#popup"data-rel = "dialog"data-position-to="window" data-transition="pop">详情</a>
                    </li>
                </ul>
            </div>

data-role="footer" 用于创建页面底部工具条。
    使用 data-role="navbar" 属性来定义导航栏
    使用 data-icon 属性在导航按钮上添加图标
    在链接中添加data-rel="dialog"让用户点击链接时弹出对话框

<div id="footer" data-role="footer" data-position="fixed">
                <!--
                    data-position="fixed" 固定在底部
                    data-fullscreen="true/false"规定工具栏是否一直固定在顶部或底部
                    data-tap-toggle    true | false    规定用户是否能够通过点击改变工具栏的可见性
                -->
                <div data-role="navbar">
                    <ul>
                        <li>
                            <a href="#" data-icon="comment" onclick="goTo('content.html')">消息</a>
                        </li>
                        <li>
                            <a href="#overlayPanel" 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-role="panel"属性来创建面板。
     data-display 属性来控制面板的展示方式:
     ① overlay在内容上显示面板
     ② push是同时"推动"面板和页面。
     ③ reveal默认值，将页面像幻灯片一样从屏幕划出，将面板显示出来

<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-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="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>
        </div>
<div data-role="page" id="popup">
      <div data-role="header">
       <h1>正在炸掉java</h1>
      </div>
      <div role="main" class="ui-content">
       <img src="img/natalia0103151000057.jpg"/>
       <p>java非常脆弱，已经被消灭</p>
      </div>
      <div data-role="footer">
       <h1>copyright © 2009-2014</h1> 
      </div>
  </div>