ในการใช้งาน ion-tabs เราจะพบว่ามีการใช้งาน ion-tab ซึ่งเป็นแท็บเมนู
แต่ละรายการ ดังนั้นเนื้อหาในบทความนี้ จะเป็นบทความต่อเนื่องจาก ตอนที่ 13
การใช้งาน tabs ใน ionicframework ตอนที่ 13
https://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>
รูปภาพประกอบ
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>
รูปภาพประกอบ
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 ^_^
