Today I added two frequently used but absent panes from iPhone to BeeDesk's fork of jQTouch: choice pane and progress pane. I also added features that enable similar panes to be made easily.
I considered two approaches:
- Introduce a new concept of modal elements.
- Reuse the jQTouch page.
In the end I discovered that reusing the jQTouch page yielded a clearer solution and enabled me to reuse existing transition effects.
Those new pages, however, are different from the existing ones. They allow users to see the old page in the background; thus, new code and settings are needed.
The new option name is "animationModifier". Two options—"smokedglass" and "clearglass"—are now available. These options can be specified along with regular animation markup, for example:
[a class="smokedglass slideup" href="#choicepane"]Choice Pane[/a]
To avoid having to modify HTML, a creative use of ::before pseudo selectors was employed to "smoke" the background page.
Following are some screen shots.
Choice Pane
Progress Pane
Limitations
There are a few limitations with this approach:
- It’s not pixel-perfect yet.
- It doesn't work with iPad mode.
- It could use some better fading transition for the background.
- It doesn't cover the status bar.
- You must programatically call goBack() before goTo() page.
I believe this is still better than existing HTML5 CSS at time of writing, whch is why I am posting it here.
Free feel to send me your suggestions for improvement!
Code
See BeeDesk's fork for the most up-to-date version.
https://github.com/beedesk/jQTouch
For our BeeDesk Labnotes audience members who probably find the CSS the most interesting, so here you are: