如何解決jQuery mobile的header和footer在點擊螢幕的時候消失的問題

這篇文章主要介紹了jQuery mobile的header和footer在點擊螢幕的時候消失的解決辦法，透過給header和footer添加data-position="fixed" 和data-tap-toggle="false"完成此功能，非常不錯，具有參考借鑒價值,需要的朋友可以參考下

jQuery Mobile簡介

jQuery Mobile 是創建行動web 應用程式的框架。

jQuery Mobile 適用於所有流行的智慧型手機和平板電腦。

jQuery Mobile 使用 HTML5 和 CSS3 透過盡可能少的腳本對頁面進行佈局。

為header和footer加上data-position="fixed" 和data-tap-toggle="false"即可，程式碼如下：

<p data-role="footer" data-position="fixed" data-tap-toggle="false">
<p data-role="navbar">
<ul>
<li><a onclick="app.show(&#39;pgJgbfMain&#39;,&#39;pgJgbfXq&#39;)">门店详情</a></li>
<li><a onclick="app.show(&#39;pgTgbf&#39;,&#39;pgJgbfXq&#39;)">备忘登记</a></li>
<li><a onclick="app.show(&#39;pgTgbf&#39;,&#39;pgJgbfXq&#39;)">退货</a></li>
<li><a onclick="app.show(&#39;pgTgbf&#39;,&#39;pgJgbfXq&#39;)">换货</a></li>
</ul>
</p> 
</p>
<!-- footer end -->

PS:jquery mobile取消header和footer點擊隱藏

header 跟footer 上下兩個浮動bar上，預設為true，點擊頁面會消失再點擊會顯示

要取消此功能

方法一：在HTML標籤上加入

<p data-role="header" data-position="fixed" data-tap-toggle="false">
---content
</p>

方法二：在jQeury 加入

#

$("p[data-role=header],p[data-role=footer]").fixedtoolbar({
tapToggle:false
});

##以上就是本文的全部內容，希望對大家的學習有幫助，更多相關內容請關注PHP中文網！

相關推薦：

關於jquery UI Datepicker時間控制項使用方法的解析

關於jQuery外掛Validate實作自訂校驗結果樣式的程式碼

#

以上是如何解決jQuery mobile的header和footer在點擊螢幕的時候消失的問題的詳細內容。更多資訊請關注PHP中文網其他相關文章！