Hi,
I write a simple example for you. The first page is index.html and second page is page2.html
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Onsen UI Demo</title>
<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>
<script src="https://unpkg.com/loadjs@latest/dist/loadjs.min.js"></script>
</head>
<body>
<ons-navigator swipeable id="myNavigator">
<ons-page id="page1">
<ons-toolbar>
<div class="center">Page 1</div>
</ons-toolbar>
<p>This is the first page.</p>
<ons-button onclick="pushPage('page2.html')">Push page</ons-button>
</ons-page>
</ons-navigator>
<script>
function pushPage(page) {
document.querySelector('#myNavigator').pushPage(page);
}
</script>
</body>
</html>
The index.html is a very simple Onsen UI page, just have a function pushpage.
page2.html
<ons-page id="page2">
<ons-toolbar>
<div class="left">
<ons-back-button>Page 1</ons-back-button>
</div>
<div class="center"></div>
</ons-toolbar>
<div class="div-card">
<img id="barcode" />
<div class="div-text">お会計時に会員バーコードをご提示ください。</div>
</div>
<style>
.div-card {
position: relative;
box-sizing: border-box;
margin: 20px auto;
width: 320px;
height: 198px;
border-radius: 16px;
background-color: #00569b;
box-shadow: 0 4px 4px #888;
text-align: center;
}
.div-card img {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
.div-card .div-text {
position: absolute;
left: 0;
right: 0;
bottom: 14px;
font-size: 12px;
color: #fff;
}
</style>
<script>
ons.getScriptPage().onInit = function() {
if (!loadjs.isDefined('jsBarcode')) {
loadjs('https://cdnjs.cloudflare.com/ajax/libs/jsbarcode/3.11.4/JsBarcode.all.min.js', 'jsBarcode', function() {
});
}
loadjs.ready('jsBarcode', function() {
// foo.js & bar.js loaded
JsBarcode("#barcode")
.CODE128("1234567890123456", {
height: 80,
marginLeft: 20,
marginRight: 20,
text: "1234-5678-9012-3456",
fontSize: 14
})
.render();
});
};
</script>
</ons-page>
I didn’t place <script src=‘https://cdnjs.cloudflare.com/ajax/libs/jsbarcode/3.11.4/JsBarcode.all.min.js’></script> in index.html header, but I let loadjs load it when the page2.html is pushed.
If jsBarcode is not yet loaded then load it. when loadjs is ready, the do the command.
Onsen can only run multi-pages in server mode. I put this examples in following link.
Best Regards
Gobi