PHP Ionic Angular HTML5 AJAX Javascript CSS MySQL jQuery Forum


ภาคต่อ tabs กับการใช้งาน iontab ใน ionicframework ตอนที่ 14

21 October 2014 By Ninenik Narkdee
ionicframework

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ ionicframework



ในการใช้งาน ion-tabs เราจะพบว่ามีการใช้งาน ion-tab ซึ่งเป็นแท็บเมนู
แต่ละรายการ ดังนั้นเนื้อหาในบทความนี้ จะเป็นบทความต่อเนื่องจาก ตอนที่ 13
 
การใช้งาน tabs ใน ionicframework ตอนที่ 13 
http://www.ninenik.com/content.php?arti_id=567 via @ninenik
 
มาดูรูปแบบการใช้งาน ion-tab
 
<ion-tab
  title="ข้อความแท็บเมนู"
  icon="ชื่อ icon"
  href="#/ลิ้งค์">

</ion-tab>
 
Attribute ของ ion-tab และคำอธิบาย
 
title 
(จำเป็นต้องมี)
ใช้กำหนดข้อความแท็บเมนู
 
ตัวอย่าง
 
<ion-tab  title="ข้อความแท็บเมนู"> 
</ion-tab>
 
href
ใช้กำหนดลิ้งค์ไปหน้าอื่น
 
ตัวอย่าง
 
<ion-tab  
title="ข้อความแท็บเมนู" 
href="#/aboutus"> 
</ion-tab>
 
icon
ใช้กำหนดรูป icon ให้กับแท็บเมนู ถ้ามีการใช้งาน attribute นี้
จะมีผลทำให้ icon-on (รูป icon เมื่อกดเลือกแท็บเมนู) และ icon-off (รูป icon เมื่อไม่ได้เลือก)
จะเป็นค่าเดียวกันกับค่า icon
 
ตัวอย่าง
 
<ion-tab  
title="ข้อความแท็บเมนู" 
href="#/aboutus"
icon="ion-home"
> 
</ion-tab>
 
icon-on และ icon-off
icon-on (รูป icon เมื่อกดเลือกแท็บเมนู) และ icon-off (รูป icon เมื่อไม่ได้เลือกแท็บเมนู)
หากกำหนดสองค่านี้แล้ว เราไม่จำเป็นต้องกำหนด icon แบบแรกก็ได้
 
ตัวอย่าง
 
<ion-tab  
title="ข้อความแท็บเมนู" 
href="#/aboutus"
icon-on="ion-ios7-filing" 
icon-off="ion-ios7-filing-outline" > 
</ion-tab>
 
badge
ใช้กำหนดข้อความหรือตัวเลขกำกับในแท็บเมนู ปกติจะกำหนดเป็นตัวเลข
 
<ion-tab  
title="ข้อความแท็บเมนู" 
href="#/aboutus"
badge="50" 
icon-on="ion-ios7-filing" 
icon-off="ion-ios7-filing-outline" > 
</ion-tab>
 
รูปภาพประกอบ
 
14-0
 
 
badge-style
ใช้กำหนดรูปแบบของ badge โดยจะใช้พร้อมกัน ค่าที่กำหนดจะอยู่ในรูปแบบ
badge-{ชื่อสีใน ionic} เช่น badge-dark , badge-positive เป็นต้น
 
ตัวอย่าง
 
<ion-tab  
title="ข้อความแท็บเมนู" 
href="#/aboutus"
badge="50" 
badge-style="badge-dark" 
icon-on="ion-ios7-filing" 
icon-off="ion-ios7-filing-outline" > 
</ion-tab>
 
รูปภาพประกอบ
 
14-1
 
 
on-select
สำหรับเรียกใช้งานฟังก์ชั่น เมื่อเลือกที่แท็บเมนูนั้นๆ
 
ตัวอย่าง
 
<ion-tab  
title="ข้อความแท็บเมนู" 
href="#/aboutus" 
on-select="do_something()"
icon-on="ion-ios7-filing" 
icon-off="ion-ios7-filing-outline" > 
</ion-tab>
 
on-deselect
สำหรับเรียกใช้งานฟังก์ชั่น เมื่อไม่ได้เลือกแท็บเมนูนั้นๆ โดยต้องเป็นแท็บเมนูที่เลือก
อยู่ ณ ขณะปัจจุบัน และมีการไปกดเลือกแท็บเมนูอื่น จึงจะทำงานในส่วนนี้
 
