การใช้งาน modal ใน ionicframework จะคล้ายกับการแสดงหน้าต่างเพจ หรือแท็บชั่วคราว
มาอยู่ด้านบนของหน้าทำงานหลัก เพื่อทำงานอย่างหนึ่งอย่างใดเฉพาะ และปิดไปเมื่อจบการทำงาน
โดยรูปแบบการใช้งาน modal จะใช้แท็ก <ion-modal-view> คลุมในส่วนของ
เนื้อหาที่ต้องการแสดง เช่น
1 2 3 4 5 6 7 8 | <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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | <!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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <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 คำอธิบาย แสดงในโค้ด
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 | 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 เมื่อมีการเปลี่ยนไปหน้าอื่นด้วยคำสั่ง
1 2 3 4 5 6 | // อันนี้เป็น event ของ scope กรณี มีการเปลี่ยนไปหน้าอื่น เราควร remove modal// เพื่อเป็นการล้างค่า modal และป้องกันการใช้งาน memory มากเกินไป$scope.$on('$destroy', function() { $scope.modal.remove(); console.log("modal destroy");}); |
เพื่อเป็นการป้องกันการใช้งาน memory มากเกินจำเป็น
ตัวอย่างการทำงานและรูปแบบ ของ modal
เนื้อหาที่เกี่ยวข้อง