iT邦幫忙

DAY 25
1

學習手機網站開發系列 第 22

JQuery Mobile頁尾狀態續存-Day 25

同時使用Navbars和續存頁尾時,讓Navbars可以維護所選狀態。
同時使用Navbars和續存頁尾時,讓Navbars可以維護所選狀態,通常在頁面轉換時頁面會隨切換而變動消失再出現,如果我們使用了頁尾續存的方法,讓別的頁面可以使用相同的頁尾狀況下,設定讓Navbars可以更新所選狀態,維護點選的Navbars。
作法:
→(續存頁尾)為footer標籤定義data-id:任何頁面只要有相同data-id就會保留之前的footer不會更新
→在點選的頁面上加入兩個類別ui-btn-active、ui-state-persist:因續存頁尾為維護所選狀態,因此要套用兩個類別來做維護。
Home頁面的footer

<div data-role="footer" data-id="main" data-position="fixed">
  <div data-role="navbar">
	<ul>
	  <li><a data-icon="home" class="ui-btn-active ui-state-persist" >Home</a></li>
	  <li><a href="#Help" data-icon="alert">Help</a></li>
	</ul>
	</div>
</div>

Help頁面的footer

<div data-role="footer" data-id="main" data-position="fixed">
  <div data-role="navbar">
	<ul>
	  <li><a href="#Home" data-icon="home">Home</a></li>
	  <li><a data-icon="alert" class="ui-btn-active ui-state-persist">Help</a></li>
	</ul>
  </div>
</div>

※續存頁尾

※維護Navbars狀態,Help頁面時則選取help

以上小小分享,有任何問題還請多多指教。謝謝謝謝謝謝


上一篇
Responsive Mobile Menu製作-Day 24
下一篇
JQuery Mobile清單劃分兩層文字欄位-Day 26
系列文
學習手機網站開發27

1 則留言

0
martyshu
iT邦研究生 1 級 ‧ 2013-10-18 11:14:16

如果你的展示可以透過實際操作例子來體現,會更方便看你文章的人
你可以用jsfidder , codepen 這類的工具,或是我們這個特別對JQM加強拖拉的工具,附上連結就可以讓人試玩 ^^,應該會更容易討論,像下面連結
http://jqmdesigner.appspot.com/designer.html#id=5764640680181760

ramya iT邦新手 4 級‧ 2013-10-21 01:16:55 檢舉

收到~下次會改進的。讚

我要留言

立即登入留言