การใช้งาน ionicmodal ใน ionicframework ตอนที่ 10
เขียนเมื่อ 9 ปีก่อน โดย Ninenik Narkdeeionicframework
คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ ionicframework
ดูแล้ว 6,276 ครั้ง
ไปที่
Copy
การใช้งาน 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
กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ
เนื้อหาที่เกี่ยวข้อง
-
07 Oct2014การใช้งาน ionicbackdrop ใน ionicframework ตอนที่ 11 อ่าน 4,991
ionicbackdrop หรือลักษณะการแสดงพื้นหลังทึบ ให้ไม่สามารถจัดการ หรือใช้งาน
Tags::
ionicframework
URL สำหรับอ้างอิง
Top
Copy
คำแนะนำ และการใช้งาน
สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก
- ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา
โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