PHP Ionic Angular Phonegap AJAX Javascript CSS MySQL jQuery Forum


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

27 September 2014 By
loading ionic

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ loading ionic



การแสดง 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:: loading ionic




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

กรุณาล็อกอิน เพื่ออ่านเนื้อหาบทความ

ยังไม่เป็นสมาชิก

สมาชิกล็อกอิน



หริอ สมัครสมาชิก และล็อกอิน ด้วย Facebook



อย่าลืมกด Like กด Share เป็นกำลังใจ ในการสร้างบทความใหม่ๆ น่ะครับ


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