`

移动端安卓和IOS开发框架Framework7教程-导航栏&工具栏布局

Framework7 
阅读更多

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

Framework7在这方面很自由，有3种不同类型的导航栏/工具栏布局，它们对应着在页面/视图中的不同位置。

静态布局

静态布局可能是最少使用的布局。在这种情况下，导航栏和工具栏只是可以滚动的页面内容的一部分，每个页面都有它自己的导航栏和工具栏：

  1. <body>
  2.   ...
  3.   <div class="views">
  4.     <div class="view view-main">
  5.       <div class="pages">
  6.         <div data-page="index" class="page">
  7.           <div class="page-content">
  8.             
  9.             <!-- Top Navbar-->
  10.             <div class="navbar">
  11.               <div class="navbar-inner">
  12.                 <div class="center">Awesome App</div>
  13.               </div>
  14.             </div>
  15.             <!-- /End of Top Navbar-->
  16.             
  17.             <p>Other content goes here</p>
  18.             ...
  19.             
  20.             <!-- Bottom Toolbar-->
  21.             <div class="toolbar">
  22.               <div class="toolbar-inner">
  23.                 Hello
  24.               </div>
  25.             </div>          
  26.             <!-- /End of Bottom Toolbar-->
  27.             
  28.           </div>
  29.         </div>
  30.       </div>
  31.     </div>
  32.   </div>
  33.   ...
  34. </body>
复制

  实例预览

固定布局

在固定布局中，也是每个页面都有它自己的导航栏和工具栏，但是它们在屏幕上始终可见，不会随着页面内容滚动：

  1. <body>
  2.   ...
  3.   <div class="views">
  4.     <div class="view view-main">
  5.       <div class="pages">
  6.         <!-- Now we need additional "navbar-fixed" and "toolbar-fixed" classes on Page -->
  7.         <div data-page="index" class="page navbar-fixed toolbar-fixed">
  8.             
  9.           <!-- Top Navbar-->
  10.           <div class="navbar">
  11.             <div class="navbar-inner">
  12.               <div class="center">Awesome App</div>
  13.             </div>
  14.           </div>
  15.           <!-- /End of Top Navbar-->
  16.  
  17.           <div class="page-content">
  18.             <p>Other content goes here</p>
  19.             ...
  20.           </div>
  21.             
  22.           <!-- Bottom Toolbar-->
  23.           <div class="toolbar">
  24.             <div class="toolbar-inner">
  25.               Hello
  26.             </div>
  27.           </div>          
  28.           <!-- /End of Bottom Toolbar-->
  29.             
  30.         </div>
  31.       </div>
  32.     </div>
  33.   </div>
  34.   ...
  35. </body>
复制

实例预览

正如你所见，与静态布局相比，固定布局的不同之处在于：

  • 导航栏和工具栏是Page的子元素(<div class="page">)

  • 每个页面拥有额外的“navbar-fixed”类（对于固定导航栏）和“toolbar-fixed”类（对于固定工具栏）

注意，如果你想要对单视图中的每个页面使用固定布局，可以直接在父页面(<div class="pages">)上添加“navbar-fixed”和“toolbar-fixed”类，而不是对每个单页面分别添加。

穿透布局

This type of layout is only supported by iOS theme

这是最有趣，最被广泛使用的布局 —— 在不同页面间切换时，导航栏和工具栏保持不变。通过这种布局，可以实现酷炫的动态导航（不要忘记在视图初始化的时候启用它）。视图初始化)

  1. <body>
  2.   ...
  3.   <div class="views">
  4.     <div class="view view-main">
  5.             
  6.       <!-- Top Navbar-->
  7.       <div class="navbar">
  8.         <div class="navbar-inner">
  9.           <div class="center">Awesome App</div>
  10.         </div>
  11.       </div>
  12.       <!-- /End of Top Navbar-->          
  13.             
  14.       <!-- Now we need additional "navbar-through" and "toolbar-through" classes on Pages -->
  15.       <div class="pages navbar-through toolbar-through">
  16.         <div data-page="index" class="page">
  17.           <div class="page-content">
  18.             <p>Other content goes here</p>
  19.             ...
  20.           </div>
  21.         </div>
  22.       </div>
  23.             
  24.       <!-- Bottom Toolbar-->
  25.       <div class="toolbar">
  26.         <div class="toolbar-inner">
  27.           Hello
  28.         </div>
  29.       </div>          
  30.       <!-- /End of Bottom Toolbar-->
  31.             
  32.     </div>
  33.   </div>
  34.   ...
  35. </body>
复制

实例预览

正如你所见，与静态和固定布局相比，穿透布局的不同之处在于：

  • 导航栏和工具栏是视图的子元素(<div class="view">)

  • 具有穿透布局的导航栏和工具栏的视图拥有额外的“navbar-through”类（对于穿透类型的导航栏）和"toolbar-through"类（对于穿透类型的工具栏）。

混合布局

对于不同的视图，你可以使用不同的布局，比如在一个视图中使用固定布局，在另一个中使用穿透布局。其实，你也可以在单视图中混合使用这些布局。例如，你可以使用穿透的导航栏和固定的工具栏：

  1. <body>
  2.   ...
  3.   <div class="views">
  4.     <div class="view view-main">
  5.             
  6.       <!-- Top Navbar-->
  7.       <div class="navbar">
  8.         <div class="navbar-inner">
  9.           <div class="center">Awesome App</div>
  10.         </div>
  11.       </div>
  12.       <!-- /End of Top Navbar-->          
  13.             
  14.       <!-- Now we need additional "navbar-through" and "toolbar-fixed" classes on Pages -->
  15.       <div class="pages navbar-through fixed-through">
  16.         <div data-page="index" class="page">
  17.           <div class="page-content">
  18.             <p>Other content goes here</p>
  19.             ...
  20.           </div>
  21.  
  22.           <!-- Bottom Toolbar-->
  23.           <div class="toolbar">
  24.             <div class="toolbar-inner">
  25.               Hello
  26.             </div>
  27.           </div>          
  28.           <!-- /End of Bottom Toolbar-->
  29.  
  30.         </div>
  31.       </div>
  32.     </div>
  33.   </div>
  34.   ...
  35. </body>
复制

实例预览

无导航栏/工具栏

当然，如果你不需要导航栏或工具栏，你大可不必包含它们，并且不用在page/pages/view中添加相应的类（“"navbar-fixed”，“navbar-through”，“toolbar-fixed”，“toolbar-through”）

速记表

正如你所见，这些布局都很容易理解，不同之处在于父元素上额外添加的类，以及不同的嵌套层级。下面是速记表

静态

  1. .view   
  2.   .pages    
  3.     .page   
  4.       .page-content   
  5.         .navbar   
  6.         // other page content
  7.         .toolbar
复制

固定

  1. .view
  2.   .pages.navbar-fixed.navbar-through
  3.     .page
  4.       .navbar
  5.       .page-content
  6.       .toolbar
复制

穿透

  1. .view
  2.   .navbar
  3.   .pages.navbar-through.toolbar-through
  4.     .page
  5.       .page-content
  6.   .toolbar
复制

 

1
顶
1
踩
分享到：
| 移动端安卓和IOS开发框架Framework7教程-I ...
评论
发表评论

文章已被作者锁定，不允许评论。

相关推荐

    Framework7用于构建iOS和Android应用全功能移动HTML框架

    2. **组件丰富**：内置了大量的UI组件，如导航栏、侧滑菜单、下拉刷新、滑动切换页面等，这些组件都模仿了iOS和Android原生的交互效果。 3. **触摸优化**：专门针对触摸设备进行了优化，提供了流畅的滑动和手势支持...

    自用iOS开发框架

    "自用iOS开发框架"是一个个人定制的框架，主要服务于iOS应用的导航栏（Nav）与底部标签栏（TabBar）的集成和管理。这个框架的目的是简化开发流程，提高代码复用性，并通过预封装的方法来快速实现这两个常用UI组件的...

    framework7- for IOS

    Framework7 是一款专为iOS移动应用开发设计的前端框架，它提供了一套全面的工具集，使得开发者可以轻松创建出类似原生iOS界面的应用程序，同时保持高度的灵活性和定制性。这款框架以其简洁易用的API、丰富的组件库...

    framework7 demo

    这款框架的设计灵感来源于iOS和Android的原生界面，使得开发者能够创建出与原生应用体验相似的Web应用。它提供了丰富的组件和API接口，适用于开发跨平台的Hybrid App或Web App。 在"framework7 demo"中，你将找到一...

    ios直播打包好的真机IJKMediaFramework.framework

    FFmpeg是一个强大的跨平台的音频和视频处理工具集，而IJKMediaFramework则为iOS和Android提供了更方便的接口，简化了开发过程。 首先，IJKMediaFramework的核心功能包括： 1. **视频播放**：支持HTTP、RTSP、RTMP...

    Epsilon Framework仿IOS手机网站模板-手机 手机网站 jquerymobile mobileFramework

    Epsilon Framework提供的模板包含了一系列预设的页面布局和元素样式，如头部、底部栏、导航栏、列表视图等，这些都遵循了iOS的设计原则，使得开发者可以快速搭建出具有iOS风格的页面。 5. **文件结构** 根据...

    HiApp一个简单而有趣基于Framework7开发的混合应用

    `Framework7`是一个轻量级的移动应用框架，设计灵感来源于iOS和Android的原生UI。它提供了丰富的组件和模板，可以帮助开发者快速创建出具有高度交互性和响应式的用户界面。`HiApp`项目正是利用了`Framework7`的这一...

    AureliaFramework7一个轻量级的移动应用平台

    Framework7则是一款流行的移动应用UI框架，它提供了一套完整的iOS和Android风格的组件，包括导航栏、侧滑菜单、表单元素等，使得开发者可以快速构建出原生感观的应用界面。当Aurelia与Framework7结合时，开发者可以...

    ios-MJFrameworkDemo.zip

    其次，TabBarView是iOS应用底部导航栏的重要组成部分，它通常用于切换不同的主界面。MJFrameworkDemo提供的自定义TabBarView可能包含了丰富的样式设置，如文字颜色、选中状态下的图标和背景色等，这使得开发者可以...

    JavaScript_用于构建iOS Android应用程序的全功能HTML框架.zip

    2. **组件丰富**：提供了一系列的UI组件，如导航栏、侧滑菜单、表单元素、滑块等，这些都与iOS和Android的原生控件相仿。 3. **页面路由**：通过内置的路由系统，管理页面间的跳转和历史记录，使得应用的导航逻辑...

    WPF超级完美模仿苹果工具栏

    7. **响应式设计**：考虑到不同屏幕尺寸，需要确保工具栏在各种分辨率下都能良好展示。WPF的布局系统支持自动调整大小和位置，通过适当设置约束条件可以实现这一点。 8. **布局容器**：如`Grid`、`StackPanel`或`...

    IOS应用源码之【应用】电子书阅读器 - iOS PDF Reader(Xcode 4.2 and iOS 5).rar

    阅读器可能包含多个界面元素，如导航栏、工具栏、书签、目录等。这些通常使用UIKit框架中的UIViewController、UILabel、UIButton等控件构建。 5. **性能优化**：为了提供流畅的用户体验，源码可能包含了内存管理和...

    Cordova 3.x 基础（10） -- UI框架Ionic Framework

    6. **打包与部署**：说明如何通过Cordova命令将应用打包成原生的iOS或Android应用，并进行真机测试和发布。 7. **调试与优化**：分享了一些调试技巧，以及如何优化应用性能，使其在不同设备上运行流畅。 虽然没有...

    meteor-framework7:危险框架的流星包装7

    流星框架7（Meteor Framework7）是将流行的前端框架Framework7与Meteor集成的工具，旨在为开发者提供更高效、更流畅的全栈JavaScript开发体验。它允许你在 Meteor 应用程序中无缝地利用 Framework7 的强大功能，为...

    appframework开发文档

    AppFramework，又称为 jqMobi，是一个轻量级的JavaScript框架，专为移动应用开发设计。它集成了jQuery的最佳实践，提供了丰富的UI组件和强大的功能，使得开发者能够快速构建高性能、跨平台的移动应用。本开发文档将...

    ios7版 30天精通iPhone手机编程

    iOS7的开发基础是学习iPhone编程的起点，涵盖了各种模板、基本框架和控件的使用。以下是对各个知识点的详细解释： 1. **项目程序模板**： - **Master-Detail Application**：适用于构建具有层次结构的导航应用，...

    ionic领先的HTML5移动开发框架和SDK

    混合移动应用开发结合了Web和原生应用的优点，使用Web技术开发应用主体，然后通过像Cordova这样的桥接技术将应用打包成可以在各大移动平台（如Android、iOS）上运行的原生应用。 **知识点详解：** 1. **HTML5技术*...

    iphone开发常用库UIKit_Framework

    - **定义与作用：** `UIKit` 是苹果公司为iOS应用开发提供的一套核心框架，它包含了用于构建用户界面的各种类和方法。通过这个框架，开发者可以轻松创建各种各样的用户交互组件和界面元素，比如按钮、标签、文本框等...

    appFramework7

    App Framework 7的CSS部分负责应用的视觉样式和布局。框架提供了预设的主题，可以轻松调整颜色、字体和间距，以适应不同品牌或设计需求。此外，响应式设计是其核心特点，确保应用在不同屏幕尺寸上都能良好显示。CSS...

    Weex AppFramework架构设计和独立App构建实战 宁栗.pdf

    12. **页面导航**: Weex使用URL Router实现页面间的跳转，通过组件如wxc-navbar、wxc-navpage、wxc-tabbar和wxc-tabitem来构建导航栏和底部Tab。 13. **多实例管理**: Weex的JS Framework可以管理多个实例...

Magicbox
Global site tag (gtag.js) - Google Analytics