jQuerymobile - Bloques y Splitscreen para iPad

Question

Estamos trabajando con el marco de jQuery Mobile para la interfaz gráfica de nuestra aplicación para iPad, basada en HTML5. Debido a que estamos creando una aplicación para el iPad, que esencialmente necesitamos la pantalla dividida como es típico en IPAD: Una barra lateral estrecha en el lado izquierdo y el contenido principal en el lado derecho:

Ahora mi pregunta: estoy buscando el código para crear esta pantalla dividida y no encuentro nada para esto en la documentación de jquerymobile. ¿Lo extrañé o no lo entendí? Si el código para la pantalla dividida no existe en este sitio web, ¿dónde puedo encontrar algo relacionado?

Porque no encontré nada relacionado con lo que necesito, probé de otra manera para obtener esta pantalla dividida. Así que yo estaba trabajando con bloques en las hojas de estilo CSS:

para la explicación: En la documentación jquery mobile, me encontré con una categoría con el nombre "formato de contenido> cuadrícula de diseño (columna)" (http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/docs/content/content-grids.html) así que pensó en crear dos bloques para hacer la pantalla dividida. PERO no necesito una pantalla dividida con 50/50, pero mucho más 20/80 o 30/70. He intentado cambiar en mi hoja de estilo:

.ui-grid-x { overflow: hidden; } 
.ui-block-x, .ui-block-y { margin: 0; padding: 0; border: 0; float: left; min-height:1px;} 

/* grid a: 20/80 */ 
.ui-grid-x .ui-block-x  { width: 20%; } 
.ui-grid-x .ui-block-y { width: 80%; } 
.ui-grid-x .ui-block-x { clear: left; } 

el original era:

.ui-grid-a, .ui-grid-b, .ui-grid-c, .ui-grid-d { overflow: hidden; } 
.ui-block-a, .ui-block-b, .ui-block-c, .ui-block-d, .ui-block-e { margin: 0; padding: 0; border: 0; float: left; min-height:1px;} 


.ui-grid-a .ui-block-a, .ui-grid-a .ui-block-b { width: 50%; } 
.ui-grid-a .ui-block-a { clear: left; } 

¿Alguien sabe lo que hice mal? ¿Cómo cambiar el tamaño de los bloques? ¿Es la manera correcta de hacerlo así? Muchas gracias de antemano.

Answer 1

usar jQuery Mobile y simplemente anular "ancho" en "ui-bloque-a" y "ui-bloque-B" para dividir la pantalla según su necesidad.

para la página de muestra de demostración pago este blog http://mdshannan1.blogspot.com/2011/08/jquery-mobile-split-screen-20-80-hack.html

Answer 2

Si ve el código fuente en la página Demos de jQM, verá que han agregado las etiquetas de div con la clase = "contenido secundario". Esto se usa para la barra lateral en el diseño de una tableta. También se acumulará si visualiza la misma página en un dispositivo móvil con una pantalla más pequeña que una tableta.

HTML: Diseño de cuadrícula

<div data-role="page" id="jqm-home" class="type-home"> 
    <div data-role="content"> 


     <div class="content-secondary"> 

      <div id="jqm-homeheader"> 
       <h1 id="jqm-logo"><img src="docs/_assets/images/jquery-logo.png" alt="jQuery Mobile Framework" /></h1> 
       <p>A Touch-Optimized Web Framework for Smartphones &amp; Tablets</p> 
       <p id="jqm-version">Beta Release</p> 
      </div> 


      <p class="intro"><strong>Welcome.</strong> Browse the jQuery Mobile components and learn how to make rich, accessible, touch-friendly websites and apps.</p> 

      <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f"> 
       <li data-role="list-divider">Overview</li> 
       <li><a href="docs/about/intro.html">Intro to jQuery Mobile</a></li> 
       <li><a href="docs/about/features.html">Features</a></li> 
       <li><a href="docs/about/accessibility.html">Accessibility</a></li> 
       <li><a href="docs/about/platforms.html">Supported platforms</a></li> 
      </ul> 

     </div><!--/content-primary--> 

     <div class="content-primary"> 
      <nav> 


       <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b"> 
        <li data-role="list-divider">Components</li> 
        <li><a href="docs/pages/index.html">Pages &amp; dialogs</a></li> 
        <li><a href="docs/toolbars/index.html">Toolbars</a></li> 
        <li><a href="docs/buttons/index.html">Buttons</a></li> 
        <li><a href="docs/content/index.html">Content formatting</a></li> 
        <li><a href="docs/forms/index.html">Form elements</a></li> 
        <li><a href="docs/lists/index.html">List views</a></li> 

        <li data-role="list-divider">API</li> 
        <li><a href="docs/api/globalconfig.html">Configuring defaults</a></li> 
        <li><a href="docs/api/events.html">Events</a></li> 
        <li><a href="docs/api/methods.html">Methods &amp; Utilities</a></li> 
        <li><a href="docs/api/mediahelpers.html">Responsive Layout</a></li> 
        <li><a href="docs/api/themes.html">Theme framework</a></li> 


       </ul> 
      </nav> 
     </div> 



    </div> 

    <div data-role="footer" class="footer-docs" data-theme="c"> 
      <p>&copy; 2011 The jQuery Project</p> 
    </div> 

</div>