2013-07-26 76 views
1

我有一個使用jQuery手機的響應式網站。如何在頁面大小上更新我的jQuery Mobile樣式?

在一定的尺寸下,我通過顯示高分辨率標題和隱藏低分辨率標題來換出頁眉和頁腳(從類似於外觀的移動設備移動到更傳統的設計)。

我面臨的問題是JQM的樣式似乎不適用於隱藏的元素,所以當我調整屏幕大小時,樣式都會搞砸。

我想這...

 $(window).on('resize', function() { 
      $.mobile.activePage.trigger('create'); 
     }); 

似乎哪些不要做任何事情。從我所見過的所有示例中提到刷新或觸發特定元素,但我正在尋找更多的頁面範圍,以便我可以正確使用我的媒體查詢。

回答

2

它不會做任何事情,因爲你正在呼籲與不正確的參數觸發。

它應該是:

$(window).on('resize', function() { 
    $.mobile.activePage.trigger('pagecreate'); 
}); 

Create只會增加頁面內容,pagecreate將提高頁面標題,內容和頁腳。

工作例如:http://jsfiddle.net/Gajotres/PMrDn/52/

+0

謝謝 - 這似乎現在部分爲我工作(我還有其他問題) –

0

試着這麼做:

$(window).on('resize', function() 
{ 
    jQuery.mobile.changePage(window.location.href, 
    { 
     allowSamePageTransition: true, 
     transition: 'none', 
     reloadPage: true 
    }); 
}); 
+0

對不起,我錯修改你的答案。 – Gajotres

+0

這對我不起作用 - 我使用jQM和Backbone的奇怪混合,所以我只使用jQM作爲事物的前端。開始重新考慮這一決定。 –

相關問題