PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

การใช้งาน ionicloading ใน ionicframework ตอนที่ 9

27 September 2014 By


การแสดง loading ส่วนใหญ่จะใช้กับการแจ้งให้ผู้ใช้งานทราบว่า
เนื้อหาหรือข้อมูลที่กำลังแสดง นั้นอาจจะมีการใช้เวลาในการโหลดข้อมูล
และเป็นการบอกอีกนัยว่า คำสั่งนั้นได้มีการส่งไปแล้ว และกำลังทำงานอยู่
 
การใช้งาน loading ใน ionic มีการกำหนดค่าไม่มาก และไม่ยุ่งยาก
มาดูตัวอย่าง การจำลองการทำงานของ ionicloading 
 
ไฟล์ index.html สำหรับทดสอบ
 
<!DOCTYPE html>
<html ng-app="MyApp"> 
    <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>ionic loading</title>
    </head>
    <body ng-controller="myIonicHome">


        <ion-header-bar class="bar bar-header bar-calm">
            <h1 class="title">ionic loading</h1>
        </ion-header-bar>
        <ion-content class="scroll-content ionic-scroll has-header">

       <br><br>
       <div style="margin:auto;width:50%;">
        <button ng-click="show()" class="button button-block button-calm">
          Click Me
        </button>
        </div>

       
        </ion-content>
   
    </body>
</html>
 
เริ่มต้นเมื่อมีการใช้งาน ionicloading จะต้องมีการส่งค่า parameter ชื่อว่า 
$ionicLoading เข้าไปใน controller ด้วย
 
$ionicLoading จะมี method ให้เรียกใช้งานอยู่ 2 อย่างคือ การแสดง loading
และการซ่อน loading
 
การซ่อน loading ใช้ method hide() 
 
$ionicLoading.hide();
 
การแสดง loading ใช้ method show()  
 
ใช้แบบง่าย
 
การกำหนดและใช้งานแบบง่าย loading จะแสดงไปเรื่อยๆ 
จนกว่าเราจะกำหนดให้ซ่อนโดย method hide()
 
ตัวอย่าง ใช้ $timeout กำหนดเวลา ว่าเมื่อคลิกที่ปุ่ม click me ให้แสดง loading
หลังจากแสดงครบ 3 วินาที ให้ซ่อน loading นั้น
 
ไฟล์ app.js
 
angular.module("MyApp", ["ionic"])
.controller("myIonicHome",function($scope,$ionicLoading,$timeout){ 

  $scope.show = function() {
    $ionicLoading.show({
        template: '<i class="ion-loading-a"></i>  Loading...'
    });
    $timeout(function(){
        $scope.hide();
    },3000);
  };
  $scope.hide = function(){
    $ionicLoading.hide();
  };    

    
});


 
ใช้แบบกำหนด options เพิ่มเติม 
 
ขอยกตัวอย่างรูปแบบเต็มว่ามีอะไรบ้าง ใช้จริง กำหนดบางตัว เช่น
ใช้ template หรือ templageurl อย่างใดอย่างหนึ่ง
 
    $ionicLoading.show({
        template: '<i class="ion-loading-a"></i>  Loading...', // กำหนด template 
        templateUrl:'loading.html', // โหลด templete จากไฟล์ (เลือกใช้อย่างหนึ่งอย่างใด ไม่ใช้พร้อมกับ template)
        noBackdrop:true, // ไม่แสดพื้นหลังทึบ หรือไม่ true ไม่แสดง | false แสดง
        delay:1000, // กำหนดแสดงหลังจากกี่วินาที ตัวเลข milisecond หาร 1000 เท่ากับ 1 วินาที 
        duration:3000  // กำหนดให้ซ่อนอัตโนมัติในกี่วินาที แบบไม่ต้องเรียก method hide() อีก
    });    
 
ตัวอย่าง การใช้งานแบบกำหนด options เพิ่มเติม
เมื่อคลิกที่ปุ่ม loading ก็จะแสดง หลังจากคลิก 1 วินาที่ ตามค่าที่กำหนดใน delay
และจะถูกซ่อนเมื่อแสดงไปแล้ว 3 วินาที ตามค่าที่กำหนดใน duration 
และจะไม่แสดงพื้นหลังทึบ ตามที่กำหนด noBackdrop เท่ากับ true
 
