• 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>
  • 相关阅读:
    Ubunut16.04 安装 Theano+GPU
    ubuntu源与常用python配置pip源(win)、pip常用命令
    集群(heartbeat)搭建
    Linux下搭建企业共享目录方案之------samba
    LAMP的安装和注意事项
    Linux最小化安装,忘记安装开发工具的解决方法
    去掉Linux尖锐的提示音
    最小化安装CentOS7,没有ifconfig命令---yum search command_name搜索未知包名
    编译安装php-5.4.44
    configure: error: Please reinstall the libcurl distribution
  • 原文地址:https://www.cnblogs.com/zhanghaoxiaoan/p/7788773.html
Copyright © 2020-2023  润新知