Background
The original jQTouch does not support iPad other than expanding every widget to fill the new space. However, it is still one of the best starting points for an HTML5 mobile application.
BeeDesk is about productivity. Making better use of the extra iPad screen space is important, so we put much effort into making that happen.
Here is a screen shot of the modified main jQTouch example.
Link to demo here (supports iOS devices, Safari or Chrome):
Scope of work
We spent three very long days on the initial work and roughly the same amount of time spread out over the following three weeks fixing bugs such as an animation laying problem that is now fixed.
Changes include:
- CSS
- Adding initialization code to support two "current" panes.
- Rewriting the page history management.
- Adding an HTML marker for "section" to let jQTouch know which section of a pane to display.
- Adding a conditional widget (a widget that shows or hides depending on whether it is in split-view or singular-view mode).
- Adding a new “Toggle” button type (in addition to <a> and <a class="back">).
Initially, we thought we’d only need some CSS tricks and initialization code. However, more effort was required to create a meaningful application that would be compatible with both split view and singular view.
Author’s Note: After this work we also discovered that URL-search (i.e, http://example.com/mobileapp?search=abc) passing is important for split-view navigation. We’ve since added that support and will present it in a later blog post.
Goal
We strive to maintain the original jQTouch’s ease of use. We also want the same HTML markup to run on both screens, and minimal time investment in decorating existing jQTouch applications to support split view.
Mini User Guide
Main switch
To activate split-view support, a user should add ".splitscreen" to "#jqt", as shown here:
<body id="jqt" class="splitscreen">
<div id="homepane" class="current">
<!-- ... -->
</div>
<div id="uipane">
<!-- ... -->
</div>
<!-- ... -->
</body>
If jQTouch detects the screen is smaller than iPad, it automatically falls back to the original behaviour.
Assign a section
By default, all panes appear on the main side (right, larger side) of the split view. Specify "<div id="xyz-pan" section="aside"> for each pane that should appear on the "aside" (left side) of the split view.
Also, remember to mark one of each side as ".current". For example:
<body id="jqt" class="splitscreen">
<div id="homepane" class="current" section="aside">
<!-- ... -->
</div>
<div id="uipane" class="current">
<!-- ... -->
</div>
<!-- ... -->
</body>
TIP! Sometimes, you might want to create a new blank pane and assign current to it, so that it has a page to start with.
Condition widget
If you are converting the main example or your application, you may notice that in many cases, the Back button is no longer useful. The new code should handle it gracefully if you click it, but it doesn't do anything meaningful.
To switch it off you can use the new "section='aside | [ main | full ]'" markup. For example:
<div id="ui" class="current">
<div class="toolbar">
<h1>UI Demos</h1>
<a class="back" href="#" section="full">Home</a>
</div>
<!-- ... -->
</div>
This markup lets jQTouch know that the widget should be displayed only if the application is run in full screen mode and hide it otherwise. If a widget should appear in more than one section, you may use a comma separated list such as "section='main, full'".
Toggle Button
A new type of button is added to support the case where a button on the aside section controls the display of the main section.
<div id="uinavibar" class="navibar">
<a href="#settingpane" class="tog left nopad slideup">Toggle</a>
</div>
<!-- ... -->
</div>
Because the class ".toggle" conflicts with existing jQTouch CSS, we simply use ".tog", which toggles settingpane. You can mix and match it with a conditional widget.
Where to get it
iPad support can be found on BeeDesk's fork: http://bit.ly/gyraLr
Porting Split-view to the official fork
Jan 2013
I has become the maintainer of the official jQTouch. I would like spend some time porting splitview to the official branch. If you like to see it happens much sooner, please consider making a donation:
