jquery mobile小案例

---恢复内容开始---

【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

这样一个小项目就完成了，赶快动起你的手敲一下试试吧！