Hopiu/jquery-mobile
1
0
Fork 0
mirror of https://github.com/Hopiu/jquery-mobile.git synced 2026-03-17 06:20:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions
jquery-mobile/docs/toolbars/bars-fixed.html

187 lines
11 KiB
HTML
Raw Permalink Normal View History

big updates and additions to docs by Todd
2010-10-10 14:41:34 +00:00
<!DOCTYPE html>
add ui-mobile-rendering to docs to temprarily prevent fouc with async load. @gseguin to address with jqm-docs.js change
2012-01-04 21:59:17 +00:00
<html class="ui-mobile-rendering">
set utf-8
2010-11-02 01:46:29 +00:00
<head>
Added viewport meta elements to the markup of every template and removed the metaViewportContent option from code and docs. IE does not support generated viewport tags.
2011-02-18 20:00:18 +00:00
<meta charset="utf-8">
Ya'll can scale your pages now. Fixes #1645. Note: we originally disabled user zooming to work around a bug in iOS that automatically zooms the page beyond the constraints of the viewport on orientation change. We are not working around this bug at all now, but you are free to include any meta tag you'd like, or better yet, consider this polyfill: http://www.blog.highub.com/mobile-2/a-fix-for-iphone-viewport-scale-bug/
2011-05-17 21:28:19 +00:00
<meta name="viewport" content="width=device-width, initial-scale=1">
better page titles
2011-03-31 13:11:26 +00:00
<title>jQuery Mobile Framework - Fixed Toolbars</title>
Updated docs’ CSS to use new @import scheme.
2012-01-10 21:35:08 +00:00
<link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
Added link to demo css file to all docs pages
2010-11-11 19:15:42 +00:00
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
Move require.js to first tag so it can catch jquery module registration Otherwise jquery may be loaded twice
2012-01-13 05:25:59 +00:00
Added require.js 1.0.3 as a submodule
2011-12-24 08:48:08 +00:00
<script data-main="../../js/jquery.mobile.docs" src="../../external/requirejs/require.js"></script>
Move require.js to first tag so it can catch jquery module registration Otherwise jquery may be loaded twice
2012-01-13 05:25:59 +00:00
<script src="../../js/jquery.js"></script>
big updates and additions to docs by Todd
2010-10-10 14:41:34 +00:00
</head>
<body>
updated header themes
2011-06-20 19:57:04 +00:00
<div data-role="page" class="type-interior">
<div data-role="header" data-position="fixed" data-theme="f">
big updates and additions to docs by Todd
2010-10-10 14:41:34 +00:00
<h1>Fixed toolbars</h1>
home button fixes
2011-02-03 23:34:35 +00:00
<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
big updates and additions to docs by Todd
2010-10-10 14:41:34 +00:00
</div>
switched up padding and margins on content div. Now it will get 15px padding, unless its a fullscreen page. Inset listviews have no margin now, and regular listviews have -15px margins. Also, collapsibles now have no padding. Updated HTML to remove ui-body classes for content divs, to match these changes. Fixes #161
2010-10-12 19:50:28 +00:00
<div data-role="content">
added navigation components to most docs pages
2011-06-20 20:35:27 +00:00
<div class="content-primary">
Updated fixed toolbar docs Re-wrote the whole page, added note about $.fixedToolbars.setTouchToggleEnabled(false) option, known limitations, touchOverflowEnabled features.
2011-10-14 15:23:44 +00:00
<h2>Fixed toolbars</h2>
updated documentation on the new fixedtoolbar plugin.
2012-01-26 10:02:16 +00:00
<ul data-role="controlgroup" data-type="horizontal" class="localnav">
<li><a href="bars-fixed.html" data-role="button" data-transition="fade" class="ui-btn-active">Basics</a></li>
<li><a href="bars-fixed-options.html" data-role="button" data-transition="fade">Options</a></li>
<li><a href="bars-fixed-methods.html" data-role="button" data-transition="fade">Methods</a></li>
<li><a href="bars-fixed-events.html" data-role="button" data-transition="fade">Events</a></li>
</ul>
<p>In browsers that support CSS <code>position: fixed</code>, (<em>generally, most desktop browsers, iOS5+, Android 2.2+, BlackBerry 6, and more</em>), toolbars that use the "fixedtoolbar" plugin will be fixed to the top or bottom of the viewport, while the page content scrolls freely in between. In browsers that don't support fixed positioning, the toolbars will fall back to static, inline positiong in the page. </p>
Updated fixed toolbar docs Re-wrote the whole page, added note about $.fixedToolbars.setTouchToggleEnabled(false) option, known limitations, touchOverflowEnabled features.
2011-10-14 15:23:44 +00:00
updated documentation on the new fixedtoolbar plugin.
2012-01-26 10:02:16 +00:00
<p>To enable this behavior on a header or footer, add the <code>data-position="fixed"</code> attribute to a jQuery Mobile header or footer element.</p>
Updated fixed toolbar docs Re-wrote the whole page, added note about $.fixedToolbars.setTouchToggleEnabled(false) option, known limitations, touchOverflowEnabled features.
2011-10-14 15:23:44 +00:00
updated documentation on the new fixedtoolbar plugin.
2012-01-26 10:02:16 +00:00
<h3>A fixed header toolbar</h3>
<pre><code>
&lt;div data-role=&quot;header&quot; data-position=&quot;fixed&quot;&gt;
&lt;h1&gt;Fixed Header!&lt;/h1&gt;
&lt;/div&gt;
</code></pre>
Updated fixed toolbar docs Re-wrote the whole page, added note about $.fixedToolbars.setTouchToggleEnabled(false) option, known limitations, touchOverflowEnabled features.
2011-10-14 15:23:44 +00:00
updated documentation on the new fixedtoolbar plugin.
2012-01-26 10:02:16 +00:00
<h3>A fixed footer toolbar</h3>
<pre><code>
&lt;div data-role=&quot;footer&quot; data-position=&quot;fixed&quot;&gt;
&lt;h1&gt;Fixed Footer!&lt;/h1&gt;
&lt;/div&gt;
</code></pre>
<h2>Fullscreen Toolbars</h2>
<p>Fullscreen fixed toolbars sit on top of the content at all times when they are visible, and unlike regular fixed toolbars, fullscreen toolbars do not fall back to static positioning when toggled, instead they disappear from the screen entirely. Fullscreen toolbars are ideal for more immersive interfaces, like a photo viewer that is meant to fill the entire screen with the photo itself and no distractions. <a href="bars-fullscreen.html">This page</a> demonstrates toolbars that use the fullscreen option.</p>
Updated fixed toolbar docs Re-wrote the whole page, added note about $.fixedToolbars.setTouchToggleEnabled(false) option, known limitations, touchOverflowEnabled features.
2011-10-14 15:23:44 +00:00
updated documentation on the new fixedtoolbar plugin.
2012-01-26 10:02:16 +00:00
<p>To enable this option on a fixed header or footer, add the <code>data-fullscreen</code> attribute to the element.</p>
Updated fixed toolbar docs Re-wrote the whole page, added note about $.fixedToolbars.setTouchToggleEnabled(false) option, known limitations, touchOverflowEnabled features.
2011-10-14 15:23:44 +00:00
updated documentation on the new fixedtoolbar plugin.
2012-01-26 10:02:16 +00:00
<pre><code>
&lt;div data-role=&quot;header&quot; data-position=&quot;fixed&quot; data-fullscreen=&quot;true&quot;&gt;
&lt;h1&gt;Fixed Header!&lt;/h1&gt;
&lt;/div&gt;
</code></pre>
Updated fixed toolbar docs Re-wrote the whole page, added note about $.fixedToolbars.setTouchToggleEnabled(false) option, known limitations, touchOverflowEnabled features.
2011-10-14 15:23:44 +00:00
updated documentation on the new fixedtoolbar plugin.
2012-01-26 10:02:16 +00:00
<h2>Changes in jQuery Mobile 1.1</h2>
<p>Prior to version 1.1, jQuery Mobile used dynamically re-positioned toolbars for the fixed header effect because very few mobile browsers supported the <code>position:fixed</code> CSS property, and simulating fixed support through the use of "fake" JavaScript overflow-scrolling behavior would have reduced our browser support reach, in addition to feeling unnatural on certain platforms. This behavior was not ideal, and jQuery Mobile 1.1 took a new approach to fixed toolbars that allows much broader support, and now the framework offers true fixed toolbars on many popular platforms, while gracefully degrading non-supporting platforms to static positioning.</p>
<div class="ui-body ui-body-e">
<h2>No longer supported: touchOverflowEnabled</h2>
<p>Prior to jQuery Mobile 1.1, true fixed toolbar support was contingent on native browser support for the CSS property <code>overflow-scrolling: touch</code>, which is currently only supported in iOS5. As of version 1.1, jQuery Mobile no longer uses this CSS property at all. We've removed all internal usage of this property in the framework, but we've left it defined globally on the $.mobile object to reduce the risk that its removal will cause trouble with existing applications. This property is flagged for removal, so please update your code to no longer use it. The support test for this property, however, remains defined under <code>$.support</code> and we have no plans to remove that test at this time. </p>
</div>
Updated fixed toolbar docs Re-wrote the whole page, added note about $.fixedToolbars.setTouchToggleEnabled(false) option, known limitations, touchOverflowEnabled features.
2011-10-14 15:23:44 +00:00
<hr>
big updates and additions to docs by Todd
2010-10-10 14:41:34 +00:00
Updated fixed toolbar docs Re-wrote the whole page, added note about $.fixedToolbars.setTouchToggleEnabled(false) option, known limitations, touchOverflowEnabled features.
2011-10-14 15:23:44 +00:00
<h2>The rest of the page is just sample content to make the page very long</h2>
big updates and additions to docs by Todd
2010-10-10 14:41:34 +00:00
fixed up the fixed header docs and demo
2010-10-15 21:12:02 +00:00
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
big updates and additions to docs by Todd
2010-10-10 14:41:34 +00:00
fixed up the fixed header docs and demo
2010-10-15 21:12:02 +00:00
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
Fixed toolbar demo page, added a sample form and updated list markup to new style
2011-03-28 20:43:40 +00:00
<h3>And an inset list</h3>
fixed up the fixed header docs and demo
2010-10-15 21:12:02 +00:00
Fixed toolbar demo page, added a sample form and updated list markup to new style
2011-03-28 20:43:40 +00:00
<ul data-role="listview" data-inset="true">
<li><a href="index.html">Inbox <span class="ui-li-count">12</span></a></li>
<li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
<li><a href="index.html">Drafts <span class="ui-li-count">4</span></a></li>
<li><a href="index.html">Sent <span class="ui-li-count">328</span></a></li>
<li><a href="index.html">Trash <span class="ui-li-count">62</span></a></li>
</ul>
fixed up the fixed header docs and demo
2010-10-15 21:12:02 +00:00
Fixed toolbar demo page, added a sample form and updated list markup to new style
2011-03-28 20:43:40 +00:00
<br />
fixed up the fixed header docs and demo
2010-10-15 21:12:02 +00:00
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
Fixed toolbar demo page, added a sample form and updated list markup to new style
2011-03-28 20:43:40 +00:00
<h3>Embedded form</h3>
<form action="#" method="get">
<div data-role="fieldcontain">
<label for="name">Text Input:</label>
<input type="text" name="name" id="name" value="" />
</div>
<div data-role="fieldcontain">
<label for="textarea">Textarea:</label>
<textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
</div>
<div data-role="fieldcontain">
<label for="slider2">Flip switch:</label>
<select name="slider2" id="slider2" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</div>
<div data-role="fieldcontain">
<label for="slider">Slider:</label>
<input type="range" name="slider" id="slider" value="0" min="0" max="100" />
</div>
<div data-role="fieldcontain">
<label for="select-choice-1" class="select">Choose shipping method:</label>
<select name="select-choice-1" id="select-choice-1">
<option value="standard">Standard: 7 day</option>
<option value="rush">Rush: 3 days</option>
<option value="express">Express: next day</option>
<option value="overnight">Overnight</option>
</select>
</div>
<div class="ui-body ui-body-b">
<fieldset class="ui-grid-a">
<div class="ui-block-a"><button type="submit" data-theme="d">Cancel</button></div>
<div class="ui-block-b"><button type="submit" data-theme="b">Submit</button></div>
</fieldset>
</div>
</form>
<h3>A bit more text</h3>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
big updates and additions to docs by Todd
2010-10-10 14:41:34 +00:00
added navigation components to most docs pages
2011-06-20 20:35:27 +00:00
</div><!--/content-primary -->
<div class="content-secondary">
adjusted the presentation of the left nav and footer for the docs
2011-09-29 20:35:31 +00:00
<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
added navigation components to most docs pages
2011-06-20 20:35:27 +00:00
more updates to the docs markup. getting close!
2011-06-20 22:23:09 +00:00
<h3>More in this section</h3>
added navigation components to most docs pages
2011-06-20 20:35:27 +00:00
<ul data-role="listview" data-theme="c" data-dividertheme="d">
updated the rest of the navs to be local to their section.
2011-06-20 21:17:04 +00:00
<li data-role="list-divider">Toolbars</li>
<li><a href="docs-bars.html">Toolbar basics</a></li>
<li><a href="docs-headers.html">Header bars</a></li>
<li><a href="docs-footers.html">Footer bars</a></li>
<li><a href="docs-navbar.html">Navbars</a></li>
<li data-theme="a"><a href="bars-fixed.html">Fixed positioning</a></li>
Update docs/toolbars/bars-fixed.html
2011-11-08 20:58:34 +00:00
<li><a href="footer-persist-a.html">Persistent footer navbar</a></li>
updated the rest of the navs to be local to their section.
2011-06-20 21:17:04 +00:00
<li><a href="bars-themes.html">Theming toolbars</a></li>
added navigation components to most docs pages
2011-06-20 20:35:27 +00:00
</ul>
</div>
</div>
</div><!-- /content -->
more updates to the docs markup. getting close!
2011-06-20 22:23:09 +00:00
<div data-role="footer" class="footer-docs" data-theme="a" data-position="fixed">
added navigation components to most docs pages
2011-06-20 20:35:27 +00:00
<h1>Fixed Footer</h1>
</div>
</div><!-- /page -->
</body>
</html>
Reference in a new issue Copy permalink