Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

merged with trunk

  • Loading branch information...
commit f356a389fd74150bf10135cee6a2fed4e573d7c5 1 parent 67c18c8
@hpbuniat authored
Showing with 3,473 additions and 2,630 deletions.
  1. +0 −1  Makefile
  2. +3 −1 README.md
  3. +0 −1  build.xml
  4. +14 −8 docs/_assets/css/jqm-docs.css
  5. BIN  docs/_assets/images/ipad-palm.png
  6. BIN  docs/_assets/images/version.png
  7. +1 −1  docs/about/accessibility.html
  8. +8 −6 docs/about/features.html
  9. +1 −2  docs/about/intro.html
  10. +24 −25 docs/about/platforms.html
  11. +281 −19 docs/api/events.html
  12. +1 −2  docs/api/globalconfig.html
  13. +0 −1  docs/api/index.html
  14. +4 −2 docs/api/mediahelpers.html
  15. +19 −37 docs/api/methods.html
  16. +11 −12 docs/api/themes.html
  17. +90 −0 docs/buttons/buttons-events.html
  18. +2 −2 docs/buttons/buttons-grouped.html
  19. +2 −2 docs/buttons/buttons-icons.html
  20. +2 −2 docs/buttons/buttons-inline.html
  21. +96 −0 docs/buttons/buttons-methods.html
  22. +136 −0 docs/buttons/buttons-options.html
  23. +7 −7 docs/buttons/buttons-themes.html
  24. +20 −13 docs/buttons/buttons-types.html
  25. +1 −1  docs/buttons/index.html
  26. +47 −21 docs/content/content-collapsible-set.html
  27. +105 −71 docs/content/content-collapsible.html
  28. +1 −1  docs/content/content-grids.html
  29. +1 −1  docs/content/content-html.html
  30. +1 −1  docs/content/content-themes.html
  31. +12 −13 docs/forms/checkboxes/events.html
  32. +8 −14 docs/forms/checkboxes/index.html
  33. +8 −8 docs/forms/checkboxes/methods.html
  34. +9 −9 docs/forms/checkboxes/options.html
  35. +10 −10 docs/forms/docs-forms.html
  36. +9 −9 docs/forms/forms-all-native.html
  37. +9 −9 docs/forms/forms-all.html
  38. +8 −8 docs/forms/forms-sample-response.php
  39. +8 −8 docs/forms/forms-sample-selfsubmit.php
  40. +9 −9 docs/forms/forms-sample.html
  41. +0 −95 docs/forms/forms-search.html
  42. +0 −109 docs/forms/forms-slider.html
  43. +0 −102 docs/forms/forms-switch.html
  44. +9 −9 docs/forms/forms-themes.html
  45. +8 −8 docs/forms/index.html
  46. +15 −158 docs/forms/plugin-eventsmethods.html
  47. +12 −11 docs/forms/radiobuttons/events.html
  48. +8 −18 docs/forms/radiobuttons/index.html
  49. +8 −8 docs/forms/radiobuttons/methods.html
  50. +9 −9 docs/forms/radiobuttons/options.html
  51. +100 −0 docs/forms/search/events.html
  52. +109 −0 docs/forms/search/index.html
  53. +97 −0 docs/forms/search/methods.html
  54. +20 −22 docs/forms/{sliders → search}/options.html
  55. +11 −11 docs/forms/selects/events.html
  56. +0 −484 docs/forms/selects/forms-selects.html
  57. +89 −97 docs/forms/selects/index.html
  58. +8 −8 docs/forms/selects/methods.html
  59. +18 −18 docs/forms/selects/options.html
  60. +11 −12 docs/forms/{sliders → slider}/events.html
  61. +104 −0 docs/forms/slider/index.html
  62. +18 −21 docs/forms/{sliders → slider}/methods.html
  63. +114 −0 docs/forms/slider/options.html
  64. +0 −112 docs/forms/sliders/index.html
  65. +101 −0 docs/forms/switch/events.html
  66. +106 −0 docs/forms/switch/index.html
  67. +105 −0 docs/forms/switch/methods.html
  68. +114 −0 docs/forms/switch/options.html
  69. +9 −10 docs/forms/{texts → textinputs}/events.html
  70. +34 −36 docs/forms/{texts → textinputs}/index.html
  71. +10 −10 docs/forms/{texts → textinputs}/methods.html
  72. +18 −9 docs/forms/{texts → textinputs}/options.html
  73. +0 −149 docs/forms/texts/forms-text.html
  74. +1 −1  docs/lists/docs-lists.html
  75. +1 −1  docs/lists/lists-all-full.html
  76. +1 −1  docs/lists/lists-count.html
  77. +1 −1  docs/lists/lists-divider.html
  78. +1 −1  docs/lists/lists-formatting.html
  79. +1 −1  docs/lists/lists-forms-inset.html
  80. +1 −1  docs/lists/lists-forms.html
  81. +1 −1  docs/lists/lists-icons.html
  82. +1 −1  docs/lists/lists-inset.html
  83. +1 −1  docs/lists/lists-nested.html
  84. +1 −1  docs/lists/lists-ol.html
  85. +1 −1  docs/lists/lists-performance.html
  86. +1 −1  docs/lists/lists-readonly-inset.html
  87. +1 −1  docs/lists/lists-readonly.html
  88. +1 −1  docs/lists/lists-search-inset.html
  89. +1 −1  docs/lists/lists-search-with-dividers.html
  90. +1 −1  docs/lists/lists-search.html
  91. +1 −1  docs/lists/lists-split.html
  92. +1 −1  docs/lists/lists-themes.html
  93. +1 −1  docs/lists/lists-thumbnails.html
  94. +1 −1  docs/lists/lists-ul.html
  95. +4 −4 docs/pages/multipage-template.html
  96. +1 −1  docs/pages/page-anatomy.html
  97. +2 −2 docs/pages/page-cache.html
  98. +1 −1  docs/pages/page-dialogs.html
  99. +3 −3 docs/pages/page-dynamic.html
  100. +1 −1  docs/pages/page-links.html
  101. +1 −1  docs/pages/page-navmodel.html
  102. +2 −2 docs/pages/page-scripting.html
  103. +4 −4 docs/pages/page-template.html
  104. +1 −1  docs/pages/page-titles.html
  105. +1 −1  docs/pages/page-transitions.html
  106. +1 −1  docs/pages/pages-themes.html
  107. +1 −1  docs/toolbars/bars-fixed.html
  108. +1 −1  docs/toolbars/bars-fullscreen.html
  109. +1 −1  docs/toolbars/bars-themes.html
  110. +1 −1  docs/toolbars/docs-bars.html
  111. +1 −1  docs/toolbars/docs-footers.html
  112. +1 −1  docs/toolbars/docs-headers.html
  113. +1 −1  docs/toolbars/docs-navbar.html
  114. +1 −1  docs/toolbars/footer-persist-a.html
  115. +1 −1  docs/toolbars/footer-persist-b.html
  116. +1 −1  docs/toolbars/footer-persist-c.html
  117. +1 −0  experiments/scrollview/jquery.mobile.scrollview.css
  118. +41 −12 external/qunit.css
  119. +593 −382 external/qunit.js
  120. +0 −1  index.html
  121. +0 −1  js/index.php
  122. +2 −2 js/jquery.mobile.buttonMarkup.js
  123. +4 −4 js/jquery.mobile.collapsible.js
  124. +10 −0 js/jquery.mobile.core.js
  125. +22 −7 js/jquery.mobile.event.js
  126. +4 −0 js/jquery.mobile.fixHeaderFooter.native.js
  127. +2 −2 js/jquery.mobile.forms.select.custom.js
  128. +1 −1  js/jquery.mobile.forms.select.js
  129. +7 −1 js/jquery.mobile.forms.slider.js
  130. +8 −5 js/jquery.mobile.forms.textinput.js
  131. +18 −0 js/jquery.mobile.init.js
  132. +4 −2 js/jquery.mobile.listview.js
  133. +0 −93 js/jquery.mobile.media.classes.js
  134. +1 −1  js/jquery.mobile.media.js
  135. +26 −14 js/jquery.mobile.navigation.js
  136. +1 −1  js/jquery.mobile.support.js
  137. +1 −1  js/jquery.mobile.transition.js
  138. +2 −0  tests/unit/buttonMarkup/index.html
  139. +2 −0  tests/unit/checkboxradio/index.html
  140. +7 −7 tests/unit/collapsible/collapsible_core.js
  141. +2 −0  tests/unit/collapsible/index.html
  142. +3 −1 tests/unit/controlgroup/index.html
  143. +6 −0 tests/unit/core/core.js
  144. +4 −0 tests/unit/core/index.html
  145. +2 −0  tests/unit/dialog/index.html
  146. +0 −2  tests/unit/event/event_core.js
  147. +2 −0  tests/unit/event/index.html
  148. +5 −6 tests/unit/fieldContain/index.html
  149. +2 −1  tests/unit/init/index.html
  150. +3 −1 tests/unit/init/nopage.html
  151. +2 −0  tests/unit/listview/index.html
  152. +2 −0  tests/unit/listview/pushstate-tests.html
  153. +2 −0  tests/unit/media/index.html
  154. +0 −54 tests/unit/media/media_core.js
  155. +2 −0  tests/unit/navigation/base-tests.html
  156. +3 −1 tests/unit/navigation/index.html
  157. +79 −0 tests/unit/navigation/navigation_core.js
  158. +3 −1 tests/unit/navigation/push-state-dialog-tests.html
  159. +2 −0  tests/unit/page-sections/index.html
  160. +6 −4 tests/unit/page/index.html
  161. +3 −1 tests/unit/select/cached-tests.html
  162. +6 −0 tests/unit/select/index.html
  163. +21 −0 tests/unit/select/select_core.js
  164. +6 −4 tests/unit/slider/index.html
  165. +2 −0  tests/unit/support/index.html
  166. +9 −0 tests/unit/swarminject.js
  167. +2 −0  tests/unit/textinput/index.html
  168. +2 −0  tests/unit/widget/index.html
  169. BIN  themes/default/images/icon-search-black.png
  170. +5 −4 themes/default/jquery.mobile.button.css
  171. +2 −3 themes/default/jquery.mobile.controlgroup.css
  172. +11 −6 themes/default/jquery.mobile.core.css
  173. +1 −1  themes/default/jquery.mobile.forms.select.css
  174. +2 −1  themes/default/jquery.mobile.forms.textinput.css
  175. +3 −3 themes/default/jquery.mobile.listview.css
  176. +186 −46 themes/default/jquery.mobile.theme.css
  177. +38 −36 themes/default/jquery.mobile.transitions.css
  178. +1 −1  version.txt
