PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

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

20 October 2014 By


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

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

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


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





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