Onsen UI V2 JS Splitter Template : How can I use different folders for different pages

vanessa

I was using Onsen UI V2 JS Splitter template but I want to call different menu items from different folders. in template Index.html has all pages and items in it but I want to split these among different html files. I want separate html files for all three Home, Settings and About and to use them in Index.
Thanks in advance,

window.fn = {};
window.fn.open = function() {
  var menu = document.getElementById('menu');
  menu.open();
};
window.fn.load = function(page) {
  var content = document.getElementById('content');
  var menu = document.getElementById('menu');
  content
    .load(page)
    .then(menu.close.bind(menu));
};

</script>
</head>
<body>
<ons-splitter>
<ons-splitter-side id=“menu” side=“left” width=“200px” collapse swipeable>
<ons-page>
<ons-list>
<ons-list-item onclick=“fn.load(‘home.html’)” tappable>
Home
</ons-list-item>
<ons-list-item onclick=“fn.load(‘settings.html’)” tappable>
Settings
</ons-list-item>
<ons-list-item onclick=“fn.load(‘about.html’)” tappable>
About
</ons-list-item>
</ons-list>
</ons-page>
</ons-splitter-side>
<ons-splitter-content id=“content” page=“home.html”></ons-splitter-content>
</ons-splitter>

<ons-template id=“home.html”>
<ons-page>
<ons-toolbar>
<div class=“left”>
<ons-toolbar-button onclick=“fn.open()”>
<ons-icon icon=“ion-navicon, material:md-menu”></ons-icon>
</ons-toolbar-button>
</div>
<div class=“center”>
Main
</div>
</ons-toolbar>
<p style=“text-align: center; opacity: 0.6; padding-top: 20px;”>
1
</p>
</ons-page>
</ons-template>

<ons-template id=“settings.html”>
<ons-page>
<ons-toolbar>
<div class=“left”>
<ons-toolbar-button onclick=“fn.open()”>
<ons-icon icon=“ion-navicon, material:md-menu”></ons-icon>
</ons-toolbar-button>
</div>
<div class=“center”>
Settings
</div>
</ons-toolbar>
<p style=“text-align: center; opacity: 0.6; padding-top: 20px;”>
2
</p>
</ons-page>
</ons-template>

<ons-template id=“about.html”>
<ons-page>
<ons-toolbar>
<div class=“left”>
<ons-toolbar-button onclick=“fn.open()”>
<ons-icon icon=“ion-navicon, material:md-menu”></ons-icon>
</ons-toolbar-button>
</div>
<div class=“center”>
About
</div>
</ons-toolbar>
<p style=“text-align: center; opacity: 0.6; padding-top: 20px;”>
3
</p>
</ons-page>
</ons-template>

</body>
</html>

emccorson

In order to define pages in separate files, you just need to put the contents of the page in another file.

For example, to move the home page to a different file:

Create a file called home.html.
Copy everything inside the <ons-template id="home.html"></ons-template> tags (i.e. all of <ons-page>...</ons-page>)
Paste it inside home.html.
Delete the tag <ons-template id="home.html">...</ons-template>.

The load function of ons-splitter-side can take either a template id or a filename as its argument so everything should work as before.

By the way, ons-template is deprecated so you should now use template instead of ons-template.

vanessa

@emccorson Thanks for the response.

I have done as you mentioned but still it is not working.

Created a file called home.html (in same directory as index.html).
Copied everything inside the <ons-template id=“home.html”></ons-template> tags (i.e. all of <ons-page>…</ons-page>)
Pasted it inside body of home.html.
Deleted the tag <ons-template id=“home.html”>…</ons-template> from index.html.

One more things, what if we want to give html file path, how it will be given and where?

Thanks in advance,
Vane

emccorson

It sounds like you did all the steps correctly, but just to be sure I’ll post my index.html and home.html files so you can verify they are exactly the same. To get these files all I did was monaca create, selected the splitter template, then did the four steps I wrote in my previous reply.

./www/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 * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
  <script src="components/loader.js"></script>
  <script src="lib/onsenui/js/onsenui.min.js"></script>

  <link rel="stylesheet" href="components/loader.css">
  <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
  <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
  <link rel="stylesheet" href="css/style.css">

  <script>
    ons.ready(function() {
      console.log("Onsen UI is ready!");
    });

    window.fn = {};
    window.fn.open = function() {
      var menu = document.getElementById('menu');
      menu.open();
    };
    window.fn.load = function(page) {
      var content = document.getElementById('content');
      var menu = document.getElementById('menu');
      content
        .load(page)
        .then(menu.close.bind(menu));
    };

  </script>
</head>
<body>
  <ons-splitter>
    <ons-splitter-side id="menu" side="left" width="220px" collapse swipeable>
      <ons-page>
        <ons-list>
          <ons-list-item onclick="fn.load('home.html')" tappable>
            Home
          </ons-list-item>
          <ons-list-item onclick="fn.load('settings.html')" tappable>
            Settings
          </ons-list-item>
          <ons-list-item onclick="fn.load('about.html')" tappable>
            About
          </ons-list-item>
        </ons-list>
      </ons-page>
    </ons-splitter-side>
    <ons-splitter-content id="content" page="home.html"></ons-splitter-content>
  </ons-splitter>

  <ons-template id="settings.html">
  <ons-page>
    <ons-toolbar>
      <div class="left">
        <ons-toolbar-button onclick="fn.open()">
          <ons-icon icon="ion-navicon, material:md-menu"></ons-icon>
        </ons-toolbar-button>
      </div>
      <div class="center">
        Settings
      </div>
    </ons-toolbar>
  </ons-page>
  </ons-template>

  <ons-template id="about.html">
  <ons-page>
    <ons-toolbar>
      <div class="left">
        <ons-toolbar-button onclick="fn.open()">
          <ons-icon icon="ion-navicon, material:md-menu"></ons-icon>
        </ons-toolbar-button>
      </div>
      <div class="center">
        About
      </div>
    </ons-toolbar>
  </ons-page>
  </ons-template>

</body>
</html>

./www/home.html:

<ons-page>
  <ons-toolbar>
    <div class="left">
      <ons-toolbar-button onclick="fn.open()">
        <ons-icon icon="ion-navicon, material:md-menu"></ons-icon>
      </ons-toolbar-button>
    </div>
    <div class="center">
      Main
    </div>
  </ons-toolbar>
  <p style="text-align: center; opacity: 0.6; padding-top: 20px;">
    Swipe right to open the menu!
  </p>
</ons-page>

I’m not sure what you mean about the HTML file path. The id that Onsen UI uses to load pages is the filename (or the template id if you define them in the same file).

For example, if your page is defined in a file called home.html, then the load function takes home.html as an argument.

vanessa

@emccorson
Thanks for the response, it worked fine now.

I was talking about html file path, for example for now we have home.html in same folder as index.html. what if i copy home.html into another folder and call it from there into index?

Thanks,
Vanne

emccorson

If you have home.html in a directory called some-directory, you would use some-directory/home.html to load the page.

vanessa

@emccorson thanks for responses.
cheers :)

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

Onsen UI V2 JS Splitter Template : How can I use different folders for different pages