文章發佈日期: 2022-08-08
小知識教學類型: 手機應用程式開發
手機應用程式Apps與網頁程式一樣，都有著頁面中有著頁面的架構，當一個頁面跳到另一個頁面，再由新頁面跳向再新一個頁面，或從後置頁面往前推返回前面等等，jQuery Mobile Navigation Bars 都可以提供到清晰頁面關係的配置。
jQuery Mobile Navigation Bars 通常放置於手機應用程式Apps的頂端Header或尾端Footer，一方面不會阻礙到用戶瀏覽頁面內容，另一方也可提供到清楚資訊讓用戶知道自己身處手機應用程式Apps的何方。
以頂端Header配置 jQuery Mobile Navigation Bars 作為範例:
在 data-role="header" 的div 內再加上 data-role="navbar" ，然後再使用常用的 ul 和 li 列點清單由上而下去列出 jQuery Mobile Navigation Bars 的頁面次序。
為更清晰和簡單易明 jQuery Mobile Navigation Bars 中的頁面次序和內容訊息，jQuery Mobile Navigation Bars 更提供了 data-icon 的選項，可讓 Navigation Bars 中的按鈕加上 icon，例如:
data-icon="home" (主頁)
data-icon="arrow-r" (向右箭咀)
data-icon="search" (搜尋)
jQuery Mobile Navigation Bars 亦提供了 data-iconpos 用作配置和排位 jQuery Mobile Navigation Bars 中的頁面按鈕排位，例如:
data-iconpos="top" 頂部圖標對齊
data-iconpos="right" 右圖標對齊
data-iconpos="bottom" 底部圖標對齊
data-iconpos="left" 左圖標對齊
而在jQuery Mobile Navigation Bars 中的頁面按鈕一連串的排列中，用戶究竟如何知道自己身處那個頁面中，這時相關的頁面按鈕配置上 class="ui-btn-active" 就清楚得多了！
