zoukankan      html  css  js  c++  java
  • jQueryMobile学习笔记(二)

        页眉页脚工具栏的使用、

    1.工具栏显示模式

      分为两种:固定模式、内联模式(默认)。

           固定模式:页眉总是位于屏幕最上方,页脚总是位于屏幕最下方。

           内联模式:页眉在页面正文内容上方,正文结束后紧跟页脚工具栏,随着正文内容的长短工具栏的位置也会变化。

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title></title>
    <link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css" type="text/css">
    <script src="js/jquery-1.11.3.js"></script>
    <script src="js/jquery.mobile-1.4.5.min.js"></script>
    </head>
    <body>
    <section id="page1" data-role="page" data-title="工具栏">
    <div data-role="header" data-position="fixed" data-fullscreen="true" data-theme="a" >
    <h2>页眉工具栏</h2>
    </div>
    <div>
    <h1>工具栏</h1>
    页眉和页脚工具栏有助于使用者进行常用操作
    </div>
    <div data-role="footer" data-position="fixed">
    <h2>页脚工具栏</h2>
    </div>
    </section>
    </body>
    </html>
    代码执行效果如下图所示:

    data-position="fixed":设置页眉为固定显示模式。
    data-fullscreen="true":设置点击屏幕隐藏页眉页脚。
    data-theme="a":设置主题风格为a。
    2、工具栏中按钮样式和位置
      页眉工具栏中,默认情况下分立在标题两侧,左侧按钮居左显示,右侧按钮居右显示,呈现为内联样式。
    <div data-role="header" data-position="fixed" data-fullscreen="true">
    <a href="#" data-role="button" data-icon="arrow-l">左侧</a>
    <h1>页眉工具栏</h1>
    <a href="#" data-role="button" data-icon="arrow-r">右侧</a>
    </div>
    代码执行效果如下图所示:

    data-role="button":设置a标签为按钮。
    data-icon="arrow-l":设置显示图标。
    3、导航工具栏
    <header data-role="header" data-position="fixed" data-theme="b">
    <h1>导航工具栏</h1>
    <div data-role="navbar">
    <ul>
    <li><a href="#">导航按钮</a></li>
    <li><a href="#">导航按钮</a></li>
    <li><a href="#">导航按钮</a></li>
    <li><a href="#">导航按钮</a></li>
    <li><a href="#">导航按钮</a></li>
    <li><a href="#">导航按钮</a></li>
    <li><a href="#">导航按钮</a></li>
    </ul>
    </div>
    </header>
    <div data-role="content">
    <p>页眉或页脚导航工具栏都可以集成导航工具栏以实现丰富的导航效果</p>
    </div>
    <div data-role="footer" data-position="fixed" data-theme="b" data-fullscreen="true">
    <div data-role="navbar">
    <ul>
    <li><a href="#" data-icon="arrow-l">向前</a></li>
    <li><a href="#" data-icon="arrow-r">向后</a></li>
    </ul>
    </div>
    </div>
    运行效果如图所示:


    data-role="navbar":设置容器为导航栏,在导航工具栏中每行至多有5个导航按钮,超过则自动换行显示。在自动换行的导航工具栏中每行只有两个导航按钮。
     
    
    


  • 相关阅读:
    自考新教材--p94
    prim算法--教材p146-147
    图的广度优先遍历BFS实现--邻接矩阵p143
    自考新教材--p98
    输入若干有序数放在数组中,然后输入一个数,插入到此有序数列中,插入后,数组中的数仍然有序。请对插在最前、插在最后、插在中间三种情况运行程序,以便验证程序是否正确。
    【Mybatis】02 快速入门Part2 补完CRUD
    【Mybatis】01 概述 & 快速入门Part1
    【DataBase】MySQL 13 分组查询
    【DataBase】MySQL 06 条件查询 & 排序查询
    【DataBase】MySQL 05 基础查询
  • 原文地址:https://www.cnblogs.com/smswei/p/5216391.html
Copyright © 2011-2022 走看看