Skip to content
Browse files

Merge branch 'master' of https://github.com/jquery/jquery-mobile into…

… range

Conflicts:
	css/structure/jquery.mobile.forms.slider.css
	docs/demos/index.html
	tests/unit/slider/index.html
Fixed Conflicts
  • Loading branch information...
2 parents c786726 + 2fabfc4 commit f1d6c992207c51e6350657e234919eccabcc3871 @arschmitz arschmitz committed
Showing with 5,223 additions and 1,711 deletions.
  1. +1 −1 CONTRIBUTING.md
  2. +19 −12 build/tasks/config.js
  3. +1 −0 css/structure/jquery.mobile.button.css
  4. +1 −1 css/structure/jquery.mobile.collapsible.css
  5. +2 −1 css/structure/jquery.mobile.controlgroup.css
  6. +2 −2 css/structure/jquery.mobile.fixedToolbar.css
  7. +1 −1 css/structure/jquery.mobile.forms.select.css
  8. +5 −3 css/structure/jquery.mobile.forms.textinput.css
  9. +10 −0 css/structure/jquery.mobile.transition.css
  10. +12 −2 css/structure/jquery.mobile.transition.fade.css
  11. +32 −5 css/structure/jquery.mobile.transition.flip.css
  12. +39 −3 css/structure/jquery.mobile.transition.flow.css
  13. +36 −9 css/structure/jquery.mobile.transition.pop.css
  14. +10 −0 css/structure/jquery.mobile.transition.slide.css
  15. +24 −6 css/structure/jquery.mobile.transition.slidedown.css
  16. +17 −5 css/structure/jquery.mobile.transition.slidefade.css
  17. +8 −0 css/structure/jquery.mobile.transition.slidein.keyframes.css
  18. +8 −0 css/structure/jquery.mobile.transition.slideout.keyframes.css
  19. +23 −5 css/structure/jquery.mobile.transition.slideup.css
  20. +38 −8 css/structure/jquery.mobile.transition.turn.css
  21. +0 −42 docs/_assets/js/_viewsource.js
  22. +5 −5 docs/_assets/js/jqm-docs.js
  23. +5 −5 docs/about/getting-started.html
  24. +2 −2 docs/about/intro.html
  25. +16 −0 docs/api/data-attributes.html
  26. +8 −8 docs/api/events.html
  27. +3 −3 docs/api/globalconfig.html
  28. +1 −1 docs/buttons/buttons-events.html
  29. +1 −1 docs/buttons/buttons-options.html
  30. +1 −1 docs/config/dialogTransition.html
  31. +1 −1 docs/config/iOSFullscreen.html
  32. +1 −1 docs/config/loadingMessage.html
  33. +1 −1 docs/config/loadingMessageTextVisible.html
  34. +1 −1 docs/config/minScrollBack.html
  35. +1 −1 docs/config/pageLoadErrorMessage.html
  36. +1 −1 docs/config/pageTransition.html
  37. +1 −1 docs/config/pushState.html
  38. +1 −1 docs/config/touchOverflow.html
  39. +1 −1 docs/content/content-collapsible-events.html
  40. +24 −13 docs/content/content-collapsible-options.html
  41. +1 −1 docs/content/content-collapsible-set-events.html
  42. +18 −7 docs/content/content-collapsible-set-options.html
  43. +26 −0 docs/content/content-collapsible-set.html
  44. +14 −1 docs/content/content-collapsible.html
  45. +108 −5 docs/demos/_assets/css/jqm-demos.css
  46. BIN docs/demos/_assets/img/buenosaires.jpg
  47. BIN docs/demos/_assets/img/capetown.jpg
  48. BIN docs/demos/_assets/img/newyork.jpg
  49. BIN docs/demos/_assets/img/paris.jpg
  50. 0 docs/demos/{tables/images → _assets/img}/phone_galaxy3.png
  51. 0 docs/demos/{tables/images → _assets/img}/phone_iphone5.png
  52. 0 docs/demos/{tables/images → _assets/img}/phone_lumia920.png
  53. 0 docs/demos/{tables/images → _assets/img}/phone_onex.png
  54. BIN docs/demos/_assets/img/seoul.jpg
  55. BIN docs/demos/_assets/img/sydney.jpg
  56. +8 −0 docs/demos/_assets/js/index.php
  57. +4 −276 docs/demos/_assets/js/jqm-demos.js
  58. +465 −0 docs/demos/_assets/js/view-source.js
  59. +3 −0 docs/demos/_demo-template/file-name.php
  60. +71 −0 docs/demos/_demo-template/index.html
  61. +4 −0 docs/demos/_demo-template/source.php
  62. +1 −1 docs/demos/buttons/buttons-grids.html
  63. +1 −1 docs/demos/buttons/{index.html → buttons.html}
  64. +1 −1 docs/demos/checkboxradio/{index.html → checkboxradio.html}
  65. +1 −1 docs/demos/collapsibles/collapsible-set.html
  66. +1 −1 docs/demos/collapsibles/{index.html → collapsible.html}
  67. +1 −1 docs/demos/controlgroups/{index.html → controlgroups.html}
  68. +0 −64 docs/demos/demo-template/index.html
  69. +463 −54 docs/demos/forms/form-disabled.html
  70. +54 −32 docs/demos/forms/form-fieldcontain.html
  71. +53 −31 docs/demos/forms/form-hide-label.html
  72. +42 −24 docs/demos/forms/form-label-hidden.html
  73. +41 −23 docs/demos/forms/form.html
  74. +1 −1 docs/demos/forms/index.html
  75. +152 −0 docs/demos/grids/grid-custom.html
  76. +50 −122 docs/demos/grids/grid-stack.html
  77. +80 −14 docs/demos/grids/rwd-basics.html
  78. +22 −19 docs/demos/index.html
  79. +1 −1 docs/demos/listviews/collapsible-listview.html
  80. +81 −0 docs/demos/listviews/listview-filter-autocomplete.html
  81. +1 −1 docs/demos/listviews/listview-filter-autodividers.html
  82. +1 −1 docs/demos/listviews/listview-forms.html
  83. +1 −1 docs/demos/listviews/{index.html → listview.html}
  84. +82 −0 docs/demos/redirect/index.html
  85. +27 −0 docs/demos/redirect/redirect-target.html
  86. +19 −0 docs/demos/redirect/redirect.php
  87. +4 −0 docs/demos/redirect/source.php
  88. +0 −214 docs/demos/selects/custom-multiple-selects.html
  89. +386 −0 docs/demos/selects/custom-selects.html
  90. +0 −295 docs/demos/selects/index.html
  91. +216 −0 docs/demos/selects/selects.html
  92. +129 −0 docs/demos/swipe/buenosaires.html
  93. +129 −0 docs/demos/swipe/capetown.html
  94. +129 −0 docs/demos/swipe/newyork.html
  95. +129 −0 docs/demos/swipe/paris.html
  96. +129 −0 docs/demos/swipe/seoul.html
  97. +357 −0 docs/demos/swipe/swipe-list.html
  98. +156 −0 docs/demos/swipe/swipe-page.html
  99. +129 −0 docs/demos/swipe/sydney.html
  100. +1 −1 docs/demos/tables/column-basic.html
  101. +1 −1 docs/demos/tables/financial-grouped-columns.html
  102. +1 −1 docs/demos/tables/financial-grouped-reflow.html
  103. +1 −1 docs/demos/tables/index.html
  104. +1 −1 docs/demos/tables/movie-list-toggle-options.html
  105. +1 −1 docs/demos/tables/movie-list.html
  106. +9 −9 docs/demos/tables/phone-compare.html
  107. +1 −1 docs/demos/tables/reflow-basic.html
  108. +20 −45 docs/demos/textinput/{index.html → textinput.html}
  109. +1 −1 docs/forms/checkboxes/events.html
  110. +1 −1 docs/forms/docs-forms.html
  111. +1 −3 docs/forms/forms-sample-response.php
  112. +1 −1 docs/forms/radiobuttons/events.html
  113. +1 −1 docs/forms/search/events.html
  114. +1 −1 docs/forms/search/options.html
  115. +1 −1 docs/forms/selects/custom.html
  116. +1 −1 docs/forms/selects/events.html
  117. +2 −2 docs/forms/selects/options.html
  118. +1 −1 docs/forms/slider/events.html
  119. +1 −1 docs/forms/slider/options.html
  120. +1 −1 docs/forms/switch/events.html
  121. +1 −1 docs/forms/switch/options.html
  122. +1 −1 docs/forms/textinputs/events.html
  123. +1 −1 docs/forms/textinputs/options.html
  124. +1 −1 docs/lists/lists-events.html
  125. +13 −13 docs/lists/lists-options.html
  126. +2 −2 docs/pages/Backbone-Require/js/libs/backbone.js
  127. +1 −1 docs/pages/Backbone-Require/js/libs/jquery.js
  128. +33 −33 docs/pages/Backbone-Require/js/libs/jquerymobile.js
  129. +31 −0 docs/pages/dialog-corners.html
  130. +31 −0 docs/pages/dialog-noclosebtn.html
  131. +31 −0 docs/pages/dialog-rightclosebtn.html
  132. +1 −1 docs/pages/dialog/events.html
  133. +9 −1 docs/pages/dialog/index.html
  134. +19 −1 docs/pages/dialog/options.html
  135. +14 −14 docs/pages/dynamic-samples/category.php
  136. +1 −1 docs/pages/dynamic-samples/sample-reuse-page-external.html
  137. +1 −1 docs/pages/dynamic-samples/sample-reuse-page.html
  138. +1 −1 docs/pages/loader.html
  139. +1 −1 docs/pages/page-dynamic.html
  140. +1 −1 docs/pages/page-transitions.html
  141. +1 −1 docs/pages/phonegap.html
  142. +3 −3 docs/pages/popup/events.html
  143. +4 −4 docs/pages/popup/index.html
  144. +4 −4 docs/pages/popup/options.html
  145. +2 −2 docs/pages/touchoverflow.html
  146. +29 −14 docs/tables/index.html
  147. +61 −0 docs/tables/reflow-events.html
  148. +65 −0 docs/tables/reflow-methods.html
  149. +67 −0 docs/tables/reflow-options.html
  150. +20 −30 docs/tables/table-column-toggle.html
  151. +26 −22 docs/tables/table-reflow.html
  152. +62 −0 docs/tables/toggle-events.html
  153. +66 −0 docs/tables/toggle-methods.html
  154. +78 −0 docs/tables/toggle-options.html
  155. +2 −2 docs/toolbars/bars-fixed-forms-g.html
  156. +2 −2 docs/toolbars/bars-fixed-options.html
  157. +1 −1 docs/toolbars/bars-fixed.html
  158. +1 −1 docs/toolbars/bars-fullscreen.html
  159. +105 −0 js/events/navigate.js
  160. +33 −23 js/events/touch.js
  161. +38 −10 js/index.php
  162. +120 −88 js/jquery.js
  163. +28 −5 js/jquery.mobile.init.js
  164. +6 −1 js/jquery.mobile.js
