การแสดง 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
});
}
});
เนื้อหาที่เกี่ยวข้อง