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

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

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

ดูแล้ว 8,222 ครั้ง


เนื้อหาตอนนี้จะเป็นการอธิบายการใช้งานจากตอนที่แล้ว
เพื่อให้เกิดความเข้าใจมากขึ้น
 
ดูเนื้อหาตอนที่แล้ว
การใช้งาน 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) ขอบคุณครับ