PHP Ionic Angular Phonegap AJAX Javascript CSS MySQL jQuery Forum


การใช้งาน tabs ใน ionicframework ตอนที่ 13

20 October 2014 By
ionicframework

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



tabs ใน ionicframework เราสามารถเลือกใช้งานได้จาก 2 วิธีคือ 
การใช้ ion-tabs และ การใช้ css class
 
โดยเนื้อหาที่อธิบายจากอ้างอิงจากสองลิ้งค์นี้
http://ionicframework.com/docs/api/directive/ionTabs/
http://ionicframework.com/docs/components/#tabs
 
โค้ดตัวอย่างและไฟล์ที่เกี่ยวข้อง จะขอใช้งานจากบทความก่อนหน้า ดูได้ที่
 
การใช้งาน ionicmodal ใน ionicframework ตอนที่ 10 
http://www.ninenik.com/content.php?arti_id=560 via @ninenik
 
 
 
 การใช้งาน tabs แบบที่ 1 ด้วย ion-tabs 
 
iontabs นั้นเราจะใช้งาน โดยแบ่งหน้าที่จะแสดงออกเป็นแท็บเมนู เช่น เรามีไฟล์
welcome.html 1 ไฟล์ ต้องการแสดงแบบมีแท็บเมนู และเนื้อหาในไฟล์ welcome.html
 
เราจะใช้โค้ดเบื้องต้น ของ ion-tabs ดังนี้
 
ไฟล์ welcome.html วาโครงสำหรับใช้ tabs
 
<ion-tabs class="tabs-assertive 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>
 
จากนั้น ในส่วจของ tab 1 content หรือเนื้อหาของแท็บ เราก็ใส่โค้ดหน้า
app ปกติที่เราใช้งานลงไปซึ่งประกอบไปด้วย header และ content ก็จะได้
 
หมายเหตุ: ห้ามนำ ion-tabs ไปวางไว้ด้านในของ ion-content เพราะจะทำ
ให้การแสดงผลผิดพลาดได้
 
โค้ดไฟล์ welcome.html เบื้องต้นดังนี้
 
<ion-tabs class="tabs-assertive tabs-icon-only">

  <ion-tab title="Home" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline">
    <!-- Tab 1 content -->
    
<ion-header-bar class="bar bar-header bar-assertive">  
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>  
<h1 class="title">My Ionic</h1>  
</ion-header-bar>  
<!--            กำหนด class ให้กับ ion-content กรณี มี header-->  
<ion-content  class="scroll-content ionic-scroll  has-header">  

  
<div class="list card">

  <div class="item item-body">
   <h2>Welcome</h2>
    <p>
    This is welcome.html template
      <br>
      <br>
      <br>

    </p>
  </div>

</div>            
    
</ion-content>       
    
  </ion-tab>

  <ion-tab title="About"  icon-on="ion-ios7-clock" icon-off="ion-ios7-clock-outline">
    <!-- Tab 2 content -->
    content tab 2
  </ion-tab>

  <ion-tab title="Settings" icon-on="ion-ios7-gear" icon-off="ion-ios7-gear-outline">
    <!-- Tab 3 content -->
  content tab 3
  </ion-tab>

</ion-tabs>
 
ดูตัวอย่าง
 
 
จะสังเกตเห็นว่า การใช้แท็บเมนูลักษณะนี้ จะเป็นการโหลดข้อมูลเข้ามาครั้งแรกพร้อมกัน และ
ข้อมูลในแต่ละแท็บเมนู จะใช้ $scope เดียวกัน 
ข้อจำกัดคือเวลาใช้งาน จะต้องไปกำหนดทุกครั้งที่ต้องการใช้ หาก app ของเราต้อง
การให้มีแท็บเมนูทุกหน้า รวมทั้งมีความยืดหยุ่นน้อยกว่าการใช้งานในรูปแบบ css
 
การปรับแต่งการใช้าน ion-tabs สามารถทำได้โดยการใช้ css class ดังนี้
 
กำหนดสี 
tabs-{ชื่อสีของ ionic} เช่น tabs-positive 
 
ให้แสดงเฉพาะ icon ไม่แสดงข้อควม 
tabs-icon-only
 
ให้แสดง icon และข้อความ โดยให้ icon อยู่ด้านบนของข้อความ
tabs-icon-top
 
ให้แสดง icon และข้อความ โดยให้ icon อยู่ด้านซ้ายของข้อความ
tabs-icon-left
 
การกำหนดให้มีแถบคาดแท็บเมนู ที่กำลังใช้งานอยู่ หรือ active อยู่
tabs-striped
 
กำหนดสีพื้นหลังให้กับแท็บเมนู จะใช้คู่กับ tabs-striped
tabs-background-{ชื่อสีของ ionic}  เช่น tabs-background-assertive 
 
กำหนดสี จะใช้คู่กับ tabs-striped 
tabs-color-{ชื่อสีของ ionic} เช่น tabs-color-balanced
 
ตัวอย่างการกำหนดและรูปประกอบ
 
<ion-tabs class="tabs-assertive ">  
 
ionic13-1
 
 
<ion-tabs class="tabs-assertive tabs-icon-left">  
 
ionic13-2
 
<ion-tabs class="tabs-assertive tabs-icon-top">  
 
ionic13-3
 
<ion-tabs class="tabs-striped tabs-top tabs-icon-top tabs-background-assertive tabs-stable"> 
 
ionic13-4
 
<ion-tabs class="tabs-striped tabs-icon-only tabs-background-assertive tabs-color-dark">
 
ionic13-5
 
 
 
 
การใช้งาน tabs แบบที่ 2 ด้วย css class
 
