2012-05-25 57 views
6

我曾試圖用JQuery mobile Phone gapiPhone JQuery的:如何實現在iPad上使用jQuery移動+在iPhone手機的差距

示例代碼來實現split viewindex.html拆分視圖

<head> 
     <link rel="stylesheet" href="inc/jquery.mobile.structure-1.0.1.min.css" /> 
     <link rel="stylesheet" href="inc/jquery.mobile-1.0.1.min.css" /> 
     <link rel="stylesheet" href="inc/resources/css/jquery.toastmessage.css" /> 

     <script type="text/javascript" src="inc/jquery-1.7.1.min.js"></script> 
     <script type="text/javascript" src="inc/jquery.mobile-1.0.1.min.js"></script> 

     <script type="text/javascript" src="inc/phonegap-1.2.0.js"></script> 
    </head> 

    <body> 

     <div data-role="page" data-theme="c"> 
      <div data-role="header"> 
       Mpbile Split View 
      </div> 

      <div data-role="content"> 

       <!--- Left side view------> 
       <div class="left-content"> 
        <h3>lef hand content</h3> 
        <ul data-role="listview"> 
         <li>One</li> 
         <li>One</li> 
         <li>One</li> 
         <li>One</li> 
        </ul> 
       </div> 

       <!--- Right side view------> 
       <div class="right-content"> 
        <h3>Right hand content</h3> 
        <ul data-role="listview"> 
         <li>Two</li> 
         <li>Two</li> 
         <li>Two</li> 
         <li>Two</li> 
        </ul> 
       </div> 
      </div> 
     </div> 


    </body> 
</html> 

但它示出了由一個從上到下一個同一頁上兩個視圖所示波紋管

enter image description here

我需要在左側(root view兩個表split view一個)和其他在右側details view

如何使用jQuery?在此先感謝

+0

什麼在你的CSS? – Grumpy

回答

1

您可以使用http://jeromeetienne.github.com/jquery-mobile-960/並將其與網格分開。

如果您知道960.gs或任何其他的CSS網格框架,它將是非常容易的。有提到的網站的使用演示。

+0

這是一個未在3年內更新的GitHub項目。文檔看起來非常好,主頁是其工作原理的一個例子。另一方面,如果你只想把iPod屏幕分成兩半,似乎有點矯枉過正。最後,還有一個五個月的評論,仍然沒有答案,詢問它是否會更新以支持最新版本的jQuery。我說「不!」 – samwyse

1

嘗試使用我的multiview plugin

它允許Jquery Mobile中的1/2/3面板並排加彈出面板。我還沒有用PhoneGap(僅僅爲JQM 1.1完成)嘗試它,所以如果你試試看,請告訴我它是否有效(應該是我猜)。

請使用1.1版本和JQM 1.1.multiview,需要一些調整才能正常工作。

我正在做新的自述文件和示例站點。應該在幾天內上來。

+0

真棒 - 作品像魅力。感謝分享。 – dirkk0

+0

這是一個GitHub項目,在2年內沒有更新,仍然沒有README文件,也沒有任何其他文檔可以看到,但仍然沒有指向示例站點的指針。我說「不!「 – samwyse

+0

如果您有足夠的時間提供上述任何服務,請隨時分叉,更新和維護,因爲我目前無法...... – frequent

相關問題