การใช้งาน ionicbackdrop ใน ionicframework ตอนที่ 11
เขียนเมื่อ 8 ปีก่อน โดย Ninenik Narkdeeionicframework
คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ ionicframework
ไปที่
Copy
ionicbackdrop หรือลักษณะการแสดงพื้นหลังทึบ ให้ไม่สามารถจัดการ หรือใช้งาน
ส่วนของเนื้อหาในเพจหรือ app ได้ เช่นใช้กับ popup ใช้กับ loading
หรือใช้กับ overlays อื่นๆ
มี methods ง่ายแค่ 2 อัน คือ
ให้มีอยู่หรือแสดง backdrop
ใช้ method retain()
และปล่อย ละทิ้งหรือ ยกเลิกการแสดง backdrop
ใช้ method release()
การใช้งานก็ง่ายแค่ส่งค่า $ionicBackdrop เข้าไปใน controller
และก็เรียกใช้งานตามปกติเช่น
ถ้าต้องการแสดง ก็ใช้
$ionicBackdrop.retain();
ถ้าต้องการยกเลิกก็ใช้
$ionicBackdrop.release();
การเรียกใช้งาน retain() และ release() ให้จำไว้เสมอว่า ถ้าเราเรียกใช้งาน
คำสั่ง retain() กี่ครั้งก็ตาม เราต้องเรียกใช้งาน release() ให้เท่ากันด้วย
มิเช่น backdrop ก็จะยังแสดงอยู่ จนกว่า จะ release() ครบจำนวนตามที่เรียกใช้
มาดูโค้ดบางส่วนของการเรียกใช้งาน โดยในที่นี้จะกำหนด ไว้ใน
ฟังก์ชั่น เมื่อเรียกใช้งาน ให้แสดง และใช้ $timeout กำหนดให้ยกเลิก
ภายหลัง 3 วินาที
// ส่งค่า $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
http://www.ninenik.com/content.php?arti_id=560 via @ninenik
แต่จะแก้ไขไฟล์ app.js และจะเพิ่มการจัดการในส่วนของ aboutusCtrl controller
ตามโค้ดด้านล่าง การทำงาน ทดสอบโดยให้เรากดไปที่ sidemenu เพื่อแสดงเมนู
ด้านซ้าย จากนั้น ให้กดไปที่หน้า aboutus ก็จะเห็นการทำงานของ backdrop
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){ });
ตัวอย่างการทำงาน
กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ

เนื้อหาที่เกี่ยวข้อง
-
08 Oct2014การใช้งาน ionicpopup ใน ionicframework ตอนที่ 12 อ่าน 6,675
ในการใช้งาน mobile app หรือเว็บเพจทั่วไป เราจะเจอรูปแบบของ popup ต่างๆ ที
Tags::
ionicframework
URL สำหรับอ้างอิง
Top
Copy
ขอบคุณทุกการสนับสนุน
![]()