PageRenderTime 47ms CodeModel.GetById 19ms RepoModel.GetById 1ms app.codeStats 0ms

/docs/toolbars/bars-fixed-options.html

https://github.com/jjoe64/jquery-mobile
HTML | 177 lines | 132 code | 45 blank | 0 comment | 0 complexity | 5573d4b48a92b7c11df67b8598d25b81 MD5 | raw file
    

  1. <!DOCTYPE html> 
    2. 

  2. <html>
    3. 

  3. 	<head>
    4. 

  4. 	<meta charset="utf-8">
    5. 

  5. 	<meta name="viewport" content="width=device-width, initial-scale=1"> 
    6. 

  6. 	<title>jQuery Mobile Framework - Fixed Toolbars</title> 
    7. 

  7. 	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile.css" />  
    8. 

  8. 	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
    9. 

  9. 

  10. 	<script src="../../js/jquery.js"></script>
    11. 

  11. 	<script src="../../docs/_assets/js/jqm-docs.js"></script>
    12. 

  12. 	<script src="../../js/"></script>
    13. 

  13. 

  14. </head> 
    15. 

  15. <body> 
    16. 

  16. 

  17. <div data-role="page" class="type-interior">
    18. 

  18. 

  19. 	<div data-role="header" data-position="fixed" data-theme="f">
    20. 

  20. 

  21. 		<h1>Fixed toolbars</h1>
    22. 

  22. 		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
    23. 

  23. 		<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
    24. 

  24. 	</div>
    25. 

  25. 	
    26. 

  26. 	<div data-role="content">
    27. 

  27. 		<div class="content-primary">
    28. 

  28. 				<h2>Fixed toolbars</h2>
    29. 

  29. 				
    30. 

  30. 			    <ul data-role="controlgroup" data-type="horizontal" class="localnav">
    31. 

  31. 			      <li><a href="bars-fixed.html" data-role="button" data-transition="fade">Basics</a></li>
    32. 

  32. 			      <li><a href="bars-fixed-options.html" data-role="button" data-transition="fade" class="ui-btn-active">Options</a></li>
    33. 

  33. 			      <li><a href="bars-fixed-methods.html" data-role="button" data-transition="fade">Methods</a></li>
    34. 

  34. 			      <li><a href="bars-fixed-events.html" data-role="button" data-transition="fade">Events</a></li>
    35. 

  35. 			    </ul>
    36. 

  36. 				
    37. 

  37. 			<p>The fixedtoolbar plugin has the following options:</p>
    38. 

  38. 			
    39. 

  39. 

  40. 		<dl>
    41. 

  41. 			
    42. 

  42. 			<dt><code>visibleOnPageShow</code> <em>boolean</em></dt>
    43. 

  43. 			<dd>
    44. 

  44. 				<p class="default">default: true</p>
    45. 

  45. 				<p>This determines whether the toolbar is visible or not when its parent page is shown. This option is also exposed as a data attribute: <code>data-visible-on-page-show=&quot;false&quot;</code></p>			
    46. 

  46. 				<pre><code>$("[data-role=header]").fixedtoolbar(<strong>{ visibleOnPageShow: false }</strong>);</code></pre>
    47. 

  47. 			</dd>
    48. 

  48. 			
    49. 

  49. 			<dt><code>disablePageZoom</code> <em>boolean</em></dt>
    50. 

  50. 			<dd>
    51. 

  51. 				<p class="default">default: true</p>
    52. 

  52. 				<p>This determines whether user-scaling should be disabled on pages that contain fixed toolbars. This option is also exposed as a data attribute: <code>data-disable-page-zoom=&quot;false&quot;</code></p>			
    53. 

  53. 				<pre><code>$("[data-role=header]").fixedtoolbar(<strong>{ disablePageZoom: false }</strong>);</code></pre>
    54. 

  54. 			</dd>
    55. 

  55. 			
    56. 

  56. 			<dt><code>transition</code> <em>string</em></dt>
    57. 

  57. 			<dd>
    58. 

  58. 				<p class="default">default: "slide" (which ends up using slideup and slidedown)</p>
    59. 

  59. 				<p>The transition that should be used for showing and hiding a fixed toolbar. Possible values are "none", "fade", and "slide" (or you can write a CSS transition of your own and use that too). This option is also exposed as a data attribute: <code>data-transition=&quot;fade&quot;</code></p>			
    60. 

  60. 				<pre><code>$("[data-role=header]").fixedtoolbar(<strong>{ transition: "fade" }</strong>);</code></pre>
    61. 

  61. 			</dd>
    62. 

  62. 			
    63. 

  63. 			<dt><code>fullscreen</code> <em>boolean</em></dt>
    64. 

  64. 			<dd>
    65. 

  65. 				<p class="default">default: false</p>
    66. 

  66. 				<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. This option is also exposed as a data attribute: <code>data-fullscreen=&quot;true&quot;</code></p>			
    67. 

  67. 				<pre><code>$("[data-role=header]").fixedtoolbar(<strong>{ fullscreen: true }</strong>);</code></pre>
    68. 

  68. 				
    69. 

  69. 				<p class="ui-body ui-body-e"><strong>Note:</strong>While the data-attribute syntax for this option has not changed, it is now only supported on the toolbar element itself, and not the page element. </p>
    70. 

  70. 				
    71. 

  71. 			</dd>
    72. 

  72. 			
    73. 

  73. 			<dt><code>tapToggle</code> <em>boolean</em></dt>
    74. 

  74. 			<dd>
    75. 

  75. 				<p class="default">default: true</p>
    76. 

  76. 				<p>Enable or disable the user's ability to toggle toolbar visibility with a tap on the screen (or a click, for mouse users). This option is also exposed as a data attribute: <code>data-tap-toggle=&quot;true&quot;</code></p>			
    77. 

  77. 				<pre><code>$("[data-role=header]").fixedtoolbar(<strong>{ tapToggle: true }</strong>);</code></pre>
    78. 

  78. 				
    79. 

  79. 				<div class="ui-body ui-body-e">
    80. 

  80. 				<p><strong>Note:</strong> This behavior was formerly configurable as follows, but as of version 1.1 this syntax is no longer supported:
    81. 

  81. <pre><code>	
    82. 

  82. $.mobile.fixedToolbars
    83. 

  83.    .setTouchToggleEnabled(false);
    84. 

  84. </code></pre>
    85. 

  85. 						
    86. 

  86. 				</div>
    87. 

  87. 				
    88. 

  88. 			</dd>
    89. 

  89. 			
    90. 

  90. 			
    91. 

  91. 			
    92. 

  92. 			<dt><code>tapToggleBlacklist</code> <em>string</em></dt>
    93. 

  93. 			<dd>
    94. 

  94. 				<p class="default">default: "a, .ui-header-fixed, .ui-footer-fixed"</p>
    95. 

  95. 				<p>A list of jQuery selectors that, when tapped, will not cause the toolbars to be toggled.</p>			
    96. 

  96. 				<pre><code>$("[data-role=header]").fixedtoolbar(<strong>{ tapToggleBlacklist: "a, input, select, textarea, .ui-header-fixed, .ui-footer-fixed" }</strong>);</code></pre>
    97. 

  97. 			</dd>
    98. 

  98. 			
    99. 

  99. 			<dt><code>hideDuringFocus</code> <em>string</em></dt>
    100. 

  100. 			<dd>
    101. 

  101. 				<p class="default">default: "input, select, textarea"</p>
    102. 

  102. 				<p>A list of jQuery selectors that should cause the toolbars to hide while focused, except if they are in a fixed toolbar.</p>			
    103. 

  103. 				<pre><code>$("[data-role=header]").fixedtoolbar(<strong>{ hideDuringFocus: "input, select, textarea" }</strong>);</code></pre>
    104. 

  104. 			</dd>
    105. 

  105. 			
    106. 

  106. 			
    107. 

  107. 			<dt><code>updatePagePadding</code> <em>boolean</em></dt>
    108. 

  108. 			<dd>
    109. 

  109. 				<p class="default">default: true</p>
    110. 

  110. 				<p>Since toolbars can vary in height depending on the content they contain, this option automatically updates the padding on the page element to ensure that fixed toolbars have adequate space in the document when they are statically positioned, and when scrolled to the top or bottom of the page. When enabled, the padding updates during many operations, such as pageshow, during page transitions, and on resize and orientationchange. As an optimization, we would recommend that you consider disabling this option and adding a rule to your CSS to set the padding of the page div to match the EM height of your toolbars, such as <code>.ui-page-header-fixed { padding-top: 4.5em; }</code>. This option is also exposed as a data attribute: <code>data-update-page-paddinge=&quot;false&quot;</code></p>			
    111. 

  111. 				<pre><code>$("[data-role=header]").fixedtoolbar(<strong>{ updatePagePadding: false }</strong>);</code></pre>
    112. 

  112. 			</dd>
    113. 

  113. 			
    114. 

  114. 			
    115. 

  115. 			<dt><code>supportBlacklist</code> <em>function</em></dt>
    116. 

  116. 			<dd>
    117. 

  117. 				<p class="default">default: function that returns a boolean value</p>
    118. 

  118. 				<p>CSS <code>position: fixed</code> support is very difficult to test; in fact, at the time of version 1.1 release, there was no known way to reasonably test for fixed support without turning up false positives or negatives in certain popular browsers. This option is a function that attempts to opt-out some popular platforms that are known to be troublesome with <code>position: fixed</code> . Often, these platforms support <code>position: fixed</code>  partially, which can be worse than not supporting it at all. If overriding this option with your own blacklist logic, you simply need to provide a function that returns a true or false result when called upon initialization. You must set it on mobileinit, so that it applies when the plugin is initially created.</p>			
    119. 

  119. 				<pre><code>
    120. 

  120. $( document ).bind("mobileinit", function(){
    121. 

  121.   $.mobile.fixedtoolbar.prototype.options.supportBlacklist = function(){
    122. 

  122.     var result;
    123. 

  123.     // logic to determine whether result should be true or false
    124. 

  124.     return result;
    125. 

  125.   };
    126. 

  126. })</code></pre>
    127. 

  127. 			</dd>
    128. 

  128. 			
    129. 

  129. 			
    130. 

  130. 			<dt><code>initSelector</code> <em>CSS selector string</em></dt>
    131. 

  131. 			<dd>
    132. 

  132. 				<p class="default">default: ":jqmData(position='fixed')"</p>
    133. 

  133. 				<p>This is used to define the selectors (element types, data roles, etc.) that will automatically be initialized as fixed toolbars. To change which elements are initialized, bind this option to the <a href="../api/globalconfig.html">mobileinit event</a>:</p>
    134. 

  134. 				<pre><code>$( document ).bind( "mobileinit", function(){
    135. 

  135. 	<strong>$.mobile.fixedtoolbar.prototype.options.initSelector = ".myselector";</strong>
    136. 

  136. });
    137. 

  137. </code></pre>
    138. 

  138. 			</dd>
    139. 

  139. 			
    140. 

  140. 			
    141. 

  141. 			
    142. 

  142. 		</dl>
    143. 

  143. 

  144. 

  145. 				</div><!--/content-primary -->		
    146. 

  146. 

  147. 				<div class="content-secondary">
    148. 

  148. 

  149. 					<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
    150. 

  150. 

  151. 							<h3>More in this section</h3>
    152. 

  152. 

  153. 							<ul data-role="listview" data-theme="c" data-dividertheme="d">
    154. 

  154. 

  155. 								<li data-role="list-divider">Toolbars</li>
    156. 

  156. 								<li><a href="docs-bars.html">Toolbar basics</a></li>
    157. 

  157. 								<li><a href="docs-headers.html">Header bars</a></li>
    158. 

  158. 								<li><a href="docs-footers.html">Footer bars</a></li>
    159. 

  159. 								<li><a href="docs-navbar.html">Navbars</a></li>
    160. 

  160. 								<li data-theme="a"><a href="bars-fixed.html">Fixed positioning</a></li>
    161. 

  161. 								<li><a href="footer-persist-a.html">Persistent toolbars</a></li>
    162. 

  162. 								<li><a href="bars-themes.html">Theming toolbars</a></li>
    163. 

  163. 

  164. 							</ul>
    165. 

  165. 					</div>
    166. 

  166. 				</div>		
    167. 

  167. 

  168. 			</div><!-- /content -->
    169. 

  169. 

  170. 			<div data-role="footer" class="footer-docs" data-theme="a" data-position="fixed">
    171. 

  171. 					<h1>Fixed Footer</h1>
    172. 

  172. 			</div>
    173. 

  173. 

  174. 			</div><!-- /page -->
    175. 

  175. 

  176. 			</body>
    177. 

  177. 			</html>
    178.