การแสดง loading ส่วนใหญ่จะใช้กับการแจ้งให้ผู้ใช้งานทราบว่า
เนื้อหาหรือข้อมูลที่กำลังแสดง นั้นอาจจะมีการใช้เวลาในการโหลดข้อมูล
และเป็นการบอกอีกนัยว่า คำสั่งนั้นได้มีการส่งไปแล้ว และกำลังทำงานอยู่
การใช้งาน loading ใน ionic มีการกำหนดค่าไม่มาก และไม่ยุ่งยาก
มาดูตัวอย่าง การจำลองการทำงานของ ionicloading
ไฟล์ index.html สำหรับทดสอบ
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 | <!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()
1 | $ionicLoading.hide(); |
การแสดง loading ใช้ method show()
ใช้แบบง่าย
การกำหนดและใช้งานแบบง่าย loading จะแสดงไปเรื่อยๆ
จนกว่าเราจะกำหนดให้ซ่อนโดย method hide()
ตัวอย่าง ใช้ $timeout กำหนดเวลา ว่าเมื่อคลิกที่ปุ่ม click me ให้แสดง loading
หลังจากแสดงครบ 3 วินาที ให้ซ่อน loading นั้น
ไฟล์ app.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | 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 อย่างใดอย่างหนึ่ง
1 2 3 4 5 6 7 | $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
1 2 3 4 5 6 7 8 9 10 11 12 13 | 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 ส่วนการตั้งค่าก็กำหนดตามปกติ ตามตัวอย่างด้านบนตามต้องกร
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | 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 จะทำให้สะดวกเวลาเรียกใช้
งานมาก โดยสามารถเรียกใช้
1 | $ionicLoading.show(); |
ได้เลย โดยไม่ต้องกำหนด options เพิ่มเติมอีก
อย่างไรก็ตาม เรายังสามารถกำหนด แบบตั้งค่าเริ่มต้น โดยใช้ $ionicLoadingConfig
และกำหนดแบบเฉพาะ เช่น อยากให้ใช้คำว่า My loading แทน ก็สามารถทำได้
ดังนี้
ไฟล์ app.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | 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 }); } }); |
เนื้อหาที่เกี่ยวข้อง