在jQuery Mobile中更改方向變化的網格數量

我正在嘗試更改方向上的網格數量是從2到3個網格的風景如何實現這一目標？在jQuery Mobile中更改方向變化的網格數量

2013-03-17 Bipin Chandra Tripathi

你解決了這個問題。 – Aravin 2014-02-24 05:50:58

您可以根據需要顯示三個網格，並添加addClass（'hidden'）或removeClass（'hidden'），並將display：none分配給隱藏在CSS中的類。

2013-03-17 12:15:46 Tim

第一件事，第一，我們不能使用window.orientation明確地認識肖像或景觀方向，因爲每個設備會產生不同的結果。閱讀更多關於它在這裏：http://www.matthewgifford.com/2011/12/22/a-misconception-about-window-orientation/

所以，要實現這一點，我們需要使用經典的方向檢測功能。如果窗口高度大於窗口寬度，我們有一幅肖像，或者在其他任何情況下，我們都有橫向。

我讓你成爲你的問題的工作示例。不幸的是，我不能創建一個jsFiddle例子，因爲它不會檢測到orientationchange事件。要測試下面的代碼，只需將其複製到一個空的html文件中即可。

HTML：

<!DOCTYPE html> 
<html> 
<head> 
    <title>jQM Complex Demo</title> 
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> 
    <style> 
     .ui-block-a { 
      background: red; 
     } 

     .ui-block-b { 
      background: green;  
     } 

     .ui-block-c { 
      background: blue;  
     } 
    </style> 
    <script type="text/javascript" src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script> 
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> 
    <script>  

     $(document).on('pagebeforeshow', '#index', function(){  
      detectOrientationMode(); 
     }); 

     $(window).bind('orientationchange', function() { 
      detectOrientationMode(); 
     });  

     function detectOrientationMode() { 
      if($(window).height() > $(window).width()) { 
       $('#custom-grid .ui-block-c').css('display','none');    
       $('#custom-grid').removeClass('ui-grid-b').addClass('ui-grid-a'); 
      } else { 
       $('#custom-grid .ui-block-c').css('display','block');   
       $('#custom-grid').removeClass('ui-grid-a').addClass('ui-grid-b'); 
      } 
     } 
    </script> 
</head> 
<body> 
    <div data-role="page" id="index"> 
     <div data-theme="a" data-role="header"> 
      <h3> 
       First Page 
      </h3> 
     </div> 

     <div data-role="content"> 
      <div class="ui-grid-a" id="custom-grid"> 
       <div class="ui-block-a">Block A</div> 
       <div class="ui-block-b">Block B</div> 
       <div class="ui-block-c">Block C</div> 
      </div><!-- /grid-b --> 
     </div> 

     <div data-theme="a" data-role="footer" data-position="fixed"> 

     </div> 
    </div> 
</body> 
</html>

來源

2013-03-17 18:24:52 Gajotres

你的答案似乎不錯，但我需要在下一行的「ui-block-c」不隱藏。這個怎麼做。 – Aravin 2014-02-24 06:11:06

我有同樣的問題，如果沒有更好的建議，我只是找到了一個解決辦法：

我只是使用jQuery Mobile的方向變化檢測到2個不同的div之間切換（數據角色頁面）複製我的內容與不同的佈局。

來源

2013-11-30 07:05:21 ArchyFred

在jQuery Mobile中更改方向變化的網格數量

回答

相關問題