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

เขียนเมื่อ 9 ปีก่อน โดย Ninenik Narkdee
ionicframework

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

ดูแล้ว 5,721 ครั้ง


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


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











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





คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )







เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