导航栏

导航栏布局

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

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

 实例预览

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

含有链接的导航栏

要想在左/右部添加链接，只需要添加<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>

实例预览