เนื้อหาตอนนี้จะเป็นการอธิบายการใช้งานจากตอนที่แล้ว
เพื่อให้เกิดความเข้าใจมากขึ้น
ดูเนื้อหาตอนที่แล้ว
การใช้งาน template ใน ionicframework ตอนที่ 4
https://www.ninenik.com/content.php?arti_id=539 via @ninenik
ขอรวบรัดเนื้อหา เนื่องจากเป็นรายละเอียดกล่าวซ้ำต่อเนื่อง
มาดูโค้ดหน้าหลัก 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 จะอธิบายเมื่อมีการใช้งานเท่านั้น
ดูคู่มือและคำสั่งการใช้งานได้ที่
เนื้อหาที่เกี่ยวข้อง