slide box ใน ionicframework เป็นยังไง สามารถดูได้ที่
http://ionicframework.com/docs/api/directive/ionSlideBox/
รูปแบบจะเป็นไปในลักษณะ การเลื่อน slide ไปทางซ้ายหรือขวา
เพื่อดูเนื้อหาหรือข้อมูล สามารถไปประยุกต์ได้หลายแบบ
เช่น การ slide ดูรูปภาพ การ slde ดูเนื้อหา เป็นต้น
ตัวอย่าง
โค้ดไฟล์ app.js (ที่จริงตัวทดสอบไฟล์นี้ไม่มีอะไร แต่ก็ขอเอาโค้ดมาแปะไว้กันงง)
1 2 3 4 | angular.module("MyApp", ["ionic"]).controller("myIonicHome",function($scope){ }); |
โค้ดไฟล์ 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 33 34 35 36 37 38 39 40 41 42 43 44 45 | <!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 ตัวอย่างเช่น
1 2 3 4 5 6 7 8 9 10 11 12 13 | <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 วินาทีข้างหน้า
1 2 3 4 5 6 7 8 | angular.module("MyApp", ["ionic"]).controller("myIonicHome",function($scope,$ionicSlideBoxDelegate,$timeout){ $timeout(function(){ $ionicSlideBoxDelegate.$getByHandle('myslidebox').slide(2); },5000); }); |
2. กำหนดให้เล่น slide แบบต่อเนื่อง ด้วย does-continue เช่น พอไปถึง slide ตัวสุดท้าย ก็ให้วนกลับมา แสดง slide แรก วนไปเรื่อยๆ รูปแบบการกำหนด
1 2 3 4 | <ion-slide-box does-continue="true" ></ion-slide-box> |
3. กำหนดให้ slide เล่นอัตโนมัติ ด้วย auto-play ในทุกๆ 4 วินาที (ค่าเริ่มต้น)
1 2 3 4 5 | <ion-slide-box does-continue="true" auto-play="true" ></ion-slide-box> |
4. หากต้องการกำหนดเวลาในการเล่นอัตโนมัติด้วยตัวเอง ทำได้โดยใช้ slide-interval
1 2 3 4 5 6 | <ion-slide-box does-continue="true" auto-play="true" slide-interval="3000" ></ion-slide-box> |
5. แสดง pager ด้วย show-pager (ปกติหากไม่กำหนด pager จะแสดง) ไม่แสดงใช้ false
1 2 3 4 5 6 7 | <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 เข้าไปใช้งานด้วย
1 2 3 4 5 6 | <ion-slide-box does-continue="true" show-pager="true" pager-click="goSlide(index)" ></ion-slide-box> |
ไฟล์ app.js
1 2 3 4 5 6 7 8 | angular.module("MyApp", ["ionic"]).controller("myIonicHome",function($scope,$ionicSlideBoxDelegate){ $scope.goSlide = function(index){ $ionicSlideBoxDelegate.slide(index); }; }); |
7. สามารถกำหนดให้เรียกใช้งาน expression ด้วย on-slide-changed เมื่อมีการเปลี่ยน slide โดยจะมีการส่งค่าตัวแปร '$index' (มี $ ด้วย ต่างจากข้อ 6 แต่คือค่าเดียวกัน)
1 2 3 4 5 | <ion-slide-box does-continue="true" on-slide-changed="slideHasChanged($index)" ></ion-slide-box> |
ไฟล์ app.js
1 2 3 4 5 6 7 8 | angular.module("MyApp", ["ionic"]).controller("myIonicHome",function($scope,$ionicSlideBoxDelegate){ $scope.slideHasChanged = function(index){ // do something }; }); |
8. สามารถกำหนดว่า slide ไหนจะเป็น slide เริ่มต้นได้ หรือ slide ที่ต้องการใช้าน ด้วย active-slide
1 2 3 4 5 | <ion-slide-box does-continue="true" active-slide="1" ></ion-slide-box> |
การใช้งาน slide ยังมีลูกเล่นต่างๆ ขึ้นกับรูปแบบการนำเสนอ
ข้างต้นเป็นเพียงให้เข้าใจคร่าวๆ เกี่ยวกับการใช้งาน slide box
เนื้อหาที่เกี่ยวข้อง