ASP源码.NET源码PHP源码JSP源码JAVA源码DELPHI源码PB源码VC源码VB源码Android源码
当前位置:首页 >> 网页制作 >> web前端 >> Framework7 导航栏和工具栏

Framework7 导航栏和工具栏(1/2)

来源:网络整理     时间:2018-08-11     关键词:

本篇文章主要介绍了" Framework7 导航栏和工具栏",主要涉及到方面的内容,对于web前端感兴趣的同学可以参考一下: 在向应用添加导航栏和工具栏之前,我们需要决定使用哪种布局。Framework7在这方面很自由,有3种不同类型的导航栏/工具栏布局,它们对应着在页面/视图中的不同...

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

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>
    <div>
        <div>
            <a href="#">
                <i></i>
                <span>返回</span>
            </a>
        </div>
        <div>Center</div>
        <div>
            <a href="#">
                <i></i>
            </a>
        </div>
    </div>
</div>

自动隐藏导航栏

在通过Ajax载入的页面上,当你不需要导航栏时,Framework7允许你自动隐藏导航栏。它只在你使用穿透类型的布局时才有用。为了实现这一点,你要做的是添加"no-navbar"类到载入的页面中(<div>),然后在那里放置一个空的导航栏:

<!-- Empty Navbar -->
<div>
    <div>
    </div>
</div>

<!-- Page has additional "no-navbar" class -->
<div data-page="about">
    <div>
        <div>
            <p><a href="#">Go Back</a></p>
            ...
        </div>
    </div>
</div>

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

相关图片

相关文章