Navigation

    Monaca & Onsen UI
    • Register
    • Login
    • Search
    • Tags
    • Users
    • Blog
    • Playground
    1. Home
    2. dma123
    D
    • Flag Profile
    • Profile
    • Following
    • Followers
    • Blocks
    • Topics
    • Posts
    • Best
    • Groups
    Save
    Saving

    dma123

    @dma123

    0
    Reputation
    1
    Posts
    71
    Profile views
    0
    Followers
    0
    Following
    Joined Last Online

    dma123 Follow

    Posts made by dma123

    • Multiple files - Tutorial - not work

      Hello Friends

      I´m new in framework. I have started the tutorial on this page (https://onsen.io/v2/guide/tutorial.html#multiple-files).
      My goal is navigate between many files. If I can do it so I will adapt my App. But I need navigate between more than one page. This part of this tutorial explain how can I do it. I follow the instructions but this does not work.

      According to the tutorial:
      This brings up an important point: Onsen UI pages can be defined either as templates using the template element, or in their own file. When we call ons-navigator.resetToPage with home.html as the argument, the navigator looks in the current file for templates with id=“home.html”, and then looks for files called home.html. This is why nothing broke when we moved the home page out of a template and into its own file.

      My files
      First html file.******************************
      <!DOCTYPE html>
      <html lang=“en”>
      <head>
      <meta charset=“utf-8” />
      <meta name=“apple-mobile-web-app-capable” content=“yes” />
      <meta name=“mobile-web-app-capable” content=“yes” />
      <meta http-equiv=“Content-Security-Policy” content=“default-src * data:; style-src * ‘unsafe-inline’; script-src * ‘unsafe-inline’ ‘unsafe-eval’”>
      <link rel=“shortcut icon” href=“favicon.ico” type=“image/x-icon” />
      <link href=‘https://fonts.googleapis.com/css?family=Roboto:400,300italic,300,400italic,500,700,700italic,500italic’ rel=‘stylesheet’ type=‘text/css’>
      <title>Onsen UI Forum Help by Munsterlander</title>

      <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css" type="text/css" media="all" />
      <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.css">
      <script src="https://unpkg.com/onsenui"></script>
      

      <script>
      const login = () => {
      const username = document.querySelector(’#username’);
      const password = document.querySelector(’#password’);
      if (true) {
      // call the navigator to move to the new page
      const navigator = document.querySelector(’#navigator’);
      navigator.resetToPage(‘home.html’);
      } else {
      ons.notification.alert(‘Wrong username/password combination’);
      }
      }
      </script>
      </head>
      <body>
      <ons-navigator id=“navigator”>
      <ons-page>
      <div style=“text-align: center; margin-top: 200px”>
      <p>
      <ons-input id=“username” placeholder=“Username” modifier=“underbar”></ons-input>
      </p>

                  <p>
                      <ons-input id="password"
                                 placeholder="Password"
                                 type="password"
                                 modifier="underbar">
                      </ons-input>
                  </p>
      
                  <p>
                      <ons-button onclick="login()">Sign in</ons-button>
                  </p>
              </div>
      
          </ons-page>
      </ons-navigator>
      

      </body>
      </html>

      Second html file.******************************

      <!DOCTYPE html>
      <html lang=“en”>
      <head>
      <meta charset=“utf-8” />
      <meta name=“apple-mobile-web-app-capable” content=“yes” />
      <meta name=“mobile-web-app-capable” content=“yes” />
      <meta http-equiv=“Content-Security-Policy” content=“default-src * data:; style-src * ‘unsafe-inline’; script-src * ‘unsafe-inline’ ‘unsafe-eval’”>
      <link rel=“shortcut icon” href=“favicon.ico” type=“image/x-icon” />
      <link href=‘https://fonts.googleapis.com/css?family=Roboto:400,300italic,300,400italic,500,700,700italic,500italic’ rel=‘stylesheet’ type=‘text/css’>
      <title>Onsen UI Forum Help by Munsterlander</title>

      <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css" type="text/css" media="all" />
      <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.css">
      <script src="https://unpkg.com/onsenui"></script>
      

      </head>
      <body>
      <ons-page id=“home”>
      <ons-toolbar id=“home-toolbar”>
      <div class=“center”>Home</div>
      </ons-toolbar>

          Hello!
      </ons-page>
      

      </body>
      </html>

      posted in Onsen UI
      D
      dma123