From c2315215fe832e76dae6a82a3debd1ed2299ef83 Mon Sep 17 00:00:00 2001 From: toddparker Date: Tue, 15 Nov 2011 11:32:57 -0500 Subject: [PATCH] Added more info to the touchOverflow docs, added links to good test page from the config page --- docs/config/touchOverflow.html | 15 +++++++++++---- docs/pages/touchoverflow.html | 8 ++++++-- docs/toolbars/bars-fixed.html | 21 ++++++++++++--------- 3 files changed, 29 insertions(+), 15 deletions(-) diff --git a/docs/config/touchOverflow.html b/docs/config/touchOverflow.html index 034d78b8..b9c82a27 100644 --- a/docs/config/touchOverflow.html +++ b/docs/config/touchOverflow.html @@ -21,7 +21,7 @@
-
+

Config applied

Home
@@ -29,10 +29,17 @@

touchOverflowEnabled is now active

-

To test, hit the button below and browse the docs. Note that if a link causes a refresh, this setting will be lost and the default settings will be seen.

+

The toolbar on this page should now be fixed, like a native toolbar. To test, hit the button below and browse the docs. Note that if a link causes a refresh, this setting will be lost and the default settings will be seen.

Browse docs - - + touchOverflow docs + +

Some good pages to test out:

+ Fixed toolbars + Fullscreen toolbars + Fixed persistent footer + Dialogs & transitions + +
diff --git a/docs/pages/touchoverflow.html b/docs/pages/touchoverflow.html index 15b7e5ed..ec41a1a8 100644 --- a/docs/pages/touchoverflow.html +++ b/docs/pages/touchoverflow.html @@ -47,11 +47,15 @@ $(document).bind("mobileinit", function(){

A few downsides

-

Nothing is perfect, especially a new feature, so there are a few downsides to keep in mind.

+

Nothing is perfect, especially a new feature, so there are a few downsides to keep in mind. When activating this feature:

diff --git a/docs/toolbars/bars-fixed.html b/docs/toolbars/bars-fixed.html index 0a7b4cad..b3c8ca25 100755 --- a/docs/toolbars/bars-fixed.html +++ b/docs/toolbars/bars-fixed.html @@ -25,20 +25,23 @@

Fixed toolbars

This is a demo of the "fixed" headers and footers used in the jQuery Mobile framework. The page content flows naturally, allowing us to take advantage of native scrolling instead of a scripting a faux-scrolling workaround. The header and footer divs are right in the flow of the document, but whenever they are out of view the framework will dynamically re-position them into view if the browser supports this feature, otherwise they will simply stay inline.

-

To enable this behavior on a header or footer, add the data-position="fixed" attribute to the toolbar container.

- 

-<div data-role="header" data-position="fixed">
-   Header content goes here
-</div><!-- end header -->
-
- +

To enable this behavior on a header or footer, add the data-position="fixed" attribute to the toolbar container.

+

Tap to toggle visibility

To toggle the visibility of fixed toolbars, tap the screen. For example, if the fixed toolbars are visible, tap the screen to hide the toolbars and take full advantage of the screen real estate for content. Tapping again will bring the toolbars back into view.

-

It's possible to turn off the the tap to toggle visibility behavior like this: $.mobile.fixedToolbars.setTouchToggleEnabled(false). +

It's possible to turn off the the tap to toggle visibility behavior like this:

+

+$.mobile.fixedToolbars
+   .setTouchToggleEnabled(false);
+

Updating toolbar positioning

-

If the height of the page changes, either through dynamic injection of markup, or by widgets that hide or collapse content, it can throw off the dynamic positioning of the toolbars. To manually tell the toolbars to re-position themselves then fade in, use $.mobile.fixedToolbars.show();. To have them appear immediately without the fade, use $.mobile.fixedToolbars.show(true);.

+

If the height of the page changes, either through dynamic injection of markup, or by widgets that hide or collapse content, it can throw off the dynamic positioning of the toolbars. To manually tell the toolbars to re-position themselves then fade in, use $.mobile.fixedToolbars.show();. To have them appear immediately without the fade:

+

+$.mobile.fixedToolbars
+   .show(true);
+

There is also an updatelayout event that can be used to trigger the toolbars to re-position. Developers who are building dynamic applications that inject content into the current page can also manually trigger this updatelayout event to ensure components on the page update in response to the new content that was just added. This event is used internally in the collapsible and listview filter plugins and is powerful because it's not toolbar-specific -- any widget can be built to listen for the updatelayout event to update the widget in response.