- Help To Build Single-Page App
- Manage Multi-HTML-Sub-Pages In One HTML-Page
- Changing Page Without Changing Routers
- Async Loading HTML/JS
- Event Management, Pub/Sub
- HashRouter Supported
- '$pm.bindPages' from a config.
- get an HTML-SUB-PAGE immediately if it is not lazy, else get it when selected, and then set the dst element.innerHTML by the content.
- control page display or hide by setting the dst element.style.display="block"/"none", then '$pm.select(src/dst id)' to change page, without change routers.
- Read the code for more details: pm.js
js
pm.js
page
page_1.html
page_2.html
index.html
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<title>PM JS</title>
<script src="js/pm.js" type="text/javascript"></script>
</head>
<body>
<!-- page_1 -->
<div id="page_1"></div>
<!-- page_2 -->
<div id="page_2"></div>
<script>
let pages = [
{
// page element id
dst: "page_1",
// sub-html-page, which would be loaded to dst element.innerHTML
url: "page/page_1.html",
// init will be called when the page is loaded, if there's not an url, it will be called immediately
init: function (page) {
console.log("page_1 init");
},
// onshow will be called every time when this page is displayed
onshow: function (page) {
console.log("page_1 onshow");
},
// onshow will be called every time when this page is hided
onhide: function (page) {
console.log("page_1 onhide");
},
},
{
dst: "page_2",
url: "page/page_2.html",
lazy: true,
init: function (page) {
console.log("page_2 init");
},
onshow: function (page) {
console.log("page_2 onshow");
},
onhide: function (page) {
console.log("page_2 onhide");
// release this page when hided, then reload this page every time
$pm.release(page);
}
},
// many pages ...
];
$pm.bindPages(pages);
let i = 0;
setInterval(function () {
i++;
if (i < 5) {
// change a page to display, and hide others
let nextDisplay = pages[i % pages.length].dst;
$pm.select(nextDisplay);
}
}, 1000);
</script>
</body>
</html>