Sorry, we could not display the entire diff because it was too big.
View
2 CONTRIBUTING.md
@@ -26,7 +26,7 @@ It is IMPORTANT that you always provide a test page when submitting an issue!
* What? - Keep the test page as simple as possible. Only include markup/code that is required to reproduce the issue.
-* How? - Use our [JS Bin template](http://jsbin.com/uzaret/edit) which uses latest code on branch "master". Copy the updated url when you are done editing.
+* How? - Use our [JS Bin template](http://jsbin.com/amozef/1/edit) which uses latest code on branch "master". When you start editing the JS Bin, the url will update and contain a new version number. As long as you keep the JS Bin open in your browser this url won't change. Copy the url in your issue report when you are done editing. If your test case requires multiple "single" jQuery Mobile pages, open the JS Bin on multiple tabs on your browser and each of them will get an unique url. Link to this url without "/edit" at the end on your other page(s).
* You will notice if the issue has been fixed already
* It enables us to edit your code if necessary
* The test page won't disappear or change while we are looking into the issue
View
31 build/tasks/config.js
@@ -27,10 +27,14 @@ module.exports = function( grunt ) {
});
grunt.registerTask( 'config:test:pages', 'glob and log all possible tests', function( a, b ) {
- var test_paths = [], global_config = grunt.config.get( 'global' ), env = process.env;
+ var test_paths = [], filtered_paths = [], global_config = grunt.config.get( 'global' ), env = process.env;
// TODO move the glob to a legit config or pull the one from the qunit config
test_paths = glob.glob( 'tests/unit/*/' );
+
+ // TODO this captures a few straggling subdirectories with index based tests
+ // it could cause build failures but that will be immediately obvious
+ test_paths = test_paths.concat( glob.glob('tests/unit/*/*/index.html') );
test_paths = test_paths.concat( glob.glob('tests/unit/**/*-tests.html') );
// append the jquery version query param where defined
@@ -45,14 +49,23 @@ module.exports = function( grunt ) {
test_paths = paths_with_jquery;
}
- // if this test is not a dependency log pages
- if( this.name.indexOf('config:test:page') > -1 ) {
+ if( env.TEST_PATH ) {
test_paths.forEach(function( path ) {
- grunt.log.writeln( (env.ROOT_DOMAIN || "") + path );
+ if( path.indexOf(env.TEST_PATH) >= 0 ) {
+ filtered_paths.push( path );
+ }
});
+ } else {
+ filtered_paths = test_paths;
}
- global_config.test_paths = test_paths;
+ // if this test is not a dependency log pages
+ grunt.log.writeln( "Pages to be tested: " );
+ filtered_paths.forEach(function( path ) {
+ grunt.log.writeln( (env.ROOT_DOMAIN || "") + path );
+ });
+
+ global_config.test_paths = filtered_paths;
grunt.config.set( 'global', global_config );
});
@@ -66,13 +79,7 @@ module.exports = function( grunt ) {
// select the proper domain + paths
test_paths.forEach( function( file_path ) {
- var full_path = env.ROOT_DOMAIN + file_path;
-
- // if no test path is defined or if the path matches that specified in the env
- // add it to the config
- if( !process.env.TEST_PATH || file_path.indexOf(process.env.TEST_PATH) >= 0 ) {
- server_paths.push( full_path );
- }
+ server_paths.push( env.ROOT_DOMAIN + file_path );
});
grunt.config.set( 'qunit', { all: server_paths });
View
1 css/structure/jquery.mobile.button.css
@@ -25,6 +25,7 @@
.ui-btn-icon-notext .ui-btn-inner .ui-icon { margin: 2px 1px 2px 3px; float: left; }
.ui-btn-text { position: relative; z-index: 1; width: 100%; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; }
+div.ui-btn-text { width: auto; }
.ui-btn-icon-notext .ui-btn-text { position: absolute; left: -9999px; }
.ui-btn-icon-left .ui-btn-inner { padding-left: 40px; }
View
2 css/structure/jquery.mobile.collapsible.css
@@ -5,7 +5,7 @@
.ui-collapsible-inset .ui-collapsible-heading .ui-btn { border-right-width: 1px; border-left-width: 1px; }
.ui-collapsible-collapsed + .ui-collapsible:not(.ui-collapsible-inset) .ui-collapsible-heading .ui-btn { border-top-width: 0; }
.ui-collapsible-set .ui-collapsible:not(.ui-collapsible-inset) .ui-collapsible-heading .ui-btn { border-top-width: 1px; }
-.ui-collapsible-heading .ui-btn-inner,
+.ui-collapsible-heading .ui-btn-inner { padding-left: 12px; }
.ui-collapsible-heading .ui-btn-icon-left .ui-btn-inner { padding-left: 40px; }
.ui-collapsible-heading .ui-btn-icon-right .ui-btn-inner { padding-left: 12px; padding-right: 40px; }
.ui-collapsible-heading .ui-btn-icon-top .ui-btn-inner,
View
3 css/structure/jquery.mobile.controlgroup.css
@@ -4,7 +4,8 @@
.ui-bar .ui-controlgroup { margin: 0 5px; }
.ui-controlgroup-label { font-size: 16px; line-height: 1.4; font-weight: normal; margin: 0 0 .4em; }
-.ui-controlgroup-controls label.ui-select { position: absolute; left: -9999px; }
+.ui-controlgroup-controls label.ui-select,
+.ui-controlgroup-controls label.ui-submit { position: absolute; left: -9999px; }
.ui-controlgroup li { list-style: none; }
.ui-controlgroup .ui-btn { margin: 0; }
View
4 css/structure/jquery.mobile.fixedToolbar.css
@@ -34,8 +34,8 @@
.ui-page-footer-fixed {
padding-bottom: 2.6875em;
}
-.ui-page-header-fullscreen .ui-content,
-.ui-page-footer-fullscreen .ui-content {
+.ui-page-header-fullscreen > .ui-content,
+.ui-page-footer-fullscreen > .ui-content {
padding: 0;
}
.ui-fixed-hidden {
View
2 css/structure/jquery.mobile.forms.select.css
@@ -1,5 +1,5 @@
.ui-select { display: block; position: relative; }
-.ui-select select { position: absolute; left: -9999px; }
+.ui-select select { position: absolute; left: -9999px; top: -9999px; }
.ui-select .ui-btn { opacity: 1; }
.ui-field-contain .ui-select .ui-btn { margin: 0; }
/* Fixes #2588: When Windows Phone 7.5 (Mango) tries to calculate a numeric opacity for a select (including "inherit") without explicitly specifying an opacity on the parent to give it context, a bug appears where clicking elsewhere on the page after opening the select will open the select again. */
View
8 css/structure/jquery.mobile.forms.textinput.css
@@ -1,16 +1,16 @@
label.ui-input-text { font-size: 16px; line-height: 1.4; display: block; font-weight: normal; margin: 0 0 .3em; }
-input.ui-input-text, textarea.ui-input-text { background-image: none; padding: .4em; margin: .5em 0; line-height: 1.4; font-size: 16px; display: block; width: 100%; outline: 0; }
+input.ui-input-text, textarea.ui-input-text { background-image: none; padding: .4em; margin: .5em 0; min-height: 1.4em; line-height: 1.4em; font-size: 16px; display: block; width: 100%; outline: 0; }
input.ui-mini, .ui-mini input, textarea.ui-mini { font-size: 14px; }
div.ui-input-text input.ui-input-text, div.ui-input-text textarea.ui-input-text,
.ui-input-search input.ui-input-text { border: none; width: 100%; padding: .4em 0; margin: 0; display: block; background: transparent none; outline: 0 !important; }
.ui-input-search, div.ui-input-text { margin: .5em 0; background-image: none; position: relative; }
.ui-input-search { padding: 0 30px; }
-div.ui-input-text input.ui-input-text { padding: .4em 30px .4em .4em; }
+div.ui-input-text { padding: 0 30px 0 .4em; }
input.ui-input-text.ui-mini, textarea.ui-input-text.ui-mini,
.ui-input-search.ui-mini, div.ui-input-text.ui-mini { margin: .25em 0; }
.ui-field-contain input.ui-input-text, .ui-field-contain textarea.ui-input-text,
.ui-field-contain .ui-input-search, .ui-field-contain div.ui-input-text { margin: 0; }
-input.ui-input-text, textarea.ui-input-text, .ui-input-search, div.ui-input-text { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
+textarea.ui-input-text { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
input.ui-input-text { -webkit-appearance: none; }
textarea.ui-input-text { height: 50px; -webkit-transition: height 200ms linear; -moz-transition: height 200ms linear; -o-transition: height 200ms linear; transition: height 200ms linear; }
textarea.ui-mini { height: 45px; }
@@ -31,6 +31,8 @@ input[type=number]::-webkit-outer-spin-button { margin: 0; }
.ui-field-contain textarea.ui-input-text,
.ui-field-contain .ui-input-search,
.ui-field-contain div.ui-input-text { width: 78%; display: inline-block; }
+ .ui-field-contain .ui-input-search,
+ .ui-field-contain div.ui-input-text { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
.ui-hide-label input.ui-input-text,
.ui-hide-label textarea.ui-input-text,
.ui-hide-label .ui-input-search,
View
10 css/structure/jquery.mobile.transition.css
@@ -13,14 +13,24 @@
opacity: 0;
}
.in {
+ -webkit-animation-fill-mode: both;
-webkit-animation-timing-function: ease-out;
-webkit-animation-duration: 350ms;
+ -moz-animation-fill-mode: both;
-moz-animation-timing-function: ease-out;
-moz-animation-duration: 350ms;
+ animation-fill-mode: both;
+ animation-timing-function: ease-out;
+ animation-duration: 350ms;
}
.out {
+ -webkit-animation-fill-mode: both;
-webkit-animation-timing-function: ease-in;
-webkit-animation-duration: 225ms;
+ -moz-animation-fill-mode: both;
-moz-animation-timing-function: ease-in;
-moz-animation-duration: 225ms;
+ animation-fill-mode: both;
+ animation-timing-function: ease-in;
+ animation-duration: 225ms;
}
View
14 css/structure/jquery.mobile.transition.fade.css
@@ -2,21 +2,27 @@
from { opacity: 0; }
to { opacity: 1; }
}
-
@-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
+@keyframes fadein {
+ from { opacity: 0; }
+ to { opacity: 1; }
+}
@-webkit-keyframes fadeout {
from { opacity: 1; }
to { opacity: 0; }
}
-
@-moz-keyframes fadeout {
from { opacity: 1; }
to { opacity: 0; }
}
+@keyframes fadeout {
+ from { opacity: 1; }
+ to { opacity: 0; }
+}
.fade.out {
opacity: 0;
@@ -24,6 +30,8 @@
-webkit-animation-name: fadeout;
-moz-animation-duration: 125ms;
-moz-animation-name: fadeout;
+ animation-duration: 125ms;
+ animation-name: fadeout;
}
.fade.in {
@@ -32,4 +40,6 @@
-webkit-animation-name: fadein;
-moz-animation-duration: 225ms;
-moz-animation-name: fadein;
+ animation-duration: 225ms;
+ animation-name: fadein;
}
View
37 css/structure/jquery.mobile.transition.flip.css
@@ -8,13 +8,16 @@
.viewport-flip {
-webkit-perspective: 1000;
-moz-perspective: 1000;
+ perspective: 1000;
position: absolute;
}
.flip {
- -webkit-backface-visibility:hidden;
- -webkit-transform:translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */
- -moz-backface-visibility:hidden;
- -moz-transform:translateX(0);
+ -webkit-backface-visibility: hidden;
+ -webkit-transform: translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */
+ -moz-backface-visibility: hidden;
+ -moz-transform: translateX(0);
+ backface-visibility: hidden;
+ transform: translateX(0);
}
.flip.out {
@@ -24,6 +27,9 @@
-moz-transform: rotateY(-90deg) scale(.9);
-moz-animation-name: flipouttoleft;
-moz-animation-duration: 175ms;
+ transform: rotateY(-90deg) scale(.9);
+ animation-name: flipouttoleft;
+ animation-duration: 175ms;
}
.flip.in {
@@ -31,6 +37,8 @@
-webkit-animation-duration: 225ms;
-moz-animation-name: flipintoright;
-moz-animation-duration: 225ms;
+ animation-name: flipintoright;
+ animation-duration: 225ms;
}
.flip.out.reverse {
@@ -38,11 +46,14 @@
-webkit-animation-name: flipouttoright;
-moz-transform: rotateY(90deg) scale(.9);
-moz-animation-name: flipouttoright;
+ transform: rotateY(90deg) scale(.9);
+ animation-name: flipouttoright;
}
.flip.in.reverse {
-webkit-animation-name: flipintoleft;
-moz-animation-name: flipintoleft;
+ animation-name: flipintoleft;
}
@-webkit-keyframes flipouttoleft {
@@ -53,6 +64,10 @@
from { -moz-transform: rotateY(0); }
to { -moz-transform: rotateY(-90deg) scale(.9); }
}
+@keyframes flipouttoleft {
+ from { transform: rotateY(0); }
+ to { transform: rotateY(-90deg) scale(.9); }
+}
@-webkit-keyframes flipouttoright {
from { -webkit-transform: rotateY(0) ; }
to { -webkit-transform: rotateY(90deg) scale(.9); }
@@ -61,6 +76,10 @@
from { -moz-transform: rotateY(0); }
to { -moz-transform: rotateY(90deg) scale(.9); }
}
+@keyframes flipouttoright {
+ from { transform: rotateY(0); }
+ to { transform: rotateY(90deg) scale(.9); }
+}
@-webkit-keyframes flipintoleft {
from { -webkit-transform: rotateY(-90deg) scale(.9); }
to { -webkit-transform: rotateY(0); }
@@ -69,6 +88,10 @@
from { -moz-transform: rotateY(-90deg) scale(.9); }
to { -moz-transform: rotateY(0); }
}
+@keyframes flipintoleft {
+ from { transform: rotateY(-90deg) scale(.9); }
+ to { transform: rotateY(0); }
+}
@-webkit-keyframes flipintoright {
from { -webkit-transform: rotateY(90deg) scale(.9); }
to { -webkit-transform: rotateY(0); }
@@ -76,4 +99,8 @@
@-moz-keyframes flipintoright {
from { -moz-transform: rotateY(90deg) scale(.9); }
to { -moz-transform: rotateY(0); }
-}
+}
+@keyframes flipintoright {
+ from { transform: rotateY(90deg) scale(.9); }
+ to { transform: rotateY(0); }
+}
View
42 css/structure/jquery.mobile.transition.flow.css
@@ -1,15 +1,19 @@
/* flow transition */
.flow {
-webkit-transform-origin: 50% 30%;
- -moz-transform-origin: 50% 30%;
-webkit-box-shadow: 0 0 20px rgba(0,0,0,.4);
+ -moz-transform-origin: 50% 30%;
-moz-box-shadow: 0 0 20px rgba(0,0,0,.4);
+ transform-origin: 50% 30%;
+ box-shadow: 0 0 20px rgba(0,0,0,.4);
}
.ui-dialog.flow {
-webkit-transform-origin: none;
- -moz-transform-origin: none;
-webkit-box-shadow: none;
+ -moz-transform-origin: none;
-moz-box-shadow: none;
+ transform-origin: none;
+ box-shadow: none;
}
.flow.out {
-webkit-transform: translateX(-100%) scale(.7);
@@ -20,6 +24,10 @@
-moz-animation-name: flowouttoleft;
-moz-animation-timing-function: ease;
-moz-animation-duration: 350ms;
+ transform: translateX(-100%) scale(.7);
+ animation-name: flowouttoleft;
+ animation-timing-function: ease;
+ animation-duration: 350ms;
}
.flow.in {
@@ -31,6 +39,10 @@
-moz-animation-name: flowinfromright;
-moz-animation-timing-function: ease;
-moz-animation-duration: 350ms;
+ transform: translateX(0) scale(1);
+ animation-name: flowinfromright;
+ animation-timing-function: ease;
+ animation-duration: 350ms;
}
.flow.out.reverse {
@@ -38,11 +50,14 @@
-webkit-animation-name: flowouttoright;
-moz-transform: translateX(100%);
-moz-animation-name: flowouttoright;
+ transform: translateX(100%);
+ animation-name: flowouttoright;
}
.flow.in.reverse {
-webkit-animation-name: flowinfromleft;
-moz-animation-name: flowinfromleft;
+ animation-name: flowinfromleft;
}
@-webkit-keyframes flowouttoleft {
@@ -55,6 +70,11 @@
60%, 70% { -moz-transform: translateX(0) scale(.7); }
100% { -moz-transform: translateX(-100%) scale(.7); }
}
+@keyframes flowouttoleft {
+ 0% { transform: translateX(0) scale(1); }
+ 60%, 70% { transform: translateX(0) scale(.7); }
+ 100% { transform: translateX(-100%) scale(.7); }
+}
@-webkit-keyframes flowouttoright {
0% { -webkit-transform: translateX(0) scale(1); }
@@ -66,6 +86,11 @@
60%, 70% { -moz-transform: translateX(0) scale(.7); }
100% { -moz-transform: translateX(100%) scale(.7); }
}
+@keyframes flowouttoright {
+ 0% { transform: translateX(0) scale(1); }
+ 60%, 70% { transform: translateX(0) scale(.7); }
+ 100% { transform: translateX(100%) scale(.7); }
+}
@-webkit-keyframes flowinfromleft {
0% { -webkit-transform: translateX(-100%) scale(.7); }
@@ -77,6 +102,12 @@
30%, 40% { -moz-transform: translateX(0) scale(.7); }
100% { -moz-transform: translateX(0) scale(1); }
}
+@keyframes flowinfromleft {
+ 0% { transform: translateX(-100%) scale(.7); }
+ 30%, 40% { transform: translateX(0) scale(.7); }
+ 100% { transform: translateX(0) scale(1); }
+}
+
@-webkit-keyframes flowinfromright {
0% { -webkit-transform: translateX(100%) scale(.7); }
30%, 40% { -webkit-transform: translateX(0) scale(.7); }
@@ -86,4 +117,9 @@
0% { -moz-transform: translateX(100%) scale(.7); }
30%, 40% { -moz-transform: translateX(0) scale(.7); }
100% { -moz-transform: translateX(0) scale(1); }
-}
+}
+@keyframes flowinfromright {
+ 0% { transform: translateX(100%) scale(.7); }
+ 30%, 40% { transform: translateX(0) scale(.7); }
+ 100% { transform: translateX(0) scale(1); }
+}
View
45 css/structure/jquery.mobile.transition.pop.css
@@ -1,36 +1,45 @@
.pop {
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
+ transform-origin: 50% 50%;
}
.pop.in {
-webkit-transform: scale(1);
- -moz-transform: scale(1);
- opacity: 1;
-webkit-animation-name: popin;
- -moz-animation-name: popin;
-webkit-animation-duration: 350ms;
+ -moz-transform: scale(1);
+ -moz-animation-name: popin;
-moz-animation-duration: 350ms;
+ transform: scale(1);
+ animation-name: popin;
+ animation-duration: 350ms;
+ opacity: 1;
}
.pop.out {
-webkit-animation-name: fadeout;
- -moz-animation-name: fadeout;
- opacity: 0;
-webkit-animation-duration: 100ms;
+ -moz-animation-name: fadeout;
-moz-animation-duration: 100ms;
+ animation-name: fadeout;
+ animation-duration: 100ms;
+ opacity: 0;
}
.pop.in.reverse {
-webkit-animation-name: fadein;
-moz-animation-name: fadein;
+ animation-name: fadein;
}
.pop.out.reverse {
-webkit-transform: scale(.8);
- -moz-transform: scale(.8);
-webkit-animation-name: popout;
+ -moz-transform: scale(.8);
-moz-animation-name: popout;
+ transform: scale(.8);
+ animation-name: popout;
}
@-webkit-keyframes popin {
@@ -43,7 +52,6 @@
opacity: 1;
}
}
-
@-moz-keyframes popin {
from {
-moz-transform: scale(.8);
@@ -54,6 +62,16 @@
opacity: 1;
}
}
+@keyframes popin {
+ from {
+ transform: scale(.8);
+ opacity: 0;
+ }
+ to {
+ transform: scale(1);
+ opacity: 1;
+ }
+}
@-webkit-keyframes popout {
from {
@@ -65,7 +83,6 @@
opacity: 0;
}
}
-
@-moz-keyframes popout {
from {
-moz-transform: scale(1);
@@ -75,4 +92,14 @@
-moz-transform: scale(.8);
opacity: 0;
}
-}
+}
+@keyframes popout {
+ from {
+ transform: scale(1);
+ opacity: 1;
+ }
+ to {
+ transform: scale(.8);
+ opacity: 0;
+ }
+}
View
10 css/structure/jquery.mobile.transition.slide.css
@@ -6,12 +6,16 @@
-webkit-animation-duration: 350ms;
-moz-animation-timing-function: ease-out;
-moz-animation-duration: 350ms;
+ animation-timing-function: ease-out;
+ animation-duration: 350ms;
}
.slide.out {
-webkit-transform: translateX(-100%);
-webkit-animation-name: slideouttoleft;
-moz-transform: translateX(-100%);
-moz-animation-name: slideouttoleft;
+ transform: translateX(-100%);
+ animation-name: slideouttoleft;
}
.slide.in {
@@ -19,6 +23,8 @@
-webkit-animation-name: slideinfromright;
-moz-transform: translateX(0);
-moz-animation-name: slideinfromright;
+ transform: translateX(0);
+ animation-name: slideinfromright;
}
.slide.out.reverse {
@@ -26,6 +32,8 @@
-webkit-animation-name: slideouttoright;
-moz-transform: translateX(100%);
-moz-animation-name: slideouttoright;
+ transform: translateX(100%);
+ animation-name: slideouttoright;
}
.slide.in.reverse {
@@ -33,4 +41,6 @@
-webkit-animation-name: slideinfromleft;
-moz-transform: translateX(0);
-moz-animation-name: slideinfromleft;
+ transform: translateX(0);
+ animation-name: slideinfromleft;
}
View
30 css/structure/jquery.mobile.transition.slidedown.css
@@ -1,34 +1,44 @@
/* slide down */
.slidedown.out {
-webkit-animation-name: fadeout;
- -moz-animation-name: fadeout;
-webkit-animation-duration: 100ms;
+ -moz-animation-name: fadeout;
-moz-animation-duration: 100ms;
+ animation-name: fadeout;
+ animation-duration: 100ms;
}
.slidedown.in {
-webkit-transform: translateY(0);
-webkit-animation-name: slideinfromtop;
+ -webkit-animation-duration: 250ms;
-moz-transform: translateY(0);
-moz-animation-name: slideinfromtop;
- -webkit-animation-duration: 250ms;
-moz-animation-duration: 250ms;
+ transform: translateY(0);
+ animation-name: slideinfromtop;
+ animation-duration: 250ms;
}
.slidedown.in.reverse {
-webkit-animation-name: fadein;
- -moz-animation-name: fadein;
-webkit-animation-duration: 150ms;
+ -moz-animation-name: fadein;
-moz-animation-duration: 150ms;
+ animation-name: fadein;
+ animation-duration: 150ms;
}
.slidedown.out.reverse {
-webkit-transform: translateY(-100%);
- -moz-transform: translateY(-100%);
-webkit-animation-name: slideouttotop;
- -moz-animation-name: slideouttotop;
-webkit-animation-duration: 200ms;
+ -moz-transform: translateY(-100%);
+ -moz-animation-name: slideouttotop;
-moz-animation-duration: 200ms;
+ transform: translateY(-100%);
+ animation-name: slideouttotop;
+ animation-duration: 200ms;
}
@-webkit-keyframes slideinfromtop {
@@ -39,6 +49,10 @@
from { -moz-transform: translateY(-100%); }
to { -moz-transform: translateY(0); }
}
+@keyframes slideinfromtop {
+ from { transform: translateY(-100%); }
+ to { transform: translateY(0); }
+}
@-webkit-keyframes slideouttotop {
from { -webkit-transform: translateY(0); }
@@ -47,4 +61,8 @@
@-moz-keyframes slideouttotop {
from { -moz-transform: translateY(0); }
to { -moz-transform: translateY(-100%); }
-}
+}
+@keyframes slideouttotop {
+ from { transform: translateY(0); }
+ to { transform: translateY(-100%); }
+}
View
22 css/structure/jquery.mobile.transition.slidefade.css
@@ -4,35 +4,47 @@
.slidefade.out {
-webkit-transform: translateX(-100%);
-webkit-animation-name: slideouttoleft;
+ -webkit-animation-duration: 225ms;
-moz-transform: translateX(-100%);
-moz-animation-name: slideouttoleft;
- -webkit-animation-duration: 225ms;
-moz-animation-duration: 225ms;
+ transform: translateX(-100%);
+ animation-name: slideouttoleft;
+ animation-duration: 225ms;
}
.slidefade.in {
-webkit-transform: translateX(0);
-webkit-animation-name: fadein;
+ -webkit-animation-duration: 200ms;
-moz-transform: translateX(0);
-moz-animation-name: fadein;
- -webkit-animation-duration: 200ms;
-moz-animation-duration: 200ms;
+ transform: translateX(0);
+ animation-name: fadein;
+ animation-duration: 200ms;
}
.slidefade.out.reverse {
-webkit-transform: translateX(100%);
-webkit-animation-name: slideouttoright;
+ -webkit-animation-duration: 200ms;
-moz-transform: translateX(100%);
-moz-animation-name: slideouttoright;
- -webkit-animation-duration: 200ms;
-moz-animation-duration: 200ms;
+ transform: translateX(100%);
+ animation-name: slideouttoright;
+ animation-duration: 200ms;
}
.slidefade.in.reverse {
-webkit-transform: translateX(0);
-webkit-animation-name: fadein;
- -moz-transform: translateX(0);
- -moz-animation-name: fadein;
-webkit-animation-duration: 200ms;
+ -moz-transform: translateX(0);
+ -moz-animation-name: fadein
-moz-animation-duration: 200ms;
+ transform: translateX(0);
+ animation-name: fadein
+ animation-duration: 200ms;
}
View
8 css/structure/jquery.mobile.transition.slidein.keyframes.css
@@ -7,6 +7,10 @@
from { -moz-transform: translateX(100%); }
to { -moz-transform: translateX(0); }
}
+@keyframes slideinfromright {
+ from { transform: translateX(100%); }
+ to { transform: translateX(0); }
+}
@-webkit-keyframes slideinfromleft {
from { -webkit-transform: translateX(-100%); }
@@ -15,4 +19,8 @@
@-moz-keyframes slideinfromleft {
from { -moz-transform: translateX(-100%); }
to { -moz-transform: translateX(0); }
+}
+@keyframes slideinfromleft {
+ from { transform: translateX(-100%); }
+ to { transform: translateX(0); }
}
View
8 css/structure/jquery.mobile.transition.slideout.keyframes.css
@@ -7,6 +7,10 @@
from { -moz-transform: translateX(0); }
to { -moz-transform: translateX(-100%); }
}
+@keyframes slideouttoleft {
+ from { transform: translateX(0); }
+ to { transform: translateX(-100%); }
+}
@-webkit-keyframes slideouttoright {
from { -webkit-transform: translateX(0); }
@@ -16,3 +20,7 @@
from { -moz-transform: translateX(0); }
to { -moz-transform: translateX(100%); }
}
+@keyframes slideouttoright {
+ from { transform: translateX(0); }
+ to { transform: translateX(100%); }
+}
View
28 css/structure/jquery.mobile.transition.slideup.css
@@ -1,34 +1,44 @@
/* slide up */
.slideup.out {
-webkit-animation-name: fadeout;
- -moz-animation-name: fadeout;
-webkit-animation-duration: 100ms;
+ -moz-animation-name: fadeout;
-moz-animation-duration: 100ms;
+ animation-name: fadeout;
+ animation-duration: 100ms;
}
.slideup.in {
-webkit-transform: translateY(0);
-webkit-animation-name: slideinfrombottom;
+ -webkit-animation-duration: 250ms;
-moz-transform: translateY(0);
-moz-animation-name: slideinfrombottom;
- -webkit-animation-duration: 250ms;
-moz-animation-duration: 250ms;
+ transform: translateY(0);
+ animation-name: slideinfrombottom;
+ animation-duration: 250ms;
}
.slideup.in.reverse {
-webkit-animation-name: fadein;
- -moz-animation-name: fadein;
-webkit-animation-duration: 150ms;
+ -moz-animation-name: fadein;
-moz-animation-duration: 150ms;
+ animation-name: fadein;
+ animation-duration: 150ms;
}
.slideup.out.reverse {
-webkit-transform: translateY(100%);
- -moz-transform: translateY(100%);
-webkit-animation-name: slideouttobottom;
- -moz-animation-name: slideouttobottom;
-webkit-animation-duration: 200ms;
+ -moz-transform: translateY(100%);
+ -moz-animation-name: slideouttobottom;
-moz-animation-duration: 200ms;
+ transform: translateY(100%);
+ animation-name: slideouttobottom;
+ animation-duration: 200ms;
}
@-webkit-keyframes slideinfrombottom {
@@ -39,6 +49,10 @@
from { -moz-transform: translateY(100%); }
to { -moz-transform: translateY(0); }
}
+@keyframes slideinfrombottom {
+ from { transform: translateY(100%); }
+ to { transform: translateY(0); }
+}
@-webkit-keyframes slideouttobottom {
from { -webkit-transform: translateY(0); }
@@ -47,4 +61,8 @@
@-moz-keyframes slideouttobottom {
from { -moz-transform: translateY(0); }
to { -moz-transform: translateY(100%); }
+}
+@keyframes slideouttobottom {
+ from { transform: translateY(0); }
+ to { transform: translateY(100%); }
}
View
46 css/structure/jquery.mobile.transition.turn.css
@@ -6,34 +6,45 @@
*/
.viewport-turn {
- -webkit-perspective: 1000;
- -moz-perspective: 1000;
+ -webkit-perspective: 200px;
+ -moz-perspective: 200px;
+ -ms-perspective: 200px;
+ perspective: 200px;
position: absolute;
}
.turn {
- -webkit-backface-visibility:hidden;
- -webkit-transform:translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */
+ -webkit-backface-visibility: hidden;
+ -webkit-transform: translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */
-webkit-transform-origin: 0;
- -moz-backface-visibility:hidden;
- -moz-transform:translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */
+ -moz-backface-visibility: hidden;
+ -moz-transform: translateX(0);
-moz-transform-origin: 0;
+
+ backface-visibility :hidden;
+ transform: translateX(0);
+ transform-origin: 0;
}
.turn.out {
-webkit-transform: rotateY(-90deg) scale(.9);
-webkit-animation-name: flipouttoleft;
+ -webkit-animation-duration: 125ms;
-moz-transform: rotateY(-90deg) scale(.9);
-moz-animation-name: flipouttoleft;
- -webkit-animation-duration: 125ms;
-moz-animation-duration: 125ms;
+ transform: rotateY(-90deg) scale(.9);
+ animation-name: flipouttoleft;
+ animation-duration: 125ms;
}
.turn.in {
-webkit-animation-name: flipintoright;
- -moz-animation-name: flipintoright;
-webkit-animation-duration: 250ms;
+ -moz-animation-name: flipintoright;
-moz-animation-duration: 250ms;
+ animation-name: flipintoright;
+ animation-duration: 250ms;
}
@@ -42,11 +53,14 @@
-webkit-animation-name: flipouttoright;
-moz-transform: rotateY(90deg) scale(.9);
-moz-animation-name: flipouttoright;
+ transform: rotateY(90deg) scale(.9);
+ animation-name: flipouttoright;
}
.turn.in.reverse {
-webkit-animation-name: flipintoleft;
-moz-animation-name: flipintoleft;
+ animation-name: flipintoleft;
}
@-webkit-keyframes flipouttoleft {
@@ -57,6 +71,10 @@
from { -moz-transform: rotateY(0); }
to { -moz-transform: rotateY(-90deg) scale(.9); }
}
+@keyframes flipouttoleft {
+ from { transform: rotateY(0); }
+ to { transform: rotateY(-90deg) scale(.9); }
+}
@-webkit-keyframes flipouttoright {
from { -webkit-transform: rotateY(0) ; }
to { -webkit-transform: rotateY(90deg) scale(.9); }
@@ -65,6 +83,10 @@
from { -moz-transform: rotateY(0); }
to { -moz-transform: rotateY(90deg) scale(.9); }
}
+@keyframes flipouttoright {
+ from { transform: rotateY(0); }
+ to { transform: rotateY(90deg) scale(.9); }
+}
@-webkit-keyframes flipintoleft {
from { -webkit-transform: rotateY(-90deg) scale(.9); }
to { -webkit-transform: rotateY(0); }
@@ -73,6 +95,10 @@
from { -moz-transform: rotateY(-90deg) scale(.9); }
to { -moz-transform: rotateY(0); }
}
+@keyframes flipintoleft {
+ from { transform: rotateY(-90deg) scale(.9); }
+ to { transform: rotateY(0); }
+}
@-webkit-keyframes flipintoright {
from { -webkit-transform: rotateY(90deg) scale(.9); }
to { -webkit-transform: rotateY(0); }
@@ -81,3 +107,7 @@
from { -moz-transform: rotateY(90deg) scale(.9); }
to { -moz-transform: rotateY(0); }
}
+@keyframes flipintoright {
+ from { transform: rotateY(90deg) scale(.9); }
+ to { transform: rotateY(0); }
+}
View
42 docs/_assets/js/_viewsource.js
@@ -1,42 +0,0 @@
-//quick view source in new window links
-$.fn.addSourceLink = function(style){
-
- return $(this).each(function(){
- var link = $('<a href="#" data-'+ $.mobile.ns +'inline="true">View Source</a>'),
- src = src = $('<div></div>').append( $(this).clone() ).html(),
- page = $( "<div data-"+ $.mobile.ns +"role='dialog' data-"+ $.mobile.ns +"theme='a'>" +
- "<div data-"+ $.mobile.ns +"role='header' data-"+ $.mobile.ns +"theme='b'>" +
- "<a href='#' class='ui-btn-left' data-"+ $.mobile.ns +"icon='delete' data-"+ $.mobile.ns +"iconpos='notext'>Close</a>"+
- "<div class='ui-title'>jQuery Mobile Source Excerpt</div>"+
- "</div>"+
- "<div data-"+ $.mobile.ns +"role='content'></div>"+
- "</div>" )
- .appendTo( "body" )
- .page();
-
- $('<a href="#">View Source</a>')
- .buttonMarkup({
- icon: 'arrow-u',
- iconpos: 'notext'
- })
- .click(function(){
- var codeblock = $('<pre><code></code></pre>');
- src = src.replace(/&/gmi, '&amp;').replace(/"/gmi, '&quot;').replace(/>/gmi, '&gt;').replace(/</gmi, '&lt;').replace('data-'+ $.mobile.ns +'source="true"','');
- codeblock.find('code').append(src);
-
- var activePage = $(this).parents('.ui-page-active');
- page.find('.ui-content').append(codeblock);
- $.changePage(page, 'slideup',false);
- page.find('.ui-btn-left').click(function(){
- $.changePage(activepage, 'slideup',true);
- return false;
- });
- })
- .insertAfter(this);
- });
-};
-
-//set up view source links
-$('div').live('pagebeforecreate',function(){
- $(this).find('[data-'+ $.mobile.ns +'source="true"]').addSourceLink();
-});
View
10 docs/_assets/js/jqm-docs.js
@@ -6,7 +6,7 @@ $(function(){
});
// display the version of jQM
-$(document).bind( 'pageinit', function() {
+$(document).on( 'pageinit', function() {
var version = $.mobile.version || "dev",
words = version.split( "-" ),
ver = words[0],
@@ -45,7 +45,7 @@ if ( location.protocol.substr(0,4) === 'file' ||
$(fixLinks);
// fix the links for subsequent ajax page loads
- $(document).bind( 'pagecreate', fixLinks );
+ $(document).on( 'pagecreate', fixLinks );
// Check to see if ajax can be used. This does a quick ajax request and blocks the page until its done
$.ajax({
@@ -54,7 +54,7 @@ if ( location.protocol.substr(0,4) === 'file' ||
isLocal: true
}).error(function() {
// Ajax doesn't work so turn it off
- $( document ).bind( "mobileinit", function() {
+ $( document ).on( "mobileinit", function() {
$.mobile.ajaxEnabled = false;
var message = $( '<div>' , {
@@ -67,7 +67,7 @@ if ( location.protocol.substr(0,4) === 'file' ||
.append( "<h3>Note: Navigation may not work if viewed locally</h3>" )
.append( "<p>The AJAX-based navigation used throughout the jQuery Mobile docs may need to be viewed on a web server to work in certain browsers. If you see an error message when you click a link, try a different browser or <a href='https://github.com/jquery/jquery-mobile/wiki/Downloadable-Docs-Help'>view help</a>.</p>" );
- $( document ).bind( "pagecreate", function( event ) {
+ $( document ).on( "pagecreate", function( event ) {
$( event.target ).append( message );
});
});
@@ -77,7 +77,7 @@ if ( location.protocol.substr(0,4) === 'file' ||
// Measure the time from pageload until pageshow for page lists-performance.html
// NB: lists-performance.html should load without a transition to avoid having
// the transition's duration included in the measurement
-$( document ).bind( "pageload", function( e, data ) {
+$( document ).on( "pageload", function( e, data ) {
var ar = data.dataUrl.split( "/" ), then;
// If we're loading "lists-performance.html ..."
View
10 docs/about/getting-started.html
@@ -33,7 +33,7 @@
<p>jQuery Mobile provides a set of touch-friendly UI widgets and an AJAX-powered navigation system to support animated page transitions. Building your first jQuery Mobile page is easy. Here's how:</p>
<h2>Create a basic page template</h2>
- <p>Pop open your favorite text editor, paste in the <a href="../pages/page-anatomy.html" id="" title="page-anatomy">page template</a> below, save and open in a browser. You are now a mobile developer!</p>
+ <p>Pop open your favorite text editor, paste in the <a href="../pages/page-anatomy.html" title="page-anatomy">page template</a> below, save and open in a browser. You are now a mobile developer!</p>
<p>Here's what's in the template. In the <code>head</code>, a meta <code>viewport</code> tag sets the screen width to the pixel width of the device and references to jQuery, jQuery Mobile and the mobile theme stylesheet from the CDN add all the styles and scripts. jQuery Mobile 1.2 (1.2.0) works with versions of jQuery core from 1.7.0 to 1.8.2.</p>
<p>In the <code>body</code>, a div with a <code>data-role</code> of <code>page</code> is the wrapper used to delineate a page, and the header bar (<code>data-role="header"</code>) and content region (<code>data-role="content"</code>) are added inside to create a basic page (these are both optional). These <code>data-</code> attributes are HTML5 attributes used throughout jQuery Mobile to transform basic markup into an enhanced and styled widget.</p>
@@ -70,7 +70,7 @@
<p>Inside your content container, you can add any standard <a href="../content/content-html.html">HTML elements</a> - headings, lists, paragraphs, etc. You can write your own custom styles to create custom layouts by adding an additional stylesheet to the <code>head</code> after the jQuery Mobile stylesheet.</p>
<h2>Make a listview</h2>
- <p>jQuery Mobile includes a diverse set of common <a href="../lists/docs-lists.html" id="" title="docs-lists">listviews</a> that are coded as lists with a <code>data-role="listview"</code> added. Here is a simple linked list that has a role of <code>listview</code>. We're going to make this look like an inset module by adding a <code>data-inset="true"</code> and add a dynamic search filter with the <code>data-filter="true"</code> attributes.</p>
+ <p>jQuery Mobile includes a diverse set of common <a href="../lists/docs-lists.html" title="docs-lists">listviews</a> that are coded as lists with a <code>data-role="listview"</code> added. Here is a simple linked list that has a role of <code>listview</code>. We're going to make this look like an inset module by adding a <code>data-inset="true"</code> and add a dynamic search filter with the <code>data-filter="true"</code> attributes.</p>
<pre><code>
&lt;ul <strong>data-role=&quot;listview&quot; data-inset=&quot;true&quot; data-filter=&quot;true&quot</strong>&gt;
@@ -122,7 +122,7 @@
<h2>Play with theme swatches</h2>
- <p>jQuery Mobile has a robust <a href="../api/themes.html" id="">theme framework</a> that supports up to 26 sets of toolbar, content and button colors, called a "swatch". Just add a <code>data-theme="e"</code> attribute to any of the widgets on this page: page, header, list, input for the slider, or button to turn it yellow. Try different swatch letters in default theme from a-e to mix and match swatches. </p>
+ <p>jQuery Mobile has a robust <a href="../api/themes.html">theme framework</a> that supports up to 26 sets of toolbar, content and button colors, called a "swatch". Just add a <code>data-theme="e"</code> attribute to any of the widgets on this page: page, header, list, input for the slider, or button to turn it yellow. Try different swatch letters in default theme from a-e to mix and match swatches. </p>
<p>Cool party trick: add the theme swatch to the page and see how all the widgets inside the content will automatically inherit the theme (headers and footers don't inherit, they default to swatch "a").</p>
<code>&lt;a href=&quot;#&quot; data-role=&quot;button&quot; data-icon=&quot;star&quot; <strong>data-theme=&quot;a&quot;</strong>&gt;Button&lt;/a&gt;</code>
@@ -136,9 +136,9 @@
<p>When you're ready to build a custom theme, use <a href="http://www.jquerymobile.com/themeroller" rel="external">ThemeRoller</a> to drag and drop, then download a custom theme.</p>
<h2>Go forth and build stuff</h2>
- <p>This is just scratching the surface of all the cool things you can build with jQuery Mobile with little effort. Be sure to explore <a href="../pages/page-links.html" id="" title="page-links">linking pages</a>, <a href="../pages/page-transitions.html" id="" title="page-transitions">adding animated page transitions</a>, and <a href="../pages/dialog/index.html" id="" title="page-dialogs">creating dialogs</a>. Use the <a href="../api/data-attributes.html" id="" title="data-attributes">data-attribute reference</a> to try out some of the other <code>data-</code> attributes you can play with. </p>
+ <p>This is just scratching the surface of all the cool things you can build with jQuery Mobile with little effort. Be sure to explore <a href="../pages/page-links.html" title="page-links">linking pages</a>, <a href="../pages/page-transitions.html" title="page-transitions">adding animated page transitions</a>, and <a href="../pages/dialog/index.html" title="page-dialogs">creating dialogs</a>. Use the <a href="../api/data-attributes.html" title="data-attributes">data-attribute reference</a> to try out some of the other <code>data-</code> attributes you can play with. </p>
- <p><strong>More of a developer?</strong> Great, forget everything we just covered (kidding). If you don't want to use the <code>data-</code> attribute configuration system, you can take full control of everything and call plugins directly because these are all just standard jQuery plugins built with the UI widget factory. Be sure to dig into <a href="../api/globalconfig.html" id="" title="globalconfig">global configuration</a>, <a href="../api/events.html" id="" title="events">events</a>, and <a href="../api/methods.html" id="" title="methods">methods</a>. Then read up on <a href="../pages/page-scripting.html" id="" title="page-scripting">scripting pages</a>, <a href="../pages/page-dynamic.html" id="" title="page-dynamic">generating dynamic pages</a>, and <a href="../pages/phonegap.html" id="" title="phonegap">building PhoneGap apps</a>.</p>
+ <p><strong>More of a developer?</strong> Great, forget everything we just covered (kidding). If you don't want to use the <code>data-</code> attribute configuration system, you can take full control of everything and call plugins directly because these are all just standard jQuery plugins built with the UI widget factory. Be sure to dig into <a href="../api/globalconfig.html" title="globalconfig">global configuration</a>, <a href="../api/events.html" title="events">events</a>, and <a href="../api/methods.html" title="methods">methods</a>. Then read up on <a href="../pages/page-scripting.html" title="page-scripting">scripting pages</a>, <a href="../pages/page-dynamic.html" title="page-dynamic">generating dynamic pages</a>, and <a href="../pages/phonegap.html" title="phonegap">building PhoneGap apps</a>.</p>
</div><!--/content-primary -->
<div class="content-secondary">
View
4 docs/about/intro.html
@@ -28,10 +28,10 @@
<h2>jQuery Mobile Overview</h2>
- <p>jQuery's mobile strategy can be summarized simply: A unified user interface system that works seamlessly across all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Focused on a <a href="features.html">feature-rich</a> but lightweight codebase built on progressive enhancement with a flexible <a href="../api/themes.html">theming system</a> and <a href="http://www.jquerymobile.com/themeroller" target="_new">ThemeRoller tool</a>. </p>
+ <p>jQuery's mobile strategy can be summarized simply: A unified user interface system that works seamlessly across all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Focused on a <a href="features.html">feature-rich</a> but lightweight codebase built on progressive enhancement with a flexible <a href="../api/themes.html">theming system</a> and <a href="http://www.jquerymobile.com/themeroller" target="external">ThemeRoller tool</a>. </p>
<p>The framework includes an <a href="../pages/page-navmodel.html">Ajax navigation</a> system that brings animated page <a href="../pages/page-transitions.html">transitions</a> and a core set of UI widgets: <a href="../pages/page-anatomy.html">pages</a>, <a href="../pages/dialog/index.html">dialogs</a>, <a href="../toolbars/docs-bars.html">toolbars</a>, <a href="../lists/docs-lists.html">listviews</a>, <a href="../buttons/buttons-types.html">buttons</a> with <a href="../buttons/buttons-icons.html">icons</a>, <a href="../forms/forms-all.html">form elements</a>, <a href="../content/content-collapsible-set.html">accordions</a>, <a href="../content/content-collapsible.html">collapsibles</a>, and more.</p>
- <p>The critical difference with our approach is the <a href="platforms.html">wide variety of mobile platforms we're targeting</a> with jQuery Mobile so no browser or device is left behind. We've also focused on making jQuery Mobile <a href="getting-started.html">easy to learn</a> with a simple, <a href="../api/data-attributes.html">markup-based system</a> to applying behavior and theming. For more advanced developers, there is a rich API of <a href="../api/globalconfig.html">global configuration options</a>, <a href="../api/events.html" id="" title="events">events</a>, and <a href="../api/methods.html" id="" title="methods">methods</a> to <a href="../pages/page-scripting.html" id="" title="page-scripting">apply scripting</a>, <a href="../pages/page-dynamic.html" id="" title="page-dynamic">generate dynamic pages</a>, and even <a href="../pages/phonegap.html" id="" title="phonegap">build native apps</a> with tools like PhoneGap.</p>
+ <p>The critical difference with our approach is the <a href="platforms.html">wide variety of mobile platforms we're targeting</a> with jQuery Mobile so no browser or device is left behind. We've also focused on making jQuery Mobile <a href="getting-started.html">easy to learn</a> with a simple, <a href="../api/data-attributes.html">markup-based system</a> to applying behavior and theming. For more advanced developers, there is a rich API of <a href="../api/globalconfig.html">global configuration options</a>, <a href="../api/events.html" title="events">events</a>, and <a href="../api/methods.html" title="methods">methods</a> to <a href="../pages/page-scripting.html" title="page-scripting">apply scripting</a>, <a href="../pages/page-dynamic.html" title="page-dynamic">generate dynamic pages</a>, and even <a href="../pages/phonegap.html" title="phonegap">build native apps</a> with tools like PhoneGap.</p>
<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. <a href="accessibility.html">Accessibility features</a> such as WAI-ARIA are tightly integrated throughout the framework to provide support for screen readers and other assistive technologies.</p>
View
16 docs/api/data-attributes.html
@@ -106,6 +106,10 @@
<td>swatch letter (a-z)</td>
</tr>
<tr>
+ <th>data-corners</th>
+ <td><strong>true</strong> | false</td>
+ </tr>
+ <tr>
<th>data-expanded-icon</th>
<td>home | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | <strong>minus</strong> | refresh | forward | back | alert | info | search</td>
</tr>
@@ -139,6 +143,10 @@
<td>swatch letter (a-z) - Sets all collapsibles in set</td>
</tr>
<tr>
+ <th>data-corners</th>
+ <td><strong>true</strong> | false</td>
+ </tr>
+ <tr>
<th>data-expanded-icon</th>
<td>home | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | <strong>minus</strong> | refresh | forward | back | alert | info | search</td>
</tr>
@@ -186,10 +194,18 @@
<p>Container with <code>data-role="dialog"</code> or linked to with <code>data-rel="dialog"</code> on the anchor.</p>
<table>
<tr>
+ <th>data-close-btn</th>
+ <td><strong>left</strong> | right | none</td>
+ </tr>
+ <tr>
<th>data-close-btn-text</th>
<td>string - Text for the close button, dialog only</td>
</tr>
<tr>
+ <th>data-corners</th>
+ <td><strong>true</strong> | false</td>
+ </tr>
+ <tr>
<th>data-dom-cache</th>
<td>true | <strong>false</strong></td>
</tr>
View
16 docs/api/events.html
@@ -28,12 +28,12 @@
<p>jQuery Mobile offers several custom events that build upon native events to create useful hooks for development. Note that these events employ various touch, mouse, and window events, depending on event existence, so you can bind to them for use in both handheld and desktop environments. You can bind to these events like you would with other jQuery events, using <code>live()</code> or <code>bind()</code>.</p>
<div class="ui-body ui-body-e">
- <h4 style="margin:.5em 0">Important: Use <code>$(document).bind('pageinit')</code>, not <code>$(document).ready()</code></h4>
+ <h4 style="margin:.5em 0">Important: Use <code>$(document).on('pageinit')</code>, not <code>$(document).ready()</code></h4>
<p>The first thing you learn in jQuery is to call code inside the <code>$(document).ready()</code> function so everything will execute as soon as the DOM is loaded. However, in jQuery Mobile, Ajax is used to load the contents of each page into the DOM as you navigate, and the DOM ready handler only executes for the first page. To execute code whenever a new page is loaded and created, you can bind to the <code>pageinit</code> event. This event is explained in detail at the bottom of this page.</p></div>
<p>&nbsp; </p>
<div class="ui-body ui-body-e">
- <h4 style="margin:.5em 0">Important: <code>$(document).bind('pagecreate')</code> vs <code>$(document).bind('pageinit')</code></h4>
+ <h4 style="margin:.5em 0">Important: <code>$(document).on('pagecreate')</code> vs <code>$(document).on('pageinit')</code></h4>
<p> Prior to Beta 2 the recommendation to users wishing to manipulate jQuery Mobile enhanced pages and child widget markup was to bind to the <code>pagecreate</code> event. In Beta 2 an internal change was made to decouple each of the widgets by binding to the <code>pagecreate</code> event in place of direct calls to the widget methods. As a result, users binding to the <code>pagecreate</code> in <code>mobileinit</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>pageinit</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>pagecreate</code> to manipulate the enhanced markup before the page was shown, it's very likely you'll want to migrate to 'pageinit'.
@@ -120,7 +120,7 @@ <h4 style="margin:.5em 0">Canceling an element's default click behavior</h4>
<div class="ui-body ui-body-e">
<h4>orientationchange timing</h4>
- <p> 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 <code>orientationChange</code> all together with <code>$.mobile.orientationChangeEnabled = false</code> to let the fallback resize code trigger your bindings.</p>
+ <p> 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 <code>orientationChange</code> altogether with <code>$.mobile.orientationChangeEnabled = false</code> to let the fallback resize code trigger your bindings.</p>
</div>
</dl>
@@ -160,7 +160,7 @@ <h4 style="margin:.5em 0">Canceling an element's default click behavior</h4>
<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 ){
+$( document ).on( &quot;pagebeforeload&quot;, function( event, data ){
// Let the framework know we're going to handle the load.
@@ -177,7 +177,7 @@ <h4 style="margin:.5em 0">Canceling an element's default click behavior</h4>
});</code></pre>
<p>or rejected like this:
<pre><code>
-$( document ).bind( &quot;pagebeforeload&quot;, function( event, data ){
+$( document ).on( &quot;pagebeforeload&quot;, function( event, data ){
// Let the framework know we're going to handle the load.
@@ -259,7 +259,7 @@ <h4 style="margin:.5em 0">Canceling an element's default click behavior</h4>
<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 ){
+$( document ).on( &quot;pageloadfailed&quot;, function( event, data ){
// Let the framework know we're going to handle things.
@@ -276,7 +276,7 @@ <h4 style="margin:.5em 0">Canceling an element's default click behavior</h4>
});</code></pre>
<p>or rejected like this:
<pre><code>
-$( document ).bind( &quot;pageloadfailed&quot;, function( event, data ){
+$( document ).on( &quot;pageloadfailed&quot;, function( event, data ){
// Let the framework know we're going to handle things.
@@ -497,7 +497,7 @@ <h4 style="margin:.5em 0">Canceling an element's default click behavior</h4>
<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. It can be used with page transition events. For example:</p>
<pre><code>
-$(document).bind("pagehide", function(event, ui) {
+$(document).on("pagehide", function(event, ui) {
$(ui.nextPage).animationComplete(function() {
alert('Animation completed');
});
View
6 docs/api/globalconfig.html
@@ -33,7 +33,7 @@
<pre>
<code>
-$(document).bind("mobileinit", function(){
+$(document).on("mobileinit", function(){
//apply overrides here
});
</code>
@@ -53,7 +53,7 @@
<pre>
<code>
-$(document).bind("mobileinit", function(){
+$(document).on("mobileinit", function(){
$.extend( $.mobile , {
<strong>foo: bar</strong>
});
@@ -64,7 +64,7 @@
<p>Alternatively, you can set them using object property notation.</p>
<pre>
<code>
-$(document).bind("mobileinit", function(){
+$(document).on("mobileinit", function(){
<strong>$.mobile.foo = bar;</strong>
});
</code>
View
2 docs/buttons/buttons-events.html
@@ -38,7 +38,7 @@
<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) {
+$( ".myButton" ).on( "click", function(event, ui) {
...
});
</code></pre>
View
2 docs/buttons/buttons-options.html
@@ -112,7 +112,7 @@
<dd>
<p class="default">default: "button, [type='button'], [type='submit'], [type='reset']"</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(){
+<pre><code>$( document ).on( "mobileinit", function(){
<strong>$.mobile.button.prototype.options.initSelector = ".myButtons";</strong>
});
</code></pre>
View
2 docs/config/dialogTransition.html
@@ -11,7 +11,7 @@
<script src="../../docs/_assets/js/jqm-docs.js"></script>
<script>
- $(document).bind("mobileinit", function(){
+ $(document).on("mobileinit", function(){
$.mobile.defaultDialogTransition = 'flip';
});
</script>
View
2 docs/config/iOSFullscreen.html
@@ -29,7 +29,7 @@
<script src="../../docs/_assets/js/jqm-docs.js"></script>
<script>
- $(document).bind("mobileinit", function() {
+ $(document).on("mobileinit", function() {
if (!!window.navigator.standalone) {
$.mobile.page.prototype.options.addBackBtn = true;
}
View
2 docs/config/loadingMessage.html
@@ -11,7 +11,7 @@
<script src="../../docs/_assets/js/jqm-docs.js"></script>
<script>
- $(document).bind("mobileinit", function(){
+ $(document).on("mobileinit", function(){
$.mobile.loadingMessage = false;
});
</script>
View
2 docs/config/loadingMessageTextVisible.html
@@ -10,7 +10,7 @@
<script src="../../js/jquery.js"></script>
<script src="../../docs/_assets/js/jqm-docs.js"></script>
<script>
- $(document).bind("mobileinit", function(){
+ $(document).on("mobileinit", function(){
$.mobile.loadingMessageTextVisible = true;
});
</script>
View
2 docs/config/minScrollBack.html
@@ -11,7 +11,7 @@
<script src="../../docs/_assets/js/jqm-docs.js"></script>
<script>
- $(document).bind("mobileinit", function(){
+ $(document).on("mobileinit", function(){
$.mobile.minScrollBack = 999;
});
</script>
View
2 docs/config/pageLoadErrorMessage.html
@@ -11,7 +11,7 @@
<script src="../../docs/_assets/js/jqm-docs.js"></script>
<script>
- $(document).bind("mobileinit", function(){
+ $(document).on("mobileinit", function(){
$.mobile.pageLoadErrorMessage = 'Yikes, we broke the internet!';
});
</script>
View
2 docs/config/pageTransition.html
@@ -11,7 +11,7 @@
<script src="../../docs/_assets/js/jqm-docs.js"></script>
<script>
- $(document).bind("mobileinit", function(){
+ $(document).on("mobileinit", function(){
$.mobile.defaultPageTransition = 'flow';
});
</script>
View
2 docs/config/pushState.html
@@ -12,7 +12,7 @@
<script src="../../docs/_assets/js/jqm-docs.js"></script>
<script>
- $(document).bind("mobileinit", function(){
+ $(document).on("mobileinit", function(){
$.mobile.pushStateEnabled = false;
});
</script>
View
2 docs/config/touchOverflow.html
@@ -11,7 +11,7 @@
<script src="../../docs/_assets/js/jqm-docs.js"></script>
<script>
- $(document).bind("mobileinit", function(){
+ $(document).on("mobileinit", function(){
$.mobile.touchOverflowEnabled = true;
});
</script>
View
2 docs/content/content-collapsible-events.html
@@ -35,7 +35,7 @@
<p>Bind events directly to the container, typically a <code>div</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>
-$( ".selector" ).bind( "collapse", function(event, ui) {
+$( ".selector" ).on( "collapse", function(event, ui) {
...
});
</code></pre>
View
37 docs/content/content-collapsible-options.html
@@ -40,7 +40,7 @@
<dd>
<p class="default">default: true</p>
<p>When false, the container is initially expanded with a minus icon in the header. To set the value for all instances of this widget, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
-<pre><code>$( document ).bind( "mobileinit", function(){
+<pre><code>$( document ).on( "mobileinit", function(){
<strong>$.mobile.collapsible.prototype.options.collapsed = false;</strong>
});
</code></pre>
@@ -51,7 +51,7 @@
<dd>
<p class="default">default: " click to collapse contents"</p>
<p>This text is used to provide audible feedback for users with screen reader software. To set the value for all instances of this widget, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
-<pre><code>$( document ).bind( "mobileinit", function(){
+<pre><code>$( document ).on( "mobileinit", function(){
<strong>$.mobile.collapsible.prototype.options.collapseCueText = " collapse with a click";</strong>
});
</code></pre>
@@ -61,7 +61,7 @@
<dd>
<p class="default">default: "plus"</p>
<p>Sets the icon for the header of the collapsible container when in a collapsed state. To set the value for all instances of this widget, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
-<pre><code>$( document ).bind( "mobileinit", function(){
+<pre><code>$( document ).on( "mobileinit", function(){
<strong>$.mobile.collapsible.prototype.options.collapsedIcon = "arrow-r";</strong>
});
</code></pre>
@@ -72,18 +72,29 @@
<dd>
<p class="default">default: null, inherited from parent</p>
<p>Sets the color scheme (swatch) for the collapsible content block. It accepts a single letter from a-z that maps to one of the swatches included in your theme. To set the value for all instances of this widget, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
-<pre><code>$( document ).bind( "mobileinit", function(){
+<pre><code>$( document ).on( "mobileinit", function(){
<strong>$.mobile.collapsible.prototype.options.contentTheme = "a";</strong>
});
</code></pre>
<p>This option is also exposed as a data attribute: <code>data-content-theme=&quot;a&quot;</code>.</p>
</dd>
+ <dt><code>corners</code> <em>boolean</em></dt>
+ <dd>
+ <p class="default">default: true</p>
+ <p>Applies the theme border-radius if set to true. To set the value for all instances of this widget, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
+<pre><code>$( document ).on( "mobileinit", function(){
+ <strong>$.mobile.collapsible.prototype.options.corners = false;</strong>
+});
+</code></pre>
+ <p>This option is also exposed as a data attribute: <code>data-corners=&quot;false&quot;</code>.</p>
+ </dd>
+
<dt><code>expandCueText</code> <em>string</em></dt>
<dd>
<p class="default">default: " click to expand contents"</p>
<p>This text is used to provide audible feedback for users with screen reader software. To set the value for all instances of this widget, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
-<pre><code>$( document ).bind( "mobileinit", function(){
+<pre><code>$( document ).on( "mobileinit", function(){
<strong>$.mobile.collapsible.prototype.options.expandCueText = " expand with a click";</strong>
});
</code></pre>
@@ -93,7 +104,7 @@
<dd>
<p class="default">default: "minus"</p>
<p>Sets the icon for the header of the collapsible container when in an expanded state. To set the value for all instances of this widget, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
-<pre><code>$( document ).bind( "mobileinit", function(){
+<pre><code>$( document ).on( "mobileinit", function(){
<strong>$.mobile.collapsible.prototype.options.expandedIcon = "arrow-d";</strong>
});
</code></pre>
@@ -104,7 +115,7 @@
<dd>
<p class="default">default: "h1,h2,h3,h4,h5,h6,legend"</p>
<p>Within the collapsible container, the first immediate child element that matches this selector will be used as the header for the collapsible. To change the selector, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
-<pre><code>$( document ).bind( "mobileinit", function(){
+<pre><code>$( document ).on( "mobileinit", function(){
<strong>$.mobile.collapsible.prototype.options.heading = ".mycollapsibleheading";</strong>