码迷,mamicode.com
首页 > 其他好文 > 详细

Framework7学习笔记之 导航栏

时间:2018-02-20 16:21:47      阅读:163      评论:0      收藏:0      [点我收藏+]

标签:控制跳转   增加   导航   log   work   gpo   body   style   class   

 

一:导航栏的布局

    导航栏按“左 中 右”用三个div进行布局,中部宽度优先级最低,两边内容较多时会把中部用 ... 缩起来。

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

 

二:导航栏的链接

    通常,我们在导航栏的 左、右 会设置跳转,跳转的实现一般通过超链接,因此要实现导航栏控制跳转,只需在div中包含 <a>标签即可。

<div class="navbar">
    <div class="navbar-inner">
        <div class="left">
            <a href="#" class="link">左边跳转</a>
        </div>
        <div class="center">中部标题</div>
        <div class="right">
            <a href="#" class="link">右边跳转</a>
        </div>
    </div>
</div>   

 

三:多个链接

    多个链接,只需在div中包含多个<a>标签即可。

 

四:图标+文字 的链接

    只需在<a>标签中:用 <i> 子标签包含图标,用<span>子标签包含文字。

<div class="navbar">
    <div class="navbar-inner">
        <div class="left">
            <a href="#" class="link">
                <i class="icon 图标类名"></i>
                <span>文字</span>
            </a>
        </div>
        <div class="center">Center</div>
        <div class="right">
            <a href="#" class="link">
                <i class="icon 图标类名"></i>
                <span>文字</span>
            </a>
        </div>
    </div>
</div>

 

五:只含图标的链接

    需要对<a>标签添加 icon-only 类,该类为图标设定了一个固定大小区域,以便用户点击。

<div class="navbar">
    <div class="navbar-inner">
        <div class="left">
            <a href="#" class="link icon-only">
                <i class="icon 图标类名"></i>
            </a>
        </div>
        <div class="center">Center</div>
        <div class="right">
            <a href="#" class="link icon-only">
                <i class="icon 图标类名"></i>
            </a>
        </div>
    </div>
</div>    

 

六:自动隐藏导航栏

    在使用穿透布局类型时,view中的导航栏会自动穿透到页面中。

    如果跳转到的页面不需要导航栏,就需要对导航栏进行自动隐藏:在页面文件中定义空导航栏;页面元素中增加 no-navbar类。

<!-- 1:定义一个空的导航栏 -->
<div class="navbar">
  <div class="navbar-inner">
  </div>
</div>          
 
<!-- 2:在页面元素添加 no-navbar类  -->
<div data-page="about" class="page no-navbar">
  <div class="page-content">
    <div class="content-block">
      <p>页面内容...</p>
      ...
    </div>
  </div>
</div>

 

 

    

    

Framework7学习笔记之 导航栏

标签:控制跳转   增加   导航   log   work   gpo   body   style   class   

原文地址:https://www.cnblogs.com/ygj0930/p/8455322.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!