在向应用添加导航栏和工具栏之前，我们需要决定使用哪种布局。
Framework7 在这方面很自由，有3种不同类型的 导航栏/工具栏 布局，它们对应着在 页面/视图 中的不同位置。
与静态布局相比，固定布局的不同之处在于:
注意，如果你想要对单视图中的每个页面使用固定布局，可以直接在父页面( <div class="pages">)上添加“ navbar-fixed ”和“ toolbar-fixed ”类，而不是对每个单页面分别添加。
这是最有趣，最被广泛使用的布局 —— 在不同页面间切换时，导航栏和工具栏保持不变。通过这种布局，可以实现酷炫的 动态导航 （不要忘记在 视图初始化 的时候启用它)
与静态和固定布局相比，穿透布局的不同之处在于：
无导航栏/工具栏
如果你不需要导航栏或工具栏，你大可不必包含它们，并且不用在 page/pages/view 中添加相应的类（“ "navbar-fixed”，“navbar-through”，“toolbar-fixed”，“toolbar-through” ）
2.导航栏
导航栏是一个固定区域 （在 固定 和 穿透 布局类型中） 。它位于屏幕顶部， 包含页面标题和导航元素 。
导航栏包含3个部分： 左、中、右 。每个部分都可以包含任意的 HTML 内容，但推荐按照如下方式使用：
3.导航栏布局
注意，导航栏的中心元素具有最低的宽度优先级，当屏幕不能放下全部3个元素时，中部会被 截断 。
4.含有链接的导航栏
额外的 link 类并不是必须的，但是推荐使用，因为它添加了需要的 链接尺寸 ，以及 透明度 特效。
5.导航栏的相关方法
myApp.hideNavbar(navbar)
myApp.showNavbar(navbar)
view.hideNavbar() 隐藏该视图中的导航栏
view.showNavbar() 显示该视图中的导航栏
myApp.sizeNavbars(viewContainer) 调用这个方法会重新计算指定的View的导航栏的位置，比如: myApp.sizeNavbars('.view-main') iOS only
6.自动隐藏导航栏
在通过 Ajax 载入的页面上，当你不需要导航栏时， Framework7 允许你自动隐藏导航栏。它只在你使用 穿透类型 的布局时才有用。
为了实现这一点，你要做的是添加" no-navbar "类到载入的页面中( <div class="page no-navbar">)，然后在那里放置一个空的导航栏：
7.工具栏
工具栏是位于屏幕底端的固定（在固定和穿透布局类型中）区域，它包含 导航元素 。
工具栏不包含任何其他部分，内部只含有 普通文本 。
默认情况下，所有的工具栏元素（ 链接 ）沿着工具栏等距分布 - 它们之间的距离相等。
导航栏的相关视图方法：
myApp.hideToolbar(toolbar)
myApp.showToolbar(toolbar)
view.hideToolbar()
view.showToolbar()
Bottom Toolbar:
( android only )
8.带标签的工具栏
默认情况下，所有的 工具栏元素 （ 链接 ）沿着工具栏等距分布 - 它们之间的距离相等。
9.向图标添加角标
如果你需要向标签栏图标添加 徽章 ，只需在图标内部放入 <span class="badge">：
10.带有文案的标签栏
如果你需要使用带有文案的标签栏，需要在标签栏上再加一个 " tabbar-labels " 类，然后把 <span class="tabbar-label">放到链接里：
带有文案的标签栏在不同设备上会有更大的高度而不是 44px ：在 iPhone 上是 50px ，在 iPad 上是 55px
因为这些高度的改变，你需要在 固定和穿透布局 中使用 "tabbar-labels-fixed" 或者 "tabbar-labels-through" 。
11.相关的App方法
myApp.hideToolbar(toolbar)
myApp.showToolbar(toolbar)
12.自动隐藏工具栏/导航栏
Framework7 允许你在 ajax 加载的页面自动隐藏工具栏/导航栏。只有在穿透布局的时候才可以使用。
你唯一需要做的就是在需要加载的页面上加一个类 " no-tabbar " ( <div class="page no-tabbar">)
13.状态栏：
状态栏遮罩：
iOS 7+ 允许创建全屏应用，但是当状态栏覆盖你的应用时，会有 navbar 缩短 20px 的问题。
Framework7 可以自动检测你的应用是否是全屏模式，如果是的话，自动添加 " with-statusbar-overlay " 类到 <html>
（如果不是的话，移除这个类）。通过 " with-statusbar-overlay " 类（应用处于全屏模式的时候）， <html>
在顶部拥有额外的 padding ，把整个应用的内容下移状态栏的高度（ 20px ）。
为了配合上面的功能，我们需要在 <body>
内添加 <div class="statusbar-overlay">
：
这个 " statusbar-overlay " div 总是固定在屏幕顶端，默认隐藏。当应用处于全屏模式，并且 html
含有" with-statusbar-overlay "类时，它可见。
为了使我们的状态栏背景变成粉色，我们只需要添加一个 CSS 规则：
.statusbar-overlay { background: pink}
这种逻辑允许对状态栏背景自由地控制，我们可以动态改变它的背景。
比如，我们有暗色的带有覆盖效果的左侧边栏。当侧边栏打开时，我们可以让状态栏背景更暗：
注意：
14.侧边栏
让我们看看如何添加侧栏。我们的 APP 可能包含两种侧栏,一个在左边,另一个在右边。我们应该在 body 的开始处添加侧栏的 html body :
1、首先打开Deamweaver8，新建一网页文件，接着输入以下导航菜单的内容。
2、此时对应效果如图。
3、接下来准备相关的导航按钮图片（可以事先利用PS制作好）。
4、然后将以下CSS代码加入到<head></head>之间。
5、网页此时的效果如图，就完成了。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）