About age updates using onsen-ui

under the code in the onsen-ui template (page2.html)
I added , but when I press the button, the different buttons that were written before will collapse
Why?

<ons-toolbar>
    <div class="left">
        <ons-toolbar-buttonng-click="app.slidingMenu.toggleMenu()"<ons-iconicon="bars">/ons-icon><ons-toolbar-button>
    </div>
    <div class="center">Page2</div>
</ons-toolbar>

<div style="text-align:center">
    <h1>Page2</h1>
    <ons-buttoning-click="app.slidingMenu.toggleMenu()">ToggleMenu</ons-button>
</div>
<a href="page2.html"><input type="button" width="30px" height="15px">/a>

Correction

<ons-page>
<ons-toolbar>
    <div class="left">
        <ons-toolbar-buttonng-click="app.slidingMenu.toggleMenu()"<ons-iconicon="bars">/ons-icon><ons-toolbar-button>
    </div>
    <div class="center">Page2</div>
</ons-toolbar>

<div style="text-align:center">
    <h1>Page2</h1>
    <ons-buttoning-click="app.slidingMenu.toggleMenu()">ToggleMenu</ons-button>
</div>
<a href="page2.html"><input type="button" width="30px" height="15px">/a>

</ons-page>

Yes
Individual additions are in the second line from the bottom

monaca onsen-ui

2022-09-29 22:16

1 Answers

If you transition to <a href="page2.html">, the entire page will be loaded with page2.html and will be out of control of index.html.

There is no description of what you want to do in the question, so this is an aside from now on, but
If you want to transition from Page 2 to the screen, you can use pushPage with Page 2 under ons-navigator.

ons.bootstrap();

<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.0-beta/build/css/onsenui.css"rel="stylesheet"/>
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.0-beta/build/css/onsen-css-components.css"rel="stylesheet"/>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.0-beta/build/js/angular/angular.min.js"></script>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.0-beta/build/js/onsenui.min.js"></script>

<ons-sliding-menu
  main-page="page1.html"
  menu-page="menu.html"       
  side="left"
  max-slide-distance="250px"
  var="menu">
</ons-sliding-menu>

<ons-template id="page1.html">
  <ons-page>
    <ons-toolbar>
      <div class="left">
        <ons-toolbar-buttonng-click="menu.toggleMenu()">ons-iconicon="ion-navicon" style="font-size:32px;width:1em;">/ons-icon></ons-toolbart;
      </div>
      <div class="center">Page1</div>
    </ons-toolbar>

    <p style="text-align:center;color:#999;padding-top:100px;">Page1Contents</p>
  </ons-page>
</ons-template>

<ons-template id="page2.html">
  <ons-navigator var="navi">
    <ons-page>
      <ons-toolbar>
        <div class="left">
          <ons-toolbar-button onclick="menu.toggleMenu()"<ons-iconicon="ion-navicon" style="font-size:32px;width:1em;">/ons-icon></ons-toolbar-button;
        </div>
        <div class="center">Page2</div>
      </ons-toolbar>

      <p style="text-align:center;color:#999;padding-top:100px;">Page2Contents</p>
      <div style="text-align:center">a href="#"ng-click="navi.pushPage('page3.html')">Page3</a></div>;;
    </ons-page>
  </ons-navigator>
</ons-template>

<ons-template id="page3.html">
    <ons-page>
      <ons-toolbar>
        <div class="left">
          <ons-back-button>Back</ons-back-button>
        </div>
        <div class="center">Page3</div>
      </ons-toolbar>

      <p style="text-align:center;color:#999;padding-top:100px;">Page3 Contents</p>
  </ons-page>
</ons-template>

<ons-template id="menu.html">
  <ons-list>
    <ons-list-item modulator="chevron" onclick="menu.setMainPage('page1.html', {closeMenu:true})">
      page1.html
    </ons-list-item>
    <ons-list-item modulator="chevron" onclick="menu.setMainPage('page2.html', {closeMenu:true})">
      page2.html
    </ons-list-item>
  </ons-list>
</ons-template>

2022-09-29 22:16

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656