ตัวอย่าง
 
<ion-tab  
title="ข้อความแท็บเมนู" 
href="#/aboutus" 
on-select="do_something()" 
on-deselect="do_something2()" 
icon-on="ion-ios7-filing" 
icon-off="ion-ios7-filing-outline" > 
</ion-tab>
 
 
ng-click
ใช้เรียกใช้งานฟังก์ชั่นที่ต้องการ ข้อควรจำ หากมีการใช้งาน ng-click จะมีผลทำให้
เมื่อคลิกเลือกที่แท็บเมนูใดๆ แล้ว แท็บเมนูนั้นจะไม่ถูกเลือก หรือก็คือไม่มีการ active 
รวมทั้ง การใช้งาน on-select และ on-deselect ก็จะไม่มีผลเช่นกัน 
โดยการทำงานกับ tabs ต้องใช้งานและจัดการผ่าน $ionicTabsDelegate แทน
 
ตัวอย่าง
 
<ion-tab  
title="ข้อความแท็บเมนู" 
href="#/aboutus" 
ng-click="do_something()" 
icon-on="ion-ios7-filing" 
icon-off="ion-ios7-filing-outline" > 
</ion-tab>
 


 
 
การใช้งาน $ionicTabsDelegate 
 
$ionicTabsDelegate ใช้สำหรับจัดการ tabs แบบกำหนดเอง ปกติจะใช้งานผ่าน
ng-click และเรียกใช้งานฟังก์ชั่น 
ก่อนใช้งานต้องมีการ ส่งค่าเข้าไปใน controller 
 
method ของ $ionicTabsDelegate ได้แก่
 
select(index)
ใช้สำหรับแสดง tabs ที่ต้องการ index ค่าเริ่มที่ 0
 
ตัวอย่างการใช้งานใน controller
 
.controller("welcomeCtrl",function($scope,$ionicTabsDelegate){ 

    $scope.showtab = function(tabID){
       $ionicTabsDelegate.select(tabID);
    }

})
 
 
selectedIndex()
ใช้สำหรับดึงค่า index ของแท็บเมนูที่คลิกเลือก ค่าเริ่มต้นนับที่เลข 0 
หากไม่มีค่าใดๆ จะคืนค่ามาเป็น -1
 
ตัวอย่างการใช้งานใน controller
 
.controller("welcomeCtrl",function($scope,$ionicTabsDelegate){ 

    $scope.showtab = function(tabID){
        console.log($ionicTabsDelegate.selectedIndex());
    }

})
 
 
$getByHandle(handle)
ใช้สำหรับกรณี เรามีการอ้างอิงชื่อการใช้งานแท็บเมนู อย่างกรณีที่
มีแท็บแมนูสองอัน และมีการกำหนด delegate-handle ใน ion-tabs
เช่น
 
<ion-tabs delegate-handle="myhandleTab" class="tabs-positive tabs-icon-only">

  <ion-tab title="Home" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline">
    <!-- Tab 1 content -->
  </ion-tab>
  <ion-tab title="About" icon-on="ion-ios7-clock" icon-off="ion-ios7-clock-outline">
    <!-- Tab 2 content -->
  </ion-tab>
  <ion-tab title="Settings" icon-on="ion-ios7-gear" icon-off="ion-ios7-gear-outline">
    <!-- Tab 3 content -->
  </ion-tab>

</ion-tabs>
 
การใช้งานใน controller ก็จะได้เป็น
 
.controller("welcomeCtrl",function($scope,$ionicTabsDelegate){ 

    $scope.showtab = function(tabID){
        $ionicTabsDelegate.$getByHandle('myhandleTab').select(tabID);
    }

})
 
 
จบเกี่ยวกับการใช้งาน tabs ใน ionicframwork ^_^






Tags:: ionicframework




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

กรุณาล็อกอิน เพื่ออ่านเนื้อหาบทความ

ยังไม่เป็นสมาชิก

สมาชิกล็อกอิน



หริอ สมัครสมาชิก และล็อกอิน ด้วย Facebook



อย่าลืมกด Like กด Share เป็นกำลังใจ ในการสร้างบทความใหม่ๆ น่ะครับ


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