2015-12-18 82 views
3

我正在monaca.mobi中創建一個移動應用程序,我正在使用溫泉用戶界面。溫泉ui - 後退按鈕與滑動菜單不起作用

該應用程序有很多頁面,每個頁面鏈接到另一個頁面,所以我需要在除主頁以外的所有頁面中都備份按鈕。

我有我的index.html這樣的:

<!DOCTYPE HTML> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 
    <meta http-equiv="Content-Security-Policy" content="default-src *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> 
    <script src="components/loader.js"></script> 
    <link rel="stylesheet" href="components/loader.css"> 
    <link rel="stylesheet" href="css/style.css"> 
    <link rel="stylesheet" href="components/monaca-onsenui/css/onsen-css-components-default.css"> 
    <script> 
     ons.bootstrap(); 
    </script> 
</head> 
<body> 
    <ons-sliding-menu var="app.slidingMenu" menu-page="menu.html" main-page="home.html" side="left" type="overlay" max-slide-distance="200px"> 
    </ons-sliding-menu> 
</body> 
</html> 

在我home.html的頁面這樣的:

<ons-page style="background: url('images/background.jpg'); background-position:center; background-repeat:no-repeat; background-size:cover;"> 
     <div style="position:fixed;" class="navigation-bar"> 
    <div class="navigation-bar__left"> 
    <ons-toolbar-button ng-click="app.slidingMenu.toggleMenu()"><ons-icon icon="bars"></ons-icon></ons-toolbar-button> 
    </div> 

    <div class="navigation-bar__center"> 
    <img class="gmlogo" src="images/logo.png"/> 
    </div> 

    <div class="navigation-bar__right"> 
    <span onclick="app.slidingMenu.setMainPage('push.html', {closeMenu: true})" class="toolbar-button--quiet navigation-bar__line-height"> <i class="fa fa-envelope-o fa-lg" style="color: #4E81BA"></i></span> 
    </div> 
</div> 

<div class="outer"> 
<div class="middle"> 
<div class="inner"> 
<h2 class="center gmwhite unbold">Επιλογή Κατηγορίας</h2> 
<button onclick="app.slidingMenu.setMainPage('pages/price/brand.html', {closeMenu: true})" class="gmhomebutton gmhomebutton--outline">Car Price List</button> 
<button onclick="app.slidingMenu.setMainPage('pages/valuation/message.html', {closeMenu: true})" class="gmhomebutton gmhomebutton--outline">Car Valuation Price</button> 

</div> 
</div> 
</div> 
</ons-page> 

並在接下來的頁面brand.html這樣的:

<ons-page style="background: url('images/bg2.jpg'); background-position:center; background-repeat:no-repeat; background-size:cover;"> 
     <div class="navigation-bar"> 
    <div class="navigation-bar__left"> 
    <div class="left" style="line-height: 144px"> 
     <ons-back-button ng-click="(home.html)">Back</ons-back-button> 
     </div> 
    <ons-toolbar-button ng-click="app.slidingMenu.toggleMenu()"><ons-icon icon="bars"></ons-icon></ons-toolbar-button> 
    </div> 

    <div class="navigation-bar__center"> 
    <img class="gmlogo" src="images/logo.png"/> 
    </div> 

    <div class="navigation-bar__right"> 
    <span onclick="app.slidingMenu.setMainPage('push.html', {closeMenu: true})" class="toolbar-button--quiet navigation-bar__line-height"> <i class="fa fa-envelope-o fa-lg" style="color: #4E81BA"></i></span> 
    </div> 
</div> 


<h4 class="center gmblack unbold">Μάρκες Αυτοκινήτων</h4> 
<ul style="height: 70%;" class="gmlist"> 
    <li onclick="app.slidingMenu.setMainPage('pages/price/model.html', {closeMenu: true})" class="gmlist__item list__item--chevron"> 
    <img class="gmlistbrand" src="images/demo/abarth.png"/> Abarth 
    </li> 
    <li class="gmlist__item list__item--chevron"> 
    <img class="gmlistbrand" src="images/demo/abarth.png"/> Acura 
    </li> 
    <li class="gmlist__item list__item--chevron"> 
    <img class="gmlistbrand" src="images/demo/abarth.png"/> Aixam 
    </li> 
    <li class="gmlist__item list__item--chevron"> 
    <img class="gmlistbrand" src="images/demo/abarth.png"/> Alfa Romeo 
    </li> 
    <li class="gmlist__item list__item--chevron"> 
    <img class="gmlistbrand" src="images/demo/abarth.png"/> Alpina 
    </li> 
    <li class="gmlist__item list__item--chevron"> 
    <img class="gmlistbrand" src="images/demo/abarth.png"/> Ariel 
    </li> 
    <li class="gmlist__item list__item--chevron"> 
    <img class="gmlistbrand" src="images/demo/abarth.png"/> Asia Motors 
    </li> 
    <li class="gmlist__item list__item--chevron"> 
    <img class="gmlistbrand" src="images/demo/abarth.png"/> Aston Martin 
    </li> 
    <li class="gmlist__item list__item--chevron"> 
    <img class="gmlistbrand" src="images/demo/abarth.png"/> Audi 
    </li> 
    <li class="gmlist__item list__item--chevron"> 
    <img class="gmlistbrand" src="images/demo/abarth.png"/> Austin Healey 
    </li> 
</ul> 

</ons-page> 

我已經嘗試了幾乎所有的東西,但是我不能在頁面上添加回按鈕,可以請別人幫忙嗎?

感謝

+1

請先閱讀#1:https://stackoverflow.com/tour 你不應該創建新的答案,只是回答別人。改用評論:) –

回答

0

從那裏,你想從返回的頁面的工具欄只需添加ons-back-button元素。 ons-back-button不帶任何參數,它只是返回到前一頁。例如:

<ons-toolbar> 
    <div class="left" style="line-height: 44px"> 
    <ons-back-button>Back</ons-back-button> 
    </div> 
    <div class="center">Title</div> 
    <div class="right" style="line-height: 44px"> 
    Right 
    </div> 
</ons-toolbar> 
0

如果您需要在頁面加載插件,後退按鈕行爲ONS-滑動菜單添加附件,導航指令中的index.html和使用menu.html的pushPage()方法和menu.closeMenu()

的index.html:

<body> 
    <ons-navigator animation="slide" var="myVar"> 
    <ons-page> 
     <ons-sliding-menu menu-page="menu.html" main-page="home.html" side="left" var="menu" type="reveal" max-slide-distance="260px" swipable="true" swipe-target-width="50"> 
     </ons-sliding-menu> 
    </ons-page> 
    </ons-navigator> 
</body> 

menu.html:

<ons-list class="menu-list"> 
    <ons-list-item class="menu-item" ng-click="myVar.pushPage('about.html'); menu.closeMenu()"> 
    <ons-icon icon="fa-info-circle" fixed-width="true"></ons-icon> About 
    </ons-list-item> 
</ons-list> 

home.html的:

<ons-page> 
    <ons-toolbar modifier="opacity"> 
     <div class="left"> 
     <ons-toolbar-button ng-click="menu.toggle()"> 
      <ons-icon icon="ion-navicon-round" fixed-width="false"></ons-icon> 
     </ons-toolbar-button> 
     </div> 
     <div class="center">Title 1</div> 
    </ons-toolbar> 
    <div class="app-page"> 
     <ons-list> 
     <ons-list-item modifier="chevron" class="list-item-container" ng-click="myVar.pushPage('mypage.html');"> 
      <ons-row>...