ionicbackdrop หรือลักษณะการแสดงพื้นหลังทึบ ให้ไม่สามารถจัดการ หรือใช้งาน
ส่วนของเนื้อหาในเพจหรือ app ได้ เช่นใช้กับ popup ใช้กับ loading
หรือใช้กับ overlays อื่นๆ
มี methods ง่ายแค่ 2 อัน คือ
ให้มีอยู่หรือแสดง backdrop
ใช้ method retain()
และปล่อย ละทิ้งหรือ ยกเลิกการแสดง backdrop
ใช้ method release()
การใช้งานก็ง่ายแค่ส่งค่า $ionicBackdrop เข้าไปใน controller
และก็เรียกใช้งานตามปกติเช่น
ถ้าต้องการแสดง ก็ใช้
1 | $ionicBackdrop.retain(); |
ถ้าต้องการยกเลิกก็ใช้
1 | $ionicBackdrop.release(); |
การเรียกใช้งาน retain() และ release() ให้จำไว้เสมอว่า ถ้าเราเรียกใช้งาน
คำสั่ง retain() กี่ครั้งก็ตาม เราต้องเรียกใช้งาน release() ให้เท่ากันด้วย
มิเช่น backdrop ก็จะยังแสดงอยู่ จนกว่า จะ release() ครบจำนวนตามที่เรียกใช้
มาดูโค้ดบางส่วนของการเรียกใช้งาน โดยในที่นี้จะกำหนด ไว้ใน
ฟังก์ชั่น เมื่อเรียกใช้งาน ให้แสดง และใช้ $timeout กำหนดให้ยกเลิก
ภายหลัง 3 วินาที
1 2 3 4 5 6 7 8 9 10 11 12 13 | // ส่งค่า $ionicBackdrop เพื่อใช้งาน backdrop.controller("aboutusCtrl",function($scope,$timeout,$ionicBackdrop){ //สร้างฟังก์ชัน action เพื่อเรียกใช้งาน backdrop $scope.action = function() { $ionicBackdrop.retain(); // ใช้ method แสดง backdrop $timeout(function() { // ตั้งเวลาให้ยกเลิกใน 3 วินาที $ionicBackdrop.release(); // ใช้ method ยกเลิก backdrop }, 3000); // ในเวลา 3 วินาที }; $scope.action(); // เรียกใช้งาน ฟังก์ชั่น }) |
โค้ดตัวอย่างและไฟล์ที่เกี่ยวข้อง จะขอใช้งานจากบทความก่อนหน้า
ดูได้ที่
การใช้งาน ionicmodal ใน ionicframework ตอนที่ 10
https://www.ninenik.com/content.php?arti_id=560 via @ninenik
แต่จะแก้ไขไฟล์ app.js และจะเพิ่มการจัดการในส่วนของ aboutusCtrl controller
ตามโค้ดด้านล่าง การทำงาน ทดสอบโดยให้เรากดไปที่ sidemenu เพื่อแสดงเมนู
ด้านซ้าย จากนั้น ให้กดไปที่หน้า aboutus ก็จะเห็นการทำงานของ backdrop
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 84 85 86 87 88 89 90 91 92 93 | 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"); }); })// ส่งค่า $ionicBackdrop เพื่อใช้งาน backdrop.controller("aboutusCtrl",function($scope,$timeout,$ionicBackdrop){ //สร้างฟังก์ชัน action เพื่อเรียกใช้งาน backdrop $scope.action = function() { $ionicBackdrop.retain(); // ใช้ method แสดง backdrop $timeout(function() { // ตั้งเวลาให้ยกเลิกใน 3 วินาที $ionicBackdrop.release(); // ใช้ method ยกเลิก backdrop }, 3000); // ในเวลา 3 วินาที }; $scope.action(); // เรียกใช้งาน ฟังก์ชั่น }).controller("contactusCtrl",function($scope){ }).controller("myIonicHome",function($scope){ }); |
ตัวอย่างการทำงาน
เนื้อหาที่เกี่ยวข้อง