This is not a final or prioritized list for 1.1. Instead this is just a discussion document to get us thinking about some of the key areas to focus on that we can refine into a roadmap.
Re-think whether we should use or dynamic re-positioning script or just use position:fixed since browser support is pretty solid. Some browsers that "snap" into place look like our dynamic re-position script anyway. Watch the video for results. Sounds like there may be some bugs with 2.2 and even iOS5 with fixed - see comments: http://bradfrostweb.com/blog/mobile/fixed-position/
We have a few avenues to explore:
The touchOverflow (iOS5) feature gives us true fixed toolbars by placing them outside of scrolling regions. To make this work in more places, we'd need to both push on brewer makers and consider a polyfill for older platforms - either focus on finishing scrollview or just support the ability to drop in other scrollers as a polyfill.
On that specific point, I think it would be cool to add a new option for the initial behavior:
We already have an option to turn the tap to hide/show behavior on or off.
Looking at the multi-pane, dialog, and other future widgets like tabs, I think we need to try to leverage the nav model more to provide simple tools for loading content. Here are the basic capabilities we need to support:
So we could make links more powerful by extending the current system a bit. Combined with the responsive web design layout techniques, this could accomplish all the multiview panel functionality with less code and more flexibility. For example, you could only load in the left panel (mailbox list) on tablet and larger devices and drilldown within this panel to a message list by having each folder link target the left panel container. The message list links could target the right panel. The key is only load the essential content for a view on a smartphone, then lazy load in other assets on larger screens.
By breaking apart all these features into link capabilities, you could build a simple tab strip by having each tab target a block below to update it when each is clicked. Or build a simple slideshow pager by having the previous/next links target the image container and either reference local images (#) or external images pulled from a page (a href="image.php?id-123" data-target="#slideshow" data-load="div.photo"). Or make a popup menu by linking to a listview (#nav) with rel="popup". You can make a ton of widgets by mixing these attributes.
In a nutshell: add the ability to point to local (#) or external (page.html) content fragments (load ="my-selector") then either throw that into an overlay (rel=popup) or use the content to update something within the page (target="selector"). Choose whether these should be history tracked and deep-linkable.
Here are some of the key link attributes, some old, some new:
href="#local-content" or "content.html" Just like we do with pages now, a link can either point to a local ID or external page for content. The only difference is that we can broaden the link to not just point to a "page" but also to a snippet of content that will be loaded into a container (the data-target) to let this work as both a client-side include or as a way for a link to update a portion of the screen.
data-target="#primary" We assume the link will replace the data-page container, but if the target is set, the response of the AJAX request will replace the contents of this jQuery selector. This would allow people to load content into any block on the page, inside a popup, or even use the link like an AJAX include by setting the target to the ID of the link itself. In a panel or popup, a link could update the panel or popup itself which is effectively a drill down. (default to data-page container)
data-load="#main" When loading an external page, we assume you want the data-page container, but this allows you to specify any selector to grab content from. We trigger create as part of this process to enhance everything. (default to data-page container)
data-history="true" Add the link action to the history stack (default to true for Back button support)
data-deeplink="true" Add the link action to the history stack (default to false)
rel="popup" Popup is just the most simple modal overlay wrapper. We can keep the dialog rel too, but this may just be a standard configuration of these basic options so they don't need to be set them multiple times. Or maybe
data-load-trigger="max-device-width: 480px" Specifies a media query for automatically triggering the link action. For example, above 480 pixels, load in the foo content
data-transition Transition for the load. I think we'd do the transition (slide, fade) then show the loader embedded inside the container (page, div, popup). When enhanced, we'd fade the content in over the loader.
data-theme Theme for the popup
data-overlay-theme Theme for the overlay