I wanted to post an update on new mobile additions I made over the weekend.
I'll plan to merge these into the list above later on...
* Globalnav plugin:
When there are more than 3 links in a globalnav, a "more…" button is generated as the last item on the right, and clicking it will take you to a page containing all items in the globalnav, organized in a grid.
- Demo A: http://jquerymobile.com/test/_globalnav.html
- Demo B with custom icons: http://jquerymobile.com/test/_globalnav-glyphish.html
* CSS Grids plugin:
This new plugin (along with grids.css) can be called to generate a css grid configuration on an element and its children. Currently, we only have 2 grids: a (50/50) and b (33/33/33), but this will need to grow as other plugins use them (and they'll likely change depending on resolution as well). Globalnav uses this plugin in both its tab navigation and grid view. We should make this available through data-grid="a/b/etc" attribute too I think...
* Ajaxform plugin:
Put data-role="ajaxform" on a form element and it'll be handled through Ajax. Server response should follow our ui-page/ui-header/ui-content/ui-footer model, and the default behavior is that the plugin will replace the ui-content div on the active page with the ui-content element from the response, and call mobilize on it.
Demo: http://jquerymobile.com/test/_search.html
Note: form action points to a static page here: http://jquerymobile.com/test/_search-results.html
* input[data-role="search"]
This attribute will style an input as a full-width search box with a magnifying glass icon (as seen in search demo).
It's worth considering whether we should just go with type="search" here instead, but several HTML5 input types have ridiculous native implementations already out there, so I'm not sure if we'd be safer just using data attr's with type=text.
Ideally, could use type="search / number / range / date / " in the base markup to tag them to be "mobilized", and just change the input to type="text" if we want to keep it in the UI without all the native baggage (ie. buggy spinners on type="number", janky calendars on type="date", etc)
* [data-role="nojs"]
This attribute can be applied to any element that should be hidden for A browsers. Currently, the hiding is done using accessible absolute positioning, but there may be good reason to use display: none instead. One example of usage is in our ajaxform demo above, where the label and submit button use this attribute to hide for JS users.
* Listview plugin:
Listview supports lots of variation now with minimal markup configuration to remember. Check the source of this demo page for examples.
One update I made over the weekend was auto-numbering of OL lists. This was trickier than I'd expected, but I think we've got a pretty elegant solution now:
- There's a new support test for CSS Pseudo elements ($.support.cssPseudoElement)
- If that test passes, the css handles the list numbering automatically with generated content and counters, resetting the count increment any time it encounters a list heading ("This morning" , "This afternoon", etc in our example data).
- If that test fails, the JS generates spans with the numbers, following the same logic found in the CSS.
Demo: http://jquerymobile.com/test/_listview.html
API viewer demo: http://jquerymobile.com/test/experiments/api-viewer/
* New public methods:
Mobile core now exposes $.mobilize, $.changePage, $.pageLoading, and $.hideBrowserChrome for plugins to use externally.
