语言: 英文中文

动态导航栏

Dynamic Navbar is supported only in iOS Theme

iOS7的好评特性之一是动态导航栏。当页面过渡时,导航栏元素会滑动渐变。

  • 它只对穿透类型的布局有效

  • 它应该在视图初始化时通过传递dynamicNavbar: true参数来启用

动态导航栏布局

动态导航栏和一般的导航栏是一样的,区别只在于,你可以对导航栏的组成部分(左、中、右)加入额外的类,来说明使用哪个过渡特效。

  • 默认情况下(如果没有额外的类),每个导航栏部分都具有"渐变"过渡特效

  • 如果你向任何一个导航栏部分添加"sliding"类,它会具有"滑动"特效

  • 为了美观起见,在不同的页面之间,你应当保持同一个过渡类型

默认(渐变)过渡

<!-- Navbar on index page -->
<div class="navbar">
    <div class="navbar-inner">
        <div class="left">
            <a href="#" class="link">Home Left</a>
        </div>
        <div class="center">Home</div>
        <div class="right">
            <a href="#" class="link">Home Right</a>
        </div>
    </div>
</div>
 
<!-- Navbar on about page -->
<div class="navbar">
    <div class="navbar-inner">
        <div class="left">
            <a href="#" class="link">About Left</a>
        </div>
        <div class="center">About</div>
        <div class="right">
            <a href="#" class="link">About Right</a>
        </div>
    </div>
</div>

滑动过渡

滑动过渡应该明智使用,因为它们反映了应用的导航链。

<!-- Navbar on index page -->
<div class="navbar">
    <div class="navbar-inner">
        <!-- Left part doesn't related to other pages, let's fade it out -->
        <div class="left">
            <a href="#" class="link">Home Left</a>
        </div>
 
        <!-- Center and Right parts reflect page title and page links, let's slide them -->
        <div class="center sliding">Home</div>
        <div class="right sliding">
            <a href="about.html" class="link">About</a>
        </div>
    </div>
</div>
 
<!-- Navbar on about page -->
<div class="navbar">
    <div class="navbar-inner">
        <!-- Now, Left and Center parts reflect page title and page links, let's slide them -->
        <div class="left sliding">
            <a href="#" class="link back">Home</a>
        </div>
        <div class="center sliding">About</div>
 
        <!-- Right part doesn't related to other pages -->
        <div class="right">
            <a href="#" class="link icon-only">
                <i class="icon icon-bars"></i>
            </a>
        </div>
    </div>
</div>

返回链接图标动画化

如果你使用了默认的返回链接(图标+“返回”),你可以使用额外的动画,以使这些链接看起来更像iOS 7外观。为了做到这一点,你需要在App初始化时添加animateNavBackIcon: true参数,然后把含有“back”类和图标的链接放到导航栏的左部。布局方面没有变化,例子如下:

Demos

Usual Sliding

With animateNavBackIcon

Dynamic Navbar Events

Dynamic navbar has the following events:

Event Target Description
navbarBeforeInit Navbar Inner element <div class="navbar-inner"> Event will be triggered when Framework7 just inserts new navbar inner to DOM
navbarInit Navbar Inner element <div class="navbar-inner"> Event will be triggered after Framework7 initialize navbar
navbarReinit Navbar Inner element <div class="navbar-inner"> This event will be triggered when cached navbar inner becomes visible. It is only applicaple for Inline Pages (DOM cached pages)
navbarBeforeRemove Navbar Inner element <div class="navbar-inner"> Event will be triggered right before navbar inner will be removed from DOM. This event could be very useful if you need to detach some events / destroy some plugins to free memory

Each event data containes useful information with navbar elements and Page Data of related page. For example

$$(document).on('navbarInit', function (e) {
  var navbar = e.detail.navbar;
  var page = e.detail.page
});

Now, in the example above we have initialized Navbar elements in navbar variable and related Page Data in page variable. Lets look on properties of navbar object:

Navbar Properties
navbar.navbarContainer Link to parent Navbar HTMLElement
navbar.navbarInnerContainer Link to target Navbar Inner HTMLElement