Question

我正在使用onsen ui和angular js开发应用程序。可以说我在同一页面上有3个html文件（物理）而不是ons-template。如何制作将出现在所有三个页面上的菜单标题。

Answer 1

以下是ons-navigator和ons-toolbar的示例。您可以以相同的方式添加页脚，但需要进行一些小的css调整。

ons.bootstrap()

.back-button-icon{
  vertical-align: top;
  background-color: transparent;
  height: 44px;
  line-height: 44px;
  font-size: 36px;
  margin-left: 8px;
  margin-right: 2px;
  width: 16px;
  display: inline-block;
  padding-top: 1px;
}
.back-button-text{
  vertical-align: top;
  display: inline-block;
  line-height: 44px;
  height: 44px;
}

ons-toolbar ~ ons-navigator .page__content{
  margin-top: 44px;
}

<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/css/onsen-css-components.css" rel="stylesheet"/>
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/css/onsenui.css" rel="stylesheet"/>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/js/angular/angular.min.js"></script>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/js/onsenui.min.js"></script>

<ons-toolbar>
  <div class="left">
    <div class="toolbar-button" ng-show="navi.getPages().length > 1" ng-click="navi.popPage()">
      <i class="ion-ios-arrow-back back-button-icon"></i><span class="back-button-text">Back</span>
    </div>
  </div>
  <div class="center">Title</div>
  <div class="right"></div>
</ons-toolbar>

<ons-navigator var="navi" page="page1.html"></ons-navigator>

<script type="text/ng-template" id="page1.html">
  <ons-page>
    <div style="text-align:center; margin-top:10px">
    Content of Page1
      <ons-button onclick="navi.pushPage('page2.html')">PushPage</ons-button>
    </div>
  </ons-page>
</script>

<script type="text/ng-template" id="page2.html">
  <ons-page>
    <div style="text-align:center; margin-top:10px">
    Content of Page2
      <ons-button onclick="navi.pushPage('page3.html')">PushPage</ons-button>
    </div>
  </ons-page>
</script>

<script type="text/ng-template" id="page3.html">
  <ons-page>
    <div style="text-align:center; margin-top:10px">
    Content of Page3
    </div>
  </ons-page>
</script>

ONSEN UI：我可以为所有html文件使用相同的标题或菜单和页脚吗？如果是的话？

1 个答案: