slide box ใน ionicframework เป็นยังไง สามารถดูได้ที่
http://ionicframework.com/docs/api/directive/ionSlideBox/
รูปแบบจะเป็นไปในลักษณะ การเลื่อน slide ไปทางซ้ายหรือขวา
เพื่อดูเนื้อหาหรือข้อมูล สามารถไปประยุกต์ได้หลายแบบ
เช่น การ slide ดูรูปภาพ การ slde ดูเนื้อหา เป็นต้น
ตัวอย่าง
โค้ดไฟล์ app.js (ที่จริงตัวทดสอบไฟล์นี้ไม่มีอะไร แต่ก็ขอเอาโค้ดมาแปะไว้กันงง)
angular.module("MyApp", ["ionic"])
.controller("myIonicHome",function($scope){
});
โค้ดไฟล์ 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>My Slide Box</title>
<style type="text/css">
.orange{background: orange;height: 300px;}
.yellow{background: yellow;height: 300px;}
.pink{background: pink;height: 300px;}
</style>
</head>
<body ng-controller="myIonicHome">
<ion-header-bar class="bar bar-header bar-calm">
<h1 class="title">Slide Box!</h1>
</ion-header-bar>
<ion-content class="scroll-content ionic-scroll has-header">
<ion-slide-box
does-continue="true"
on-slide-changed="slideHasChanged($index)">
<ion-slide>
<div class="box orange"><h1>ORANGE</h1></div>
</ion-slide>
<ion-slide>
<div class="box yellow"><h1>YELLOW</h1></div>
</ion-slide>
<ion-slide>
<div class="box pink"><h1>PINK</h1></div>
</ion-slide>
</ion-slide-box>
</ion-content>
</body>
</html>
ด้านบน จะเป็นรูปแบบการจัดวางโค้ด และการใช้งาน ion-slide-box กับ ion-slide
เราสามารถมีได้หลายๆ slide box ในหน้าเดียวกันได้
จากตัวอย่างด้านบน เป็นการวาง slide box ในส่วนของ content
ทีนี้เรามาดูว่า จะจัดการอะไรกับ slide box ได้บ้าง
1. เราสามารถกำหนดชื่อเรียกแทน สำหรับใช้ในการจัดการกับ slide box นั้นด้วย
delegate-handle ตัวอย่างเช่น
<ion-slide-box
delegate-handle="myslidebox"
>
<ion-slide>
<div class="box orange"><h1>ORANGE</h1></div>
</ion-slide>
<ion-slide>
<div class="box yellow"><h1>YELLOW</h1></div>
</ion-slide>
<ion-slide>
<div class="box pink"><h1>PINK</h1></div>
</ion-slide>
</ion-slide-box>
โดยค่าที่กำหนดในที่นี้คือ myslidebox ก็จะเป็นชื่อเรียกสำหรับใช้จัดการ slide box
นั้นๆ ด้วย $ionicSlideBoxDelegate
ตัวอย่างโค้ด ให้เลื่อน slide ไป slide ลำดับที่สาม ในอีก 5 วินาทีข้างหน้า
angular.module("MyApp", ["ionic"])
.controller("myIonicHome",function($scope,$ionicSlideBoxDelegate,$timeout){
$timeout(function(){
$ionicSlideBoxDelegate.$getByHandle('myslidebox').slide(2);
},5000);
});
2. กำหนดให้เล่น slide แบบต่อเนื่อง ด้วย does-continue เช่น พอไปถึง slide ตัวสุดท้าย ก็ให้วนกลับมา แสดง slide แรก วนไปเรื่อยๆ รูปแบบการกำหนด
<ion-slide-box
does-continue="true"
>
</ion-slide-box>
3. กำหนดให้ slide เล่นอัตโนมัติ ด้วย auto-play ในทุกๆ 4 วินาที (ค่าเริ่มต้น)
<ion-slide-box
does-continue="true"
auto-play="true"
>
</ion-slide-box>
4. หากต้องการกำหนดเวลาในการเล่นอัตโนมัติด้วยตัวเอง ทำได้โดยใช้ slide-interval
<ion-slide-box
does-continue="true"
auto-play="true"
slide-interval="3000"
>
</ion-slide-box>
5. แสดง pager ด้วย show-pager (ปกติหากไม่กำหนด pager จะแสดง) ไม่แสดงใช้ false
<ion-slide-box
does-continue="true"
auto-play="true"
slide-interval="3000"
show-pager="false"
>
</ion-slide-box>
6. สามารถกำหนดให้ เรียกใช้งาน expression ด้วย pager-click เมื่อคลิกที่ pageer โดย จะมีการส่ง ค่าตัวแปร 'index' ของ slide เข้าไปใช้งานด้วย
<ion-slide-box
does-continue="true"
show-pager="true"
pager-click="goSlide(index)"
>
</ion-slide-box>
ไฟล์ app.js
angular.module("MyApp", ["ionic"])
.controller("myIonicHome",function($scope,$ionicSlideBoxDelegate){
$scope.goSlide = function(index){
$ionicSlideBoxDelegate.slide(index);
};
});
7. สามารถกำหนดให้เรียกใช้งาน expression ด้วย on-slide-changed เมื่อมีการเปลี่ยน slide โดยจะมีการส่งค่าตัวแปร '$index' (มี $ ด้วย ต่างจากข้อ 6 แต่คือค่าเดียวกัน)
<ion-slide-box
does-continue="true"
on-slide-changed="slideHasChanged($index)"
>
</ion-slide-box>
ไฟล์ app.js
angular.module("MyApp", ["ionic"])
.controller("myIonicHome",function($scope,$ionicSlideBoxDelegate){
$scope.slideHasChanged = function(index){
// do something
};
});
8. สามารถกำหนดว่า slide ไหนจะเป็น slide เริ่มต้นได้ หรือ slide ที่ต้องการใช้าน ด้วย active-slide
<ion-slide-box
does-continue="true"
active-slide="1"
>
</ion-slide-box>
การใช้งาน slide ยังมีลูกเล่นต่างๆ ขึ้นกับรูปแบบการนำเสนอ
ข้างต้นเป็นเพียงให้เข้าใจคร่าวๆ เกี่ยวกับการใช้งาน slide box
เนื้อหาที่เกี่ยวข้อง