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