PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

การใช้งาน slide box ใน ionicframework อย่างง่าย ตอนที่ 8

15 September 2014 By


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



เนื้อหาที่เกี่ยวข้อง



Tags:: slide box ionic

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

กรุณาล็อกอิน และลงชื่อติดตาม


สมัครสมาชิกได้ที่        ล็อกอินได้ที่   





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