การใช้งาน modal ใน ionicframework จะคล้ายกับการแสดงหน้าต่างเพจ หรือแท็บชั่วคราว
มาอยู่ด้านบนของหน้าทำงานหลัก เพื่อทำงานอย่างหนึ่งอย่างใดเฉพาะ และปิดไปเมื่อจบการทำงาน
โดยรูปแบบการใช้งาน modal จะใช้แท็ก <ion-modal-view> คลุมในส่วนของ
เนื้อหาที่ต้องการแสดง เช่น
<ion-modal-view>
<ion-header-bar>
<h1 class="title">My Modal title</h1>
</ion-header-bar>
<ion-content>
Hello!
</ion-content>
</ion-modal-view>
การเรียกใช้งาน modal สามาระเรียกใช้งานได้แบบ string และ url
ในที่นี้จะใช้เป็นแบบ url หรือเรียกผ่านไฟล์ template
โดยเรากำหนดชื่อว่า modal.html
มาดูโครงสร้างไฟล์ทั้งหมด สำหรับประกอบคำอธิบาย ว่ามีไฟล์อะไรบ้าง
index.html
app.js
tpl/aboutus.html
tpl/contactus.html
tpl/welcome.html
tpl/modal.html
หากใครยังไม่เข้าใจการใช้งาน template ดูเนื้อหาที่เกี่ยวข้องได้ที่
การใช้งาน template ใน ionicframework ตอนที่ 4
https://www.ninenik.com/content.php?arti_id=539 via @ninenik
มาไล่ดูโค้ดตัวอย่างไฟล์ทั้งหมดคร่าวๆ กัน (ไม่ได้อธิบายอะไรเพิ่มให้ดูโครงสร้างเท่านั้น)
ไฟล์ index.html
<!DOCTYPE html>
<html ng-app="myIonicApp">
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="css/ionic.css" rel="stylesheet">
<script type="text/javascript" src="js/ionic.bundle.js"></script>
<script type="text/javascript" src="app.js"></script>
<title>My Ionic 3</title>
</head>
<body ng-controller="myIonicHome">
<ion-side-menus>
<!-- Center content -->
<ion-side-menu-content>
<ion-nav-bar class="bar bar-header bar-assertive">
<ion-nav-back-button class="button-clear">
<i class="ion-arrow-left-c"></i> Back
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view animation="slide-left-right">
</ion-nav-view>
</ion-side-menu-content>
<!-- Left menu -->
<ion-side-menu side="left">
<ion-header-bar class="bar bar-header bar-assertive">
<h1 class="title">Menu</h1>
</ion-header-bar>
<ion-content>
<div class="list">
<a nav-clear nav-clear menu-close class="item item-icon-left" href="#/">
<i class="icon ion-home"></i>
Home
</a>
<a nav-clear menu-close class="item item-icon-left" href="#/aboutus">
<i class="icon ion-at"></i>
About Us
</a>
<a nav-clear menu-close class="item item-icon-left item-icon-right" href="#/contactus">
<i class="icon ion-email"></i>
Contact Us
<i class="icon ion-ios7-telephone-outline"></i>
</a>
</div>
</ion-content>
</ion-side-menu>
</ion-side-menus>
</body>
</html>
ไฟล์นี้เราจะใช้โครงสร้างแบบมี sidemenu ด้านซ้าย
เพื่อลิ้งค์ไปหน้าอื่น และจำลองให้เห็นการทำงานของ event ใน modal ด้วย
ไฟล์ welcome.html
<ion-header-bar class="bar bar-header bar-assertive">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
<h1 class="title">My Ionic</h1>
<button ng-click="openModal()" class="button">Edit</button>
</ion-header-bar>
<!-- กำหนด class ให้กับ ion-content กรณี มี header-->
<ion-content class="scroll-content ionic-scroll has-header">
<div class="list card">
<div class="item item-body">
<h2>Welcome</h2>
<p>
This is welcome.html template
</p>
</div>
</div>
</ion-content>
สำหรับไฟล์นี้ จะเป็นไฟล์ที่เรามีการเรียกใช้งาน modal โดยเราจะเพิ่มปุ่มคำว่า
edit ไปที่มุมบนขวาของ header พอกด ก็จะไปเรียกใช้งานฟังก์ชั่น openModal()
ไฟล์ modal.html
<ion-modal-view>
<ion-header-bar class="bar bar-header bar-energized">
<h1 class="title">ionic modal</h1>
<button ng-click="closeModal()" class="button icon ion-ios7-close-outline"></button>
</ion-header-bar>
<ion-content class="scroll-content ionic-scroll has-header">
<br>
model content here
<br>
click exit button to close modal
</ion-content>
</ion-modal-view>
หน้าไฟล์ modal.html ก็จะเหมือนหน้าอื่นๆ แต่จะมีการครอบด้ววยแท็ก
<ion-modal-view> เพื่อกำหนดให้เป็นเนื้อหา modal โด้วยเฉพาะ ในไฟล์
ก็จะมีโค้ดปุ่มสำหรับ ปิด model ด้วยการเรียกใช้งานฟังก์ชั่น closeModal()
ไฟล์ aboutus.html
<ion-header-bar class="bar bar-header bar-assertive">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
<h1 class="title">About Us</h1>
<a nav-clear href="#/" class="button button-icon icon ion-home"></a>
</ion-header-bar>
<!-- กำหนด class ให้กับ ion-content กรณี มี header-->
<ion-content class="scroll-content ionic-scroll has-header">
<div class="list card">
<div class="item item-body">
<h2>About Us</h2>
<p>
This is aboutus.html template
</p>
</div>
</div>
</ion-content>
ไฟล์ contactus.html
<ion-header-bar class="bar bar-header bar-assertive">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
<h1 class="title">Contact Us</h1>
<a nav-clear href="#/" class="button button-icon icon ion-home"></a>
</ion-header-bar>
<!-- กำหนด class ให้กับ ion-content กรณี มี header-->
<ion-content class="scroll-content ionic-scroll has-header">
<div class="list card">
<div class="item item-body">
<h2>Contacuts</h2>
<p>
This is contactus.html template
</p>
</div>
</div>
</ion-content>
ส่วนสำคัญไฟล์ app.js คำอธิบาย แสดงในโค้ด
angular.module("myIonicApp", ["ionic"]) // สร้าง module และเรียกใช้งาน ionic
// ตั้งค่า provider สำหรับใช้งาน ngRoute service ใน ionic จะใช้ชื่อใหม่
// ต่างจาก angurlarjs แต่รูปแบบจะคล้ายๆ กัน
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('intro', { // กำหนดชื่อ ว่าเราอยู่ในส่วนใหน (อธิบายเพิ่มทีหลัง) กำหนดอะไรก็ได้ที่ให้เราเข้าใจ
url: '/', // ถ้าลิ้งไปที่ url /
templateUrl: 'tpl/welcome.html', // ให้ไปเรียกไฟล์ welcome.html มาแสดง
controller: 'welcomeCtrl' // พร้อมสร้าง controller ชื่อ myIonicHome
})
.state('aboutus', { // อย่างอันนี้ กำหนดว่า state ชื่อ aboutus เหมือนสื่อเราอยู่หน้า about us
url: '/aboutus', // รูปแบบเคำอธิบายเหมือนด้านบน แค่เปลี่ยนชื่อ หรือค่า
templateUrl: 'tpl/aboutus.html', // รูปแบบเคำอธิบายเหมือนด้านบน แค่เปลี่ยนชื่อ หรือค่า
controller: 'aboutusCtrl'
})
.state('contactus', { // ในตอนนี้เข้าใจเพียงว่า กำหนดชื่อให้สัมพันธ์กับส่วนที่ใช้งาน ชื่ออะไรก็ได้
url: '/contactus',
templateUrl: 'tpl/contactus.html',
controller: 'contactusCtrl'
})
$urlRouterProvider.otherwise("/"); // กรณีอื่นๆ ให้ url อ้างอิง เท่ากับ / หรือหน้าแรก
})
// ส่วนจัดการ controller ต่างๆ มีการส่งค่า $ionicModal เพื่อใช้งาน modal
.controller("welcomeCtrl",function($scope,$ionicModal){
// สร้าง modal controller จากไฟล์ template และกำหนด options
$ionicModal.fromTemplateUrl('tpl/modal.html', {
scope: $scope, // สร้าง child scope ของ rootScope เพื่อใช้งาน
focusFirstInput:false, // ถ้าใน modal มี input textbox ให้โฟกัสไปที่ input นั้น เมื่อเปิด modal มา ค่าเริ่มต้นใช้ false
backdropClickToClose:true, // ให้ปิด modal ได้ด้วยการกดไปที่ พื้นของ backdrop คล้ายพื้นหลังสีทึบๆ
hardwareBackButtonClose:true, // ให้ปิด modal ได้ด้วยปุ่ม back ที่เครื่อง
animation: 'slide-in-up' // รูปแบบการแสดงการเคื่อนไหว
}).then(function(modal) { // คืนค่าเป็น object controller เพื่อใช้งาน
$scope.modal = modal; // เก็บค่าในตัวแปร $scope.modal
});
// สร้างฟังก์ชั่น สำหรับแสดง modal
$scope.openModal = function() {
$scope.modal.show(); // เรียกใช้ method ของ ionicmodal ในการแสดง modal
console.log("modal show");
console.log($scope.modal.isShown());
// $scope.modal.isShown() เป็น method สำหรับเช็คว่า modal มีการแสดงอยู่หรือไม่ ค่าเป็น true หรือ false
// if($scope.modal.isShown()){ // ถ้า modal แสดงอยู่
// // คำสั่งทำงาน
// }
};
// สร้างฟังก์ชั่น สำหรับปิด modal
$scope.closeModal = function() {
$scope.modal.hide(); // เรียกใช้ method ของ ionicmodal ในการปิด modal
console.log("modal hide");
console.log($scope.modal.isShown());
};
// อันนี้เป็น event ของ scope กรณี มีการเปลี่ยนไปหน้าอื่น เราควร remove modal
// เพื่อเป็นการล้างค่า modal และป้องกันการใช้งาน memory มากเกินไป
$scope.$on('$destroy', function() {
$scope.modal.remove();
console.log("modal destroy");
});
// event เมื่อมีการ hide modal เช่นจากคำสั่ง $scope.modal.hide(); หรือคำสั่ง $scope.modal.remove();
$scope.$on('modal.hidden', function() {
// คำสั่งที่ต้องการทำงาน
console.log("modal hidden");
});
// event เมื่อมีการ removed modal เช่น จากคำสั่ง $scope.modal.remove();
$scope.$on('modal.removed', function() {
// คำสั่งที่ต้องการทำงาน
console.log("modal remove");
});
})
.controller("aboutusCtrl",function($scope){
})
.controller("contactusCtrl",function($scope){
})
.controller("myIonicHome",function($scope){
});
ในไฟล์ app.js เราจะได้รู้จักกับ method ต่างๆ ของ modal
เช่น
show() แสดง modal
isShow() ใช้ตรวจสอบว่า ขณะนี้ modal แสดงอยู่หรือไม่ true / false
hide() ปิดหรือซ่อน modal
remove() ปิด และล้างค่า modal ทำให้ไม่สามารถใช้งานได้อีก จนกว่า มีการเรียกใช้งานใหม่ เช่น ไปหน้าอื่นและกลับมาอีกครั้ง สั่งเกตว่า ionic จะแนะนำให้เราทำการ remove modal เมื่อมีการเปลี่ยนไปหน้าอื่นด้วยคำสั่ง
// อันนี้เป็น event ของ scope กรณี มีการเปลี่ยนไปหน้าอื่น เราควร remove modal
// เพื่อเป็นการล้างค่า modal และป้องกันการใช้งาน memory มากเกินไป
$scope.$on('$destroy', function() {
$scope.modal.remove();
console.log("modal destroy");
});
เพื่อเป็นการป้องกันการใช้งาน memory มากเกินจำเป็น
ตัวอย่างการทำงานและรูปแบบ ของ modal
เนื้อหาที่เกี่ยวข้อง