草庐IT

jQuery Mobile 导航栏

runoob 2023-04-07 原文

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>

尝试一下 »

默认情况下,按钮的宽度与它的内容一样。使用一个无序列表来平均地划分按钮的宽度:1 个按钮占 100% 宽度,2 个按钮则各占 50% 的宽度,3 个按钮则每个占 33.3% 的宽度,依此类推。然而,如果您在导航栏中指定了超过 5 个按钮,将会拆成多行(查看"更多实例")。

导航按钮图标

我们可以使用 data-icon 属性为导航按钮添加图标:

实例

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

尝试一下 »

data-icon 属性与在图标章节中的 CSS 类使用相同的值。CSS 类使用方法 class="ui-icon-value", data-icon 属性使用方法 data-icon="value"。

属性值 描述 图标
data-icon="home" 首页
data-icon="arrow-r" 右边箭头
data-icon="search" 搜索

如需查看所有 jQuery Mobile 按钮图标的完整参考手册,请访问我们的 jQuery Mobile 图标参考手册


定位图标

就像 "ui-btn-icon-position" 类一样 (图标章节有详细说明), 你可以设置图标显示的位置: top(头部), right(右侧), bottom(底部) 或 left(左侧)。

图标位置在导航栏容器上设置,使用 data-iconpos 属性来指定位置:

属性值 描述 实例
data-iconpos="top" 图标顶部对齐 尝试一下
data-iconpos="right" 图标右侧对齐 尝试一下
data-iconpos="bottom" 图标底部对齐 尝试一下
data-iconpos="left" 图标左侧对齐 尝试一下
 默认情况, 导航按钮的图标位于文本之上 (data-iconpos="top")。

激活按钮

当导航栏中的某个链接被点击,它将获得被选中(按下)的外观。

如果想在不点击链接时获得这种外观,请使用 class="ui-btn-active":

实例

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

尝试一下 »

对于多个页面,您可能想要每个按钮的选中外观代表当前用户所在的页面。要做到这一点,请添加 "ui-state-persist" 和 "ui-btn-active" 到链接的 class:

实例

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

尝试一下 »


更多实例

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

尾部中的导航栏
如何在尾部内添加导航栏。

导航栏中的定位图标
如何在尾部内的导航栏中定位图标。

