Hopiu/jquery-mobile
1
0
Fork 0
mirror of https://github.com/Hopiu/jquery-mobile.git synced 2026-03-16 22:10:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Added more info to the touchOverflow docs, added links to good test page from the config page

Browse source
This commit is contained in:
toddparker 2011-11-15 11:32:57 -05:00
parent b8dcdc9657
commit c2315215fe
3 changed files with 29 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
docs/config/touchOverflow.html
View file

@ -21,7 +21,7 @@
<div data-role="page" class="type-index">
<div data-role="header" data-theme="f">
<div data-role="header" data-theme="f" data-position="fixed">
<h1>Config applied</h1>
<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
</div><!-- /header -->
@ -29,10 +29,17 @@
<div data-role="content">
<h2>touchOverflowEnabled is now active</h2>
<p>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.</p>
<p>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.</p>
<a href="../../index.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Browse docs</a>
<a href="../pages/touchoverflow.html" data-role="button" data-icon="arrow-r" data-iconpos="right">touchOverflow docs</a>
<h3>Some good pages to test out:</h3>
<a href="../toolbars/bars-fixed.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Fixed toolbars</a>
<a href="../toolbars/bars-fullscreen.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Fullscreen toolbars</a>
<a href="../toolbars/footer-persist-a.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Fixed persistent footer</a>
<a href="../pages/page-dialogs.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Dialogs &amp; transitions</a>
</div><!-- /ui-body wrapper -->
</div><!-- /page -->

8
docs/pages/touchoverflow.html
View file

@ -47,11 +47,15 @@ $(document).bind(&quot;mobileinit&quot;, function(){
<h2>A few downsides</h2>
<p>Nothing is perfect, especially a new feature, so there are a few downsides to keep in mind. </p>
<p>Nothing is perfect, especially a new feature, so there are a few downsides to keep in mind. When activating this feature:</p>
<ul>
<li>Sometimes child elements like lists and forms wouldn't render when embedded in a page with <code>overflow:</code> in iOS5. This was a pretty random phenomenon but is not acceptable so we've added a translate-z CSS property which forces iOS to render the contents. The downside with this fix is that when a transform is applied, all elements are set to position:relative which can cause issues in your layout.</li>
<li>Sometimes child elements like lists and forms wouldn't render when embedded in a page with <code>overflow:</code> in iOS5. This was a pretty random phenomenon but is not acceptable so we've added a <code>translate-z</code> CSS property which forces iOS to render the contents. The downside with this fix is that when a transform is applied, all elements are set to position:relative which can cause issues in your layout.</li>
<li>The <code>-webkit-overflow-scrolling:touch</code> property seems to disable the events to scroll you to the top of the page when the time is tapped in the status bar. We hope Apple fixes this because it's a very useful feature.</li>
<li>When <code>overflow:</code> and <code>-webkit-overflow-scrolling:touch</code> properties are set, iOS appears to ignore any overflow:hidden properties on the parent, which is the page in our case. So if you have an image or code block that is wider than the viewport, horizontal scrolling will be seen. </li>
<li>When this feature is active, we are disabling user zoom by manipulating the meta viewport tag because both the toolbars and page content can easily be zoomed to an odd size and it's very difficult to zoom back out. Even though we believe in allowing users to zoom the page, alleviating the usability concerns we have with fixed toolbars and overflow containers is more important.</li>
<li>Scroll position can be lost when going back to a page that has been re-loaded. If DOM caching is on, this shouldn't be as much of an issue.</li>
<li>This is still an experimental feature, so not all the kinks have been worked out yet. Use with caution and test thoroughly.</li>
</ul>

21
docs/toolbars/bars-fixed.html
View file

@ -25,20 +25,23 @@
<div class="content-primary">
<h2>Fixed toolbars</h2>
<p>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.</p>
<p>To enable this behavior on a header or footer, add the <code> data-position="fixed"</code> attribute to the toolbar container.</p>
<pre><code>
&lt;div data-role=&quot;header&quot; <strong>data-position=&quot;fixed&quot;</strong>&gt;
Header content goes here
&lt;/div&gt;&lt;!-- end header --&gt;
</code></pre>
<p>To enable this behavior on a header or footer, add the <code>data-position="fixed"</code> attribute to the toolbar container.</p>
<h2>Tap to toggle visibility</h2>
<p>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. </p>
<p>It's possible to turn off the the tap to toggle visibility behavior like this: <code>$.mobile.fixedToolbars.setTouchToggleEnabled(false)</code>.</a>
<p>It's possible to turn off the the tap to toggle visibility behavior like this:</p>
<pre><code>
$.mobile.fixedToolbars
.setTouchToggleEnabled(false);
</code></pre>
<h2>Updating toolbar positioning</h2>
<p>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 <code>$.mobile.fixedToolbars.show();</code>. To have them appear immediately without the fade, use <code>$.mobile.fixedToolbars.show(true);</code>.</p>
<p>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 <code>$.mobile.fixedToolbars.show();</code>. To have them appear immediately without the fade:</p>
<pre><code>
$.mobile.fixedToolbars
.show(true);
</code></pre>
<p>There is also an <code>updatelayout</code> 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 <code><a href="../api/events.html">updatelayout</a></code> 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 <code>updatelayout</code> event to update the widget in response.</p>