ในการใช้งาน ion-tabs เราจะพบว่ามีการใช้งาน ion-tab ซึ่งเป็นแท็บเมนู
แต่ละรายการ ดังนั้นเนื้อหาในบทความนี้ จะเป็นบทความต่อเนื่องจาก ตอนที่ 13
การใช้งาน tabs ใน ionicframework ตอนที่ 13
https://www.ninenik.com/content.php?arti_id=567 via @ninenik
มาดูรูปแบบการใช้งาน ion-tab
1 2 3 4 5 6 | <ion-tab title="ข้อความแท็บเมนู" icon="ชื่อ icon" href="#/ลิ้งค์"></ion-tab> |
Attribute ของ ion-tab และคำอธิบาย
title
(จำเป็นต้องมี)
ใช้กำหนดข้อความแท็บเมนู
ตัวอย่าง
1 2 | <ion-tab title="ข้อความแท็บเมนู"> </ion-tab> |
href
ใช้กำหนดลิ้งค์ไปหน้าอื่น
ตัวอย่าง
1 2 3 4 | <ion-tab title="ข้อความแท็บเมนู"href="#/aboutus"> </ion-tab> |
icon
ใช้กำหนดรูป icon ให้กับแท็บเมนู ถ้ามีการใช้งาน attribute นี้
จะมีผลทำให้ icon-on (รูป icon เมื่อกดเลือกแท็บเมนู) และ icon-off (รูป icon เมื่อไม่ได้เลือก)
จะเป็นค่าเดียวกันกับค่า icon
ตัวอย่าง
1 2 3 4 5 6 | <ion-tab title="ข้อความแท็บเมนู"href="#/aboutus"icon="ion-home"> </ion-tab> |
icon-on และ icon-off
icon-on (รูป icon เมื่อกดเลือกแท็บเมนู) และ icon-off (รูป icon เมื่อไม่ได้เลือกแท็บเมนู)
หากกำหนดสองค่านี้แล้ว เราไม่จำเป็นต้องกำหนด icon แบบแรกก็ได้
ตัวอย่าง
1 2 3 4 5 6 | <ion-tab title="ข้อความแท็บเมนู"href="#/aboutus"icon-on="ion-ios7-filing"icon-off="ion-ios7-filing-outline" > </ion-tab> |
badge
ใช้กำหนดข้อความหรือตัวเลขกำกับในแท็บเมนู ปกติจะกำหนดเป็นตัวเลข
1 2 3 4 5 6 7 | <ion-tab title="ข้อความแท็บเมนู"href="#/aboutus"badge="50"icon-on="ion-ios7-filing"icon-off="ion-ios7-filing-outline" > </ion-tab> |
รูปภาพประกอบ
badge-style
ใช้กำหนดรูปแบบของ badge โดยจะใช้พร้อมกัน ค่าที่กำหนดจะอยู่ในรูปแบบ
badge-{ชื่อสีใน ionic} เช่น badge-dark , badge-positive เป็นต้น
ตัวอย่าง
1 2 3 4 5 6 7 8 | <ion-tab title="ข้อความแท็บเมนู"href="#/aboutus"badge="50"badge-style="badge-dark"icon-on="ion-ios7-filing"icon-off="ion-ios7-filing-outline" > </ion-tab> |
รูปภาพประกอบ
on-select
สำหรับเรียกใช้งานฟังก์ชั่น เมื่อเลือกที่แท็บเมนูนั้นๆ
ตัวอย่าง
1 2 3 4 5 6 7 | <ion-tab title="ข้อความแท็บเมนู"href="#/aboutus"on-select="do_something()"icon-on="ion-ios7-filing"icon-off="ion-ios7-filing-outline" > </ion-tab> |
on-deselect
สำหรับเรียกใช้งานฟังก์ชั่น เมื่อไม่ได้เลือกแท็บเมนูนั้นๆ โดยต้องเป็นแท็บเมนูที่เลือก
อยู่ ณ ขณะปัจจุบัน และมีการไปกดเลือกแท็บเมนูอื่น จึงจะทำงานในส่วนนี้
ตัวอย่าง
1 2 3 4 5 6 7 8 | <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 แทน
ตัวอย่าง
1 2 3 4 5 6 7 | <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
1 2 3 4 5 6 7 | .controller("welcomeCtrl",function($scope,$ionicTabsDelegate){ $scope.showtab = function(tabID){ $ionicTabsDelegate.select(tabID); }}) |
selectedIndex()
ใช้สำหรับดึงค่า index ของแท็บเมนูที่คลิกเลือก ค่าเริ่มต้นนับที่เลข 0
หากไม่มีค่าใดๆ จะคืนค่ามาเป็น -1
ตัวอย่างการใช้งานใน controller
1 2 3 4 5 6 7 | .controller("welcomeCtrl",function($scope,$ionicTabsDelegate){ $scope.showtab = function(tabID){ console.log($ionicTabsDelegate.selectedIndex()); }}) |
$getByHandle(handle)
ใช้สำหรับกรณี เรามีการอ้างอิงชื่อการใช้งานแท็บเมนู อย่างกรณีที่
มีแท็บแมนูสองอัน และมีการกำหนด delegate-handle ใน ion-tabs
เช่น
1 2 3 4 5 6 7 8 9 10 11 12 13 | <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 ก็จะได้เป็น
1 2 3 4 5 6 7 | .controller("welcomeCtrl",function($scope,$ionicTabsDelegate){ $scope.showtab = function(tabID){ $ionicTabsDelegate.$getByHandle('myhandleTab').select(tabID); }}) |
จบเกี่ยวกับการใช้งาน tabs ใน ionicframwork ^_^