การใช้งาน และการกำหนด tabs แบบ css class ก็จะใช้รูปแบบตามที่อธิบายด้านบน
แต่จะไม่ได้มีการเรียกใช้งาน ion-tabs จะใช้แท็ก html ปกติเช่น div กำหนดราย
ละเอียดต่างของ tabs และจัดรูปแบบด้วย css class  การแสดงข้อมูลจะใช้เป็นแบบ
ลิ้งค์ไปที่ไฟล์ หรือเรียกใช้ฟังก์ชั่น ng-click เพื่อทำงาน ต่างจาก ion-tabs ที่จะใช้
วิธีแสดงเนื้อหาแท็บเมนู ที่ถูกซ่อนไว้
 
รูปแบบแท็บเมนู ที่กำหนด้วย css class อย่างง่าย
 
   <div class="tabs">
    <a href="#/" class="tab-item">
        <i class="icon ion-home"></i>
        Home
    </a>
    <a href="#/aboutus" class="tab-item">
        <i class="icon ion-ios7-clock"></i>
        About us
    </a>
    <a href="#/contactus" class="tab-item" >
        <i class="icon ion-star"></i>
        Contact us
    </a>
    </div>
 
กรณีที่ต้องการใช้งาน  tabs-striped เราจะต้องเพิ่ม div เข้าไปอีกขึ้นจะได้เป็น
 
 <div class="tabs-striped tabs-background-dark tabs-color-assertive">
    <div class="tabs">
        <a class="tab-item active" href="#/">
            <i class="icon ion-home"></i>
            Home
        </a>
        <a class="tab-item" href="#/aboutus">
            <i class="icon ion-ios7-clock"></i>
            About us
        </a>
        <a class="tab-item" href="#/contactus">
            <i class="icon ion-star"></i>
            Contact us
        </a>   
    </div>
</div>
 
 
ตัวอย่างโค้ดการใช้งานในหน้า aboutus.html
 
<ion-header-bar class="bar bar-header bar-assertive">  
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>  
<h1 class="title">About Us</h1>  
<a nav-clear href="#/" class="button button-icon icon ion-home"></a>
</ion-header-bar>  
<!--            กำหนด class ให้กับ ion-content กรณี มี header-->  
<ion-content  class="scroll-content ionic-scroll  has-header">  

<div class="list card">

  <div class="item item-body">
   <h2>About Us</h2>
    <p>
      This is aboutus.html template
    </p>
  </div>

</div>   
    
</ion-content>   
<div class="tabs tabs-assertive ">
<a href="#/" class="tab-item">
    <i class="icon ion-home"></i>
    Home
</a>
<a href="#/aboutus" class="tab-item">
    <i class="icon ion-ios7-clock"></i>
    About us
</a>
<a href="#/contactus" class="tab-item" >
    <i class="icon ion-star"></i>
    Contact us
</a>
</div>
 
การจัดวาง จะต่างจากการใช้งาน ion-tabs โดยจะวางไว้ด้านนอกของ 
ion-content
การใช้งาน แบบ css class เราจำเป็นต้องกำหนดค่าต่างๆ เองเช่น
กำหนดลักษณะของแท็บเมนูที่ active กรณีใช้งานใน ion-view
 
ตัวอย่าง
 
 
 
มาดูรูปแบบการใช้งาน tabs แบบ css class แบบกำหนดให้ใช้กับทุกๆหน้า 
 
 
โค้ดการจัดวางคู่กับการใช้งาน side menu และ ion-view ไฟล์ index.html
 
<!DOCTYPE html>
<html ng-app="myIonicApp"> 
    <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 Ionic 3</title>
    </head>
    <body ng-controller="myIonicHome">
  
 
      <ion-side-menus>  
        <!-- Center content -->  
        <ion-side-menu-content>  
               
            <ion-nav-bar class="bar bar-header bar-assertive">
              <ion-nav-back-button class="button-clear">
                <i class="ion-arrow-left-c"></i> Back
              </ion-nav-back-button>                     
            </ion-nav-bar>             
            <ion-nav-view animation="slide-left-right">

            </ion-nav-view>
            
         <div class="tabs tabs-energized tabs-icon-top">
        <a nav-clear href="#/" class="tab-item">
            <i class="icon ion-home"></i>
            Home
        </a>
        <a nav-clear href="#/aboutus" class="tab-item">
            <i class="icon ion-ios7-clock"></i>
            About us
        </a>
        <a nav-clear href="#/contactus" class="tab-item" >
            <i class="icon ion-star"></i>
            Contact us
        </a>
        </div>     
               
        </ion-side-menu-content>  
  
        <!-- Left menu -->  
        <ion-side-menu side="left">  
            <ion-header-bar class="bar bar-header bar-assertive">  
                <h1 class="title">Menu</h1>  
            </ion-header-bar>  
            <ion-content>  

            <div class="list">
                <a nav-clear nav-clear menu-close class="item item-icon-left" href="#/">
                    <i class="icon ion-home"></i>
                    Home
                </a>
                <a nav-clear menu-close class="item item-icon-left" href="#/aboutus">
                    <i class="icon ion-at"></i>
                    About Us
                </a>
                <a nav-clear menu-close class="item item-icon-left item-icon-right" href="#/contactus">
                    <i class="icon ion-email"></i>
                    Contact Us
                    <i class="icon ion-ios7-telephone-outline"></i>
                </a>
            </div>              
                                                      
            </ion-content>  
        </ion-side-menu>  
  
    </ion-side-menus>  
   
    </body>
</html>
 
 
 
เนื้อหาเกี่ยวกับการใช้งาน tabs จะมีเพิ่มเติมในบทความต่อไป








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



Tags:: ionicframework




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

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


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



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


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