jQuery Mobile 导航栏

导航栏由一组水平排列的链接构成，通常位于页眉或页脚内部。

默认地，导航栏中的链接会自动转换为按钮（无需 data-role="button"）。

请使用 data-role="navbar" 属性来定义导航栏：

实例:

<div data-role="header">
  <div data-role="navbar">
    <ul>
      <li><a href="#anylink">首页</a></li>
      <li><a href="#anylink">页面二</a></li>
      <li><a href="#anylink">搜索</a></li>
    </ul>
  </div>
</div>

　　

提示：按钮的宽度，默认地，与其内容一致。使用无序列表来均等地划分按钮：一个按钮占据 100% 的宽度，两个按钮各分享 50% 的宽度，三个按钮 33.3%，以此类推。不过，如果您在导航栏中规定了五个以上的按钮，那么它会弯折为多行。

活动按钮

当导航栏中的链接被敲击时，会获得选取外观（按下）。

如需在不敲击链接时实现此外观，请使用 class="ui-btn-active"：

实例:

<li><a href="#anylink" class="ui-btn-active">首页</a></li>

　　

对于多个页面，您也许需要为每个按钮设置“被选”外观，以表示用户正在浏览该页面。如果要这么做，请向链接添加 "ui-state-persist" 类，以及 "ui-btn-active" 类：

实例:

<li><a href="#anylink" class="ui-btn-active ui-state-persist">首页</a></li>

　　

更多导航示例：

1、内容中的导航栏（如何在 data-role="content" 中添加导航栏。）

<body>

<div data-role="page" id="pageone">

<div data-role="header">

<h1>欢迎来到我的主页</h1>

</div>

<div data-role="content">

<div data-role="navbar">

<ul>

<li><a href="#" data-icon="plus">更多</a></li>

<li><a href="#" data-icon="minus">更少</a></li>

<li><a href="#" data-icon="delete">删除</a></li>

<li><a href="#" data-icon="check">喜爱</a></li>

<li><a href="#" data-icon="info">信息</a></li>

</ul>

</div>

<p>该例演示内容中的导航栏。</p>

</div>

<div data-role="footer">

<h1>我的页脚</h1>

</div>

</div>

</body>

　　

2、页脚中的导航栏（如何在页脚中添加导航栏。）

<div data-role="page" id="pageone">

<div data-role="header">

<h1>欢迎来到我的主页</h1>

</div>

<div data-role="content">

<p>该例演示页脚中的导航栏。</p>

</div>

<div data-role="footer">

<div data-role="navbar">

<ul>

<li><a href="#" data-icon="plus">更多</a></li>

<li><a href="#" data-icon="minus">更少</a></li>

<li><a href="#" data-icon="delete">删除</a></li>

<li><a href="#" data-icon="check">喜爱</a></li>

<li><a href="#" data-icon="info">信息</a></li>

</ul>

</div>

</div>

</div>

　　

3、在导航栏中定位图标（如何在页脚内部的导航栏中放置图标。）

<div data-role="page" id="pageone">

<div data-role="header">

<h1>欢迎来到我的主页</h1>

</div>

<div data-role="content">

<p>该例演示页脚中的导航栏中的图标定位。</p>

<p>data-iconpos="left" 将把图标定位到按钮的左侧。</p>

</div>

<div data-role="footer">

<div data-role="navbar" data-iconpos="left">

<ul>

<li><a href="#" data-icon="plus">更多</a></li>

<li><a href="#" data-icon="minus">更少</a></li>

<li><a href="#" data-icon="delete">删除</a></li>

<li><a href="#" data-icon="check">喜爱</a></li>

<li><a href="#" data-icon="info">信息</a></li>

</ul>

</div>

</div>

</div>

　　

5、五个以上的按钮（演示在导航栏中的十个按钮。）

<div data-role="page" id="pageone">

<div data-role="header">

<h1>欢迎来到我的首页</h1>

</div>

<div data-role="content">

<div data-role="navbar">

<ul>

<li><a href="#" data-icon="plus">更多</a></li>

<li><a href="#" data-icon="minus">更少</a></li>

<li><a href="#" data-icon="delete">删除</a></li>

<li><a href="#" data-icon="check">喜爱</a></li>

<li><a href="#" data-icon="info">信息</a></li>

<li><a href="#" data-icon="forward">向前</a></li>

<li><a href="#" data-icon="back">向后</a></li>

<li><a href="#" data-icon="star">星形</a></li>

