导航栏

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

导航栏包含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>    

相关的视图方法

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

下面是示例:

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.