jQuerymobile - Blocks & Splitscreen for iPad

Question

We are working with the framework of jQuery Mobile for the graphical interface of our iPad app, based on HTML5. Because we're creating an app for the iPad, we essentially need the typical split-screen like it is on ipad: A narrow sidebar on the left side and the main content on the right side:

Now my question: I'm searching for the code to create this splitted screen and I do not find anything for this in the jquerymobile documentation– Did I miss it or didn't I understand it? If the code for the splitscreen doesn't exist on this website, where can I find something related?

Because I didn't find anything related to what I need, I tried another way to get this splitscreen. So I was working with blocks in the css stylesheets:

for explanation: In jQuerymobile documentation, I found a category with the name "content formatting>layout grid (column)" ( http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/docs/content/content-grids.html) So I thought about creating two blocks for making the splitted screen. BUT I don't need a splitted screen with 50/50, but much more 20/80 or 30/70. I tried to change it into my stylesheet:

.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; } 

the original was:

.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; } 

Does anybody know what I did wrong? How to change the size of the blocks? Is it the right way to do it like this? Thanks alot in advance.

Answer 1

Use JQuery Mobile's Grid Layout and just override "width" on "ui-block-a" and "ui-block-b" to split screen as per your need.

for sample demo page checkout this blog http://mdshannan1.blogspot.com/2011/08/jquery-mobile-split-screen-20-80-hack.html

Answer 2

If you view the source on the jQM Demos page you can see they've added the div tags with the class="content-secondary". This is used for the side bar on a tablet layout. It will also stack if you view the same page on a mobile device with a smaller screen then a tablet.

HTML:

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