<li><a href="#" data-icon="gear">选项</a></li>

<li><a href="#" data-icon="search">搜索</a></li>

</ul>

</div>

<p>该例演示当导航栏包含超过五个按钮时的情况。</p>

</div>

<div data-role="footer">

<h1>My Footer</h1>

</div>

</div>

　　

jQuery Mobile 导航栏的更多相关文章

  1. JQuery Mobile - 导航栏选中状态代码

    class="ui-btn-active" 参考: https://wizardforcel.gitbooks.io/w3school-jqmobile/content/8.htm ...

  2. jQuery实现导航栏

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. jquery实现导航栏跟随窗口滚动

    最近在制作一个模版的时候用到的一个jquery插件,当网站导航滚动到当前可见页面顶部时,固定在顶部并随窗口滚动,有很多的网站前台模版有有类似的效果. smohan.fixednav.js /* * 随 ...

  4. jquery 实现导航栏滑动效果

    精简的代码实现导航栏滑动效果,实现详解: 1.滑块位置:通过父节点position=fixed,子节点position=absolute方式,实现子节点浮动: 2.导航栏居中:通过left=0px,r ...

  5. 简单的jquery左侧导航栏和页面选中

    这里是要实现导航的左侧并选中的,此功能需引用jquery 左侧导航: <div class="box"> <ul class="menu"&g ...

  6. 简单的jquery左侧导航栏和页面选中效果

    这里是要实现导航的左侧并选中的,此功能需引用jquery 效果: 左侧导航 <div class="box"> <ul class="menu" ...

  7. jquery实现导航栏头部点击变换颜色

    实现效果如下: 话不多说直接上代码: <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  8. jquery实现导航栏鼠标点击后实行背景高亮，点击离开恢复（超级简单！！！！），jquery导航栏

    1.header部分要引入Jquery <asp:Content ID="HeaderContent" runat="server" ContentPla ...

  9. jquery实现导航栏效果

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...

随机推荐

  1. ACM知识点

    基础算法 高精 模拟 分治 贪心 排序 DFS 迭代加深搜索 BFS 双向BFS 动态规划 DAG上DP 树上DP 线性DP 图算法 最短路 FLYD DJATL BF 最大流 Dinic ISAP ...

  2. linux中的进程和线程

    应用程序:可以被操作系统执行的一组指令和参数的集合,是静态的,并存储在磁盘空间中: 进程:在操作系统中在运行程序后,处于运行状态的程序,是应用程序的一个执行过程,同时也是操作系统分配内存,cpu等系统 ...

  3. LVS+keepalived负载均衡实战

    1 首先安装虚拟机 安装系统 这里 配置两台虚拟机 1:192.168.137.102   2:192.168.137.103 分别安装tomcat 默认80端口,同时都是开启状态 配置192.168 ...

  4. leetcode 198

    198. House Robber You are a professional robber planning to rob houses along a street. Each house ha ...

  5. OpenLayers Map理解

    1,视口坐标的原点在左上角,水平向右为x轴正向,垂直向下为y 轴正向:2,地图坐标原点为初始图层的中心点,水平向右为x轴正向,垂直向上为y轴正向:3,视口中心点永远与地图中心点重合,不一定与瓦片中心点 ...

  6. win10环境下ue4使用游戏手柄输入

    忙里偷闲,趁着源码编译需要好久的时间,把这篇博客补上,来说说怎么在win10环境中,ue4使用游戏手柄输入,也就是gamepad输入. 1.我用的手柄是rapoo v10 这款手柄,连接无线USB之后 ...

  7. C学习笔记

    1.struct struct 是一种复合数据类型,其构成元素可以是一些复合数据类型,如array,struct,union,缺省情况下,编译器为结构体的每个成员按其自然对齐(默认对齐,按照结构体成员 ...

  8. Docker学习过程中遇到的问题及解决方法

    1.重新安装Docker后,运行不起来 [root@zyt-test-14-53 ~]# docker infoCannot connect to the Docker daemon. Is the ...

  9. linux 下 TeXmacs 作 Mathematica 10 的前端

    TeXmacs可以作很多种数学软件的前端,比如maxima,octave,R等.甚至还可以作mathematica的前端.TeXmacs的mathematica 插件比较老,默认条件下无法运行math ...

  10. HEX文件格式和其校验算法

    这次我将在原来的基础上(http://www.cnblogs.com/libra13179/p/5787084.html)继续讲解HEX文件的格式 打开app_valid_setting_apply. ...