首页 » Framework7 » Framework7 导航栏
网站地图

导航栏

导航栏是一个固定区域 （在固定和穿透布局类型中） 。它位于屏幕顶部，包含页面标题和导航元素。

导航栏包含3个部分：左、中、右。每个部分都可以包含任意的HTML内容，但推荐按照如下方式使用：

  • 左部 用来放置返回链接、图标以及单独的文字链接。

  • 中部 用来显示页面标题和标签链接（即按钮控制）。

  • 右部 和左部一样。

导航栏布局

导航栏布局相当简单，根据字面意思即可理解：

<div class="navbar">
    <div class="navbar-inner">
        <div class="left">Left</div>
        <div class="center">Center</div>
        <div class="right">Right</div>
    </div>
</div>

 实例预览

注意，导航栏的中心元素具有最低的宽度优先级，当屏幕不能放下全部3个元素时，中部会被截断。

所以，如果你在中部使用普通文本，在截断的时候会在末尾加上省略号（...）。但如果你使用定制的元素，那就要格外注意了。

含有链接的导航栏

要想在左/右部添加链接，只需要添加<a> 标签，以及额外的 link 类:

<div class="navbar">
    <div class="navbar-inner">
        <div class="left">
            <a href="#" class="link">Left Link</a>
        </div>
        <div class="center">Center</div>
        <div class="right">
            <a href="#" class="link">Right Link</a>
        </div>
    </div>
</div>

 实例预览

额外的 link 类并不是必须的，但是推荐使用，因为它添加了需要的链接尺寸，以及透明度特效。

多个链接

没什么特别的，只要在需要的部分添加 <a class="link"：

<div class="navbar">
    <div class="navbar-inner">
        <div class="left">
            <a href="#" class="link">Left 1</a>
            <a href="#" class="link">Left 2</a>
        </div>
        <div class="center">Center</div>
        <div class="right">
            <a href="#" class="link">Right 1</a>
        </div>
    </div>
</div>

 实例预览

含有图标和文本的链接

这里有一些变化，我们需要把链接的文本用<span>元素包起来。它用来保持图标和文本之间的正确间距，并且在动画中也有用处：

<div class="navbar">
    <div class="navbar-inner">
        <div class="left">
            <a href="#" class="link">
                <i class="icon icon-back"></i>
                <span>Back</span>
            </a>
        </div>
        <div class="center">Center</div>
        <div class="right">
            <a href="#" class="link">
                <i class="icon icon-bars"></i>
                <span>Menu</span>
            </a>
        </div>
    </div>
</div>

 实例预览

只有图标的链接

如果需要含有图标而不含有文本的链接，我们需要对链接添加额外的"icon-only" 类。含有这个类的链接会拥有44x44px的固定大小，以便于我们的手指触到它：

<div class="navbar">
    <div class="navbar-inner">
        <div class="left">
            <a href="#" class="link icon-only">
                <i class="icon icon-back"></i>
            </a>
        </div>
        <div class="center">Center</div>
        <div class="right">
            <a href="#" class="link icon-only">
                <i class="icon icon-bars"></i>
            </a>
        </div>
    </div>
</div>

  实例预览

相关的视图方法

如果我们已经初始化视图，我们可以使用导航栏的如下方法：

myApp.hideNavbar(navbar)Hide specified toolbar.
navbar - HTMLElement or string (with CSS Selector) of required navbar. Required.
myApp.showNavbar(navbar)Show specified toolbar.
navbar - HTMLElement or string (with CSS Selector) of required navbar. Required.
view.hideNavbar()隐藏该视图中的导航栏
view.showNavbar()显示该视图中的导航栏
myApp.sizeNavbars(viewContainer)

viewContainer - CSS Selector string or HTMLEelement. URL of page to load

调用这个方法会重新计算指定的View的导航栏的位置，比如:myApp.sizeNavbars('.view-main')

如果你动态地改变了导航栏元素，你可能需要调用这个方法

Used only by iOS theme

下面是示例:

var myApp = new Framework7();
 
var $ = Framework7.$;
 
var mainView = myApp.addView('.view-main');
 
$('.hide-navbar').on('click', function () {
    mainView.hideNavbar();
});
 
$('.show-navbar').on('click', function () {
    mainView.showNavbar();
});

实例预览

自动隐藏导航栏

在通过Ajax载入的页面上，当你不需要导航栏时，Framework7允许你自动隐藏导航栏。它只在你使用穿透类型的布局时才有用。

为了实现这一点，你要做的是添加"no-navbar"类到载入的页面中(<div class="page no-navbar">)，然后在那里放置一个空的导航栏：

<!-- Empty Navbar -->
<div class="navbar">
  <div class="navbar-inner">
  </div>
</div>          
 
<!-- Page has additional "no-navbar" class -->
<div data-page="about" class="page no-navbar">
  <div class="page-content">
    <div class="content-block">
      <p><a href="#" class="back button">Go Back</a></p>
      ...
    </div>
  </div>
</div>

实例预览

Dynamic Navbar Events

If you use Dynamic Navbar in your app then it will also have useful special events.