ไฟล์ app.js
 
angular.module("MyApp", ["ionic"])
.controller("myIonicHome",function($scope,$ionicLoading,$timeout){ 

    $scope.show = function() {
        $ionicLoading.show({
            template: '<i class="ion-loading-a"></i>  Loading...', // กำหนด template 
            noBackdrop:true, // ไม่แสดพื้นหลังทึบ หรือไม่ true ไม่แสดง | false แสดง
            delay:1000, // กำหนดแสดงหลังจากกี่วินาที ตัวเลข milisecond หาร 1000 เท่ากับ 1 วินาที 
            duration:3000  // กำหนดให้ซ่อนอัตโนมัติในกี่วินาที แบบไม่ต้องเรียก method hide() อีก
        });    
    }
    
});

 
จากตัวอย่างข้างต้น เราได้เข้าใจถึงการใช้งาน การทำงาน และหน้าตาการแสดงผล
จากตัวอย่างไปแล้ว แต่ในความเป็นจริง การใช้งานจริงเรา คงไม่สะดวกหากต้องกำหนด
ค่าให้กับ loading ในทุกๆ controller ที่มีการใช้งาน
ionic จึงมีตัวช่วยในการกำหนดค่าเริ่มต้นให้กับ service $ionicLoading 
โดยใช้
 
$ionicLoadingConfig
 
มาดูไฟล์ app.js ส่วนการตั้งค่าก็กำหนดตามปกติ ตามตัวอย่างด้านบนตามต้องกร
 
angular.module("MyApp", ["ionic"])
.constant('$ionicLoadingConfig', {
    template: '<i class="ion-loading-a"></i>  Loading...', // กำหนด template 
    noBackdrop:false, // ไม่แสดพื้นหลังทึบ หรือไม่ true ไม่แสดง | false แสดง
    delay:1000, // กำหนดแสดงหลังจากกี่วินาที ตัวเลข milisecond หาร 1000 เท่ากับ 1 วินาที 
    duration:3000  // กำหนดให้ซ่อนอัตโนมัติในกี่วินาที แบบไม่ต้องเรียก method hide() อีก
})
.controller("myIonicHome",function($scope,$ionicLoading,$timeout){ 

    $scope.show = function() {
        $ionicLoading.show();    
    }
    
});


 
จะเห็นว่าการกำหนดแบบใช้งาน $ionicLoadingConfig จะทำให้สะดวกเวลาเรียกใช้
งานมาก โดยสามารถเรียกใช้
 
$ionicLoading.show();    
 
ได้เลย โดยไม่ต้องกำหนด options เพิ่มเติมอีก
 
 
อย่างไรก็ตาม เรายังสามารถกำหนด แบบตั้งค่าเริ่มต้น โดยใช้ $ionicLoadingConfig
และกำหนดแบบเฉพาะ เช่น อยากให้ใช้คำว่า My loading แทน ก็สามารถทำได้
ดังนี้
 
ไฟล์ app.js
 
angular.module("MyApp", ["ionic"])
.constant('$ionicLoadingConfig', {
    template: '<i class="ion-loading-a"></i>  Loading...', // กำหนด template     
    noBackdrop:false, // ไม่แสดพื้นหลังทึบ หรือไม่ true ไม่แสดง | false แสดง
    delay:1000, // กำหนดแสดงหลังจากกี่วินาที ตัวเลข milisecond หาร 1000 เท่ากับ 1 วินาที 
    duration:3000  // กำหนดให้ซ่อนอัตโนมัติในกี่วินาที แบบไม่ต้องเรียก method hide() อีก
})
.controller("myIonicHome",function($scope,$ionicLoading,$timeout){ 

    $scope.show = function() {
        $ionicLoading.show({
            template: '<i class="ion-loading-a"></i>  My Loading...', // กำหนด template             
        });    
    }
    
});



 



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



Tags:: ionic loading

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

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


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





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