一:导航栏的布局
导航栏按“左 中 右”用三个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>