Framework7 导航栏和工具栏

最新推荐文章于 2021-05-26 17:16:07 发布

@航空母舰

最新推荐文章于 2021-05-26 17:16:07 发布

阅读量859

点赞数

分类专栏： javascript 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/hudeyong926/article/details/99540683

版权

javascript 专栏收录该内容

70 篇文章 1 订阅

订阅专栏

在向应用添加导航栏和工具栏之前，我们需要决定使用哪种布局。

Framework7在这方面很自由，有3种不同类型的导航栏/工具栏布局，它们对应着在页面/视图中的不同位置。静态布局（静态布局可能是最少使用的布局），固定布局，穿透布局

静态

.view   
  .pages    
    .page   
      .page-content   
        .navbar   
        // other page content
        .toolbar

固定

.view
  .pages.navbar-fixed.navbar-through
    .page
      .navbar
      .page-content
      .toolbar

穿透

view
  .navbar
  .pages.navbar-through.toolbar-through
    .page
      .page-content
  .toolbar

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

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

左部用来放置返回链接、图标以及单独的文字链接。
中部用来显示页面标题和标签链接（即按钮控制）。
右部和左部一样

含有图标和文本的链接

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

var app = new Framework7();
var $$ = Dom7;

$$('.hide-toolbar').on('click', function () {
    app.toolbar.hide('.toolbar');
});
$$('.show-toolbar').on('click', function () {
    app.toolbar.show('.toolbar');
});

二级导航栏

<div class="navbar">
    <div class="navbar-inner sliding">
        <div class="left">
            <a href="#" class="link back">
                <i class="icon icon-back"></i>
                <span class="ios-only">Back</span>
            </a>
        </div>
        <div class="title">Subnavbar</div>
        <div class="subnavbar">
            <div class="subnavbar-inner">
                <div class="segmented segmented-raised">
                    <button class="button">Link 1</button>
                    <button class="button">Link 2</button>
                    <button class="button">Link 3</button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="navbar-inner">
    <div class="left"></div>
    <div class="title sliding">navbar搜索</div>
    <div class="right">
        <a class="link icon-only searchbar-enable" data-searchbar=".searchbar-components">
            <i class="icon f7-icons ios-only">search_strong</i>
        </a>
    </div>
    <form data-search-container=".components-list" data-search-in="a" class="searchbar searchbar-expandable searchbar-components searchbar-init">
        <div class="searchbar-inner">
            <div class="searchbar-input-wrap">
                <input type="search" placeholder="Search components"/>
                <i class="searchbar-icon"></i>
                <span class="input-clear-button"></span>
            </div>
            <span class="searchbar-disable-button">Cancel</span>
        </div>
    </form>
</div>

自动隐藏导航栏

在通过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>

导航结合Popover实现点击下拉效果

<body>
...
    <div class="navbar">
        <div class="navbar-inner">
            <!-- In data-popover attribute we specify CSS selector of popover we need to open -->
            <div class="left"></div>
            <div class="center">Popover</div>
            <div class="right"><a href="#" data-popover=".popover-links" class="link open-popover">Links</a></div>
        </div>
    </div>

    <!-- By default popover has 320px width, let's make it a bit narrow -->
    <style>
    .popover {
        width: 200px;
        }
    </style>

    <!-- Links popover -->
    <div class="popover popover-links">
        <div class="popover-angle"></div>
        <div class="popover-inner">
            <div class="list-block">
                <ul>
                    <li><a href="#" class="list-button item-link">Link 1</a></li>
                    <li><a href="#" class="list-button item-link">Link 2</a></li>
                    <li><a href="#" class="list-button item-link">Link 3</a></li>
                    <li><a href="#" class="list-button item-link">Link 4</a></li>
                </ul>
            </div>
        </div>
    </div>
</body>

工具栏是位于屏幕底端的固定（在固定和穿透布局类型中）区域，它包含导航元素

<div class="toolbar tabbar tabbar-labels">
    <div class="toolbar-inner">
        <a href="#tab1" class="tab-link active">
            <i class="icon demo-icon-1"></i>
            <span class="tabbar-label">Label 1</span>
        </a>
        <a href="#tab2" class="tab-link">
            <i class="icon demo-icon-2">
                <span class="badge bg-red">5</span>
            </i>
            <span class="tabbar-label">Label 2</span>
        </a>
        <a href="#tab3" class="tab-link">
            <i class="icon demo-icon-3"></i>
            <span class="tabbar-label">Label 3</span>
        </a>
        <a href="#tab4" class="tab-link">
            <i class="icon demo-icon-4"></i>
            <span class="tabbar-label">Label 4</span>
        </a>
    </div>
</div>

注意，带有文案的标签栏在不同设备上会有更大的高度而不是44px：在iPhone上是50px，在iPad上是55px
因为这些高度的改变，你需要在固定和穿透布局中使用 "tabbar-labels-fixed" 或者 "tabbar-labels-through"。

自动隐藏工具栏/导航栏

Framework7 允许你在ajax加载的页面自动隐藏工具栏/导航栏。只有在穿透布局的时候才可以使用。

你唯一需要做的就是在需要加载的页面上加一个类 "no-tabbar"(<div class="page no-tabbar">):

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

滚动时自动隐藏导航栏和工具栏，你可以通过添加额外的 <div class="page-content"> 类来实现：

hide-bars-on-scroll - 页面滚动时自动隐藏工具栏和导航栏
hide-navbar-on-scroll - 页面滚动时自动隐藏导航栏
hide-toolbar-on-scroll - 页面滚动时，自动隐藏工具栏
hide-tabbar-on-scroll - 页面滚动时，自动隐藏带图标的工具栏（tabbar)

scrollTop() 方法设置匹配元素的滚动条的垂直位置

$$(".page-content").scrollTop(1300,800);//800ms后滚动
$$(".page-content").scrollTop(1300);//立即滚动

@航空母舰

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录