PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

การใช้งาน ionicbackdrop ใน ionicframework ตอนที่ 11

07 October 2014 By


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){ 

});
 
ตัวอย่างการทำงาน
 
 



เนื้อหาที่เกี่ยวข้อง



Tags:: ionicframework

เนื้อหาพิเศษ เฉพาะสำหรับสมาชิก

กรุณาล็อกอิน และลงชื่อติดตาม


สมัครสมาชิกได้ที่        ล็อกอินได้ที่   





URL สำหรับอ้างอิง