1. Download Onsen UI จาก https://github.com/OnsenUI/OnsenUI-dist/archive/2.8.1.zip
2. แตก folder ที่ download มาไว้ใน folder ของโปรเจค โดย folder ที่เราจะนำมาใช้ มี folder css และ folder js ดังรูป
3. สร้างไฟล์ index.html โดยเรียกใช้ style sheet และ javascript ของ Onsen UI ดังนี้
ในไฟล์ index.html ให้ใส่ code
<!DOCTYPE html>
<html>
<head>
<!-- เรียกใช้ style sheet และ javascript จาก onsen ui -->
<link rel="stylesheet" href="css/onsenui.css">
<link rel="stylesheet" href="css/onsen-css-components.min.css">
<script src="js/onsenui.min.js"></script>
<!-- เรียกใช้ style sheet และ javascript จาก onsen ui -->
<body>
</body>
</html>
4. สร้างหน้า App โดยใช้ Tag ons-navigator โดยกำหนดให้นำ HTML จาก element template มาแสดง
<ons-navigator swipeable id="myNavigator" page="page1.html"></ons-navigator>
<!-- page="page1.html" คือการนำข้อมูลใน <template id="page1.html"> มาแสดง -->
<!-- หน้าแรกของ แอพ -->
<template id="page1.html">
<ons-page id="page1">
<ons-toolbar><!-- header ของ app -->
<div class="center">Page 1</div>
</ons-toolbar><!-- header ของ app -->
<p>This is the first page.</p>
<!-- ปุ่ม Push page เมื่อกดแล้วจะทำงานที่ function change_page() -->
<ons-button onclick="change_page()" id="push-button">Push page</ons-button>
</ons-page>
</template>
<!-- หน้าแรกของ แอพ -->
<!-- หน้าสองของ แอพ -->
<template id="page2.html">
<ons-page id="page2">
<ons-toolbar><!-- header ของ app -->
<div class="right">
<!-- ปุ่ม ปิดหน้า app เมื่อกดแล้วจะทำงานที่ function pop_page() -->
<ons-toolbar-button onclick="pop_page()">
<ons-icon icon="md-close"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">Page2</div>
</ons-toolbar><!-- header ของ app -->
<p>This is the second page.</p>
</ons-page>
</template>
<!-- หน้าสองของ แอพ -->
5. ใส่ code javascript สำหรับปุ่มกด เปิด และปิด
<script>
ons.platform.select('ios');//กำหนดให้ style ของ app เป็นแบบ ios
function change_page() {
//function change_page() เมื่อกดจะไปส้งให้ ons-navigator นำ
//<template id="page2.html"> มาแสดง
//{animation:"lift"} คือการแสดงหน้า จากล่างขึ้นบนเวลาเปลี่ยนหน้า
document.querySelector('#myNavigator').pushPage('page2.html', {animation:"lift"});
}
function pop_page()
{//function pop_page สำหรับ หน้าสอง เมื่อกดแล้วจะกลับไปแสดงหน้าเดิม
document.querySelector('#myNavigator').popPage();
}
</script>
ผลลัพธ์ที่ได้คือ