超过 5 个按钮
导航栏中 10 个按钮的演示。

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

  1. ruby-on-rails - 在 Rails 3 中向 Active Admin 添加全局导航项的最佳方法是什么 - 2

    我正在尝试将全局导航菜单项添加到我的ActiveAdmin安装(在“仪表板”导航按钮旁边)。ActiveAdmin说这在他们的网站上是可能的,但他们没有任何关于如何实现它的文档。有谁知道如何做到这一点?编辑:抱歉,我应该更清楚。我想添加一个指向由任意文本/链接对组成的全局导航的链接。IE,如果我想添加一个链接到http://google.com在事件管理员的全局导航中使用文本“Google”,我将如何实现? 最佳答案 ActiveAdmin.register_page"Google"domenu:priority=>1,:label

  2. 千耘农机导航的“星地一体”能力究竟是什么? - 2

    伴随农业机械化和智能化的发展,越来越多的人开始使用农机自动驾驶系统助力耕作,千耘农机导航的“星地一体”能力可有效解决信号受限的问题,实现作业提效。究竟什么是“星地一体”,又是如何解决智能化农机作业的痛点的?下面为大家揭秘。农机效率通常受限于通信网络目前虽然我国通讯网络的人口覆盖率达到99%,但地面移动通讯网络覆盖率仍小于国土面积的40%,而很多农田所在区域恰是山区、戈壁滩等偏远地区。两省交界地也会出现通信信号不稳定的状况;而国内大部分农机自动驾驶系统非常依赖通信网络,当通信网络弱的时候会出现系统掉线的现象,必须得携带小基站才能正常使用,极为繁琐。Q:什么是千耘农机导航“星地一体”能力?A:是星

  3. ruby-on-rails - 如何在不创建空模型的情况下创建 rails_admin 导航标签? - 2

    在railsadmin中,您可以像这样为模型及其子项定义导航标签:#inrails_admin.rbconfig.modelOrderdonavigation_label'Ordersrelated'endconfig.modelOrderProductsdoparentOrderend有没有办法在不创建模型的情况下向导航菜单添加标签(即仅用于分组)? 最佳答案 根据wiki,您可以像这样将静态链接附加到导航:RailsAdmin.configdo|config|config.navigation_static_links={'Go

  4. ruby - 为什么 Ruby 使用自己的安全导航运算符语法? - 2

    Ruby2.3.0引入了安全导航语法,它通过引入一个新的运算符来简化链式方法调用的nil处理,该运算符仅在先前语句的值不是nil。这是一个已经存在于C#、Groovy和Swift中的特性。例如inGroovy,语法是foo?.bar这基本上意味着结果值是foo.bar除非foo是null,在这种情况下返回值也是null因此不会抛出异常。还有C#(称为空条件运算符)和Swift(称为可选链接表达式)使用此表示法。所以语法在其他语言中似乎是相当标准的。现在,为什么在Ruby中语法是foo&.bar代替? 最佳答案 此答案基于thedis

  5. ruby - 如何在 Middleman 中生成导航? - 2

    我只是习惯了Middleman和一般的ruby。生成具有事件状态的导航的最佳方式是什么? 最佳答案 在当前版本的MM(2.x,尽管3.0接近)中,您可以通过向config.rb添加以下内容并在您的导航文件中进行一些调整来实现。这是aworkingversion以防我遗漏一些关键位:首先创建一个辅助函数:helpersdodefnav_active(page)@page_id==page?{:class=>"Active"}:{}endend然后,在navbarincludefile(在本例中它是一个haml文件)您可以使用nav_a

  6. ruby - 是否可以从功能文件导航到 VSCode 中的步骤定义 - 2

    我主要将RubyMine用于Cucumber/Ruby,现在,我开始使用VSCode,使用它可以运行和调试测试用例。我找不到从功能导航到步骤定义的方法。我尝试搜索扩展程序,但cucumber-step-mapper没有帮助。是否有任何配置可以实现从功能到步骤定义的导航? 最佳答案 您可以安装Cucumber(Gherkin)FullSupport来自VSCodeMarketplace的扩展:安装完成后,重新加载VSCode。现在为了使其适用于Ruby,您需要:按Ctrl+,打开用户设置向下滚动到CucumberAutoComplet

  7. ruby-on-rails - 如何在 Ruby on Rails 中实现特定于部分的导航? - 2

    我有一个Ruby/Rails应用程序,它有两个或三个主要“部分”。当用户访问该部分时,我希望显示一些子导航。所有三个部分都使用相同的布局,因此我无法将导航“硬编码”到布局中。我可以想到几种不同的方法来做到这一点。我想为了帮助人们投票,我会把它们作为答案。还有其他想法吗?或者你投票给什么? 最佳答案 假设每个部分都有自己的Controller,您可以使用partials轻松地做到这一点。假设您有三个部分,分别称为Posts、Users和Admin,每个部分都有自己的Controller:PostsController、UsersCon

  8. ruby - pry 导航工作意外 - 2

    我把binding.pry放在我的脚本中,但是现在当它停在断点处时,是向我显示该信息。出乎我的意料,如何解决?帧数:0/11From:/Users/me/.rbenv/versions/2.1.2/lib/ruby/gems/2.1.0/gems/pry-nav-0.2.4/lib/pry-nav/tracer.rb@line21PryNav::Tracer#run:12:defrun(&block)13:#Forperformance,disableanytracerswhileintheconsole.14:#Unfortunatelydoesn'tworkin1.9.2becau

  9. ruby - 在 Ruby 中将 [] 与安全导航运算符一起使用 - 2

    我目前有一段代码如下:ifmatch=request.path.match(/\A\/(?(?!admin|assets)\w+)/)match[:slug]end有没有办法使用安全导航运算符(在2.3.0中引入)来避免这种if条件? 最佳答案 只需使用普通(无糖)形式即可。request.path.match(/\A\/(?(?!admin|assets)\w+)/)&.[](:slug) 关于ruby-在Ruby中将[]与安全导航运算符一起使用,我们在StackOverflow上找到

  10. ruby-on-rails - Ruby on Rails 中的面包屑导航 - 2

    我对我的面包屑解决方案有点不自信。名称和链接在每个Controller操作中定义:Home>">>">这样我可以使用:@l1_link=user_path()问题:因为我没那么聪明-这种系统会在未来的某个地方导致灾难吗?这(严重)效率低下吗? 最佳答案 面包屑菜单是大多数Rails应用程序中经常出现的模式。为了解决这个问题,我创建并发布了一个名为breadcrumbs_on_rails的插件。.您在Controller中定义面包屑classMyControlleradd_breadcrumb"home",root_pathadd_b

随机推荐