@quince said:
@FernandoFactor maybe this example will use you https://docs.monaca.io/en/sampleapp/samples/ibeacon/
@munsterlander said:
@FernandoFactor I only use vanilla JS. In this example, https://github.com/munsterlander/Onsen-Examples/tree/master/eBook-Template, I load multiple different files to the main one.
Thank you guys both samples will help me a lot, now I can study more and develop my web app, thank you again :)
Sorry for the delay,
Now I have a sample to show, as you can see this app works fine without AngularJS but everything together in one index.html file:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="lib/onsen/css/onsenui.css"/>
<link rel="stylesheet" href="lib/onsen/css/onsen-css-components.css"/>
<script src="lib/onsen/js/onsenui.min.js"></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('main.html')" tappable>
Main
</ons-list-item>
<ons-list-item onclick="fn.load('products.html')" tappable>
Products
</ons-list-item>
</ons-list>
</ons-page>
</ons-splitter-side>
<ons-splitter-content id="content" page="main.html"></ons-splitter-content>
</ons-splitter>
<ons-template id="main.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button onclick="fn.open()">
<ons-icon icon="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;">
This is the main page!
</p>
</ons-page>
</ons-template>
<ons-template id="products.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button onclick="fn.open()">
<ons-icon icon="md-menu"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">
Products
</div>
</ons-toolbar>
<p style="text-align: center; opacity: 0.6; padding-top: 20px;">
Products here...
</p>
</ons-page>
</ons-template>
<script src="app.js"></script>
</body>
</html>
app.js file:
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));
};
But I need separate files: one file for main.html and another for products.html so what should I do to override templates inside the index.html in order to include separate HTML files?
Thank you
@munsterlander Thank you for this answer
I still won’t mark my question as solved because I’m doing a sample code to show how my web app is been made and how will I include the separate HTML pages…
Hi I am new to Onsen Ui and I like this framework style a lot.
But I’m a bit confused because I need to make web apps, no Cordova or something like, just web app also I don’t want to do a single page app because I want separate HTML pages.
So even after study the docs and do a big research about this amazing framework I’m still confused if do I have to use AngularJS to do a web app with multiple HTML pages or can I do that with pure JavaScript?
Thank you