เนื้อหาตอนนี้จะเป็นการอธิบายการใช้งานจากตอนที่แล้ว
เพื่อให้เกิดความเข้าใจมากขึ้น
ดูเนื้อหาตอนที่แล้ว
การใช้งาน template ใน ionicframework ตอนที่ 4
https://www.ninenik.com/content.php?arti_id=539 via @ninenik
ขอรวบรัดเนื้อหา เนื่องจากเป็นรายละเอียดกล่าวซ้ำต่อเนื่อง
มาดูโค้ดหน้าหลัก index.html แบบย่อ
1 2 3 4 5 6 7 8 9 | <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
1 2 3 4 | <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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <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"
1 2 3 | <ion-nav-buttons side="left"><!-- ใส่รูปแบบปุ่มเมนูในส่วนนี้ --></ion-nav-buttons> |
ตัวอย่าง รูปแบบปุ่มเมนู
1 2 3 4 | <!--ปุ่ม สำหรับแสดงเมนูด้านซ้าย--><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 ต่างๆ เช่น
1 | <a nav-clear href="#/" class="button button-icon icon ion-home"></a> |
กลับไปหน้าหลักโดยไม่ต้องแสดง animation การเปลี่ยนหน้า view แบบนี้เป็นต้น
มาดู directive ตัวสุดท้าย ตัวนี้ ไม่มีในโค้ดตัวอย่างบทความก่อนหน้า
แต่ขออธิบาย พร้อมยกตัวอย่างประกอบ
ion-nav-back-button
รูปแบบที่ใช้
1 2 3 4 5 | <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
เช่น
1 2 3 4 | <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 ออก
1 2 3 4 | <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 แบบย่อ
1 2 3 4 5 6 7 8 | <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 ด้านซ้าย
1 2 3 4 | <a menu-close class="item item-icon-left" href="#/aboutus"><i class="icon ion-at"></i>About Us</a> |
ไฟล์ aboutus.html ที่ไม่มีเมนูมุมบนซ้าย
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <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 จะอธิบายเมื่อมีการใช้งานเท่านั้น
ดูคู่มือและคำสั่งการใช้งานได้ที่
เนื้อหาที่เกี่ยวข้อง