การใช้งาน navigation ใน ionicframework ตอนที่ 5

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

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

ดูแล้ว 7,879 ครั้ง


เนื้อหาตอนนี้จะเป็นการอธิบายการใช้งานจากตอนที่แล้ว
เพื่อให้เกิดความเข้าใจมากขึ้น
 
ดูเนื้อหาตอนที่แล้ว
การใช้งาน template ใน ionicframework ตอนที่ 4 
 
ขอรวบรัดเนื้อหา เนื่องจากเป็นรายละเอียดกล่าวซ้ำต่อเนื่อง
 
มาดูโค้ดหน้าหลัก index.html แบบย่อ
 
    <body ng-controller="myIonicHome">  
            
            <ion-nav-bar class="bar bar-header bar-assertive">  
            </ion-nav-bar>               
            <ion-nav-view animation="slide-in-up">  
  
            </ion-nav-view>  
    
    </body>
 
โค้ดด้านบน เป็นกำหนดให้หน้า app ของเรา .ใช้งาน
แบบเรียกหน้า app อื่นๆ มาแสดง ใน ion-nav-view 
 
เช่น จากตัวอย่างก่อนหน้า เมื่อคลิกที่หน้า about us ก็จะไปดึงข้อมูล
ในไฟล์ template ชื่อ aboutus.html มาแสดงใน ion-nav-view 
 
<ion-nav-bar></ion-nav-bar>
<ion-nav-view animation="slide-left-right">
  <!-- Center content -->
</ion-nav-view>

 
ดังนั้นให้เข้าใจดังนี้
ion-nav-view ส่วนสำหรับแสดง template
ion-nav-bar  ส่วนสำหรับแสดง header ของ template
 
ทีนี่มาดูไฟล์ template
ตัวอย่างไฟล์ template aboutus.html
 
<ion-view title="About Us">
<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>  
</ion-nav-buttons>
<ion-nav-buttons side="right">
<a nav-clear href="#/" class="button button-icon icon ion-home"></a>    
</ion-nav-buttons>

<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>   
</ion-view>
 
ในไฟล์ template เรามารู้จักส่วนใช้งาน navigation เพิ่มเติม ดังนี้
ion-view
ion-nav-buttons
nav-clear
 
ion-view 
เราจะใช้ในหน้าไฟล์ template  อย่างโค้ดด้านบน
<ion-view title="About Us"> จะมี title ที่จะไปแสดงในส่วนของ
header ใน ion-nav-bar นั่นหมายความว่า เมื่อมีการโหลด template ไฟล์นี้
ส่วนของ title หรือ หัวเรื่อง ก็จะเป็นค่า ตามการ กำหนด title ใน ion-view 
 
ion-nav-buttons 
ส่วนนี้ใช้สำหรับกำหนดปุ่มเมนูด้านบน ใน header กำหนดว่าให้อยู่
ด้านซ้าย หรือขวาด้วยรูปแบบ 
ion-nav-buttons side="left" 
ion-nav-buttons side="right"
 
<ion-nav-buttons side="left">
<!-- ใส่รูปแบบปุ่มเมนูในส่วนนี้ -->
</ion-nav-buttons>
 
ตัวอย่าง รูปแบบปุ่มเมนู
 
<!--ปุ่ม สำหรับแสดงเมนูด้านซ้าย-->
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>  
<!--หรือ ลิ้งค์ปุ่ม สำหรับไปหน้าหลัก -->
<a nav-clear href="#/" class="button button-icon icon ion-home"></a>     
 
nav-clear
ค่า attribute directive นี้ ใช้สำหรับกำหนดในลิ้งค์ หรือ ปุ่มเมนู 
<a href> หรือ <button ui-sref> เพื่อให้ทำการปิดการแสดง การเคลื่อนไหว ที่เกิดขึ้นระหว่าง
การเปลี่ยนหน้า views ต่างๆ  เช่น 
 
<a nav-clear href="#/" class="button button-icon icon ion-home"></a>   
 
กลับไปหน้าหลักโดยไม่ต้องแสดง animation การเปลี่ยนหน้า view แบบนี้เป็นต้น
 
 
มาดู directive ตัวสุดท้าย ตัวนี้ ไม่มีในโค้ดตัวอย่างบทความก่อนหน้า
แต่ขออธิบาย พร้อมยกตัวอย่างประกอบ
ion-nav-back-button 
 
รูปแบบที่ใช้

<ion-nav-bar>
  <ion-nav-back-button class="button-clear">
    <i class="ion-arrow-left-c"></i> Back
  </ion-nav-back-button>
</ion-nav-bar>
 
ion-nav-back-button  นี้จะใช้ที่ไฟล์ หลัก แทรกไว้ใน ion-nav-bar 
เป็นปุ่มสำหรับ กลับมาหน้า ก่อนหน้า เมื่อเรามีการย้ายไปหน้าอื่น โดยเราไม่ต้องไปสร้างปุ่ม
ในหน้า template เองในทุกๆ template 
แต่ ปุ่มนี้ จะไม่แสดงถ้า ลิ้งค์ที่กำหนด มีการใช้งาน nav-clear
 
เช่น 
 
<a  nav-clear menu-close class="item item-icon-left" href="#/aboutus">
<i class="icon ion-at"></i>
About Us
</a>
 
เมื่อเรากดปุ่มด้านบน เพื่อไปหน้า aboutus เมนู back ตรงมุมบนซ้ายจะไม่แสดงในหน้า
about us
 
ถ้าต้องการให้แสดง ต้องตัด nav-clear ออก
 
<a  menu-close class="item item-icon-left" href="#/aboutus">
<i class="icon ion-at"></i>
About Us
</a>
 
มาดูตัวอย่างประกอบ ให้กดเมู bar ด้านบนซ้าย แล้วเลื่อกไปที่หน้า about us
จะแสดง ปุ่ม back 

 
โค้ดไฟล์ index.html แบบย่อ
 
            <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>
 
ปุ่มลิ้งค์ ไปหน้า aboutus ใน side menu ด้านซ้าย
 
<a  menu-close class="item item-icon-left" href="#/aboutus">
<i class="icon ion-at"></i>
About Us
</a>
 
 
ไฟล์ aboutus.html ที่ไม่มีเมนูมุมบนซ้าย
 
<ion-view title="About Us">
<ion-nav-buttons side="right">
<a nav-clear href="#/" class="button button-icon icon ion-home"></a>    
</ion-nav-buttons>

<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>   
</ion-view>
 
 
ก่อนจบ ขอเพิ่มเติม ในส่วนของ
$ionicNavBarDelegate 
 
$ionicNavBarDelegate นี้เป็นส่วนหนึ่งของการใช้งาน navigation 
เป็น service ที่ ionic สร้างขึ้น สำหรับใช้งานกับ controller 
มีการรวบรวม method ต่างๆ เพื่อจัดการกับ navigation เช่น ion-nav-view
 ion-nav-bar ion-nav-buttons จะอธิบายเมื่อมีการใช้งานเท่านั้น
 
ดูคู่มือและคำสั่งการใช้งานได้ที่ 
 
 
 


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







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



Tags:: navigation ionic







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





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

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


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


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







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