2012-05-25 5 views
6

ich ein split view mit dem JQuery mobile Phone gapiPhone JQuery: Wie man eine geteilte Ansicht in iPad mit JQuery + Mobile Telefon Lücke in iPhone implementieren

Beispielcode inindex.html umzusetzen versucht hatte,

<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> 

Aber es zeigt beide Blick auf derselben Seite eins nach dem anderen von oben nach unten unten

enter image description here

wie gezeigt Ich brauche zwei Tabellen split vieweine in der linken Seite (root view) und andere in der rechten Seite (details view)

Wie ist es möglich, jQuery zu verwenden? Vielen Dank im Voraus

+0

Was in Ihrem CSS zu implementieren? – Grumpy

Antwort

1

Sie können http://jeromeetienne.github.com/jquery-mobile-960/ verwenden und teilen Sie es mit diesem Grids.

Wenn Sie 960.gs oder ein anderes CSS-Grid-Framework kennen, wird es sehr einfach für Sie sein. Es gibt eine Demo der Nutzung auf der erwähnten Seite.

+0

Dies ist ein GitHub-Projekt, das in 3 Jahren nicht aktualisiert wurde. Die Dokumentation scheint sehr gut zu sein und die Hauptseite dient als Beispiel dafür, wie es funktioniert. Auf der anderen Seite scheint es ein bisschen übertrieben, wenn Sie nur den iPod-Bildschirm in zwei Hälften teilen wollen. Schließlich gibt es einen fünf Monate alten Kommentar, der immer noch unbeantwortet ist und fragt, ob er aktualisiert wird, um die neuesten Versionen von jQuery zu unterstützen. Ich sage "Nein!" – samwyse

1

Versuchen Sie mit meiner multiview plugin.

Es ermöglicht 1/2/3 Panels Seite an Seite plus Popover-Panels in Jquery Mobile. Ich habe es nicht mit PhoneGap versucht (gerade fertig für JQM 1.1), also wenn Sie es versuchen, lassen Sie mich bitte wissen, wenn es funktioniert (es sollte ich denke).

Bitte verwenden Sie die Version 1.1 und die JQM 1.1.multiview, die ein paar Verbesserungen benötigt, um zu arbeiten.

Ich mache derzeit die neue README und Beispielseite. Sollte in ein paar Tagen auf sein.

+0

genial - funktioniert wie ein Charme. danke für das Teilen. – dirkk0

+0

Dies ist ein GitHub-Projekt, das in 2 Jahren nicht aktualisiert wurde, noch keine README-Datei oder andere Dokumentation, die ich sehen kann, und immer noch keine Zeiger auf eine Beispiel-Website. Ich sage "Nein!" – samwyse

+0

Wenn Sie sich die Zeit zur Verfügung stellen können, zögern Sie nicht, zu verzweigen, zu aktualisieren und zu pflegen, denn ich kann derzeit nicht ... – frequent

Verwandte Themen