(腦爸打 - 網頁設計專家設計師專欄文章) jQuery Mobile Navigation Bars 手機應用程式 清晰頁面關係配置 | 香港設計師網 Hong Kong Designer - 最強的設計師O2O平台

jQuery Mobile Navigation Bars 手機應用程式 清晰頁面關係配置

腦爸打 - 網頁設計專家 設計師專欄文章: jQuery Mobile Navigation Bars 手機應用程式 清晰頁面關係配置

腦爸打 - 網頁設計專家 設計師專欄文章: jQuery Mobile Navigation Bars 手機應用程式 清晰頁面關係配置

手機應用程式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" 就清楚得多了!

設計師價錢報價
  • 2022-08-13 20:01:49
  • 1

  • 香港設計師網-設計師登記
  • 香港設計師網-尋找設計師
  • 香港設計師網-設計師排行榜
  • 香港設計師網-設計師紀錄
  • 「香港設計師網」@上門攝影課程
  • 香港設計師網廣告查詢、推介優質香港好設計師