Navigation

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

    CodeyMonk

    @CodeyMonk

    0
    Reputation
    2
    Posts
    273
    Profile views
    0
    Followers
    0
    Following
    Joined Last Online

    CodeyMonk Follow

    Posts made by CodeyMonk

    • RE: Call page from another page

      @munsterlander But it does not make sense since you were trying to load the html page from different files. The update you made was still put two templates in a same file?

      posted in Onsen UI
      C
      CodeyMonk
    • Push <templates> from different html page.

      So, I have two HTML page or I might have more.

      index1.html && index2.html
      0_1555415365011_Screen Shot 2019-04-16 at 9.47.18 PM.png
      0_1555415371517_Screen Shot 2019-04-16 at 9.47.32 PM.png

      How do I use push functionality to go to another template which is located in another HTML?
      In this scenario, I want to go to <template id =guide.html > in index2.html from <template id =“Library.html”> in index1 as soon as you hit the <ons-card>. Also, will I be able to go back if I click the <ons-back-button>? Are they doable?

      index1.html

      <!DOCTYPE html>
      <html>
      <head>
            <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
        <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
        <script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>
      
              <ons-navigator id="appNavigator" page="Library.html" swipeable swipe-target-width="80px">
      
      </ons-navigator>
      </head>
          
      <body>
      
      
      <template id="Library.html">
        <ons-page> 
           <div style="background-color: white">
        
      <!--  -->
          <ons-card onclick="fn.pushPage({'id': 'guide.html', 'title': 'CE_sub'})" style="height: 500px;">
            
            <div id="card1"></div>
           <br>
           <div class="title" style="font-weight: 500">Go to guide.html</div>
            <div class="content" style="font-family: sans-serif; font-size: 18px; font-weight: 100;" >Can you answer my question</div>
          <br>
              
      
          </ons-card>
            </div>
          </ons-page>
          </template>
          
          <template id="guide.html">
        <ons-page> 
           <div style="background-color: white">
        
      <!--  -->
          <ons-card>
            <ons-back-button>index1.html</ons-back-button>
            <div id="card1"></div>
           <br>
           <div class="title" style="font-weight: 500">Hello world</div>
            
          <br>
              <div style="color: gray">Read more...</div>
      
          </ons-card>
            </div>
          </ons-page>
          </template>
      </body>
          
          <script>
              window.fn = {};
      
      window.fn.toggleMenu = function () {
        document.getElementById('appSplitter').right.toggle();
      };
      
      window.fn.loadView = function (index) {
        document.getElementById('appTabbar').setActiveTab(index);
        document.getElementById('sidemenu').close();
      };
      
      window.fn.loadLink = function (url) {
        window.open(url, '_blank');
      };
      
      window.fn.pushPage = function (page, anim) {
        if (anim) {
          document.getElementById('appNavigator').pushPage(page.id, { data: { title: page.title }, animation: anim });
        } else {
          document.getElementById('appNavigator').pushPage(page.id, { data: { title: page.title } });
        }
      };
          </script>
      </html> 
      
      

      it is supposed to look like this
      0_1555415285668_Screen Shot 2019-04-16 at 9.47.18 PM.png

      index2.html

      <!DOCTYPE html>
      <html>
      <head>
          
            <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
        <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
        <script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      
      </head>
      <body> 
       <template id="guide.html">
        <ons-page> 
           <div style="background-color: white">
        
      <!--  -->
          <ons-card>
            <ons-back-button>index1.html</ons-back-button>
            <div id="card1"></div>
           <br>
           <div class="title" style="font-weight: 500">Hello world</div>
            
          <br>
              <div style="color: gray">Read more...</div>
      
          </ons-card>
            </div>
          </ons-page>
          </template>
          
      
      </body>
         
      </html> 
      
      It is supposed to look like this :
      ![0_1555415325063_Screen Shot 2019-04-16 at 9.47.32 PM.png](https://i.imgur.com/pJw4FmO.png) 
      
      posted in Onsen UI
      C
      CodeyMonk