Navigation

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

    ales_stritesky

    @ales_stritesky

    0
    Reputation
    3
    Posts
    963
    Profile views
    0
    Followers
    0
    Following
    Joined Last Online

    ales_stritesky Follow

    Posts made by ales_stritesky

    • RE: Onsen 2 SPA page

      Hi munsterlander,
      there are many reasons

      • I am lazy :blush:

      • I work with Jquery library for a long time

      • I’ve done many projects with this library

      • Jquery version > 2 is much more faster than older versions (in my opinion)

      posted in Onsen UI
      ales_stritesky
    • RE: Onsen 2 SPA page

      @Fran-Diox said:

      document.querySelector(’

      Hello Fran,

      thank you for your help, I would like to load Jquery library later. Your example works, now I am trying it with JQuery syntax.

      Regards

      posted in Onsen UI
      ales_stritesky
    • Onsen 2 SPA page

      Hi, I develop using JQM and now I would like to try Onsen UI framework.
      I prefer developing using SPA, but I don’t know, how it creates using Onsen 2 beta.

      I copied this code from

      http://codepen.io/onsen/pen/yrhtv

      and paste to downloaded code from OnseUI website. If I run this code I can see

      Uncaught ReferenceError: myNavigator is not defined

      Can anybody help me with this?

      Thanks

      my code

      
      <!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 2.0 Quickstart</title>
      
          <script src="components/loader.js"></script>
          <script src="lib/onsenui/js/onsenui.js"></script>
      
          <link rel="stylesheet" href="lib/onsenui/css/onsenui.css" type="text/css" media="all" />
          <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css" type="text/css" media="all" />
      
          <style>
            .page__content {
              margin: 50px;
            }
          </style>
      </head>
      
      <body>
         <ons-navigator title="Navigator" var="myNavigator">
        <ons-page modifier="material">
          <ons-toolbar modifier="material">
            <div class="center">Onsen UI 2.0 Quickstart</div>
          </ons-toolbar>
      
          <p>This is a simple app that showcases some of the features of Onsen UI 2.0</p>
      
          <p>The following app shows some of the new Material Design components that have been added.</p>
      
          <p>Onsen UI 2.0 is, unlike the previous version, not dependant on AngularJS. This means that it can easily be integrated with other frameworks.</p>
      
          <ons-button onclick="myNavigator.pushPage('page2.html', { animation : 'slide' } )" modifier="material--flat">
            <ons-ripple color="rgba(0, 150, 136, 0.1)"></ons-ripple>
            React.js Demo
          </ons-button>
      
          <p>Onsen UI 2.0 also provides iOS-like flat design, just like Onsen UI 1.x.</p>
      
          <ons-button onclick="myNavigator.pushPage('page3.html', { animation : 'slide' } )" modifier="material--flat">
            <ons-ripple color="rgba(0, 150, 136, 0.1)"></ons-ripple>
            Flat Design Demo
          </ons-button>
        </ons-page>
      </ons-navigator>
      
        <ons-template id="page2.html">
        <ons-page modifier="material">
          <ons-toolbar>
            <div class="left">
              <ons-back-button>Back</ons-back-button>
            </div>
            <div class="center">Page 2</div>
          </ons-toolbar>
      
          <div style="text-align: center">
            <br />
            <ons-button modifier="light" modifier="light" onclick="myNavigator.pushPage('page3.html', { animation : 'slide' } )">
              Page 2
            </ons-button>
          </div>
        </ons-page>
      </ons-template>
      
      <ons-template id="page3.html">
        <ons-page modifier="material">
          <ons-toolbar>
            <div class="left">
              <ons-back-button>Back</ons-back-button>
            </div>
            <div class="center">Page 3</div>
          </ons-toolbar>
      
          <div style="text-align: center">
            <br />
            <ons-button modifier="light" modifier="light" onclick="myNavigator.pushPage('page2.html', { animation : 'slide' } )">
              Page 3
            </ons-button>
          </div>
        </ons-page>
      </ons-template>
      
      </body>
      </html>
      
      
      posted in Onsen UI
      ales_stritesky