前端框架OnsenUI学习之介绍

​<ons-page>标签在【OnsenUI页面结构】中提到过，每个<ons-page>表示一个页面，类似于Android中的Activity，应用中呈现给我们的内容都是写在<ons-page>里的。

每个页面可以包含头部导航栏、中间内容区、底部工具栏三个部分，在OnsenUI中折三部分没有严格定义，可以有也可以没有。

1、表示工具栏的Toolbar

Toolbar有两个分别是<ons-toolbar>和<ons-bottom-toolbar>。两个标签的属性除了位置不同，其他完全相同。我们就以<ons-toolbar>为例，每个工具栏约定为左中右三部分，当然这三部分也不是不是必须的。常见的会在左边添加一个返回按钮<ons-back-button>，默认的点击事件会返回上一层page。还有<ons-toolbar-button>按钮。

下面是官方例子：

 

 2、导航栏<ons-tabbar>http://onsen.io/reference/ons-tabbar.html#method-setActiveTab

<ons-tabbar>的默认位置在底部，我们可以使用<ons-tabbar posotion='top'>设置显示在顶部。

官方实例：

 <ons-tabbar>也提供了一系列属性和方法，用来动态加载新page页面、设置动画效果、处理跳转事件、获取当前活动页面等等。具体见http://onsen.io/reference/ons-tabbar.html#method-setActiveTab