View
1  Makefile
@@ -68,7 +68,6 @@ JSFILES = js/jquery.ui.widget.js \
js/jquery.mobile.links.js \
js/jquery.mobile.fixHeaderFooter.js \
js/jquery.mobile.fixHeaderFooter.native.js \
- js/jquery.mobile.media.classes.js \
js/jquery.mobile.init.js
# The files to include when compiling the CSS files
View
4 README.md
@@ -23,7 +23,9 @@ A full, complete version and a minified, complete version of the jQuery Mobile J
Submitting bugs
===================================
-If you think you've found a bug, please visit the Issue tracker (https://github.com/jquery/jquery-mobile/issues) and create an issue explaining the problem and expected result. Be sure to include any relevant information for reproducing the issue, such as the browser/device (with version #), and the version of the jQuery Mobile code you're running. It also helps a lot to make sure that the bug still exists on jquerymobile.com/test/, as it's possible we may have fixed it already! It is also best to include code to reproduce the bug.
+If you think you've found a bug, please visit the Issue tracker (https://github.com/jquery/jquery-mobile/issues) and create an issue explaining the problem and expected result. Be sure to include any relevant information for reproducing the issue, such as the browser/device (with version #), and the version of the jQuery Mobile code you're running. It also helps a lot to make sure that the bug still exists on http://jquerymobile.com/test/, as it's possible we may have fixed it already!
+
+It is also best to include code to reproduce the bug. To do that please use [jsbin](http://jsbin.com) or [jsfiddle](http://jsfiddle.net) and include a link to it in the ticket.
Submitting patches
View
1  build.xml
@@ -52,7 +52,6 @@
jquery.mobile.links.js,
jquery.mobile.fixHeaderFooter.js,
jquery.mobile.fixHeaderFooter.native.js,
- jquery.mobile.media.classes.js,
jquery.mobile.init.js"/>
<target name="merge">
View
22 docs/_assets/css/jqm-docs.css
@@ -63,18 +63,17 @@ p.intro strong {
padding-bottom: 0;
}
.content-secondary .ui-collapsible {
- padding: 10px 15px;
+ padding: 0 15px 10px;
}
-.content-secondary .ui-collapsible-heading {
- margin: 0 0 30px;
-}
-.content-secondary .ui-collapsible-heading-collapsed,
.content-secondary .ui-collapsible-content {
- padding:0;
+ padding: 0;
+ background: none;
+ border-bottom: none;
+}
+.content-secondary .ui-listview {
margin: 0;
}
-
/* new API additions */
dt {
@@ -181,17 +180,24 @@ dd h4 { margin:15px 0 0 0; }
float: left;
width: 45%;
background: none;
- border-top: 0;
}
.content-secondary,
.type-interior .content-secondary {
margin: 30px 0 20px 2%;
padding: 20px 4% 0 0;
background: none;
+ border-top: none;
}
.type-index .content-secondary {
padding: 0;
}
+ .content-secondary .ui-collapsible {
+ margin: 0;
+ padding: 0;
+ }
+ .content-secondary .ui-collapsible-content {
+ border: none;
+ }
.type-index .content-secondary .ui-listview {
margin: 0;
}
View
BIN  docs/_assets/images/ipad-palm.png
Deleted file not rendered
View
BIN  docs/_assets/images/version.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
2  docs/about/accessibility.html
@@ -36,7 +36,7 @@
<div class="content-secondary">
- <div data-role="collapsible" data-collapsed="true" data-theme="b">
+ <div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
<h3>More in this section</h3>
View
14 docs/about/features.html
@@ -26,15 +26,17 @@
<h2>Key features:</h2>
<ul>
- <li><strong>Built on jQuery core</strong> for familiar and consistent jQuery syntax and minimal learning curve</li>
- <li><strong>Compatible with all major mobile & desktop platforms</strong> - iOS, Android, Blackberry, Palm WebOS, Nokia/Symbian, Windows Mobile, Opera Mobile/Mini, Firefox Mobile and all modern desktop browsers.</li>
- <li><strong>Lightweight size</strong> (~20k compressed for all mobile functionality) and minimal image dependencies for speed.</li>
+ <li><strong>Built on jQuery core</strong> for familiar and consistent jQuery syntax and minimal learning curve and leverages jQuery UI code and patterns.</li>
+ <li><strong>Compatible with all major mobile, tablet, e-reader & desktop platforms</strong> - iOS, Android, Blackberry, Palm WebOS, Nokia/Symbian, Windows Phone 7, MeeGo, Opera Mobile/Mini, Firefox Mobile, Kindle, Nook, and all modern browsers with graded levels of support.</li>
+ <li><strong>Lightweight size</strong> and minimal image dependencies for speed.</li>
+ <li><strong>Modular architecture</strong> for creating custom builds that are optimized to only the features needed for a particular application</li>
<li><strong>HTML5 Markup-driven configuration</strong> of pages and behavior for fast development and minimal required scripting.</li>
<li><strong>Progressive enhancement</strong> approach brings core content and functionality to all mobile, tablet and desktop platforms and a rich, installed application-like experience on newer mobile platforms.</li>
- <li><strong>Automatic initialization</strong> by using HTML5 <code> data-role</code> attributes in the HTML markup to act as the trigger to automatically initialize all jQuery Mobile widgets found on a page.</li>
+ <li><strong>Responsive design</strong> techniques and tools allow the same underlying codebase to automatically scale from smartphone to desktop-sized screens</li>
+ <li><strong>Powerful Ajax-powered navigation system</strong> to enable animated page transitions while maintaining back button, bookmarking and and clean URLs though pushState. </li>
<li><strong>Accessibility</strong> features such as WAI-ARIA are also included to ensure that the pages work for screen readers (e.g. VoiceOver in iOS) and other assistive technologies.</li>
<li><strong>Touch and mouse event support</strong> streamline the process of supporting touch, mouse, and cursor focus-based user input methods with a simple API. </li>
- <li><strong>UI widgets</strong> enhance native controls with touch-optimized, themable controls. </li>
+ <li><strong>Unified UI widgets</strong> for common controls enhance native controls with touch-optimized, themable controls that are platform-agnostic and easy to use.</li>
<li><strong>Powerful theming framework</strong> and ThemeRoller application make highly-branded experiences easy to build.</li>
</ul>
@@ -43,7 +45,7 @@
<div class="content-secondary">
- <div data-role="collapsible" data-collapsed="true" data-theme="b">
+ <div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
<h3>More in this section</h3>
View
3  docs/about/intro.html
@@ -34,13 +34,12 @@
<p>To make this broad support possible, all pages in jQuery Mobile are built on a foundation of <strong>clean, semantic HTML</strong> to ensure compatibility with pretty much any web-enabled device. In devices that interpret CSS and JavaScript, jQuery Mobile applies <strong>progressive enhancement techniques</strong> to unobtrusively transform the semantic page into a rich, interactive experience that leverages the power of jQuery and CSS. <strong>Accessibility features</strong> such as WAI-ARIA are tightly integrated throughout the framework to provide support for screen readers and other assistive technologies.</p>
- <img src="../_assets/images/ipad-palm.png" alt="Smartphone and tablet designs" style="max-width:100%; margin-top:20px;">
</div><!--/content-primary -->
<div class="content-secondary">
- <div data-role="collapsible" data-collapsed="true" data-theme="b">
+ <div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
<h3>More in this section</h3>
View
49 docs/about/platforms.html
@@ -24,56 +24,55 @@
<div class="content-primary">
- <h2 id="platforms">Platform support in Beta 3</h2>
- <p>As of Beta 3, we've pretty much covered our target platforms for 1.0. At this stage, jQuery Mobile works on the vast majority of all modern desktop, smartphone, tablet, and e-reader platforms. In addition, feature phones and older browsers are also supported because of our progressive enhancement approach. We're very proud of our commitment to universal accessibility through our broad support for all popular platforms.</p>
+ <h2 id="platforms">Platform support in 1.0 RC1</h2>
+ <p>We're excited to announce that as of 1.0 RC1, we've covered all our target platforms for the project. At this stage, we have broad support for the vast majority of all modern desktop, smartphone, tablet, and e-reader platforms. In addition, feature phones and older browsers are supported because of our progressive enhancement approach. We're very proud of our commitment to universal accessibility through our broad support for all popular platforms.</p>
<p>Our <a href="http://jquerymobile.com/gbs/">graded support matrix</a> was created over a year ago based on our goals as a project and since that time, we've been refining our grading system based on real-world device testing and the quickly evolving mobile landscape. To provide a quick summary of our browser support in Beta 1, we've created a simple A (full), B (full minus Ajax), C (basic) grade system with notes of the actual devices and versions we've been testing on in our lab.</p>
- <p>The visual fidelity of the experience is highly dependent on CSS rendering capabilities of the device and platform so not all A grade experience will be pixel-perfect but that's the nature of the web. We'll be adding additional vendor-prefixed CSS rules to bring transitions, gradients and other visual improvements to non-WebKit browsers in future releases so look for even more added visual polish as we move towards 1.0.</p>
+ <p>The visual fidelity of the experience is highly dependent on CSS rendering capabilities of the device and platform so not all A grade experience will be pixel-perfect but that's the nature of the web. </p>
<h3 style="display: block; font-size: 15px !important; font-weight: normal; background: #f0f0f0; border-left: 7px solid #74B64A; padding: 5px 0 5px 8px;"><strong> A-grade</strong> - Full enhanced experience with Ajax-based animated page transitions.</h3>
<ul>
- <li><strong>Apple iOS 3.2-5.0 beta</strong>: Tested on the original iPad (3.2 / 4.3), iPad 2 (4.3), original iPhone (3.1), iPhone 3 (3.2), 3GS (4.3), and 4 (4.3 / 5.0 beta)</li>
- <li><strong>Android 2.1-2.3</strong>: Tested on the HTC Incredible (2.2), original Droid (2.2), Nook Color (2.2), HTC Aria (2.1), Google Nexus S (2.3). Functional on 1.5 &amp; 1.6 but performance may be sluggish, tested on Google G1 (1.5)</li>
- <li><strong>Android Honeycomb</strong>: Tested on the Samsung Galaxy Tab 10.1</li>
- <li><strong>Windows Phone 7</strong>: Tested on the HTC 7 Surround</li>
- <li><strong>Blackberry 6.0</strong>: Tested on the Torch 9800 and Style 9670</li>
- <li><strong>Blackberry 7</strong>: <span style="background: yellow; padding: 2px 5px; font-size: 10px;">NEW</span> Tested on BlackBerry Torch 9810</li>
- <li><strong>Blackberry Playbook</strong>: Tested on PlayBook version 1.0.1 / 1.0.5</li>
- <li><strong>Palm WebOS (1.4-2.0)</strong>: Tested on the Palm Pixi (1.4), Pre (1.4), Pre 2 (2.0)</li>
- <li><strong>Palm WebOS 3.0 </strong>- Tested on HP TouchPad</li>
- <li><strong>Meego 1.2</strong>: <span style="background: yellow; padding: 2px 5px; font-size: 10px;">NEW</span> Tested on the Nokia N950</li>
- <li><strong>Firebox Mobile (Beta)</strong>: Tested on Android 2.2</li>
+ <li><strong>Apple iOS 3.2-5.0 beta</strong> - Tested on the original iPad (3.2 / 4.3), iPad 2 (4.3), original iPhone (3.1), iPhone 3 (3.2), 3GS (4.3), and 4 (4.3 / 5.0 beta)</li>
+ <li><strong>Android 2.1-2.3</strong> - Tested on the HTC Incredible (2.2), original Droid (2.2), Nook Color (2.2), HTC Aria (2.1), Google Nexus S (2.3). Functional on 1.5 &amp; 1.6 but performance may be sluggish, tested on Google G1 (1.5)</li>
+ <li><strong>Android Honeycomb</strong>- Tested on the Samsung Galaxy Tab 10.1</li>
+ <li><strong>Windows Phone 7</strong> - Tested on the HTC 7 Surround</li>
+ <li><strong>Blackberry 6.0</strong> - Tested on the Torch 9800 and Style 9670</li>
+ <li><strong>Blackberry 7</strong> - Tested on BlackBerry® Torch 9810</li>
+ <li><strong>Blackberry Playbook</strong> - Tested on PlayBook version 1.0.1 / 1.0.5</li>
+ <li><strong>Palm WebOS (1.4-2.0)</strong> - Tested on the Palm Pixi (1.4), Pre (1.4), Pre 2 (2.0)</li>
+ <li><strong>Palm WebOS 3.0 </strong> - Tested on HP TouchPad</li>
+ <li><strong>Firebox Mobile (Beta)</strong> - Tested on Android 2.2</li>
<li><strong>Opera Mobile 11.0</strong>: Tested on the iPhone 3GS and 4 (5.0/6.0), Android 2.2 (5.0/6.0), Windows Mobile 6.5 (5.0)</li>
+ <li><strong>Meego 1.2</strong> <span style="background: yellow; padding: 2px 5px; font-size: 10px;">NEW</span> - Tested on Nokia 950</li>
<li><strong>Kindle 3</strong>: Tested on the built-in WebKit browser included in the Kindle 3 device</li>
- <li><strong>Chrome <strong>Desktop </strong>11-13</strong>: Tested on OS X 10.6.7 and Windows 7</li>
- <li><strong>Firefox Desktop 3.6-4.0</strong>: Tested on OS X 10.6.7 and Windows 7</li>
- <li><strong>Internet Explorer 7-9</strong> : Tested on Windows XP, Vista and 7 (minor CSS issues)</li>
- <li><strong>Opera Desktop 10-11</strong>: Tested on OS X 10.6.7 and Windows 7</li>
+ <li><strong>Chrome <strong>Desktop </strong>11-13</strong> - Tested on OS X 10.6.7 and Windows 7</li>
+ <li><strong>Firefox Desktop 3.6-4.0</strong> - Tested on OS X 10.6.7 and Windows 7</li>
+ <li><strong>Internet Explorer 7-9</strong> - Tested on Windows XP, Vista and 7 (minor CSS issues)</li>
+ <li><strong>Opera Desktop 10-11</strong> - Tested on OS X 10.6.7 and Windows 7</li>
</ul>
<h3 style="display: block; font-size: 15px !important; font-weight: normal; background: #f0f0f0; border-left: 7px solid #6699cc; padding: 5px 0 5px 8px;"><strong>B-grade</strong> - Enhanced experience except without Ajax navigation features.</h3>
<ul>
<li><strong>Blackberry 5.0</strong>: Tested on the Storm 2 9550, Bold 9770</li>
- <li><strong>Opera Mini (5.0-6.0)</strong>: Tested on iOS 3.2/4.3</li>
- <li><strong>Windows Phone 6.5</strong>: Tested on the HTC</li>
- <li><strong>Nokia Symbian^3 </strong>: Tested on Nokia N8 (Symbian^3), C7 (Symbian^3), also works on N97 (Symbian^1)</li>
+ <li><strong>Opera Mini (5.0-6.0)</strong> - Tested on iOS 3.2/4.3</li>
+ <li><strong>Nokia Symbian^3 </strong>- Tested on Nokia N8 (Symbian^3), C7 (Symbian^3), also works on N97 (Symbian^1)</li>
</ul>
<h3 style="display: block; font-size: 15px !important; font-weight: normal; background: #f0f0f0; border-left: 7px solid #FFCC33; padding: 5px 0 5px 8px;"><strong>C<strong>-grade</strong></strong> - Basic, non-enhanced HTML experience that is still functional</h3>
<ul>
- <li><strong>Blackberry4.x</strong>: Tested on the Curve 8330</li>
+ <li><strong>Blackberry 4.x</strong> - Tested on the Curve 8330</li>
+ <li><strong>Windows Mobile</strong> - Tested on the HTC Leo (WInMo 5.2)</li>
<li><strong>All older smartphone platforms and featurephones</strong> - Any device that doesn't support media queries will receive the basic, C grade experience</li>
</ul>
<h3 style="display: block; font-size: 15px !important; font-weight: normal; background: #f0f0f0; border-left: 7px solid #aaaaaa; padding: 6px 0 8px 8px;"><strong>Not Officially Supported - </strong>May work, but haven't been thoroughly tested or debugged</h3>
<ul>
- <li><strong>Samsung Bada</strong> - The project doesn't currently have test devices or emulators, but current support is known to be fairly good. Support level undecided for 1.0.</li>
+ <li><strong>Samsung Bada</strong> - The project doesn't currently have test devices or emulators, but current support is known to be fairly good. Support level undecided for 1.0</li>
</ul>
-
</div>
<div class="content-secondary">
- <div data-role="collapsible" data-collapsed="true" data-theme="b">
+ <div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
<h3>More in this section</h3>
View
300 docs/api/events.html
@@ -32,9 +32,9 @@ <h4 style="margin:.5em 0">Important: Use pageInit(), not $(document).ready()</h4
<p>
<div class="ui-body ui-body-e">
<h4 style="margin:.5em 0">Important: pageCreate() vs pageInit()</h4>
- Prior to Beta 2 the recommendation to users wishing to manipulate jQuery Mobile enhanced page and child widget markup was to bind to the <code><strong>pagecreate</strong></code> event. In Beta 2 an internal change was made to decouple each of the widgets by binding to the <code><strong>pagecreate</strong></code> event in place of direct calls to the widget methods. As a result, users binding to the <code><strong>pagecreate</strong></code> in <code><strong>mobileinit</code></strong> would find their binding executing before the markup had been enhanced by each of the plugins. In keeping with the lifecycle of the jQuery UI Widget Factory, the initialization method is invoked <strong>after</strong> the create method, so the <code><strong>pageinit</code></strong> event provides the correct timing for post enhancement manipulation of the DOM and/or Javascript objects.
+ Prior to Beta 2 the recommendation to users wishing to manipulate jQuery Mobile enhanced page and child widget markup was to bind to the <code><strong>pagecreate</strong></code> event. In Beta 2 an internal change was made to decouple each of the widgets by binding to the <code><strong>pagecreate</strong></code> event in place of direct calls to the widget methods. As a result, users binding to the <code><strong>pagecreate</strong></code> in <code><strong>mobileinit</strong></code> would find their binding executing before the markup had been enhanced by each of the plugins. In keeping with the lifecycle of the jQuery UI Widget Factory, the initialization method is invoked <strong>after</strong> the create method, so the <code><strong>pageinit</strong></code> event provides the correct timing for post enhancement manipulation of the DOM and/or Javascript objects.
- In short, if you were previously using <code><strong>pagecreate</code></strong> to manipulate the enhanced markup before the page was shown its very likely you'll want to migrate to 'pageinit'.
+ In short, if you were previously using <code><strong>pagecreate</strong></code> to manipulate the enhanced markup before the page was shown its very likely you'll want to migrate to 'pageinit'.
</div></p>
<h2>Touch events</h2>
@@ -64,7 +64,12 @@ <h4 style="margin:.5em 0">Important: pageCreate() vs pageInit()</h4>
<h2>Orientation change event</h2>
<dl>
<dt><code>orientationchange</code></dt>
- <dd>Triggers when a device orientation changes (by turning it vertically or horizontally). When bound to this event, your callback function can leverage a second argument, which contains an <code>orientation</code> property equal to either "portrait" or "landscape". These values are also added as classes to the HTML element, allowing you to leverage them in your CSS selectors. Note that we currently bind to the resize event when orientationChange is not natively supported.</dd>
+ <dd>Triggers when a device orientation changes (by turning it vertically or horizontally). When bound to this event, your callback function can leverage a second argument, which contains an <code>orientation</code> property equal to either "portrait" or "landscape". These values are also added as classes to the HTML element, allowing you to leverage them in your CSS selectors. Note that we currently bind to the resize event when orientationChange is not natively supported, or when <code>$.mobile.orientationChangeEnabled</code> is set to false.</dd>
+ <div class="ui-body ui-body-e">
+ <h4>orientationchange timing</h4>
+
+ The timing of the <code>orientationchange</code> with relation to the change of the client height and width is different between browsers, though the current implementation will give you the correct value for <code>event.orientation</code> derived from <code>window.orientation</code>. This means that if your bindings are dependent on the height and width values you may want to disable orientationchange all together with <code>$.mobile.orientationChangeEnabled = false</code> to let the fallback resize code trigger your bindings.
+ </div>
</dl>
<h2>Scroll events</h2>
@@ -77,24 +82,265 @@ <h4 style="margin:.5em 0">Important: pageCreate() vs pageInit()</h4>
<dd>Triggers when a scroll finishes.</dd>
</dl>
- <h2>Page show/hide events</h2>
- <p>Whenever a page is shown or hidden in jQuery Mobile, two events are triggered on that page. The events triggered depend on whether that page is being shown or hidden, so when a page transition occurs, there are actually 4 events triggered: 2 for each page. </p>
+ <h2>Page load events</h2>
+ <p>Whenever an external page is loaded into the application DOM, 2 events are fired. The first is pagebeforeload. The 2nd event will be either pageload or pageloadfailed.</p>
+ <dl>
+ <dt><code>pagebeforeload</code></dt>
+ <dd><p>Triggered before any load request is made. Callbacks bound to this event can call preventDefault() on the event to indicate that they are handling the load request. Callbacks that do this *MUST* make sure they call resolve() or reject() on the deferred object reference contained in the data object passed to the callback.</p>
+ <p>The data object, passed as the 2nd arg to the callback function contains the following properties:</p>
+ <ul>
+ <li><code>url</code> (string)
+<ul>
+ <li>The absolute or relative URL that was passed into $.mobile.loadPage() by the caller.</li>
+ </ul>
+ </li>
+ <li><code>absUrl</code> (string)
+ <ul>
+ <li>The absolute version of the url. If url was relative, it is resolved against the url used to load the current active page.</li>
+ </ul>
+ </li>
+ <li><code>dataUrl</code> (string)
+ <ul>
+ <li>The filtered version of absUrl to be used when identifying the page and updating the browser location when the page is made active.</li>
+ </ul>
+ </li>
+ <li><code>deferred</code> (object)
+ <ul>
+ <li>Callbacks that call preventDefault() on the event, *MUST* call resolve() or reject() on this object so that changePage() requests resume processing. Deferred object observers expect the deferred object to be resolved like this:</p>
+ <pre><code>
+$( document ).bind( &quot;pagebeforeload&quot;, function( event, data ){
+
+ // Let the framework know we're going to handle the load.
+
+ event.preventDefault();
+
+ // ... load the document then insert it into the DOM ...
+ // at some point, either in this callback, or through
+ // some other async means, call resolve, passing in
+ // the following args, plus a jQuery collection object
+ // containing the DOM element for the page.
+
+ data.deferred.resolve( data.absUrl, data.options, page );
+
+});</code></pre>
+ <p>or rejected like this:
+ <pre><code>
+$( document ).bind( &quot;pagebeforeload&quot;, function( event, data ){
+
+ // Let the framework know we're going to handle the load.
+
+ event.preventDefault();
+
+ // ... load the document then insert it into the DOM ...
+ // at some point, if the load fails, either in this
+ // callback, or through some other async means, call
+ // reject like this:
+
+ data.deferred.reject( data.absUrl, data.options );
+
+});</code></pre>
+ </li>
+ </ul>
+ </li>
+ <li><code>options</code> (object)
+ <ul>
+ <li>This object contains the options that were passed into $.mobile.loadPage().</li>
+ </ul>
+ </li>
+ </ul>
+ </dd>
+ <dt><code>pageload</code></dt>
+ <dd>Triggered after the page is successfully loaded and inserted into the DOM. Callbacks bound to this event will be passed a data object as its 2nd arg. This object contains the following information:
+ <ul>
+ <li><code>url</code> (string)
+<ul>
+ <li>The absolute or relative URL that was passed into $.mobile.loadPage() by the caller.</li>
+ </ul>
+ </li>
+ <li><code>absUrl</code> (string)
+ <ul>
+ <li>The absolute version of the url. If url was relative, it is resolved against the url used to load the current active page.</li>
+ </ul>
+ </li>
+ <li><code>dataUrl</code> (string)
+ <ul>
+ <li>The filtered version of absUrl to be used when identifying the page and updating the browser location when the page is made active.</li>
+ </ul>
+ </li>
+ <li><code>options</code> (object)
+ <ul>
+ <li>This object contains the options that were passed into $.mobile.loadPage().</li>
+ </ul>
+ </li>
+ </ul>
+ </dd>
+ <dt><code>pageloadfailed</code></dt>
+ <dd>Triggered if the page load request failed. By default, after dispatching this event, the framework will display a page failed message and call reject() on the deferred object contained within the event's data object. Callbacks can prevent this default behavior from executing by calling preventDefault() on the event.
+ <p>The data object, passed as the 2nd arg to the callback function contains the following properties:</p>
+ <ul>
+ <li><code>url</code> (string)
+<ul>
+ <li>The absolute or relative URL that was passed into $.mobile.loadPage() by the caller.</li>
+ </ul>
+ </li>
+ <li><code>absUrl</code> (string)
+ <ul>
+ <li>The absolute version of the url. If url was relative, it is resolved against the url used to load the current active page.</li>
+ </ul>
+ </li>
+ <li><code>dataUrl</code> (string)
+ <ul>
+ <li>The filtered version of absUrl to be used when identifying the page and updating the browser location when the page is made active.</li>
+ </ul>
+ </li>
+ <li><code>deferred</code> (object)
+ <ul>
+ <li>Callbacks that call preventDefault() on the event, *MUST* call resolve() or reject() on this object so that changePage() requests resume processing. Deferred object observers expect the deferred object to be resolved like this:</p>
+ <pre><code>
+$( document ).bind( &quot;pageloadfailed&quot;, function( event, data ){
+
+ // Let the framework know we're going to handle things.
+
+ event.preventDefault();
+
+ // ... attempt to load some other page ...
+ // at some point, either in this callback, or through
+ // some other async means, call resolve, passing in
+ // the following args, plus a jQuery collection object
+ // containing the DOM element for the page.
+
+ data.deferred.resolve( data.absUrl, data.options, page );
+
+});</code></pre>
+ <p>or rejected like this:
+ <pre><code>
+$( document ).bind( &quot;pageloadfailed&quot;, function( event, data ){
+
+ // Let the framework know we're going to handle things.
+
+ event.preventDefault();
+
+ // ... attempt to load some other page ...
+ // at some point, if the load fails, either in this
+ // callback, or through some other async means, call
+ // reject like this:
+
+ data.deferred.reject( data.absUrl, data.options );
+
+});</code></pre>
+ </li>
+ </ul>
+ </li>
+ <li><code>options</code> (object)
+ <ul>
+ <li>This object contains the options that were passed into $.mobile.loadPage().</li>
+ </ul>
+ </li>
+ </ul>
+ </dd>
+ </dl>
+ <h2>Page change events</h2>
+ <p>Navigating between pages in the application is usually accomplished through a call to <code>$.mobile.changePage()</code>. This function is responsible for making sure that the page we are navigating to is loaded and inserted into the DOM, and then kicking off the transition animations between the current active page, and the page the caller wants to to make active. During this process, which is usually asynchronous, changePage() will fire off 2 events. The first is <code>pagebeforechange</code>. The second event depends on the success or failure of the change request. It will either be <code>pagechange</code> or <code>pagechangefailed</code>.</p>
+ <dl>
+ <dt><code>pagebeforechange</code></dt>
+ <dd>This event is triggered prior to any page loading or transition. Callbacks can prevent execution of the changePage() function by calling preventDefault on the event object passed into the callback. The callback also recieves a data object as its 2nd arg. The data object has the following properties:
+ <ul>
+ <li><code>toPage</code> (object or string)
+ <ul>
+ <li>This property represents the page the caller wishes to make active. It can be either a jQuery collection object containing the page DOM element, or an absolute/relative url to an internal or external page. The value exactly matches the 1st arg to the changePage() call that triggered the event.</li>
+ </ul>
+ </li>
+ <li><code>options</code> (object)
+ <ul>
+ <li>This object contains the configuration options to be used for the current changePage() call.</li>
+ </ul>
+ </li>
+ </ul>
+ <p>It should be noted that callbacks can modify both the toPage and options properties to alter the behavior of the current changePage() call. So for example, the toPage can be mapped to a different url from within a callback to do a sort of redirect.</p>
+ </dd>
+ <dt><code>pagechange</code></dt>
+ <dd>This event is triggered after the changePage() request has finished loading the page into the DOM and all page transition animations have completed. Note that any pageshow or pagehide events will have fired *BEFORE* this event is triggered. Callbacks for this particular event will be passed a data object as the 2nd arg. The properties for this object are as follows:
+ <ul>
+ <li><code>toPage</code> (object or string)
+ <ul>
+ <li>This property represents the page the caller wishes to make active. It can be either a jQuery collection object containing the page DOM element, or an absolute/relative url to an internal or external page. The value exactly matches the 1st arg to the changePage() call that triggered the event.</li>
+ </ul>
+ </li>
+ <li><code>options</code> (object)
+ <ul>
+ <li>This object contains the configuration options to be used for the current changePage() call.</li>
+ </ul>
+ </li>
+ </ul>
+ </dd>
+ <dt><code>pagechangefailed</code></dt>
+ <dd>This event is triggered when the changePage() request fails to load the page. Callbacks for this particular event will be passed a data object as the 2nd arg. The properties for this object are as follows:
+ <ul>
+ <li><code>toPage</code> (object or string)
+ <ul>
+ <li>This property represents the page the caller wishes to make active. It can be either a jQuery collection object containing the page DOM element, or an absolute/relative url to an internal or external page. The value exactly matches the 1st arg to the changePage() call that triggered the event.</li>
+ </ul>
+ </li>
+ <li><code>options</code> (object)
+ <ul>
+ <li>This object contains the configuration options to be used for the current changePage() call.</li>
+ </ul>
+ </li>
+ </ul>
+ </dd>
+ </dl>
+ <h2>Page transition events</h2>
+ <p>Page transitions are used to animate the change from the current active page (fromPage) to a new page (toPage). Events are triggered before and after these transitions so that observers can be notified whenever pages are shown or hidden. The events triggered are as follows:</p>
<dl>
<dt><code>pagebeforeshow</code></dt>
- <dd>Triggered on the page being shown, before its transition begins.</dd>
+ <dd>Triggered on the "toPage" we are transitioning to, before the actual transition animation is kicked off. Callbacks for this event will recieve a data object as their 2nd arg. This data object has the following properties on it:
+ <ul>
+ <li><code>prevPage</code> (object)
+ <ul>
+ <li>A jQuery collection object that contains the page DOM element that we are transitioning away from. Note that this collection is empty when the first page is transitioned in during application startup.</li>
+ </ul>
+ </li>
+ </ul>
+ </dd>
<dt><code>pagebeforehide</code></dt>
- <dd>Triggered on the page being hidden, before its transition begins.</dd>
+ <dd>Triggered on the "fromPage" we are transitioning away from, before the actual transition animation is kicked off. Callbacks for this event will recieve a data object as their 2nd arg. This data object has the following properties on it:
+ <ul>
+ <li><code>nextPage</code> (object)
+ <ul>
+ <li>A jQuery collection object that contains the page DOM element that we are transitioning to.</li>
+ </ul>
+ </li>
+ </ul>
+ <p>Note that this event will not be dispatched during the transition of the first page at application startup since there is no previously active page.</p>
+ </dd>
<dt><code>pageshow</code></dt>
- <dd>Triggered on the page being shown, after its transition completes.</dd>
+ <dd>Triggered on the "toPage" after the transition animation has completed. Callbacks for this event will recieve a data object as their 2nd arg. This data object has the following properties on it:
+ <ul>
+ <li><code>prevPage</code> (object)
+ <ul>
+ <li>A jQuery collection object that contains the page DOM element that we just transitioned away from. Note that this collection is empty when the first page is transitioned in during application startup.</li>
+ </ul>
+ </li>
+ </ul>
+ </dd>
<dt><code>pagehide</code></dt>
- <dd>Triggered on the page being hidden, after its transition completes.</dd>
+ <dd>Triggered on the "fromPage" after the transition animation has completed. Callbacks for this event will recieve a data object as their 2nd arg. This data object has the following properties on it:
+ <ul>
+ <li><code>nextPage</code> (object)
+ <ul>
+ <li>A jQuery collection object that contains the page DOM element that we just transitioned to.</li>
+ </ul>
+ </li>
+ </ul>
+ <p>Note that this event will not be dispatched during the transition of the first page at application startup since there is no previously active page.</p>
+ </dd>
</dl>
- <p>Note that all four of these events expose a reference to either the next page (<code>nextPage</code>) or previous page (<code>prevPage</code>), depending on whether the page is being shown or hidden, and whether that next or previous page exists (the first ever page shown does not have a previous page to reference, but an empty jQuery object is provided just the same). You can access this reference via the second argument of a bound callback function. For example: </p>
+ <p>You can access the prevPage or nextPage properties via the second argument of a bound callback function. For example: </p>
<pre><code>
$( 'div' ).live( 'pageshow',function(event, ui){
alert( 'This page was just hidden: '+ ui.prevPage);
@@ -152,29 +398,46 @@ <h4 style="margin:.5em 0">Important: pageCreate() vs pageInit()</h4>
+ <h2>Page remove events</h2>
+ <p>By default, the framework removes any non active dynamically loaded external pages from the DOM as soon as the user navigates away to a different page. The <code>pageremove</code> event is dispatched just before the framework attempts to remove the a page from the DOM.</p>
+ <dl>
+ <dt><code>pageremove</code></dt>
+ <dd>This event is triggered just before the framework attempts to remove an external page from the DOM. Event callbacks can call preventDefault on the event object to prevent the page from being removed.
+ </dd>
+ </dl>
+
<h2>Virtual mouse events</h2>
- <p>We provide a set of "virtual" click events that normalize mouse and touch events. This allows the developer to register listeners for the basic mouse events, such as mousedown, mousemove, mouseup, and click, and the plugin will take care of registering the correct listeners behind the scenes to invoke the listener at the fastest possible time for that device. This still retains the order of event firing in the traditional mouse environment, should multiple handlers be registered on the same element for different events.</p>
+ <p>We provide a set of "virtual" mouse events that attempt to abstract away mouse and touch events. This allows the developer to register listeners for the basic mouse events, such as mousedown, mousemove, mouseup, and click, and the plugin will take care of registering the correct listeners behind the scenes to invoke the listener at the fastest possible time for that device. In touch environments, the plugin retains the order of event firing that is seen in traditional mouse environments, so for example, vmouseup is always dispatched before vmousedown, and vmousedown before vclick, etc. The virtual mouse events also normalize how coordinate information is extracted from the event, so in touch based environments, coordinates are available from the pageX, pageY, screenX, screenY, clientX, and clientY properties, directly on the event object.</p>
<dl>
<dt><code>vmouseover</code></dt>
- <dd>Normalized event for handling touch or mouse <code>mouseover</code> events</dd>
+ <dd>Normalized event for handling touch or <code>mouseover</code> events</dd>
<dt><code>vmousedown</code></dt>
- <dd>Normalized event for handling touch or mouse <code>mousedown</code> events</dd>
+ <dd>Normalized event for handling touchstart or <code>mousedown</code> events</dd>
<dt><code>vmousemove</code></dt>
- <dd>Normalized event for handling touch or mouse <code>mousemove</code> events</dd>
+ <dd>Normalized event for handling touchmove or <code>mousemove</code> events</dd>
<dt><code>vmouseup</code></dt>
- <dd>Normalized event for handling touch or mouse <code>mouseup</code> events</dd>
+ <dd>Normalized event for handling touchend or <code>mouseup</code> events</dd>
<dt><code>vclick</code></dt>
- <dd>Normalized event for handling touch or mouse <code>click</code> events</dd>
+ <dd>Normalized event for handling touchend or mouse <code>click</code> events. On touch devices, this event is dispatched *AFTER* vmouseup. </dd>
<dt><code>vmousecancel</code></dt>
<dd>Normalized event for handling touch or mouse <code>mousecancel</code> events</dd>
</dl>
-
+ <div class="ui-body ui-body-e">
+ <h4 style="margin:.5em 0">Warning: Use vclick with caution</h4>
+ <p> Use vclick with caution on touch devices. Webkit based browsers synthesize mousedown, mouseup, and click events roughly 300ms after the touchend event is dispatched. The target of the synthesized mouse events are calculated at the time they are dispatched and are based on the location of the touch events and, in some cases, implementation specific heuristics which leads to different target calculations on different devices and even different OS versions for the same device. This means the target element within the original touch events could be different from the target element within the synthesized mouse events.</p>
+ <p>We recommend using click instead of vclick anytime the action being triggered has the possibility of changing the content underneath the point that was touched on screen. This includes page transitions and other behaviors such as collapse/expand that could result in the screen shifting or content being completely replaced.</p>
+ </div>
+ <p>&nbsp;</p>
+ <div class="ui-body ui-body-e">
+ <h4 style="margin:.5em 0">Canceling an elements default click behavior</h4>
+ <p>Applications can call preventDefault() on a vclick event to cancel an element's default click behavior. On mouse based devices, calling preventDefault() on a vclick event equates to calling preventDefault() on the real click event during the bubble event phase. On touch based devices, it's a bit more complicated since the actual click event is dispatched about 300ms after the vclick event is dispatched. For touch devices, calling preventDefault() on a vclick event triggers some code in the vmouse plugin that attempts to catch the next click event that gets dispatched by the browser, during the capture event phase, and call preventDefault() and stopPropagation() on it. As mentioned in the warning above, it is sometimes difficult match up a touch event with its corresponding mouse event because the targets can differ. For this reason, the vmouse plugin also falls back to attempting to identify a corresponding click event by coordinates. There are still cases where both target and coordinate identification fail, which results in the click event being dispatched and either triggering the default action of the element, or in the case where content has been shifted or replaced, triggering a click on a different element. If this happens on a regular basis for a given element/control, we suggest you use click for triggering your action.</p>
+ </div>
<h2>Animation Events</h2>
<p>jQuery Mobile exposes the <code>animationComplete</code> plugin, which you can utilize after adding or removing a class that applies a CSS transition.</p>
@@ -183,7 +446,7 @@ <h4 style="margin:.5em 0">Important: pageCreate() vs pageInit()</h4>
<div class="content-secondary">
- <div data-role="collapsible" data-collapsed="true" data-theme="b">
+ <div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
<h3>More in this section</h3>
@@ -193,7 +456,6 @@ <h4 style="margin:.5em 0">Important: pageCreate() vs pageInit()</h4>
<li><a href="../../docs/api/globalconfig.html">Configuring defaults</a></li>
<li data-theme="a"><a href="../../docs/api/events.html">Events</a></li>
<li><a href="../../docs/api/methods.html">Methods &amp; Utilities</a></li>
- <li><a href="../../docs/api/mediahelpers.html">Responsive Layout</a></li>
<li><a href="../../docs/api/themes.html">Theme framework</a></li>
</ul>
View
3  docs/api/globalconfig.html
@@ -129,7 +129,7 @@
<div class="content-secondary">
- <div data-role="collapsible" data-collapsed="true" data-theme="b">
+ <div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
<h3>More in this section</h3>
@@ -139,7 +139,6 @@
<li data-theme="a"><a href="../../docs/api/globalconfig.html">Configuring defaults</a></li>
<li><a href="../../docs/api/events.html">Events</a></li>
<li><a href="../../docs/api/methods.html">Methods &amp; Utilities</a></li>
- <li><a href="../../docs/api/mediahelpers.html">Responsive Layout</a></li>
<li><a href="../../docs/api/themes.html">Theme framework</a></li>
</ul>
</div>
View
1  docs/api/index.html
@@ -27,7 +27,6 @@
<li><a href="globalconfig.html">Configuring defaults</a></li>
<li><a href="events.html">Events</a></li>
<li><a href="methods.html">Methods &amp; Utilities</a></li>
- <li><a href="mediahelpers.html">Responsive Layout</a></li>
<li><a href="themes.html">Theme framework</a></li>
</ul>
View
6 docs/api/mediahelpers.html
@@ -24,7 +24,9 @@
<div class="content-primary">
<h2>Media Query Helper Classes</h2>
-<p class="ui-bar-e ui-body"><strong>Note: This feature is deprecated in beta, and will be removed after that. We recommend using CSS3 Media Queries instead.</strong></p>
+<p class="ui-bar-e ui-body"><strong>Note: This feature was deprecated in beta, and removed in 1.0rc1. We recommend using CSS3 Media Queries instead.</strong> To support older versions of Internet Explorer, check out <a href="https://github.com/scottjehl/Respond">respond.js</a>, a fast &amp; lightweight polyfill for min/max-width CSS3 Media Queries.</p>
+ <p class="ui-bar-e ui-body">If you still need this feature, you can find the code here: <a href="https://raw.github.com/jquery/jquery-mobile/38d7ad8848f00b0921bf4ae723f3ad199eb851c1/js/jquery.mobile.media.classes.js">jquery.mobile.media.classes.js</a></p>
+
<p>jQuery Mobile adds classes to the <code>HTML</code> element that mimic browser orientation and common min/max-width CSS media queries. These classes are updated on load, resize and orientationchange, allowing you to key off these classes in your CSS, to create <a href="http://www.alistapart.com/articles/responsive-web-design/">responsive layouts</a> - even in browsers that don't support media queries! </p>
<h3>Orientation Classes </h3>
@@ -100,7 +102,7 @@
<div class="content-secondary">
- <div data-role="collapsible" data-collapsed="true" data-theme="b">
+ <div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
<h3>More in this section</h3>
View
56 docs/api/methods.html
@@ -45,22 +45,26 @@
<ul>
<li>Properties:
<ul>
- <li><code>transition</code> (<em>string</em>, default: $.mobile.defaultPageTransition) The transition to use when showing the page. </li>
- <li><code>reverse</code> (<em>boolean</em>, default: false) Decides what direction the transition will run when showing the page. </li>
+ <li><code>allowSamePageTransition</code> (<em>boolean</em>, default: false) By default, changePage() ignores requests to change to the current active page. Setting this option to true, allows the request to execute. Developers should note that some of the page transitions assume that the fromPage and toPage of a changePage request are different, so they may not animate as expected. Developers are responsible for either providing a proper transition, or turning it off for this specific case.</li>
<li><code>changeHash</code> (<em>boolean</em>, default: true) Decides if the hash in the location bar should be updated. </li>
- <li><code>role</code> (<em>string</em>, default: undefined) The data-role value to be used when displaying the page. By default this is undefined which means rely on the value of the @data-role attribute defined on the element.</li>
- <li><code>pageContainer</code> (jQuery collection, default: $.mobile.pageContainer) Specifies the element that should contain the page. </li>
- <li><code>type</code> (<em>string</em>, default: &quot;get&quot;) Specifies the method ("get" or "post") to use when making a page request.
+ <li><code>data</code> (<em>object</em> or string, default: undefined) The data to send with an Ajax page request.
<ul>
<li>Used only when the 'to' argument of changePage() is a URL.</li>
</ul>
- </li>
- <li><code>data</code> (<em>object</em> or string, default: undefined) The data to send with an Ajax page request.
+ </li>
+ <li><code>data-url</code> (string, default: undefined) The URL to use when updating the browser location upon changePage completion.
+ If not specified, the value of the data-url attribute of the page element is used.</li>
+ <li><code>pageContainer</code> (jQuery collection, default: $.mobile.pageContainer) Specifies the element that should contain the page. </li>
+ <li><code>reloadPage</code> (<em>boolean</em>, default: false) Forces a reload of a page, even if it is already in the DOM of the page container.
<ul>
<li>Used only when the 'to' argument of changePage() is a URL.</li>
</ul>
</li>
- <li><code>reloadPage</code> (<em>boolean</em>, default: false) Forces a reload of a page, even if it is already in the DOM of the page container.
+ <li><code>reverse</code> (<em>boolean</em>, default: false) Decides what direction the transition will run when showing the page. </li>
+ <li><code>showLoadMsg</code> (<em>boolean</em>, default: true) Decides whether or not to show the loading message when loading external pages.</li>
+ <li><code>role</code> (<em>string</em>, default: undefined) The data-role value to be used when displaying the page. By default this is undefined which means rely on the value of the @data-role attribute defined on the element.</li>
+ <li><code>transition</code> (<em>string</em>, default: $.mobile.defaultPageTransition) The transition to use when showing the page. </li>
+ <li><code>type</code> (<em>string</em>, default: &quot;get&quot;) Specifies the method ("get" or "post") to use when making a page request.
<ul>
<li>Used only when the 'to' argument of changePage() is a URL.</li>
</ul>
@@ -111,14 +115,13 @@
<ul>
<li>Properties:
<ul>
- <li><code>role</code> (<em>string</em>, default: undefined) The data-role value to be used when displaying the page. By default this is undefined which means rely on the value of the @data-role attribute defined on the element.</li>
+ <li><code>data</code> (<em>object</em> or string, default: undefined) The data to send with an Ajax page request. </li>
+ <li><code>loadMsgDelay</code> (<em>number (in ms)</em>, default: 50) Forced delay before the loading message is shown. This is meant to allow time for a page that has already been visited to be fetched from cache without a loading message.</li>
<li><code>pageContainer</code> (jQuery collection, default: $.mobile.pageContainer) Specifies the element that should contain the page after it is loaded. </li>
+ <li><code>reloadPage</code> (<em>boolean</em>, default: false) Forces a reload of a page, even if it is already in the DOM of the page container. </li>
+ <li><code>role</code> (<em>string</em>, default: undefined) The data-role value to be used when displaying the page. By default this is undefined which means rely on the value of the @data-role attribute defined on the element.</li>
<li><code>type</code> (<em>string</em>, default: &quot;get&quot;) Specifies the method ("get" or "post") to use when making a page request.
</li>
- <li><code>data</code> (<em>object</em> or string, default: undefined) The data to send with an Ajax page request. </li>
- <li><code>reloadPage</code> (<em>boolean</em>, default: false) Forces a reload of a page, even if it is already in the DOM of the page container. </li>
-
- <li><code>loadMsgDelay</code> (<em>number (in ms)</em>, default: 50) Forced delay before the loading message is shown. This is meant to allow time for a page that has already been visited to be fetched from cache without a loading message.</li>
</ul>
</li>
</ul>
@@ -216,7 +219,7 @@
<dd>The port specified within the URL. Most URLs rely on the default port for the protocol used, so this may be an empty string most of the time.</dd>
<dt><code>protocol</code></dt>
<dd>The protocol for the URL including the trailing ':' character.</dd>
- <dt><code>search<</code>/dt>
+ <dt><code>search</code></dt>
<dd>The query component of the URL including the leading '?' character.</dd>
</dl>
<p>But it also contains additional properties that provide access to additional components as well as some common forms of the URL developers access:</p>
@@ -479,27 +482,7 @@
</dd>
-
- <dt><code>$.mobile.addResolutionBreakpoints</code> (<em>method</em>)</dt>
- <dd>Add width breakpoints to the min/max width classes that are added to the HTML element.</dd>
- <dd>
- <dl>
- <dt><code>&#183;</code> Arguments:</dt>
- <dd><code>values</code> (<em>number or array</em>). Pass any number or array of numbers to add to the resolution classes. Read more about this feature here: <a href="mediahelpers.html">Orientation &amp; resolution targeting</a>.</dd>
- </dl>
- </dd>
-
- <dd>Examples:
- <pre>
- <code>
-<strong>//add a 400px breakpoint</strong>
-$.mobile.addResolutionBreakpoints(400);
-<strong>//add 2 more breakpoints</strong>
-$.mobile.addResolutionBreakpoints([600,800]);
- </code>
- </pre>
-
- </dd>
+
@@ -514,7 +497,7 @@
<div class="content-secondary">
- <div data-role="collapsible" data-collapsed="true" data-theme="b">
+ <div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
<h3>More in this section</h3>
@@ -524,7 +507,6 @@
<li><a href="../../docs/api/globalconfig.html">Configuring defaults</a></li>
<li><a href="../../docs/api/events.html">Events</a></li>
<li data-theme="a"><a href="../../docs/api/methods.html">Methods &amp; Utilities</a></li>
- <li><a href="../../docs/api/mediahelpers.html">Responsive Layout</a></li>
<li><a href="../../docs/api/themes.html">Theme framework</a></li>
</ul>
</div>
View
23 docs/api/themes.html
@@ -51,11 +51,11 @@
<p>The default theme contains the following five Bar styles:</p>
<div class="swatch-preview">
- <div class="ui-bar ui-bar-a">Bar A</div>
- <div class="ui-bar ui-bar-b">Bar B</div>
- <div class="ui-bar ui-bar-c">Bar C</div>
- <div class="ui-bar ui-bar-d">Bar D</div>
- <div class="ui-bar ui-bar-e">Bar E</div>
+ <div class="ui-bar ui-bar-a">Bar A - <a href="#" data-role="none" class="ui-link">Link</a></div>
+ <div class="ui-bar ui-bar-b">Bar B - <a href="#" data-role="none" class="ui-link">Link</a></div>
+ <div class="ui-bar ui-bar-c">Bar C - <a href="#" data-role="none" class="ui-link">Link</a></div>
+ <div class="ui-bar ui-bar-d">Bar D - <a href="#" data-role="none" class="ui-link">Link</a></div>
+ <div class="ui-bar ui-bar-e">Bar E - <a href="#" data-role="none" class="ui-link">Link</a></div>
</div><!-- end swatch-bars -->
<p>By default, the framework assigns the "a" swatch to all headers and footers, because these are typically given high visual priority in an application. To set the color of a bar to a different swatch color, simply add the <code> data-theme</code> attribute to your header or footer and specify an alternate swatch letter ('b' or 'd', for example) and the specified theme swatch color will be applied. Learn more about <a href="../toolbars/bars-themes.html">toolbar theming</a>.</p>
@@ -66,11 +66,11 @@
<p>The default theme also includes color swatch values for use in content blocks, designed to coordinate with the header color swatches in the theme. </p>
<div class="swatch-preview">
- <div class="ui-body ui-body-a">Block A</div>
- <div class="ui-body ui-body-b">Block B</div>
- <div class="ui-body ui-body-c">Block C</div>
- <div class="ui-body ui-body-d">Block D</div>
- <div class="ui-body ui-body-e">Block E</div>
+ <div class="ui-body ui-body-a">Block A - <a href="#">Link</a></div>
+ <div class="ui-body ui-body-b">Block B - <a href="#">Link</a></div>
+ <div class="ui-body ui-body-c">Block C - <a href="#">Link</a></div>
+ <div class="ui-body ui-body-d">Block D - <a href="#">Link</a></div>
+ <div class="ui-body ui-body-e">Block E - <a href="#">Link</a></div>
</div><!-- end swatch-bars -->
@@ -238,7 +238,7 @@
<div class="content-secondary ui-body-d">
- <div data-role="collapsible" data-collapsed="true" data-theme="b">
+ <div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
<h3>More in this section</h3>
@@ -248,7 +248,6 @@
<li><a href="../../docs/api/globalconfig.html">Configuring defaults</a></li>
<li><a href="../../docs/api/events.html">Events</a></li>
<li><a href="../../docs/api/methods.html">Methods &amp; Utilities</a></li>
- <li><a href="../../docs/api/mediahelpers.html">Responsive Layout</a></li>
<li data-theme="a"><a href="../../docs/api/themes.html">Theme framework</a></li>
</ul>
View
90 docs/buttons/buttons-events.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Button events</title>
+ <link rel="stylesheet" href="../../themes/default/" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+ <script src="../../js/jquery.js"></script>
+ <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
+ <script src="../_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Button basics</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+
+ <form action="#" method="get">
+
+ <h2>Button basics</h2>
+
+ <ul data-role="controlgroup" data-type="horizontal" class="localnav">
+ <li><a href="buttons-types.html" data-role="button" data-transition="fade">Basics</a></li>
+ <li><a href="buttons-options.html" data-role="button" data-transition="fade">Options</a></li>
+ <li><a href="buttons-methods.html" data-role="button" data-transition="fade">Methods</a></li>
+ <li><a href="buttons-events.html" data-role="button" data-transition="fade" class="ui-btn-active">Events</a></li>
+ </ul>
+
+ <p>Bind events directly to the <code>a</code>, <code>input</code>, or <code>button</code> element. Use jQuery Mobile's <a href="../api/events.html">virtual events</a>, or bind standard JavaScript events, like change, focus, blur, etc.:</p>
+ <pre><code>
+$( ".myButton" ).bind( "click", function(event, ui) {
+ ...
+});
+</code></pre>
+
+ <p>The <strong>form button</strong> plugin has the following custom events:</p>
+
+ <dl>
+
+ <dt><code>create</code> triggered when a form button is created</dt>
+ <dd>
+
+ <pre><code>
+$('[type='submit']').button({
+ create: function(event, ui) { ... }
+});
+ </code></pre>
+ </dd>
+
+ </dl>
+
+ </form>
+ </div><!--/content-primary -->
+
+ <div class="content-secondary">
+
+ <div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
+
+ <h3>More in this section</h3>
+
+ <ul data-role="listview" data-theme="c" data-dividertheme="d">
+ <li data-role="list-divider">Buttons</li>
+ <li data-theme="a"><a href="buttons-types.html">Button basics</a></li>
+ <li><a href="buttons-icons.html">Button icons</a></li>
+ <li><a href="buttons-inline.html">Inline buttons</a></li>
+ <li><a href="buttons-grouped.html">Grouped buttons</a></li>
+ <li><a href="buttons-themes.html">Theming buttons</a></li>
+ </ul>
+ </div>
+ </div>
+
+</div><!-- /content -->
+
+<div data-role="footer" class="footer-docs" data-theme="c">
+ <p>&copy; 2011 The jQuery Project</p>
+</div>
+
+</div><!-- /page -->
+
+</body>
+</html>
+
View
4 docs/buttons/buttons-grouped.html
@@ -68,14 +68,14 @@
<div class="content-secondary">
- <div data-role="collapsible" data-collapsed="true" data-theme="b">
+ <div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
<h3>More in this section</h3>
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li data-role="list-divider">Buttons</li>
- <li><a href="buttons-types.html">Button markup options</a></li>
+ <li><a href="buttons-types.html">Button basics</a></li>
<li><a href="buttons-icons.html">Button icons</a></li>
<li><a href="buttons-inline.html">Inline buttons</a></li>
<li data-theme="a"><a href="buttons-grouped.html">Grouped buttons</a></li>
View
4 docs/buttons/buttons-icons.html
@@ -186,14 +186,14 @@
<div class="content-secondary">
- <div data-role="collapsible" data-collapsed="true" data-theme="b">
+ <div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
<h3>More in this section</h3>
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li data-role="list-divider">Buttons</li>
- <li><a href="buttons-types.html">Button markup options</a></li>
+ <li><a href="buttons-types.html">Button basics</a></li>
<li data-theme="a"><a href="buttons-icons.html">Button icons</a></li>
<li><a href="buttons-inline.html">Inline buttons</a></li>
<li><a href="buttons-grouped.html">Grouped buttons</a></li>
View
4 docs/buttons/buttons-inline.html
@@ -52,14 +52,14 @@
<div class="content-secondary">
- <div data-role="collapsible" data-collapsed="true" data-theme="b">
+ <div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
<h3>More in this section</h3>
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li data-role="list-divider">Buttons</li>
- <li><a href="buttons-types.html">Button markup options</a></li>
+ <li><a href="buttons-types.html">Button basics</a></li>
<li><a href="buttons-icons.html">Button icons</a></li>
<li data-theme="a"><a href="buttons-inline.html">Inline buttons</a></li>
<li><a href="buttons-grouped.html">Grouped buttons</a></li>
View
96 docs/buttons/buttons-methods.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Button methods</title>
+ <link rel="stylesheet" href="../../themes/default/" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+ <script src="../../js/jquery.js"></script>
+ <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
+ <script src="../_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Button basics</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+
+ <form action="#" method="get">
+
+ <h2>Button basics</h2>
+
+ <ul data-role="controlgroup" data-type="horizontal" class="localnav">
+ <li><a href="buttons-types.html" data-role="button" data-transition="fade">Basics</a></li>
+ <li><a href="buttons-options.html" data-role="button" data-transition="fade">Options</a></li>
+ <li><a href="buttons-methods.html" data-role="button" data-transition="fade" class="ui-btn-active">Methods</a></li>
+ <li><a href="buttons-events.html" data-role="button" data-transition="fade">Events</a></li>
+ </ul>
+
+ <p>The following methods apply only to <strong>form buttons</strong>. Link-based buttons do not have any associated methods.</p>
+
+ <dl>
+
+ <dt><code>enable</code> enable a disabled form button</dt>
+ <dd>
+ <pre><code>
+$('[type='submit']').button('enable');
+ </code></pre>
+ </dd>
+
+ <dt><code>disable</code> disable a form button</dt>
+ <dd>
+ <pre><code>
+$('[type='submit']').button('disable');
+ </code></pre>
+ </dd>
+
+ <dt><code>refresh</code> update the form button</dt>
+ <dd>
+ <p>If you manipulate a form button via JavaScript, you must call the refresh method on it to update the visual styling.</p>
+
+ <pre><code>
+$('[type='submit']').button('refresh');
+ </code></pre>
+ </dd>
+
+ </dl>
+
+ </form>
+ </div><!--/content-primary -->
+
+ <div class="content-secondary">
+
+ <div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
+
+ <h3>More in this section</h3>
+
+ <ul data-role="listview" data-theme="c" data-dividertheme="d">
+ <li data-role="list-divider">Buttons</li>
+ <li data-theme="a"><a href="buttons-types.html">Button basics</a></li>
+ <li><a href="buttons-icons.html">Button icons</a></li>
+ <li><a href="buttons-inline.html">Inline buttons</a></li>
+ <li><a href="buttons-grouped.html">Grouped buttons</a></li>
+ <li><a href="buttons-themes.html">Theming buttons</a></li>
+ </ul>
+ </div>
+ </div>
+
+</div><!-- /content -->
+
+<div data-role="footer" class="footer-docs" data-theme="c">
+ <p>&copy; 2011 The jQuery Project</p>
+</div>
+
+</div><!-- /page -->
+
+</body>
+</html>
+
View
136 docs/buttons/buttons-options.html
@@ -0,0 +1,136 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Button options</title>
+ <link rel="stylesheet" href="../../themes/default/" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+ <script src="../../js/jquery.js"></script>
+ <script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
+ <script src="../_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Button basics</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+
+ <form action="#" method="get">
+
+ <h2>Button basics</h2>
+
+ <ul data-role="controlgroup" data-type="horizontal" class="localnav">
+ <li><a href="buttons-types.html" data-role="button" data-transition="fade">Basics</a></li>
+ <li><a href="buttons-options.html" data-role="button" data-transition="fade" class="ui-btn-active">Options</a></li>
+ <li><a href="buttons-methods.html" data-role="button" data-transition="fade">Methods</a></li>
+ <li><a href="buttons-events.html" data-role="button" data-transition="fade">Events</a></li>
+ </ul>
+
+ <p>The following options apply to <strong>all buttons</strong>:</p>
+
+ <dl>
+ <dt><code>corners</code> <em>boolean</em></dt>
+ <dd>
+ <p class="default">default: true</p>
+ <p>Applies the theme button border-radius if set to true. This option is also exposed as a data attribute: <code>data-corners=&quot;false&quot;</code></p>
+ <pre><code>$('a').buttonMarkup(<strong>{ corners: "false" }</strong>);</code></pre>
+ </dd>
+ <dt><code>icon</code> <em>string</em></dt>
+ <dd>
+ <p class="default">default: null</p>
+ <p>Applies an icon from the <a href="../buttons/buttons-icons.html">icon set</a>. This option is also exposed as a data attribute: <code>data-icon=&quot;star&quot;</code></p>
+ <pre><code>$('a').buttonMarkup(<strong>{ icon: "star" }</strong>);</code></pre>
+ </dd>
+
+ <dt><code>iconpos</code> <em>string</em></dt>
+ <dd>
+ <p class="default">default: "left"</p>
+ <p>Positions the icon in the button. Possible values: left, right, none, notext. The notext value will display an icon-only button with no text feedback. This option is also exposed as a data attribute: <code>data-iconpos=&quot;left&quot;</code></p>
+ <pre><code>$('a').buttonMarkup(<strong>{ iconpos: "right" }</strong>);</code></pre>
+ </dd>
+
+ <dt><code>iconshadow</code> <em>boolean</em></dt>
+ <dd>
+ <p class="default">default: true</p>
+ <p>Applies the theme shadow to the button's icon if set to true. This option is also exposed as a data attribute: <code>data-iconshadow=&quot;false&quot;</code></p>
+ <pre><code>$('a').buttonMarkup(<strong>{ iconshadow: "false" }</strong>);</code></pre>
+ </dd>
+
+ <dt><code>inline</code> <em>boolean</em></dt>
+ <dd>
+ <p class="default">default: null (false)</p>
+ <p>If set to true, this will make the button act like an inline button so the width is determined by the button's text. By default, this is null (false) so the button is full width, regardless of the feedback content. Possible values: true, false. This option is also exposed as a data attribute: <code>data-inline=&quot;true&quot;</code></p>
+ <pre><code>$('a').buttonMarkup(<strong>{ inline: "true" }</strong>);</code></pre>
+ </dd>
+
+ <dt><code>shadow</code> <em>boolean</em></dt>
+ <dd>
+ <p class="default">default: true</p>
+ <p>Applies the drop shadow style to the button if set to true. This option is also exposed as a data attribute: <code>data-shadow=&quot;false&quot;</code></p>
+ <pre><code>$('a').buttonMarkup(<strong>{ shadow: "false" }</strong>);</code></pre>
+ </dd>
+
+ <dt><code>theme</code> <em>string</em></dt>
+ <dd>
+ <p class="default">default: null, inherited from parent</p>
+ <p>Sets the color scheme (swatch) for all instances of this widget. It accepts a single letter from a-z that maps to the swatches included in your theme. By default, it will inherit the same swatch color as it's parent container if not explicitly set. This option is also exposed as a data attribute: <code>data-theme=&quot;a&quot;</code></p>
+ <pre><code>$('a').buttonMarkup(<strong>{ theme: "a" }</strong>);</code></pre>
+ </dd>
+ </dl>
+
+ <div class="ui-body ui-body-e">
+ <p>The following option applies only to <strong>form buttons</strong>, which are automatically initialized by the framework:</p>
+ </div>
+
+ <dl>
+ <dt><code>initSelector</code> <em>CSS selector string</em></dt>
+ <dd>
+ <p class="default">default: "button, [type='button'], [type='submit'], [type='reset'], [type='image']"</p>
+ <p>This is used to define the selectors (element types, data roles, etc.) that will automatically be initialized as form buttons. To change which elements are initialized, bind this option to the <a href="../api/globalconfig.html">mobileinit event</a>:</p>
+<pre><code>$( document ).bind( "mobileinit", function(){
+ <strong>$.mobile.button.prototype.options.initSelector = ".myButtons";</strong>
+});
+</code></pre>
+ </dd>
+ </dl>
+
+
+ </form>
+ </div><!--/content-primary -->
+
+ <div class="content-secondary">
+
+ <div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
+
+ <h3>More in this section</h3>
+
+ <ul data-role="listview" data-theme="c" data-dividertheme="d">
+ <li data-role="list-divider">Buttons</li>
+ <li data-theme="a"><a href="buttons-types.html">Button basics</a></li>
+ <li><a href="buttons-icons.html">Button icons</a></li>
+ <li><a href="buttons-inline.html">Inline buttons</a></li>
+ <li><a href="buttons-grouped.html">Grouped buttons</a></li>
+ <li><a href="buttons-themes.html">Theming buttons</a></li>
+ </ul>
+ </div>
+ </div>
+
+</div><!-- /content -->
+
+<div data-role="footer" class="footer-docs" data-theme="c">
+ <p>&copy; 2011 The jQuery Project</p>
+</div>
+
+</div><!-- /page -->
+
+</body>
+</html>
+
View
14 docs/buttons/buttons-themes.html
@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Button Theming</title>
+ <title>jQuery Mobile Docs - Theming buttons</title>
<link rel="stylesheet" href="../../themes/default/" />
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
<script src="../../js/jquery.js"></script>
@@ -23,9 +23,9 @@
<div data-role="content">
<div class="content-primary">
- <h2>Theming</h2>
+ <h2>Theming buttons</h2>
- <p>jQuery Mobile has a rich <a href="../api/themes.html">theming system</a> that gives you full control of how buttons are styled. When a link is added to a container, it is automatically assigned a theme swatch letter that matches it's parent bar or content box to visually integrate the button into the parent container, like a chameleon. So a button placed inside a content container with a theme of "a" (black in the default theme) will be automatically assigned the button theme of "a" (charcoal in the default theme). Here are examples of the button theme pairings in the default theme. All buttons have the same HTML markup: </p>
+ <p>jQuery Mobile has a rich <a href="../api/themes.html">theming system</a> that gives you full control of how buttons are styled. When a link is added to a container, it is automatically assigned a theme swatch letter that matches its parent bar or content box to visually integrate the button into the parent container, like a chameleon. So a button placed inside a content container with a theme of "a" (black in the default theme) will be automatically assigned the button theme of "a" (charcoal in the default theme). Here are examples of the button theme pairings in the default theme. All buttons have the same HTML markup: </p>
<div class="ui-body ui-body-a"><h4>A swatch</h4><a href="index.html" data-role="button">Button</a></div>
<div class="ui-body ui-body-b"><h4>B swatch</h4><a href="index.html" data-role="button">Button</a></div>
@@ -34,13 +34,13 @@
<div class="ui-body ui-body-e"><h4>E swatch</h4><a href="index.html" data-role="button">Button</a></div>
<h2>Assigning theme swatches</h2>
- <p>Button can be manually assigned any of the button color swatches from the theme to add visual contrast with the container they sit inside by adding the <code> data-theme</code> attribute on the button markup and specifying a swatch letter. </p>
+ <p>Buttons can be manually assigned any of the button color swatches from the theme to add visual contrast with the container they sit inside by adding the <code> data-theme</code> attribute on the button markup and specifying a swatch letter. </p>
<pre><code>
&lt;a href=&quot;index.html&quot; data-role=&quot;button&quot; data-theme=&quot;a&quot;&gt;Theme a&lt;/a&gt;
</code></pre>
- <p>Here are 4 buttons with icons that have a different swatch letter assigned via the <code> data-theme</code> attribute.</p>
+ <p>Here are 5 buttons with icons that have a different swatch letter assigned via the <code> data-theme</code> attribute.</p>
<a href="index.html" data-role="button" data-theme="a" data-icon="arrow-l" data-inline="true">Theme a</a>
<a href="index.html" data-role="button" data-theme="b" data-icon="arrow-l" data-inline="true">Theme b</a>
@@ -99,14 +99,14 @@
<div class="content-secondary">
- <div data-role="collapsible" data-collapsed="true" data-theme="b">
+ <div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
<h3>More in this section</h3>
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li data-role="list-divider">Buttons</li>
- <li><a href="buttons-types.html">Button markup options</a></li>
+ <li><a href="buttons-types.html">Button basics</a></li>
<li><a href="buttons-icons.html">Button icons</a></li>
<li><a href="buttons-inline.html">Inline buttons</a></li>
<li><a href="buttons-grouped.html">Grouped buttons</a></li>
View
33 docs/buttons/buttons-types.html
@@ -16,18 +16,28 @@
<div data-role="page" class="type-interior">
<div data-role="header" data-theme="f">
- <h1>Button markup options</h1>
+ <h1>Button basics</h1>
<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
-
- <p>Buttons that are used for navigation should be coded as anchor links, and those that submit forms as <code>button</code> elements &mdash; each will be styled identically by the framework.</p>
+
+ <h2>Button basics</h2>
+
+ <ul data-role="controlgroup" data-type="horizontal" class="localnav">
+ <li><a href="buttons-types.html" data-role="button" data-transition="fade" class="ui-btn-active">Basics</a></li>
+ <li><a href="buttons-options.html" data-role="button" data-transition="fade">Options</a></li>
+ <li><a href="buttons-methods.html" data-role="button" data-transition="fade">Methods</a></li>
+ <li><a href="buttons-events.html" data-role="button" data-transition="fade">Events</a></li>
+ </ul>
+
+
+ <p>Buttons are coded with standard HTML anchor and input elements, then enhanced by jQuery Mobile to make them more attractive and useable on a mobile device. Use anchor links (<code>a</code> elements) to mark up navigation buttons, and <code>input</code> or <code>button</code> elements for form submission.</p>
<h2>Styling links as buttons</h2>
- <p>In the main content block of a page, you can style any anchor link as a button by adding the <code> data-role="button"</code> to the link. The framework will add all necessary classes to style the link as a button. For example, this markup: </p>
+ <p>In the main content block of a page, you can style any anchor link as a button by adding the <code>data-role="button"</code> attribute. The framework will enhance the link with markup and classes to style the link as a button. For example, this markup: </p>
<code>
&lt;a href=&quot;index.html&quot; data-role=&quot;button&quot;&gt;Link button&lt;/a&gt;
@@ -37,9 +47,8 @@
<a href="index.html" data-role="button">Link button</a>
<h2>Form buttons</h2>
- <p>For ease of styling, the framework automatically converts any <code>button</code> element or <code>input</code> with a <code>type</code> of <code>submit</code>, <code>reset</code>, <code>button</code>, or <code>image</code> into a custom styled link-based button &mdash; there is no need to add the <code> data-role="button"</code> attribute. </p>
- <p>The original form-based button is hidden, but remains in the markup. When a click event fires on a link button, it triggers a click on the original form button.</p>
-
+ <p>For ease of styling, the framework automatically converts any <code>button</code> or <code>input</code> element with a <code>type</code> of <code>submit</code>, <code>reset</code>, <code>button</code>, or <code>image</code> into a custom styled, link-based button &mdash; there is no need to add the <code> data-role="button"</code> attribute. </p>
+ <p>To preserve events bound to the original <code>button</code> or <code>input</code>, the framework hides the original element by making it transparent and positioning it over the new button markup. When a user clicks on the the custom-styled button, they're actually clicking on the original element.</p>
<p><strong>Button</strong> based button:</p>
<button>Button element</button>
@@ -60,19 +69,17 @@
<div class="content-secondary">
- <div data-role="collapsible" data-collapsed="true" data-theme="b">
+ <div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
<h3>More in this section</h3>
- <ul data-role="listview" data-theme="c" data-dividertheme="d">
-
+ <ul data-role="listview" data-theme="c" data-dividertheme="d">
<li data-role="list-divider">Buttons</li>
- <li data-theme="a"><a href="buttons-types.html">Button markup options</a></li>
+ <li data-theme="a"><a href="buttons-types.html">Button basics</a></li>
<li><a href="buttons-icons.html">Button icons</a></li>
<li><a href="buttons-inline.html">Inline buttons</a></li>
<li><a href="buttons-grouped.html">Grouped buttons</a></li>
- <li><a href="buttons-themes.html">Theming buttons</a></li>
-
+ <li><a href="buttons-themes.html">Theming buttons</a></li>
</ul>
</div>
</div>
View
2  docs/buttons/index.html
@@ -24,7 +24,7 @@
<p>Buttons are core widgets in jQuery Mobile, and are used within a wide range of other plugins.</p>
<ul data-role="listview" data-inset="true">
- <li><a href="buttons-types.html">Button markup options</a></li>
+ <li><a href="buttons-types.html">Button basics</a></li>
<li><a href="buttons-icons.html">Button icons</a></li>
<li><a href="buttons-inline.html">Inline buttons</a></li>
<li><a href="buttons-grouped.html">Grouped buttons</a></li>
View
68 docs/content/content-collapsible-set.html
@@ -28,19 +28,19 @@
<p>By default, all the sections will be collapsed. To set a section to be open when the page loads, add the <code> data-collapsed="false"</code> attribute to the heading of the section you want expanded.</p>
<pre><code>
-&lt;div data-role="collapsible-set"&gt;
+<strong>&lt;div data-role="collapsible-set"&gt;</strong>
- &lt;div data-role=&quot;collapsible&quot; data-collapsed=&quot;false&quot;&gt;
- &lt;h3&gt;Section A&lt;/h3&gt;
+ &lt;div data-role=&quot;collapsible&quot; <strong>data-collapsed=&quot;false&quot;</strong>&gt;
+ &lt;h3&gt;Section 1&lt;/h3&gt;
&lt;p&gt;I&#x27;m the collapsible set content for section B.&lt;/p&gt;
&lt;/div&gt;
&lt;div data-role=&quot;collapsible&quot;&gt;
- &lt;h3&gt;Section B&lt;/h3&gt;
+ &lt;h3&gt;Section 2&lt;/h3&gt;
&lt;p&gt;I&#x27;m the collapsible set content for section B.&lt;/p&gt;
&lt;/div&gt;
-&lt;/div&gt;
+<strong>&lt;/div&gt;</strong>
</code></pre>
@@ -48,47 +48,73 @@
<div data-role="collapsible-set">
<div data-role="collapsible" data-collapsed="false">
- <h3>Section A</h3>
- <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
+ <h3>Section 1</h3>
+ <p>I'm the collapsible content in a set so this feels like an accordion. I'm open by default because I have the <code>data-collapsed="false"</code> attribute.</p>
</div>
<div data-role="collapsible">
- <h3>Section B</h3>
+ <h3>Section 2</h3>
<p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
</div>
<div data-role="collapsible">
- <h3>Section C</h3>
+ <h3>Section 3</h3>
<p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
</div>
<div data-role="collapsible">
- <h3>Section D</h3>
+ <h3>Section 4</h3>
<p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
</div>
<div data-role="collapsible">
- <h3>Section E</h3>
+ <h3>Section 5</h3>
<p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
</div>
</div>
- <p>Here is an example of a collapsible with 3 sections and <code>data-content-theme</code> set</p>
+ <h2>Theming collapsible content</h2>
+ <p>The standard <code>data-theme</code> attribute can be used to set the color of each collapsible in a set. To provide a clearer visual grouping of the content with the headers, add the <code>data-content-theme</code> attribute with a swatch letter. This adds a themed background color and border to the content block. For consistent theming, add these attributes to the parent collapsible set.</p>
- <div data-role="collapsible-set" data-content-theme="c">
- <div data-role="collapsible" data-collapsed="false">
- <h3>Section F</h3>
- <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
+
+<pre><code>
+&lt;div data-role=&quot;collapsible-set&quot; <strong>data-theme=&quot;c&quot; data-content-theme=&quot;d&quot;</strong>&gt;
+</code></pre>
+
+
+ <div data-role="collapsible-set" data-theme="c" data-content-theme="d">
+ <div data-role="collapsible">
+ <h3>Section 1</h3>
+ <p>Collapsible content</p>
</div>
<div data-role="collapsible">
- <h3>Section G</h3>
- <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
+ <h3>Section 2</h3>
+ <p>Collapsible content</p>
</div>
<div data-role="collapsible">
- <h3>Section H</h3>
- <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
+ <h3>Section 3</h3>
+ <p>Collapsible content</p>
+ </div>
+ </div>
+
+
+ <h2>Theming individual sections</h2>
+ <p>To have individual sections in a group styled differently, add <code>data-theme</code> and <code>data-content-theme</code> attributes to specific collapsibles.</p>
+ <div data-role="collapsible-set" data-content-theme="c">
+ <div data-role="collapsible" data-theme="b" data-content-theme="b">
+ <h3>Section header, swatch B</h3>
+ <p>Collapsible content, swatch B</p>
+
+ </div>
+ <div data-role="collapsible" data-theme="a" data-content-theme="a">
+ <h3>Section header, swatch A</h3>
+ <p>Collapsible content, swatch A</p>
+ </div>
+ <div data-role="collapsible" data-theme="e" data-content-theme="d">
+ <h3>Section header, swatch E</h3>
+ <p>Collapsible content, swatch D</p>
</div>
</div>
@@ -96,7 +122,7 @@
<div class="content-secondary">
- <div data-role="collapsible" data-collapsed="true" data-theme="b">
+ <div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
<h3>More in this section</h3>
View
176 docs/content/content-collapsible.html
@@ -24,32 +24,34 @@
<div class="content-primary">
<h2>Collapsible content markup</h2>
- <p>To create a collapsible blocks of content, create a container and add the <code> data-role="collapsible"</code> attribute.</p>
+ <p>To create a collapsible block of content, create a container and add the <code> data-role="collapsible"</code> attribute.</p>
<p>Using <code>data-content-theme</code> attribute allows you to set a theme for the content of the collapsible.</p>
<p>Directly inside this container, add any header element (H1-H6). The framework will style the header to look like a clickable button and add a "+" icon to the left to indicate it's expandable.</p>
<p>After the header, add any HTML markup you want to be collapsible. The framework will wrap this markup in a container that will be hidden/shown when the heading is clicked.</p>
-
- <pre><code>
- &lt;div data-role=&quot;collapsible&quot;&gt;
- &lt;h3&gt;I&#x27;m a header&lt;/h3&gt;
- &lt;p&gt;I&#x27;m the collapsible content. By default I'm closed, but you can click the header to open me.&lt;/p&gt;
- &lt;/div&gt;
- </code></pre>
+
+ <p>By default, the content will be collapsed.</p>
+<pre><code>
+&lt;div <strong>data-role=&quot;collapsible&quot;</strong>&gt;
+ &lt;h3&gt;I&#x27;m a header&lt;/h3&gt;
+ &lt;p&gt;I&#x27;m the collapsible content. By default I'm closed, but you can click the header to open me.&lt;/p&gt;
+&lt;/div&gt;
+</code></pre>
<div data-role="collapsible">
<h3>I'm a header</h3>
- <p>I'm the collapsible content. By default I'm closed, but you can click the header to open me</p>
+ <p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
</div>
-
- <p>As the example notes, by default the content will be collapsed. To expand the content when the page loads, add the <code>data-collapsed="false"</code> attribute to the wrapper.</p>
+ <h2>Expanding collapsibles on load</h2>
+
+ <p>To expand the content when the page loads, add the <code>data-collapsed="false"</code> attribute to the wrapper.</p>
<code>
- &lt;div data-role=&quot;collapsible&quot; <strong>data-collapsed=&quot;true&quot;&gt;</strong>
+ &lt;div data-role=&quot;collapsible&quot; <strong>data-collapsed=&quot;false&quot;&gt;</strong>
</code>
<p>This code will create a collapsible widget like this:</p>
@@ -60,71 +62,103 @@
<p>I'm the collapsible content. I'm expanded by default because I have the "collapsed" state set to false.</p>
</div>
+ <h2>Theming collapsible content</h2>
+
+
<p>Collapsible content is minimally styled &mdash; we add only a bit of margin between the bar and content, and the header adopts the default Theme styles of the container it sits within.</p>
+
+ <p>To provide a stronger visual connection between the collapsible header and content, add the <code>data-content-theme</code> attribute to the wrapper and specify a theme swatch letter. This will apply the swatch's border and <em>flat</em> background color (not the gradient) to the content block and changes the corner rounding to square off the bottom of the header and round the bottom of the content block instead to visually group these elements.</p>
+
+<pre><code>
+&lt;div data-role=&quot;collapsible&quot; <strong>data-content-theme=&quot;c&quot;</strong>&gt;
+ &lt;h3&gt;Header swatch A&lt;/h3&gt;
+ &lt;p&gt;I&#x27;m the collapsible content with a themed content block set to "C".&lt;/p&gt;
+&lt;/div&gt;
+</code></pre>
+
+ <div data-role="collapsible" data-content-theme="c">
+ <h3>Header swatch</h3>
+ <p>I'm the collapsible content with a themed content block set to "C".</p>
+ </div>
+
+ <h2>Theming collapsible headers</h2>
+ <p>To set the theme on a collapsible header button, add the <code>data-theme</code> attribute to the wrapper and specify a swatch letter. Note that you can mix and match swatch letters between the header and content with these theme attributes.</p>
+
+<pre><code>
+&lt;div data-role=&quot;collapsible&quot; <strong>data-theme=&quot;a&quot; data-content-theme=&quot;a&quot;</strong>&gt;
+ &lt;h3&gt;Header swatch A&lt;/h3&gt;
+ &lt;p&gt;I&#x27;m the collapsible content with a themed content block set to "A".&lt;/p&gt;
+&lt;/div&gt;
+</code></pre>
+
+ <div data-role="collapsible" data-theme="a" data-content-theme="a">
+ <h3>Header swatch A</h3>
+ <p>I'm the collapsible content with a themed content block set to "A".</p>
+ </div>
+
+
+
+ <div data-role="collapsible" data-theme="b" data-content-theme="d">
+ <h3>Header swatch B</h3>
+ <p>I'm the collapsible content with a themed content block set to "D".</p>
+ </div>
- <h2>Collapsible example</h2>
- <p>This page has 4 collapsible containers with different types of content inside.</p>
-
- <div data-role="collapsible">
- <h3>Section 1: Collapsed text block</h3>
- <p>I'm closed when the page loads because that's the default state of a collapsible.</p>
- <p>I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. </p>
- </div><!-- /section 1 -->
-
- <div data-role="collapsible">
- <h3>Section 2: Expanded on load</h3>
- <p>I'm closed when the page loads because I don't have the <code>data-collapsed="false"</code> attribute on my container. </p>
- <p>I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content.</p>
- </div><!-- /section 2 -->
-
- <div data-role="collapsible" data-collapsed="true">
- <h3>Section 3: Form elements</h3>
- <form action="#" method="get">
- <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="slider">Input slider:</label>
- <input type="range" name="slider" id="slider" value="0" min="0" max="100" />
- </div>
- <fieldset class="ui-grid-a">
- <div class="ui-block-a"><button type="submit" data-theme="c">Cancel</button></div>
- <div class="ui-block-b"><button type="submit" data-theme="b">Submit</button></div>
- </fieldset>
- </form>
- </div><!-- /section 3 -->
-
- <div data-role="collapsible" data-collapsed="true">
- <h3>Section 4: Collapsed list</h3>
- <ul data-role="listview" data-inset="true" data-theme="d">
- <li><a href="index.html">Acura</a></li>
- <li><a href="index.html">Audi</a></li>
- <li><a href="index.html">BMW</a></li>
- <li><a href="index.html">Cadillac</a></li>