JQuerymobile - Blocks and Splitscreen for iPad

Question

We are working with the jQuery Mobile framework for the graphical interface of our HTML5-based iPad application. Since we are creating an iPad application, we essentially need a typical split screen, for example, on an ipad: a narrow sidebar on the left side and the main content with right side:

Now my question is: I am looking for code to create this split screen , and I have not found anything for this in the jquerymobile documentation. I missed it or didn’t understand ?? If the code for splitscreen does not exist on this website, where can I find something related?

Since I did not find anything related to what I needed, I tried another way to get this splitscreen. Therefore, I worked with blocks in css style sheets:

for explanation: in the jQuerymobile documentation, I found a category called "content formatting" (table) "Table (table)" ( http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/docs/content/content -grids.html ) So I thought about creating two blocks to create a broken screen. BUT I don't need a broken screen with 50/50, but much more than 20/80 or 30/70. I tried changing it in 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 anyone know what I did wrong? How to resize blocks? Is this the right thing to do? Thanks in advance.

Answer 1

Use the jQuery Mobile Grid Layout and simply redefine the “width” to “ui-block-a” and “ui-block-b” to split the screen according to your needs.

to demonstrate a demo page of a sample of this blog http://mdshannan1.blogspot.com/2011/08/jquery-mobile-split-screen-20-80-hack.html

Answer 2

If you are viewing the source on the jQM Demos page, you can see that they have added div tags with class = "content-secondary". This is used for the sidebar on the tablet tablet. It will also add up if you view the same page on a mobile device with a smaller screen and 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>