Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Merge remote branch 'origin/master' into loading-message-tests

  • Loading branch information...
commit 7de2a97ed60a6a8f39d5342c8c30c54d2001f33a 2 parents b34d37c + 6f42e55
Jake Boone authored
Showing with 2,682 additions and 1,920 deletions.
  1. +43 −29 Makefile
  2. +18 −2 build/docs.build.js
  3. +12 −17 css/structure/jquery.mobile.button.css
  4. +4 −4 css/structure/jquery.mobile.core.css
  5. +2 −5 css/structure/jquery.mobile.fixedToolbar.css
  6. +5 −2 css/structure/jquery.mobile.forms.checkboxradio.css
  7. +2 −0  css/structure/jquery.mobile.forms.select.css
  8. +26 −18 css/structure/jquery.mobile.forms.slider.css
  9. +4 −0 css/structure/jquery.mobile.forms.textinput.css
  10. +4 −4 css/themes/default/jquery.mobile.theme.css
  11. +9 −1 docs/_assets/css/jqm-docs.css
  12. +40 −0 docs/api/data-attributes.html
  13. +5 −0 docs/buttons/buttons-inline.html
  14. +8 −0 docs/buttons/buttons-options.html
  15. +14 −1 docs/buttons/buttons-types.html
  16. +9 −4 docs/config/iOSFullscreen.html
  17. +9 −4 docs/config/loadingMessage.html
  18. +9 −4 docs/config/minScrollBack.html
  19. +9 −4 docs/config/pageLoadErrorMessage.html
  20. +9 −4 docs/config/pushState.html
  21. +9 −4 docs/config/touchOverflow.html
  22. +20 −4 docs/content/content-collapsible-set.html
  23. +19 −4 docs/content/content-collapsible.html
  24. +1 −0  docs/forms/checkboxes/events.html
  25. +17 −1 docs/forms/checkboxes/index.html
  26. +1 −0  docs/forms/checkboxes/methods.html
  27. +7 −1 docs/forms/checkboxes/options.html
  28. +14 −0 docs/forms/docs-forms.html
  29. +260 −0 docs/forms/forms-all-compare.html
  30. +242 −0 docs/forms/forms-all-mini.html
  31. +1 −0  docs/forms/forms-all-native.html
  32. +4 −3 docs/forms/forms-all.html
  33. +1 −0  docs/forms/forms-sample-selfsubmit.php
  34. +2 −1  docs/forms/forms-sample.html
  35. +2 −1  docs/forms/forms-themes.html
  36. +1 −0  docs/forms/index.html
  37. +2 −1  docs/forms/plugin-eventsmethods.html
  38. +1 −0  docs/forms/radiobuttons/events.html
  39. +32 −0 docs/forms/radiobuttons/index.html
  40. +1 −0  docs/forms/radiobuttons/methods.html
  41. +7 −1 docs/forms/radiobuttons/options.html
  42. +1 −0  docs/forms/search/events.html
  43. +19 −3 docs/forms/search/index.html
  44. +1 −0  docs/forms/search/methods.html
  45. +6 −1 docs/forms/search/options.html
  46. +80 −0 docs/forms/selects/custom.html
  47. +1 −0  docs/forms/selects/events.html
  48. +59 −95 docs/forms/selects/index.html
  49. +1 −0  docs/forms/selects/methods.html
  50. +7 −0 docs/forms/selects/options.html
  51. +1 −0  docs/forms/slider/events.html
  52. +55 −11 docs/forms/slider/index.html
  53. +1 −0  docs/forms/slider/methods.html
  54. +15 −1 docs/forms/slider/options.html
  55. +1 −0  docs/forms/switch/events.html
  56. +29 −8 docs/forms/switch/index.html
  57. +1 −0  docs/forms/switch/methods.html
  58. +7 −0 docs/forms/switch/options.html
  59. +1 −0  docs/forms/textinputs/events.html
  60. +22 −1 docs/forms/textinputs/index.html
  61. +1 −0  docs/forms/textinputs/methods.html
  62. +8 −0 docs/forms/textinputs/options.html
  63. +1 −1  docs/lists/docs-lists.html
  64. +2 −1  docs/lists/lists-formatting.html
  65. +1 −1  docs/lists/lists-search-with-dividers.html
  66. +2 −2 docs/lists/lists-split-purchase.html
  67. +0 −6 docs/pages/dialog-overlay.html
  68. +2 −2 docs/toolbars/bars-fixed-events.html
  69. +292 −0 docs/toolbars/bars-fixed-forms-a.html
  70. +454 −0 docs/toolbars/bars-fixed-forms.html
  71. +1 −1  docs/toolbars/bars-fixed-methods.html
  72. +10 −3 docs/toolbars/bars-fixed-options.html
  73. +27 −44 docs/toolbars/bars-fixed.html
  74. +1 −1  docs/toolbars/bars-fullscreen.html
  75. +1 −1  docs/toolbars/bars-themes.html
  76. +1 −1  docs/toolbars/docs-bars.html
  77. +1 −1  docs/toolbars/docs-footers.html
  78. +2 −2 docs/toolbars/docs-headers.html
  79. +1 −1  docs/toolbars/docs-navbar.html
  80. +28 −29 docs/toolbars/footer-persist-a.html
  81. +15 −14 docs/toolbars/footer-persist-b.html
  82. +14 −17 docs/toolbars/footer-persist-c.html
  83. +89 −0 docs/toolbars/footer-persist-d.html
  84. +1 −1  docs/toolbars/index.html
  85. +27 −0 external/requirejs/depend.js
  86. +2 −2 js/index.php
  87. +6 −4 js/jquery.mobile.buttonMarkup.js
  88. +7 −2 js/jquery.mobile.collapsible.js
  89. +1 −1  js/jquery.mobile.collapsibleSet.js
  90. +28 −13 js/jquery.mobile.controlGroup.js
  91. +23 −11 js/jquery.mobile.core.js
  92. +1 −1  js/jquery.mobile.dialog.js
  93. +1 −1  js/jquery.mobile.event.js
  94. +60 −34 js/jquery.mobile.fixedToolbar.js
  95. +7 −4 js/jquery.mobile.forms.button.js
  96. +6 −3 js/jquery.mobile.forms.checkboxradio.js
  97. +1 −0  js/jquery.mobile.forms.select.custom.js
  98. +8 −5 js/jquery.mobile.forms.select.js
  99. +26 −17 js/jquery.mobile.forms.slider.js
  100. +8 −4 js/jquery.mobile.forms.textinput.js
  101. +1 −1  js/jquery.mobile.init.js
  102. +0 −10 js/jquery.mobile.js
  103. 0  js/jquery.mobile.listview.filter.js
  104. +1 −1  js/jquery.mobile.listview.js
  105. +8 −2 js/jquery.mobile.navbar.js
  106. +11 −13 js/jquery.mobile.navigation.js
  107. +1 −1  js/jquery.mobile.navigation.pushstate.js
  108. +7 −1 js/jquery.mobile.support.js
  109. +2 −5 js/jquery.mobile.transition.js
  110. +25 −7 js/jquery.mobile.widget.js
  111. +2 −2 js/jquery.mobile.zoom.js
  112. +0 −9 js/jquery.ui.widget.js
  113. +13 −11 tests/functional/orientation.html
  114. +0 −67 tests/speed/basic-page.html
  115. +0 −429 tests/speed/lists-ul-record.php
  116. +0 −428 tests/speed/lists-ul.html
  117. +0 −59 tests/speed/stats/index.php
  118. +0 −80 tests/speed/stats/perf.js
  119. +0 −1  tests/speed/stats/rev.php
  120. +0 −67 tests/speed/stats/startup.js
  121. +0 −18 tests/speed/stats/visualize/index.html
  122. +0 −45 tests/speed/stats/visualize/visualize.css
  123. +0 −71 tests/speed/stats/visualize/visualize.js
  124. +11 −12 tests/unit/buttonMarkup/buttonMarkup_core.js
  125. +8 −0 tests/unit/buttonMarkup/index.html
  126. +16 −0 tests/unit/controlgroup/controlgroup_core.js
  127. +20 −9 tests/unit/controlgroup/index.html
  128. +6 −3 tests/unit/event/event_core.js
  129. +115 −73 tests/unit/fixedToolbar/fixedToolbar.js
  130. +14 −4 tests/unit/fixedToolbar/index.html
  131. +6 −5 tests/unit/navigation/navigation_base.js
  132. +3 −3 tests/unit/select/index.html
  133. +20 −1 tests/unit/widget/index.html
  134. +25 −0 tests/unit/widget/widget_init.js
  135. +7 −7 tests/unit/zoom/zoom.js
72 Makefile
View
@@ -19,15 +19,31 @@ deploy: STRUCTURE = jquery.mobile.structure-${VER_OFFICIAL}
# The CSS theme being used
THEME = default
-RUN_JS = @@java -XX:ReservedCodeCacheSize=64m -classpath build/js.jar:build/google-compiler-20111003.jar org.mozilla.javascript.tools.shell.Main
-
+# If node is available then use node to run r.js
+# otherwise use good old rhino/java
+NODE = /usr/local/bin/node
+HAS_NODE = $(shell if test -x ${NODE} ;then echo true; fi)
+ifeq ($(HAS_NODE), true)
+ RUN_JS = @@${NODE}
+else
+ RUN_JS = @@java -XX:ReservedCodeCacheSize=64m -classpath build/js.jar:build/google-compiler-20111003.jar org.mozilla.javascript.tools.shell.Main
+endif
# Build Targets
# When no build target is specified, all gets ran
-all: init css js zip notify
+all: css js zip notify
+clean:
+ # -------------------------------------------------
+ # Cleaning build output
+ @@rm -rf ${OUTPUT}
+ @@rm -rf tmp
+
+# Create the output directory.
+init:
+ @@mkdir -p ${OUTPUT}
# Build and minify the CSS files
css: init
@@ -68,31 +84,26 @@ docs: init
${RUN_JS} \
external/r.js/dist/r.js \
-o build/docs.build.js \
- dir=../tmp/${NAME}
- # ... Prepend versioned license
- @@cat LICENSE-INFO.txt | ${VER} > tmp/${NAME}/LICENSE-INFO.txt
- @@cat tmp/${NAME}/LICENSE-INFO.txt | cat - tmp/${NAME}/js/jquery.mobile.docs.js > tmp/${NAME}/js/jquery.mobile.docs.js.tmp
- @@cat tmp/${NAME}/js/jquery.mobile.docs.js.tmp | ${SED_VER_API} > tmp/${NAME}/js/jquery.mobile.docs.js
- @@cat tmp/${NAME}/LICENSE-INFO.txt | cat - tmp/${NAME}/css/themes/default/${NAME}.css > tmp/${NAME}/css/themes/default/${NAME}.css.tmp
- @@mv tmp/${NAME}/css/themes/default/${NAME}.css.tmp tmp/${NAME}/css/themes/default/${NAME}.css
+ dir=../tmp/demos
+ # ... Prepend versioned license to jquery.mobile.js
+ @@cat LICENSE-INFO.txt | ${VER} > tmp/demos/LICENSE-INFO.txt
+ @@cat tmp/demos/LICENSE-INFO.txt | cat - tmp/demos/js/jquery.mobile.js > tmp/demos/js/jquery.mobile.js.tmp
+ @@cat tmp/demos/js/jquery.mobile.js.tmp | ${SED_VER_API} > tmp/demos/js/jquery.mobile.js
+ # ... Prepend versioned license to jquery.mobile.docs.js
+ @@cat tmp/demos/LICENSE-INFO.txt | cat - tmp/demos/js/jquery.mobile.docs.js > tmp/demos/js/jquery.mobile.docs.js.tmp
+ @@cat tmp/demos/js/jquery.mobile.docs.js.tmp | ${SED_VER_API} > tmp/demos/js/jquery.mobile.docs.js
+ # ... Prepend versioned license to jquery.mobile.css
+ @@cat tmp/demos/LICENSE-INFO.txt | cat - tmp/demos/css/themes/default/${NAME}.css > tmp/demos/css/themes/default/${NAME}.css.tmp
+ @@mv tmp/demos/css/themes/default/${NAME}.css.tmp tmp/demos/css/themes/default/${NAME}.css
# ... Move and zip up the the whole folder
- @@cd tmp; zip -rq ../${OUTPUT}/${NAME}.docs.zip ${NAME}
- @@mv tmp/${NAME} ${OUTPUT}/demos
+ @@rm -f ${OUTPUT}/${NAME}.docs.zip
+ @@cd tmp/demos && rm -f *.php && rm -f Makefile
+ @@cd tmp/demos && zip -rq ../../${OUTPUT}/${NAME}.docs.zip *
+ @@rm -rf ${OUTPUT}/demos && mv -f tmp/demos ${OUTPUT}
# Finish by removing the temporary files
@@rm -rf tmp
# -------------------------------------------------
-
-# Create the output directory. This is in a separate step so its not dependant on other targets
-init:
- # -------------------------------------------------
- # Building jQuery Mobile in the "${OUTPUT}" folder
- @@rm -rf ${OUTPUT}
- @@rm -rf tmp
- @@mkdir -p ${OUTPUT}
- # -------------------------------------------------
-
-
# Build and minify the JS files
js: init
# Build the JavaScript file
@@ -100,7 +111,7 @@ js: init
external/r.js/dist/r.js \
-o baseUrl="js" \
include=jquery.mobile \
- exclude=jquery,../external/requirejs/order,../external/requirejs/text,../external/requirejs/text!../version.txt \
+ exclude=jquery,../external/requirejs/order,../external/requirejs/depend,../external/requirejs/text,../external/requirejs/text!../version.txt \
out=${OUTPUT}/${NAME}.compiled.js \
pragmasOnSave.jqmBuildExclude=true \
wrap.startFile=build/wrap.start \
@@ -146,21 +157,24 @@ zip: init css js
# For jQuery Team Use Only
#
# -------------------------------------------------
+# NOTE the clean (which removes previous build output) has been removed to prevent a gap in service
+build_latest: css docs js zip
-# Push the latest git version to the CDN. This is done on a post commit hook
-latest: init css docs js zip
+deploy_latest:
# Time to put these on the CDN
@@scp -qr ${OUTPUT}/* jqadmin@code.origin.jquery.com:/var/www/html/code.jquery.com/mobile/latest/
# -------------------------------------------------
+# Push the latest git version to the CDN. This is done on a post commit hook
+# TODO target name preserved to avoid issues during refactor, latest -> deploy_latest
+latest: build_latest deploy_latest
+
# Build the nightly backups. This is done on a server cronjob
-nightlies: init css js docs zip
+nightlies: css js docs zip
# Time to put these on the CDN
@@mkdir -p tmp/nightlies
@@mv ${OUTPUT} tmp/nightlies/$$(date "+%Y%m%d")
@@scp -qr tmp/nightlies/* jqadmin@code.origin.jquery.com:/var/www/html/code.jquery.com/mobile/nightlies/
- # Do some cleanup to wrap it up
- @@rm -rf tmp
# -------------------------------------------------
20 build/docs.build.js
View
@@ -20,7 +20,23 @@
modules: [
{
name: "jquery.mobile.docs",
- exclude: [ "jquery", "../external/requirejs/order" , "../external/requirejs/text", "../external/requirejs/text!../version.txt" ]
+ exclude: [
+ "jquery",
+ "../external/requirejs/depend",
+ "../external/requirejs/order",
+ "../external/requirejs/text",
+ "../external/requirejs/text!../version.txt"
+ ]
+ },
+ {
+ name: "jquery.mobile",
+ exclude: [
+ "jquery",
+ "../external/requirejs/depend",
+ "../external/requirejs/order",
+ "../external/requirejs/text",
+ "../external/requirejs/text!../version.txt"
+ ]
}
],
@@ -35,5 +51,5 @@
endFile: "wrap.end"
},
- dirExclusionRegExp: /^\.|^build|^compiled/
+ dirExclusionRegExp: /^\.|^build|^compiled|^tmp/
})
29 css/structure/jquery.mobile.button.css
View
@@ -1,9 +1,11 @@
.ui-btn { display: block; text-align: center; cursor:pointer; position: relative; margin: .5em 5px; padding: 0; }
-.ui-header .ui-btn, .ui-footer .ui-btn, .ui-bar .ui-btn { display: inline-block; font-size: 13px; margin: 0; max-width: 30%; }
+.ui-mini { margin: .25em 5px; }
.ui-btn-inline { display: inline-block; }
.ui-btn-inner { padding: .6em 25px; display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; position: relative; zoom: 1; }
.ui-btn input, .ui-btn button { z-index: 2; }
-.ui-header .ui-btn-inner, .ui-footer .ui-btn-inner, .ui-bar .ui-btn-inner { padding: .4em 8px .5em; }
+.ui-btn-left, .ui-btn-right, .ui-btn-inline { display: inline-block; }
+.ui-btn-left .ui-btn-inner, .ui-btn-right .ui-btn-inner { padding: .55em 1.5em .5em; }
+.ui-mini .ui-btn-inner { font-size: 13px; padding: .55em 1.5em .5em; }
.ui-btn-icon-notext { width: 24px; height: 24px; }
.ui-btn-icon-notext .ui-btn-inner { padding: 2px 1px 2px 3px; }
.ui-btn-text { position: relative; z-index: 1; }
@@ -13,9 +15,9 @@
.ui-footer .ui-btn-icon-left .ui-btn-inner,
.ui-bar .ui-btn-icon-left .ui-btn-inner { padding-left: 27px; }
.ui-btn-icon-right .ui-btn-inner { padding-right: 33px; }
-.ui-header .ui-btn-icon-right .ui-btn-inner,
-.ui-footer .ui-btn-icon-right .ui-btn-inner,
-.ui-bar .ui-btn-icon-right .ui-btn-inner { padding-right: 27px; }
+
+.ui-mini .ui-btn-icon-left .ui-btn-inner { padding-left: 27px; }
+.ui-mini .ui-btn-icon-right .ui-btn-inner { padding-right: 27px; }
.ui-btn-icon-top .ui-btn-inner { padding-top: 33px; }
.ui-header .ui-btn-icon-top .ui-btn-inner,
.ui-footer .ui-btn-icon-top .ui-btn-inner,
@@ -33,18 +35,11 @@
.ui-btn-icon-right .ui-icon { right: 10px; }
.ui-btn-icon-top .ui-icon { top: 10px; }
.ui-btn-icon-bottom .ui-icon { bottom: 10px; }
-.ui-header .ui-btn-icon-left .ui-icon,
-.ui-footer .ui-btn-icon-left .ui-icon,
-.ui-bar .ui-btn-icon-left .ui-icon { left: 4px; }
-.ui-header .ui-btn-icon-right .ui-icon,
-.ui-footer .ui-btn-icon-right .ui-icon,
-.ui-bar .ui-btn-icon-right .ui-icon { right: 4px; }
-.ui-header .ui-btn-icon-top .ui-icon,
-.ui-footer .ui-btn-icon-top .ui-icon,
-.ui-bar .ui-btn-icon-top .ui-icon { top: 4px; }
-.ui-header .ui-btn-icon-bottom .ui-icon,
-.ui-footer .ui-btn-icon-bottom .ui-icon,
-.ui-bar .ui-btn-icon-bottom .ui-icon { bottom: 4px; }
+
+.ui-mini.ui-btn-icon-left .ui-icon { left: 8px; }
+.ui-mini.ui-btn-icon-right .ui-icon { right: 8px; }
+.ui-mini.ui-btn-icon-top .ui-icon { top: 8px; }
+.ui-mini.ui-btn-icon-bottom .ui-icon { bottom: 8px; }
/*hiding native button,inputs */
.ui-btn-hidden { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-appearance: button; opacity: .1; cursor: pointer; background: #fff; background: rgba(255,255,255,0); filter: Alpha(Opacity=.0001); font-size: 1px; border: none; text-indent: -9999px; }
8 css/structure/jquery.mobile.core.css
View
@@ -27,11 +27,11 @@ div.ui-mobile-viewport { overflow-x: hidden; }
/* loading screen */
.ui-loading .ui-loader { display: block; }
.ui-loader { display: none; z-index: 9999999; position: fixed; top: 50%; box-shadow: 0 1px 1px -1px #fff; left: 50%; border:0; }
-.ui-loader-default { background: none; opacity: .18; width: 46px; height: 46px; margin-left: -18px; margin-top: -18px; padding: 1px; -webkit-border-radius: 36px; -moz-border-radius: 36px; border-radius: 36px; }
+.ui-loader-default { background: none; opacity: .18; width: 46px; height: 46px; margin-left: -18px; margin-top: -18px; }
.ui-loader-verbose { width: 200px; opacity: .88; height: auto; margin-left: -110px; padding: 10px; }
.ui-loader-default h1 { font-size: 0; width: 0; height: 0; overflow: hidden; }
.ui-loader-verbose h1 { font-size: 16px; margin: 0; text-align: center; }
-.ui-loader .ui-icon { display: block; margin: 0; width: 46px; height: 46px; background-color: transparent; }
+.ui-loader .ui-icon { background-color: #000; display: block; margin: 0; width: 46px; height: 46px; padding: 1px; -webkit-border-radius: 36px; -moz-border-radius: 36px; border-radius: 36px; }
.ui-loader-verbose .ui-icon { margin: 0 auto 10px; }
.ui-loader-textonly { padding: 15px; margin-left: -115px; }
.ui-loader-textonly .ui-icon { display: none; }
@@ -45,8 +45,8 @@ div.ui-mobile-viewport { overflow-x: hidden; }
.ui-bar h1, .ui-bar h2, .ui-bar h3, .ui-bar h4, .ui-bar h5, .ui-bar h6 { margin: 0; padding: 0; font-size: 16px; display: inline-block; }
.ui-header, .ui-footer { position: relative; overflow: hidden; width: 100%; border-left-width: 0; border-right-width: 0; }
-.ui-header .ui-btn-left { position: absolute; left: 10px; top: .4em; }
-.ui-header .ui-btn-right { position: absolute; right: 10px; top: .4em; }
+.ui-header .ui-btn-left { position: absolute; left: 5px; top: -2px; }
+.ui-header .ui-btn-right { position: absolute; right: 5px; top: -2px; }
.ui-header .ui-title, .ui-footer .ui-title { min-height: 1.1em; text-align: center; font-size: 16px; display: block; margin: .6em 30% .8em; padding: 0; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; outline: 0 !important; }
.ui-footer .ui-title { margin: .6em 15px .8em; }
7 css/structure/jquery.mobile.fixedToolbar.css
View
@@ -5,13 +5,13 @@
right: 0;
position: fixed;
z-index: 1000;
- -webkit-transform: translateZ(0); /* Force header/footer rendering to go through the same rendering pipeline as native page scrolling. */
}
.ui-header-fixed {
top: 0;
}
.ui-footer-fixed {
- bottom: 0;
+ bottom: -1px;
+ padding-bottom: 1px;
}
.ui-header-fullscreen,
.ui-footer-fullscreen {
@@ -34,9 +34,6 @@
.ui-page-footer-fullscreen .ui-fixed-hidden {
left: -99999em;
}
-.ui-footer-duplicate {
- display: none;
-}
.ui-header-fixed .ui-btn,
.ui-footer-fixed .ui-btn {
z-index: 10;
7 css/structure/jquery.mobile.forms.checkboxradio.css
View
@@ -4,7 +4,10 @@
.ui-checkbox .ui-btn-icon-left .ui-btn-inner,.ui-radio .ui-btn-icon-left .ui-btn-inner { padding-left: 45px; }
.ui-checkbox .ui-btn-icon-right .ui-btn-inner, .ui-radio .ui-btn-icon-right .ui-btn-inner { padding-right: 45px; }
.ui-checkbox .ui-icon, .ui-radio .ui-icon { top: 1.1em; }
-.ui-checkbox .ui-btn-icon-left .ui-icon, .ui-radio .ui-btn-icon-left .ui-icon {left: 15px; }
-.ui-checkbox .ui-btn-icon-right .ui-icon, .ui-radio .ui-btn-icon-right .ui-icon {right: 15px; }
+.ui-checkbox .ui-btn-icon-left .ui-icon, .ui-radio .ui-btn-icon-left .ui-icon { left: 15px; }
+.ui-checkbox .ui-mini.ui-btn-icon-left .ui-icon, .ui-radio .ui-mini.ui-btn-icon-left .ui-icon { left: 12px; }
+.ui-checkbox .ui-btn-icon-right .ui-icon, .ui-radio .ui-btn-icon-right .ui-icon { right: 15px; }
+.ui-checkbox .ui-mini.ui-btn-icon-right .ui-icon, .ui-radio .ui-mini.ui-btn-icon-right .ui-icon { right: 12px; }
+
/* input, label positioning */
.ui-checkbox input,.ui-radio input { position:absolute; left:20px; top:50%; width: 10px; height: 10px; margin:-5px 0 0 0; outline: 0 !important; z-index: 1; }
2  css/structure/jquery.mobile.forms.select.css
View
@@ -15,6 +15,8 @@
.ui-select .ui-btn-icon-right .ui-btn-inner { padding-right: 45px; }
.ui-select .ui-btn-icon-right .ui-icon { right: 15px; }
+.ui-select .ui-mini.ui-btn-icon-right .ui-icon { right: 7px; }
+
/* labels */
label.ui-select { font-size: 16px; line-height: 1.4; font-weight: normal; margin: 0 0 .3em; display: block; }
44 css/structure/jquery.mobile.forms.slider.css
View
@@ -3,25 +3,33 @@ input.ui-slider-input,
.ui-field-contain input.ui-slider-input { display: inline-block; width: 50px; }
select.ui-slider-switch { display: none; }
div.ui-slider { position: relative; display: inline-block; overflow: visible; height: 15px; padding: 0; margin: 0 2% 0 20px; top: 4px; width: 65%; }
-div.ui-slider-switch { width: 99.8%; }
-.ui-field-contain div.ui-slider-switch { width: 50%; }
-a.ui-slider-handle { position: absolute; z-index: 1; top: 50%; width: 28px; height: 28px; margin-top: -15px; margin-left: -15px; outline: 0; }
-a.ui-slider-handle .ui-btn-inner { padding-left: 0; padding-right: 0; }
-@media all and (min-width: 480px){
- .ui-field-contain label.ui-slider { vertical-align: top; display: inline-block; width: 20%; margin: 0 2% 0 0; }
+div.ui-slider-mini { height: 12px; margin-left: 10px; }
+div.ui-slider-bg { border: none; height: 100%; padding-right: 8px; }
+.ui-controlgroup a.ui-slider-handle, a.ui-slider-handle { position: absolute; z-index: 1; top: 50%; width: 28px; height: 28px; margin-top: -15px; margin-left: -15px; outline: 0; }
+a.ui-slider-handle .ui-btn-inner { padding-left: 0; }
+div.ui-slider-mini a.ui-slider-handle { height: 14px; width: 14px; margin: -8px 0 0 -7px; }
+div.ui-slider-mini a.ui-slider-handle .ui-btn-inner { height: 30px; width: 30px; padding: 0; margin: -9px 0 0 -9px; }
+
+@media all and (min-width: 320px){
+ .ui-field-contain label.ui-slider { vertical-align: top; display: inline-block; width: 20%; margin: 0 2% 0 0; }
.ui-field-contain div.ui-slider { width: 43%; }
- .ui-field-contain div.ui-slider-switch { width: 35%; }
+ .ui-field-contain div.ui-slider-switch { width: 5.5em; }
}
-div.ui-slider-switch { height: 32px; overflow: hidden; margin-left: 0; }
-div.ui-slider-inneroffset { margin-left: 50%; position: absolute; top: 1px; height: 100%; width: 50%; }
+
+div.ui-slider-switch { height: 32px; margin-left: 0; width: 5em; }
a.ui-slider-handle-snapping { -webkit-transition: left 70ms linear; -moz-transition: left 70ms linear; }
-div.ui-slider-labelbg { position: absolute; top:0; margin: 0; border-width: 0; }
-div.ui-slider-switch div.ui-slider-labelbg-a { width: 60%; height: 100%; left: 0; }
-div.ui-slider-switch div.ui-slider-labelbg-b { width: 60%; height: 100%; right: 0; }
-.ui-slider-switch-a div.ui-slider-labelbg-a, .ui-slider-switch-b div.ui-slider-labelbg-b { z-index: -1; }
-.ui-slider-switch-a div.ui-slider-labelbg-b, .ui-slider-switch-b div.ui-slider-labelbg-a { z-index: 0; }
+div.ui-slider-switch .ui-slider-handle { margin-top: 1px; }
+.ui-slider-inneroffset { margin: 0 16px; position: relative; z-index: 1; }
+
+div.ui-slider-switch.ui-slider-mini { width: 4.5em; height: 29px; }
+div.ui-slider-switch.ui-slider-mini .ui-slider-inneroffset { margin: 0 15px 0 14px; }
+div.ui-slider-switch.ui-slider-mini .ui-slider-handle { width: 25px; height: 25px; margin: 1px 0 0 -13px; }
+div.ui-slider-switch.ui-slider-mini a.ui-slider-handle .ui-btn-inner { height: 30px; width: 30px; padding: 0; margin: 0; }
+
+span.ui-slider-label { position: absolute; text-align: center; width: 100%; overflow: hidden; font-size: 16px; top: 0; line-height: 2; min-height: 100%; border-width: 0; }
+.ui-slider-mini span.ui-slider-label { font-size: 14px; }
+
+span.ui-slider-label-a { z-index: 1; left: 0; text-indent: -1.5em; }
+span.ui-slider-label-b { z-index: 0; right: 0; text-indent: 1.5em;}
-div.ui-slider-switch a.ui-slider-handle { z-index: 1; width: 100%; height: 30px; margin-top: -17px; margin-left: -100%; }
-span.ui-slider-label { width: 100%; position: absolute; height: 32px; font-size: 16px; text-align: center; line-height: 1.8; background: none; border-color: transparent; }
-span.ui-slider-label-a { left: -100%; margin-right: -1px }
-span.ui-slider-label-b { right: -100%; margin-left: -1px }
+.ui-slider-inline { width: 120px; display: inline-block; }
4 css/structure/jquery.mobile.forms.textinput.css
View
@@ -6,7 +6,11 @@ textarea.ui-input-text { height: 50px; -webkit-transition: height 200ms linear;
.ui-icon-searchfield:after { position: absolute; left: 7px; top: 50%; margin-top: -9px; content: ""; width: 18px; height: 18px; opacity: .5; }
.ui-input-search input.ui-input-text { border: none; width: 98%; padding: .4em 0; margin: 0; display: block; background: transparent none; outline: 0 !important; }
.ui-input-search .ui-input-clear { position: absolute; right: 0; top: 50%; margin-top: -13px; }
+.ui-mini .ui-input-clear { right: -3px; }
+
.ui-input-search .ui-input-clear-hidden { display: none; }
+input.ui-mini, .ui-mini input { font-size: 14px !important; }
+textarea.ui-mini { height: 45px; }
/* orientation adjustments - incomplete!*/
@media all and (min-width: 450px){
8 css/themes/default/jquery.mobile.theme.css
View
@@ -720,7 +720,7 @@
text-decoration: none;
}
-/* Structure */
+/* Global */
/* links within "buttons"
-----------------------------------------------------------------------------------------------------------*/
@@ -1114,9 +1114,9 @@ a.ui-link-inherit {
box-shadow: inset 0px 1px 4px rgba(0,0,0,.2);
}
.ui-icon-shadow {
- -moz-box-shadow: 0px 1px 0 rgba(255,255,255,.4);
- -webkit-box-shadow: 0px 1px 0 rgba(255,255,255,.4);
- box-shadow: 0px 1px 0 rgba(255,255,255,.4);
+ -moz-box-shadow: 0px 1px 0 rgba(255,255,255,.4) /*{global-icon-shadow}*/;
+ -webkit-box-shadow: 0px 1px 0 rgba(255,255,255,.4) /*{global-icon-shadow}*/;
+ box-shadow: 0px 1px 0 rgba(255,255,255,.4) /*{global-icon-shadow}*/;
}
/* Focus state - set here for specificity (note: these classes are added by JavaScript)
10 docs/_assets/css/jqm-docs.css
View
@@ -23,7 +23,7 @@ pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
#jqm-homeheader img { width: 235px; }
img { max-width: 100%; }
-.ui-header .jqm-home { top:0.65em; }
+.ui-header .jqm-home { top: 0; }
nav { margin: 0; }
p.intro {
@@ -134,6 +134,14 @@ dd h4 { margin:15px 0 0 0; }
background-image: -o-linear-gradient(#74b042, #56A00E); /* Opera 11.10+ */
background-image: linear-gradient(#74b042, #56A00E);
}
+.ui-bar-f,
+.ui-bar-f input,
+.ui-bar-f select,
+.ui-bar-f textarea,
+.ui-bar-f button {
+ font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
+}
+
.ui-bar-f,
.ui-bar-f .ui-link-inherit {
color: #fff;
40 docs/api/data-attributes.html
View
@@ -55,6 +55,10 @@
<td>true | <strong>false</strong></td>
</tr>
<tr>
+ <th>data-mini</th>
+ <td>true | <strong>false</strong> - Compact sized version</td>
+ </tr>
+ <tr>
<th>data-shadow</th>
<td><strong>true</strong> | false</td>
</tr>
@@ -74,6 +78,10 @@
<td>none (prevents auto-enhancement to use native control)</td>
</tr>
<tr>
+ <th>data-mini</th>
+ <td>true | <strong>false</strong> - Compact sized version</td>
+ </tr>
+ <tr>
<th>data-theme</th>
<td>swatch letter (a-z) - Added to the form element</td>
</tr>
@@ -91,6 +99,10 @@
<td>swatch letter (a-z)</td>
</tr>
<tr>
+ <th>data-mini</th>
+ <td>true | <strong>false</strong> - Compact sized version</td>
+ </tr>
+ <tr>
<th>data-theme</th>
<td>swatch letter (a-z)</td>
</tr>
@@ -104,6 +116,10 @@
<td>swatch letter (a-z) - Sets all collapsibles in set</td>
</tr>
<tr>
+ <th>data-mini</th>
+ <td>true | <strong>false</strong> - Compact sized version</td>
+ </tr>
+ <tr>
<th>data-theme</th>
<td>swatch letter (a-z) - Sets all collapsibles in set</td>
</tr>
@@ -159,6 +175,10 @@
<td>none (prevents auto-enhancement to use native control)</td>
</tr>
<tr>
+ <th>data-mini</th>
+ <td>true | <strong>false</strong> - Compact sized version</td>
+ </tr>
+ <tr>
<th>data-theme</th>
<td>swatch letter (a-z) - Added to the form element</td>
</tr>
@@ -355,6 +375,10 @@
<td>none (prevents auto-enhancement to use native control)</td>
</tr>
<tr>
+ <th>data-mini</th>
+ <td>true | <strong>false</strong> - Compact sized version</td>
+ </tr>
+ <tr>
<th>data-theme</th>
<td>swatch letter (a-z) - Added to the form element</td>
</tr>
@@ -376,6 +400,10 @@
<td>true | <strong>false</strong></td>
</tr>
<tr>
+ <th>data-mini</th>
+ <td>true | <strong>false</strong> - Compact sized version</td>
+ </tr>
+ <tr>
<th>data-native-menu</th>
<td><strong>true</strong> | false</td>
</tr>
@@ -402,6 +430,14 @@
<p>Inputs with <code>type="range"</code> are auto-enhanced, no <code>data-role</code> required</p>
<table>
<tr>
+ <th>data-highlight</th>
+ <td>true | <strong>false</strong> - Adds an active state fill on track to handle</td>
+ </tr>
+ <tr>
+ <th>data-mini</th>
+ <td>true | <strong>false</strong> - Compact sized version</td>
+ </tr>
+ <tr>
<th>data-role</th>
<td>none (prevents auto-enhancement to use native control)</td>
</tr>
@@ -419,6 +455,10 @@
<p>Input <code>type="text|number|search|etc."</code> or <code>textarea</code> elements are auto-enhanced, no <code>data-role</code> required</p>
<table>
<tr>
+ <th>data-mini</th>
+ <td>true | <strong>false</strong> - Compact sized version</td>
+ </tr>
+ <tr>
<th>data-role</th>
<td>none (prevents auto-enhancement to use native control)</td>
</tr>
5 docs/buttons/buttons-inline.html
View
@@ -43,6 +43,11 @@
<a href="index.html" data-role="button" data-inline="true">Cancel</a>
<a href="index.html" data-role="button" data-theme="b" data-inline="true">Save</a>
+
+ <p>Adding the <code>data-mini="true"</code> to the inline buttons creates a more compact version:</p>
+
+ <a href="index.html" data-role="button" data-inline="true" data-mini="true">Cancel</a>
+ <a href="index.html" data-role="button" data-theme="b" data-inline="true" data-mini="true">Save</a>
<p>If you want buttons to sit side-by-side but stretch to fill the width of the screen, you can use the <a href="../content/content-grids.html">content column grids</a> to put normal full-width buttons into 2- or 3-columns.</p>
8 docs/buttons/buttons-options.html
View
@@ -75,6 +75,14 @@
<a href="#" data-role="button" data-inline="true">Inline</a>
</dd>
+ <dt><code>mini</code> <em>boolean</em></dt>
+ <dd>
+ <p class="default">default: null (false)</p>
+ <p>If set to true, this will display a more compact version of the button that uses less vertical height. Possible values: true, false. This option is also exposed as a data attribute: <code>data-mini=&quot;true&quot;</code></p>
+ <pre><code>$('a').buttonMarkup(<strong>{ mini: "true" }</strong>);</code></pre>
+ <a href="#" data-role="button" data-mini="true">Inline</a>
+ </dd>
+
<dt><code>shadow</code> <em>boolean</em></dt>
<dd>
<p class="default">default: true</p>
15 docs/buttons/buttons-types.html
View
@@ -45,7 +45,20 @@
<p>Produces this <strong>link-based</strong> button:</p>
<a href="index.html" data-role="button">Link button</a>
- <p>Links styled like buttons have all the same visual options as true form-based buttons below, but there are a few important differences. Link-based buttons aren't part of the <code>button</code> plugin and only just use the underlying <code>buttonMarkup</code> plugin to generate the button styles so the form button methods (enable, disable, refresh) aren't supported. If you need to disable a link-based button (or any element), it's possible to apply the disabled class ui-disabled yourself with JavaScript to achieve the same effect.</p>
+ <p><strong>Note:</strong> Links styled like buttons have all the same visual options as true form-based buttons below, but there are a few important differences. Link-based buttons aren't part of the <code>button</code> plugin and only just use the underlying <code>buttonMarkup</code> plugin to generate the button styles so the form button methods (enable, disable, refresh) aren't supported. If you need to disable a link-based button (or any element), it's possible to apply the disabled class ui-disabled yourself with JavaScript to achieve the same effect.</p>
+
+ <h2>Mini size</h2>
+
+ <p>For a more compact version that is useful in toolbars and tight spaces, add the <code>data-mini="true"</code> attribute to the button to create a <a href="../forms/forms-all-mini.html">mini version</a>. </p>
+
+<pre><code>
+ &lt;a href=&quot;index.html&quot; data-role=&quot;button&quot;&gt;Link button&lt;/a <strong>data-mini=&quot;true&quot;</strong> &gt;
+</code></pre>
+
+ <p>This will produce a search input that a not as tall as the standard version and has a smaller text size.</p>
+ <a href="index.html" data-role="button" data-mini="true">Link button</a>
+
+
<h2>Form buttons</h2>
<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 button &mdash; there is no need to add the <code> data-role="button"</code> attribute. However, if needed, you can directly call the button plugin on any selector, just like any jQuery plugin:</p>
13 docs/config/iOSFullscreen.html
View
@@ -10,6 +10,10 @@
<title>jQuery Mobile Docs - Configuration</title>
<link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+
+ <script src="../../external/requirejs/require.js"></script>
+ <script src="../../js/jquery.js"></script>
<script>
$(document).bind("mobileinit", function() {
if (!!window.navigator.standalone) {
@@ -17,10 +21,11 @@
}
});
</script>
-
-
- <script data-main="../../js/jquery.mobile.docs" src="../../external/requirejs/require.js"></script>
- <script src="../../js/jquery.js"></script>
+ <script>
+ require( {
+ baseUrl: "../../js"
+ }) ( [ "jquery.mobile.docs" ] )
+ </script>
</head>
<body>
13 docs/config/loadingMessage.html
View
@@ -6,15 +6,20 @@
<title>jQuery Mobile Docs - Configuration</title>
<link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+
+ <script src="../../external/requirejs/require.js"></script>
+ <script src="../../js/jquery.js"></script>
<script>
$(document).bind("mobileinit", function(){
$.mobile.loadingMessage = false;
});
</script>
-
-
- <script data-main="../../js/jquery.mobile.docs" src="../../external/requirejs/require.js"></script>
- <script src="../../js/jquery.js"></script>
+ <script>
+ require( {
+ baseUrl: "../../js"
+ }) ( [ "jquery.mobile.docs" ] )
+ </script>
</head>
<body>
13 docs/config/minScrollBack.html
View
@@ -6,15 +6,20 @@
<title>jQuery Mobile Docs - Configuration</title>
<link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+
+ <script src="../../external/requirejs/require.js"></script>
+ <script src="../../js/jquery.js"></script>
<script>
$(document).bind("mobileinit", function(){
$.mobile.minScrollBack = 999;
});
</script>
-
-
- <script data-main="../../js/jquery.mobile.docs" src="../../external/requirejs/require.js"></script>
- <script src="../../js/jquery.js"></script>
+ <script>
+ require( {
+ baseUrl: "../../js"
+ }) ( [ "jquery.mobile.docs" ] )
+ </script>
</head>
<body>
13 docs/config/pageLoadErrorMessage.html
View
@@ -6,15 +6,20 @@
<title>jQuery Mobile Docs - Configuration</title>
<link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+
+ <script src="../../external/requirejs/require.js"></script>
+ <script src="../../js/jquery.js"></script>
<script>
$(document).bind("mobileinit", function(){
$.mobile.pageLoadErrorMessage = 'Yikes, we broke the internet!';
});
</script>
-
-
- <script data-main="../../js/jquery.mobile.docs" src="../../external/requirejs/require.js"></script>
- <script src="../../js/jquery.js"></script>
+ <script>
+ require( {
+ baseUrl: "../../js"
+ }) ( [ "jquery.mobile.docs" ] )
+ </script>
</head>
<body>
13 docs/config/pushState.html
View
@@ -6,15 +6,20 @@
<title>jQuery Mobile Docs - Configuration</title>
<link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+
+ <script src="../../external/requirejs/require.js"></script>
+ <script src="../../js/jquery.js"></script>
<script>
$(document).bind("mobileinit", function(){
$.mobile.pushStateEnabled = false;
});
</script>
-
-
- <script data-main="../../js/jquery.mobile.docs" src="../../external/requirejs/require.js"></script>
- <script src="../../js/jquery.js"></script>
+ <script>
+ require( {
+ baseUrl: "../../js"
+ }) ( [ "jquery.mobile.docs" ] )
+ </script>
</head>
<body>
13 docs/config/touchOverflow.html
View
@@ -6,15 +6,20 @@
<title>jQuery Mobile Docs - Configuration</title>
<link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+
+ <script src="../../external/requirejs/require.js"></script>
+ <script src="../../js/jquery.js"></script>
<script>
$(document).bind("mobileinit", function(){
$.mobile.touchOverflowEnabled = true;
});
</script>
-
-
- <script data-main="../../js/jquery.mobile.docs" src="../../external/requirejs/require.js"></script>
- <script src="../../js/jquery.js"></script>
+ <script>
+ require( {
+ baseUrl: "../../js"
+ }) ( [ "jquery.mobile.docs" ] )
+ </script>
</head>
<body>
24 docs/content/content-collapsible-set.html
View
@@ -53,25 +53,41 @@
<div data-role="collapsible">
<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 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 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 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>
+ <h2>Mini collapsible sets</h2>
+
+ <p>For a more compact version that is useful in tight spaces, add the <code>data-mini="true"</code> attribute to the element to create a <a href="../forms-all-mini.html">mini version</a>. </p>
+
+ <div data-role="collapsible-set" data-theme="c" data-content-theme="d" data-mini="true">
+ <div data-role="collapsible">
+ <h3>Section 1</h3>
+ <p>Collapsible content</p>
+ </div>
+ <div data-role="collapsible">
+ <h3>Section 2</h3>
+ <p>Collapsible content</p>
+
+ </div>
+ <div data-role="collapsible">
+ <h3>Section 3</h3>
+ <p>Collapsible content</p>
+ </div>
+ </div>
+
<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>
23 docs/content/content-collapsible.html
View
@@ -45,11 +45,11 @@
<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>
+ <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;false&quot;&gt;</strong>
- </code>
+<code>
+&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>
@@ -59,6 +59,21 @@
<p>I'm the collapsible content. I'm expanded by default because I have the "collapsed" state set to false.</p>
</div>
+ <h2>Mini collapsibles</h2>
+
+ <p>For a more compact version that is useful in toolbars and tight spaces, add the <code>data-mini="true"</code> attribute to the element to create a <a href="../forms-all-mini.html">mini version</a>. </p>
+
+ <code>
+ &lt;div data-role=&quot;collapsible&quot; <strong>data-mini=&quot;true&quot;&gt;</strong>
+ </code>
+
+ <p>This code will create a mini collapsible widget:</p>
+
+ <div data-role="collapsible" data-mini="true">
+ <h3>I'm a mini header</h3>
+ <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>
1  docs/forms/checkboxes/events.html
View
@@ -71,6 +71,7 @@
<li data-role="list-divider">Form elements</li>
<li><a href="../docs-forms.html">Form basics</a></li>
<li><a href="../forms-all.html">Form element gallery</a></li>
+ <li><a href="../forms-all-mini.html">Mini form element gallery</a></li>
<li><a href="../textinputs/index.html">Text inputs</a></li>
<li><a href="../search/">Search input</a></li>
<li><a href="../slider/">Slider</a></li>
18 docs/forms/checkboxes/index.html
View
@@ -49,8 +49,21 @@
<input type="checkbox" name="checkbox-0" id="checkbox-0" class="custom" />
<label for="checkbox-0">I agree</label>
+ <h2>Mini version</h2>
-
+ <p>For a more compact version that is useful in toolbars and tight spaces, add the <code>data-mini="true"</code> attribute to the element to create a <a href="../forms-all-mini.html">mini version</a>. </p>
+
+<pre><code>
+&lt;input type=&quot;checkbox&quot; name=&quot;checkbox-0&quot; id=&quot;checkbox-mini-0&quot; class=&quot;custom&quot; <strong>data-mini=&quot;true&quot;</strong> /&gt;
+&lt;label for=&quot;checkbox-mini-0&quot;&gt;I agree&lt;/label&gt;
+</code></pre>
+
+ <p>This will produce a select that a not as tall as the standard version and has a smaller text size.</p>
+ <input type="checkbox" name="checkbox-0" id="checkbox-mini-0" class="custom" data-mini="true" />
+ <label for="checkbox-mini-0">I agree</label>
+
+
+ <h2>Field containers &amp; Legends</h2>
<p>Because checkboxes use the <code>label</code> element for the text displayed next to the checkbox form element, we recommend wrapping the checkbox in a <code>fieldset</code> element that has a <code>legend</code> which acts as the title for the question. Add the <code> data-role="controlgroup"</code> attribute to the <code>fieldset</code> so it can be styled in a parallel way as text inputs, selects or other form elements.</p>
<p>Lastly, need to wrap the <code>fieldset</code> in a <code>div</code> with <code> data-role="controlgroup"</code> attribute to the <code>fieldset</code> so it can be styled in a parallel way as text inputs, selects or other form elements.</p>
@@ -73,6 +86,8 @@
<label for="checkbox-1">I agree</label>
</fieldset>
</div>
+
+
<h2>Vertically grouped checkboxes</h2>
@@ -137,6 +152,7 @@
<li data-role="list-divider">Form elements</li>
<li><a href="../docs-forms.html">Form basics</a></li>
<li><a href="../forms-all.html">Form element gallery</a></li>
+ <li><a href="../forms-all-mini.html">Mini form element gallery</a></li>
<li><a href="../textinputs/index.html">Text inputs</a></li>
<li><a href="../search/">Search input</a></li>
<li><a href="../slider/">Slider</a></li>
1  docs/forms/checkboxes/methods.html
View
@@ -75,6 +75,7 @@
<li data-role="list-divider">Form elements</li>
<li><a href="../docs-forms.html">Form basics</a></li>
<li><a href="../forms-all.html">Form element gallery</a></li>
+ <li><a href="../forms-all-mini.html">Mini form element gallery</a></li>
<li><a href="../textinputs/index.html">Text inputs</a></li>
<li><a href="../search/">Search input</a></li>
<li><a href="../slider/">Slider</a></li>
8 docs/forms/checkboxes/options.html
View
@@ -36,7 +36,12 @@
<p>The checkbox has the following options:</p>
<dl>
-
+ <dt><code>mini</code> <em>boolean</em></dt>
+ <dd>
+ <p class="default">default: false</p>
+ <p>Sets the size of the element to a more compact, <a href="../forms-all-mini.html">mini version</a>. This option is also exposed as a data attribute: <code>data-mini=&quot;true&quot;</code></p>
+ <pre><code>$("input[type='checkbox']").checkboxradio(<strong>{ mini: "true" }</strong>);</code></pre>
+ </dd>
<dt><code>theme</code> <em>string</em></dt>
<dd>
<p class="default">default: null, inherited from parent</p>
@@ -60,6 +65,7 @@
<li data-role="list-divider">Form elements</li>
<li><a href="../docs-forms.html">Form basics</a></li>
<li><a href="../forms-all.html">Form element gallery</a></li>
+ <li><a href="../forms-all-mini.html">Mini form element gallery</a></li>
<li><a href="../textinputs/index.html">Text inputs</a></li>
<li><a href="../search/">Search input</a></li>
<li><a href="../slider/">Slider</a></li>
14 docs/forms/docs-forms.html
View
@@ -37,6 +37,19 @@
<h2>Markup conventions</h2>
<p>When constructing forms to be used in jQuery Mobile, most of the standard guidelines used to create forms that submit via normal HTTP post or get still apply. However, one thing to keep in mind is that the <code>id</code> attributes of form controls need to be not only unique on a given page, but also unique across the pages in a site. This is because jQuery Mobile's single-page navigation model allows many different "pages" to be present in the DOM at the same time, so you must be careful to use unique <code>id</code> attributes so there will be only one of each in the DOM (and of course, be sure to pair them properly with <code>label</code> elements via the <code>for</code> attribute).</p>
+ <h2>Mini sized elements</h2>
+
+ <p>For a more compact version of all form elements and buttons, add the <code>data-mini="true"</code> attribute to the element to create a <a href="forms-all-mini.html">mini version</a>. This is useful in toolbars and tight spaces but is still finger-friendly. It's possible to add this attribute to a fieldcontainer to set this on a number of elements at once.</p>
+
+<pre><code>
+&lt;label for=&quot;basic&quot;&gt;Text Input:&lt;/label&gt;
+&lt;input type=&quot;text&quot; name=&quot;name&quot; id=&quot;basic&quot; <strong>data-mini=&quot;true&quot;</strong> /&gt;
+ </code></pre>
+
+ <p>This will produce an input that a not as tall as the standard version and has a smaller text size.</p>
+ <label for="mini">Text Input:</label>
+ <input type="text" name="name" id="mini" value="" data-mini="true" />
+
<h2>Hiding labels accessibly</h2>
<p>For the sake of accessibility, jQuery Mobile requires that all form elements be paired with a meaningful <code>label</code>. To hide labels in a way that leaves them visible to assistive technologies—for example, when letting an element’s <code>placeholder</code> attribute serve as a label—apply the helper class <code>ui-hidden-accessible</code> to the label itself:</p>
<code>
@@ -214,6 +227,7 @@
<li data-role="list-divider">Form elements</li>
<li data-theme="a"><a href="docs-forms.html">Form basics</a></li>
<li><a href="forms-all.html">Form element gallery</a></li>
+ <li><a href="forms-all-mini.html">Mini form element gallery</a></li>
<li><a href="textinputs/">Text inputs</a></li>
<li><a href="search/">Search inputs</a></li>
<li><a href="slider/">Slider</a></li>
260 docs/forms/forms-all-compare.html
View
@@ -0,0 +1,260 @@
+<!DOCTYPE html>
+<html class="ui-mobile-rendering">
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Form element size comparison</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script data-main="../../js/jquery.mobile.docs" src="../../external/requirejs/require.js"></script>
+ <script src="../../js/jquery.js"></script>
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Form sizes</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>Form size comparison</h2>
+
+ <p>All form controls accept a <code>data-mini="true"</code> attribute that renders a smaller version of the enhanced element. In the case of grouped buttons, the <code>data-mini="true"</code> attribute can be added to the containing controlgroup.</p>
+
+ <style>
+ table { width:100%; border-bottom:1px solid #ccc; border-collapse: collapse; }
+ th { text-align:left; margin-right:50px; display:none; }
+ th h3 { margin:.6em 0; }
+ th, td { vertical-align:top; border-top:1px solid #ccc; padding: 4px 10px; }
+ </style>
+
+ <table margin="0">
+ <tr>
+ <th><h3><a href="search/index.html">Search</a></h3></th>
+ <td>
+ <label for="search-full" class="ui-hidden-accessible">Search Input:</label>
+ <input type="search" name="name" id="search-full" value="" />
+ </td>
+ <td>
+ <label for="text-mini" class="ui-hidden-accessible">Search Input:</label>
+ <input type="search" name="name" id="search-mini" value="" data-mini="true" />
+ </td>
+ </tr>
+ <tr>
+ <th><h3><a href="textinputs/index.html">Text</a></h3></th>
+ <td>
+ <label for="text-full" class="ui-hidden-accessible">Text Input:</label>
+ <input type="text" name="name" id="text-full" value="" />
+ </td>
+ <td>
+ <label for="text-mini" class="ui-hidden-accessible">Text Input:</label>
+ <input type="text" name="name" id="text-mini" value="" data-mini="true" />
+ </td>
+ </tr>
+ <tr>
+ <th><h3><a href="textinputs/index.html">Textarea</a></h3></th>
+ <td>
+ <label for="textarea-full" class="ui-hidden-accessible">Textarea:</label>
+ <textarea name="textarea" id="textarea-full"></textarea>
+ </td>
+ <td>
+ <label for="textarea-mini" class="ui-hidden-accessible">Textarea:</label>
+ <textarea name="textarea" id="textarea-mini" data-mini="true"></textarea>
+ </td>
+ </tr>
+ <tr>
+ <th><h3><a href="switch/index.html">Switch</a></h3></th>
+ <td>
+ <label for="flip-full" class="ui-hidden-accessible">Flip switch:</label>
+ <select name="slider" id="flip-full" data-role="slider">
+ <option value="off">Off</option>
+ <option value="on">On</option>
+ </select>
+ </td>
+ <td>
+ <label for="flip-mini" class="ui-hidden-accessible">Flip switch:</label>
+ <select name="slider" id="flip-mini" data-role="slider" data-mini="true">
+ <option value="off">Off</option>
+ <option value="on">On</option>
+ </select>
+ </td>
+ </tr>
+ <tr>
+ <th><h3><a href="slider/index.html">Slider</a></h3></th>
+ <td style="padding-top:14px;">
+ <label for="slider-full" class="ui-hidden-accessible">Input slider:</label>
+ <input type="range" name="slider-1" id="slider-full" value="25" min="0" max="100" data-highlight="true" class="ui-hidden-accessible" />
+ </td>
+ <td style="padding-top:16px;">
+ <label for="slider-mini" class="ui-hidden-accessible">Input slider:</label>
+ <input type="range" name="slider-1" id="slider-mini" value="25" min="0" max="100" data-highlight="true" data-mini="true" class="ui-hidden-accessible" />
+ </td>
+ </tr>
+ <tr>
+ <th><h3><a href="select/index.html">Select</a></h3></th>
+ <td>
+ <label for="select-full" class="ui-hidden-accessible">Shipping method:</label>
+ <select name="select-choice-0" id="select-full">
+ <option value="standard">Standard: 7 day</option>
+ <option value="rush">Rush: 3 days</option>
+ <option value="express">Express: next day</option>
+ <option value="overnight">Overnight</option>
+ </select>
+ </td>
+ <td>
+ <label for="select-mini" class="ui-hidden-accessible">Shipping method:</label>
+ <select name="select-choice-0" id="select-mini" data-mini="true">
+ <option value="standard">Standard: 7 day</option>
+ <option value="rush">Rush: 3 days</option>
+ <option value="express">Express: next day</option>
+ <option value="overnight">Overnight</option>
+ </select>
+ </td>
+ </tr>
+ <tr>
+ <th><h3><a href="checkboxes/index.html">Checkbox</a></h3></th>
+ <td>
+ <fieldset data-role="controlgroup">
+ <input type="checkbox" name="checkbox-1a" id="c-full-1" />
+ <label for="c-full-1">Apples</label>
+ <input type="checkbox" name="checkbox-2a" id="c-full-2" />
+ <label for="c-full-2">Oranges</label>
+ <input type="checkbox" name="checkbox-3a" id="c-full-3" />
+ <label for="c-full-3">Bananas</label>
+ </fieldset>
+ </td>
+ <td>
+ <fieldset data-role="controlgroup" data-mini="true">
+ <input type="checkbox" name="checkbox-1a" id="c-mini-1" />
+ <label for="c-mini-1">Apples</label>
+ <input type="checkbox" name="checkbox-2a" id="c-mini-2" />
+ <label for="c-mini-2">Oranges</label>
+ <input type="checkbox" name="checkbox-3a" id="c-mini-3" />
+ <label for="c-mini-3">Bananas</label>
+ </fieldset>
+ </td>
+ </tr>
+ <tr>
+ <th><h3><a href="checkboxes/index.html">Checkbox</a></h3></th>
+ <td>
+ <fieldset data-role="controlgroup" data-type="horizontal">
+ <input type="checkbox" name="checkbox-1a" id="c-full-4" />
+ <label for="c-full-4">B</label>
+ <input type="checkbox" name="checkbox-2a" id="c-full-5" />
+ <label for="c-full-5">I</label>
+ <input type="checkbox" name="checkbox-3a" id="c-full-6" />
+ <label for="c-full-6">U</label>
+ </fieldset>
+ </td>
+ <td>
+ <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
+ <input type="checkbox" name="checkbox-1a" id="c-mini-4" />
+ <label for="c-mini-4">B</label>
+ <input type="checkbox" name="checkbox-2a" id="c-mini-5" />
+ <label for="c-mini-5">I</label>
+ <input type="checkbox" name="checkbox-3a" id="c-mini-6" />
+ <label for="c-mini-6">U</label>
+ </fieldset>
+ </td>
+ </tr>
+ <tr>
+ <th><h3><a href="radiobuttons/index.html">Radio buttons</a></h3></th>
+ <td>
+ <fieldset data-role="controlgroup">
+ <input type="radio" name="radio-choice-1" id="radio-full-1" value="choice-1" checked="checked" />
+ <label for="radio-full-1">Credit</label>
+ <input type="radio" name="radio-choice-1" id="radio-full-2" value="choice-2" />
+ <label for="radio-full-2">Debit</label>
+ <input type="radio" name="radio-choice-1" id="radio-full-3" value="choice-3" />
+ <label for="radio-full-3">Cash</label>
+ </fieldset>
+ </td>
+ <td>
+ <fieldset data-role="controlgroup" data-mini="true">
+ <input type="radio" name="radio-choice-1" id="radio-mini-1" value="choice-1" checked="checked" />
+ <label for="radio-mini-1">Credit</label>
+ <input type="radio" name="radio-choice-1" id="radio-mini-2" value="choice-2" />
+ <label for="radio-mini-2">Debit</label>
+ <input type="radio" name="radio-choice-1" id="radio-mini-3" value="choice-3" />
+ <label for="radio-mini-3">Cash</label>
+ </fieldset>
+ </td>
+ </tr>
+ <tr>
+ <th><h3><a href="radiobuttons/index.html">Radio toggle</a></h3></th>
+ <td>
+ <fieldset data-role="controlgroup" data-type="horizontal">
+ <input type="radio" name="radio-choice-1" id="radio-full-4" value="choice-1" checked="checked" />
+ <label for="radio-full-4">Design</label>
+ <input type="radio" name="radio-choice-1" id="radio-full-5" value="choice-2" />
+ <label for="radio-full-5">Code</label>
+ </fieldset>
+ </td>
+ <td>
+ <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
+ <input type="radio" name="radio-choice-1" id="radio-mini-4" value="choice-1" checked="checked" />
+ <label for="radio-mini-4">Design</label>
+ <input type="radio" name="radio-choice-1" id="radio-mini-5" value="choice-2" />
+ <label for="radio-mini-5">Code</label>
+ </fieldset>
+ </td>
+ </tr>
+ <tr>
+ <th><h3><a href="radiobuttons/index.html">Radio toggle</a></h3></th>
+ <td>
+ <button type="submit">Button</button>
+ </td>
+ <td>
+ <button type="submit" data-mini="true">Button</button>
+ </td>
+ </tr>
+ </table>
+
+ </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">Form elements</li>
+ <li><a href="docs-forms.html">Form basics</a></li>
+ <li><a href="forms-all.html">Form element gallery</a></li>
+ <li data-theme="a"><a href="forms-all-mini.html">Mini form element gallery</a></li>
+ <li><a href="textinputs/">Text inputs</a></li>
+ <li><a href="search/">Search inputs</a></li>
+ <li><a href="slider/">Slider</a></li>
+ <li><a href="switch/">Flip toggle switch</a></li>
+ <li><a href="radiobuttons/">Radio buttons</a></li>
+ <li><a href="checkboxes/">Checkboxes</a></li>
+ <li><a href="selects/">Select menus</a></li>
+ <li><a href="forms-themes.html">Theming forms</a></li>
+ <li><a href="forms-all-native.html">Native form elements</a></li>
+ <li><a href="forms-sample.html">Submitting forms</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>
242 docs/forms/forms-all-mini.html
View
@@ -0,0 +1,242 @@
+<!DOCTYPE html>
+<html class="ui-mobile-rendering">
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Gallery of Form Controls</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script data-main="../../js/jquery.mobile.docs" src="../../external/requirejs/require.js"></script>
+ <script src="../../js/jquery.js"></script>
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Mini forms</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>Mini form elements</h2>
+
+ <p>All form controls accept a <code>data-mini="true"</code> attribute that renders a smaller version of the <a href="forms-all.html">standard-sized</a> form elements. In the case of grouped buttons, the <code>data-mini="true"</code> attribute can be added to the containing controlgroup. <a href="forms-all-compare.html">Compare mini and normal</a> form elements side-by-side.</p>
+
+ <div data-role="fieldcontain">
+ <label for="name">Text Input:</label>
+ <input type="text" name="name" id="name" value="" data-mini="true" />
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="textarea">Textarea:</label>
+ <textarea cols="40" rows="8" name="textarea" id="textarea" data-mini="true"></textarea>
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="search">Search Input:</label>
+ <input type="search" name="password" id="search" value="" data-mini="true" />
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="slider2">Flip switch:</label>
+ <select name="slider2" id="slider2" data-role="slider" data-mini="true">
+ <option value="off">Off</option>
+ <option value="on">On</option>
+ </select>
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="slider">Slider:</label>
+ <input type="range" name="slider" id="slider" value="0" min="0" max="100" data-mini="true" />
+ </div>
+
+ <div data-role="fieldcontain">
+ <fieldset data-role="controlgroup" data-mini="true">
+ <legend>Choose as many snacks as you'd like:</legend>
+ <input type="checkbox" name="checkbox-1a" id="checkbox-1a" class="custom" />
+ <label for="checkbox-1a">Cheetos</label>
+
+ <input type="checkbox" name="checkbox-2a" id="checkbox-2a" class="custom" />
+ <label for="checkbox-2a">Doritos</label>
+
+ <input type="checkbox" name="checkbox-3a" id="checkbox-3a" class="custom" />
+ <label for="checkbox-3a">Fritos</label>
+
+ <input type="checkbox" name="checkbox-4a" id="checkbox-4a" class="custom" />
+ <label for="checkbox-4a">Sun Chips</label>
+ </fieldset>
+ </div>
+
+ <div data-role="fieldcontain">
+ <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
+ <legend>Font styling:</legend>
+ <input type="checkbox" name="checkbox-6" id="checkbox-6" class="custom" />
+ <label for="checkbox-6">b</label>
+
+ <input type="checkbox" name="checkbox-7" id="checkbox-7" class="custom" />
+ <label for="checkbox-7"><em>i</em></label>
+
+ <input type="checkbox" name="checkbox-8" id="checkbox-8" class="custom" />
+ <label for="checkbox-8">u</label>
+ </fieldset>
+ </div>
+
+ <div data-role="fieldcontain">
+ <fieldset data-role="controlgroup" data-mini="true">
+ <legend>Choose a pet:</legend>
+ <input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
+ <label for="radio-choice-1">Cat</label>
+
+ <input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" />
+ <label for="radio-choice-2">Dog</label>
+
+ <input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3" />
+ <label for="radio-choice-3">Hamster</label>
+
+ <input type="radio" name="radio-choice-1" id="radio-choice-4" value="choice-4" />
+ <label for="radio-choice-4">Lizard</label>
+ </fieldset>
+ </div>
+
+ <div data-role="fieldcontain">
+ <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
+ <legend>Layout view:</legend>
+ <input type="radio" name="radio-choice-b" id="radio-choice-c" value="on" checked="checked" />
+ <label for="radio-choice-c">List</label>
+ <input type="radio" name="radio-choice-b" id="radio-choice-d" value="off" />
+ <label for="radio-choice-d">Grid</label>
+ <input type="radio" name="radio-choice-b" id="radio-choice-e" value="other" />
+ <label for="radio-choice-e">Gallery</label>
+ </fieldset>
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="select-choice-1" class="select">Choose shipping method:</label>
+ <select name="select-choice-1" id="select-choice-1" data-mini="true">
+ <option value="standard">Standard: 7 day</option>
+ <option value="rush">Rush: 3 days</option>
+ <option value="express">Express: next day</option>
+ <option value="overnight">Overnight</option>
+ </select>
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="select-choice-3" class="select">Your state:</label>
+ <select name="select-choice-3" id="select-choice-3" data-mini="true">
+ <option value="AL">Alabama</option>
+ <option value="AK">Alaska</option>
+ <option value="AZ">Arizona</option>
+ <option value="AR">Arkansas</option>
+ <option value="CA">California</option>
+ <option value="CO">Colorado</option>
+ <option value="CT">Connecticut</option>
+ <option value="DE">Delaware</option>
+ <option value="FL">Florida</option>
+ <option value="GA">Georgia</option>
+ <option value="HI">Hawaii</option>
+ <option value="ID">Idaho</option>
+ <option value="IL">Illinois</option>
+ <option value="IN">Indiana</option>
+ <option value="IA">Iowa</option>
+ <option value="KS">Kansas</option>
+ <option value="KY">Kentucky</option>
+ <option value="LA">Louisiana</option>
+ <option value="ME">Maine</option>
+ <option value="MD">Maryland</option>
+ <option value="MA">Massachusetts</option>
+ <option value="MI">Michigan</option>
+ <option value="MN">Minnesota</option>
+ <option value="MS">Mississippi</option>
+ <option value="MO">Missouri</option>
+ <option value="MT">Montana</option>
+ <option value="NE">Nebraska</option>
+ <option value="NV">Nevada</option>
+ <option value="NH">New Hampshire</option>
+ <option value="NJ">New Jersey</option>
+ <option value="NM">New Mexico</option>
+ <option value="NY">New York</option>
+ <option value="NC">North Carolina</option>
+ <option value="ND">North Dakota</option>
+ <option value="OH">Ohio</option>
+ <option value="OK">Oklahoma</option>
+ <option value="OR">Oregon</option>
+ <option value="PA">Pennsylvania</option>
+ <option value="RI">Rhode Island</option>
+ <option value="SC">South Carolina</option>
+ <option value="SD">South Dakota</option>
+ <option value="TN">Tennessee</option>
+ <option value="TX">Texas</option>
+ <option value="UT">Utah</option>
+ <option value="VT">Vermont</option>
+ <option value="VA">Virginia</option>
+ <option value="WA">Washington</option>
+ <option value="WV">West Virginia</option>
+ <option value="WI">Wisconsin</option>
+ <option value="WY">Wyoming</option>
+ </select>
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="select-choice-a" class="select">Choose shipping method:</label>
+ <select name="select-choice-a" id="select-choice-a" data-native-menu="false" data-mini="true">
+ <option>Custom menu example</option>
+ <option value="standard">Standard: 7 day</option>
+ <option value="rush">Rush: 3 days</option>
+ <option value="express">Express: next day</option>
+ <option value="overnight">Overnight</option>
+ </select>
+ </div>
+
+ <div class="ui-body ui-body-b">
+ <fieldset class="ui-grid-a">
+ <div class="ui-block-a"><button type="submit" data-theme="d" data-mini="true">Cancel</button></div>
+ <div class="ui-block-b"><button type="submit" data-theme="a" data-mini="true">Submit</button></div>
+ </fieldset>
+ </div>
+ </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">Form elements</li>
+ <li><a href="docs-forms.html">Form basics</a></li>
+ <li><a href="forms-all.html">Form element gallery</a></li>
+ <li data-theme="a"><a href="forms-all-mini.html">Mini form element gallery</a></li>
+ <li><a href="textinputs/">Text inputs</a></li>
+ <li><a href="search/">Search inputs</a></li>
+ <li><a href="slider/">Slider</a></li>
+ <li><a href="switch/">Flip toggle switch</a></li>
+ <li><a href="radiobuttons/">Radio buttons</a></li>
+ <li><a href="checkboxes/">Checkboxes</a></li>
+ <li><a href="selects/">Select menus</a></li>
+ <li><a href="forms-themes.html">Theming forms</a></li>
+ <li><a href="forms-all-native.html">Native form elements</a></li>
+ <li><a href="forms-sample.html">Submitting forms</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>
1  docs/forms/forms-all-native.html
View
@@ -217,6 +217,7 @@
<li data-role="list-divider">Form elements</li>
<li><a href="docs-forms.html">Form basics</a></li>
<li><a href="forms-all.html">Form element gallery</a></li>
+ <li><a href="forms-all-mini.html">Mini form element gallery</a></li>
<li><a href="textinputs/">Text inputs</a></li>
<li><a href="search/">Search inputs</a></li>
<li><a href="slider/">Slider</a></li>
7 docs/forms/forms-all.html
View
@@ -26,9 +26,9 @@
<h2>Form elements</h2>
- <p>This page contains various progressive-enhancement driven form controls. Native elements are sometimes hidden from view, but their values are maintained so the form can be submitted normally. </p>
-
- <p>Browsers that don't support the custom controls will still deliver a usable experience, because all are based on native form elements.</p>
+ <p>This page contains various progressive-enhancement driven form controls. Native elements are sometimes hidden from view, but their values are maintained so the form can be submitted normally.Browsers that don't support the custom controls will still deliver a usable experience, because all are based on native form elements.</p>
+
+ <p>There is a complete set of <a href="forms-all-mini.html">mini-sized</a> form elements which are useful for toolbars or tighter spaces. <a href="forms-all-compare.html">Compare mini and normal</a> form elements side-by-side.</p>
<div data-role="fieldcontain">
<label for="name">Text Input:</label>
@@ -215,6 +215,7 @@
<li data-role="list-divider">Form elements</li>
<li><a href="docs-forms.html">Form basics</a></li>
<li data-theme="a"><a href="forms-all.html">Form element gallery</a></li>
+ <li><a href="forms-all-mini.html">Mini form element gallery</a></li>
<li><a href="textinputs/">Text inputs</a></li>
<li><a href="search/">Search inputs</a></li>
<li><a href="slider/">Slider</a></li>
1  docs/forms/forms-sample-selfsubmit.php
View
@@ -50,6 +50,7 @@
<li data-role="list-divider">Form elements</li>
<li><a href="docs-forms.html">Form basics</a></li>
<li><a href="forms-all.html">Form element gallery</a></li>
+ <li><a href="forms-all-mini.html">Mini form element gallery</a></li>
<li><a href="textinputs/">Text inputs</a></li>
<li><a href="search/">Search inputs</a></li>
<li><a href="slider/">Slider</a></li>
3  docs/forms/forms-sample.html
View
@@ -82,7 +82,8 @@
<li data-role="list-divider">Form elements</li>
<li><a href="docs-forms.html">Form basics</a></li>
<li><a href="forms-all.html">Form element gallery</a></li>
- <li><a href="textinputs/">Text inputs</a></li>
+ <li><a href="forms-all-mini.html">Mini form element gallery</a></li>
+ <li><a href="textinputs/">Text inputs</a></li>
<li><a href="search/">Search inputs</a></li>
<li><a href="slider/">Slider</a></li>
<li><a href="switch/">Flip toggle switch</a></li>
3  docs/forms/forms-themes.html
View
@@ -376,7 +376,8 @@
<li data-role="list-divider">Form elements</li>
<li><a href="docs-forms.html">Form basics</a></li>
<li><a href="forms-all.html">Form element gallery</a></li>
- <li><a href="textinputs/">Text inputs</a></li>
+ <li><a href="forms-all-mini.html">Mini form element gallery</a></li>
+ <li><a href="textinputs/">Text inputs</a></li>
<li><a href="search/">Search inputs</a></li>
<li><a href="slider/">Slider</a></li>
<li><a href="switch/">Flip toggle switch</a></li>
1  docs/forms/index.html
View
@@ -26,6 +26,7 @@
<ul data-role="listview" data-inset="true">
<li><a href="docs-forms.html">Form basics</a></li>
<li><a href="forms-all.html">Form element gallery</a></li>
+ <li><a href="forms-all-mini.html">Mini form element gallery</a></li>
<li><a href="textinputs/">Text inputs</a></li>
<li><a href="search/">Search inputs</a></li>
<li><a href="slider/">Slider</a></li>
3  docs/forms/plugin-eventsmethods.html
View
@@ -43,7 +43,8 @@
<li data-role="list-divider">Form elements</li>
<li><a href="docs-forms.html">Form basics</a></li>
<li><a href="forms-all.html">Form element gallery</a></li>
- <li><a href="textinputs/">Text inputs</a></li>
+ <li><a href="forms-all-mini.html">Mini form element gallery</a></li>
+ <li><a href="textinputs/">Text inputs</a></li>
<li><a href="search/">Search inputs</a></li>
<li><a href="slider/">Slider</a></li>
<li><a href="switch/">Flip toggle switch</a></li>
1  docs/forms/radiobuttons/events.html
View
@@ -73,6 +73,7 @@
<li data-role="list-divider">Form elements</li>
<li><a href="../docs-forms.html">Form basics</a></li>
<li><a href="../forms-all.html">Form element gallery</a></li>
+ <li><a href="../forms-all-mini.html">Mini form element gallery</a></li>
<li><a href="../textinputs/index.html">Text inputs</a></li>
<li><a href="../search/">Search input</a></li>
<li><a href="../slider/">Slider</a></li>
32 docs/forms/radiobuttons/index.html
View
@@ -81,7 +81,39 @@
<label for="radio-pet-4a">Lizard</label>
</fieldset>
+ <h2>Mini version</h2>
+ <p>For a more compact version that is useful in toolbars and tight spaces, add the <code>data-mini="true"</code> attribute to the element to create a <a href="../forms-all-mini.html">mini version</a>. </p>
+
+<pre><code>
+&lt;fieldset data-role=&quot;controlgroup&quot; <strong>data-mini=&quot;true&quot;</strong>&gt;
+
+ &lt;input type=&quot;radio&quot; name=&quot;radio-choice-1&quot; id=&quot;radio-mini-1&quot; value=&quot;choice-1&quot; checked=&quot;checked&quot; /&gt;
+
+ &lt;label for=&quot;radio-mini-1&quot;&gt;Credit&lt;/label&gt;
+ &lt;input type=&quot;radio&quot; name=&quot;radio-choice-1&quot; id=&quot;radio-mini-2&quot; value=&quot;choice-2&quot; /&gt;
+
+ &lt;label for=&quot;radio-mini-2&quot;&gt;Debit&lt;/label&gt;
+ &lt;input type=&quot;radio&quot; name=&quot;radio-choice-1&quot; id=&quot;radio-mini-3&quot; value=&quot;choice-3&quot; /&gt;
+
+ &lt;label for=&quot;radio-mini-3&quot;&gt;Cash&lt;/label&gt;
+&lt;/fieldset&gt;
+</code></pre>
+
+ <p>This will produce a radio button that a not as tall as the standard version and has a smaller text size.</p>
+
+ <fieldset data-role="controlgroup" data-mini="true">
+ <input type="radio" name="radio-choice-1" id="radio-mini-1" value="choice-1" checked="checked" />
+ <label for="radio-mini-1">Credit</label>
+ <input type="radio" name="radio-choice-1" id="radio-mini-2" value="choice-2" />
+ <label for="radio-mini-2">Debit</label>
+ <input type="radio" name="radio-choice-1" id="radio-mini-3" value="choice-3" />
+ <label for="radio-mini-3">Cash</label>
+ </fieldset>
+
+ <h2>Field containers</h2>
+
+ <p>Optionally wrap the radiobuttons in a container with the <code>data-role="fieldcontain"</code> attribute to help visually group it in a longer form.</p>
<pre><code>
<strong>&lt;div data-role=&quot;fieldcontain&quot;&gt;
</strong> &lt;fieldset data-role=&quot;controlgroup&quot;&gt;
1  docs/forms/radiobuttons/methods.html
View
@@ -75,6 +75,7 @@
<li data-role="list-divider">Form elements</li>
<li><a href="../docs-forms.html">Form basics</a></li>
<li><a href="../forms-all.html">Form element gallery</a></li>
+ <li><a href="../forms-all-mini.html">Mini form element gallery</a></li>
<li><a href="../textinputs/index.html">Text inputs</a></li>
<li><a href="../search/">Search input</a></li>
<li><a href="../slider/">Slider</a></li>
8 docs/forms/radiobuttons/options.html
View
@@ -36,7 +36,12 @@
<p>The radio button has the following options:</p>
<dl>
-
+ <dt><code>mini</code> <em>boolean</em></dt>
+ <dd>
+ <p class="default">default: false</p>
+ <p>Sets the size of the element to a more compact, <a href="../forms-all-mini.html">mini version</a>. This option is also exposed as a data attribute: <code>data-mini=&quot;true&quot;</code></p>
+ <pre><code>$("input[type='radio']").checkboxradio(<strong>{ mini: "true" }</strong>);</code></pre>
+ </dd>
<dt><code>theme</code> <em>string</em></dt>
<dd>
<p class="default">default: null, inherited from parent</p>
@@ -60,6 +65,7 @@
<li data-role="list-divider">Form elements</li>
<li><a href="../docs-forms.html">Form basics</a></li>
<li><a href="../forms-all.html">Form element gallery</a></li>
+ <li><a href="../forms-all-mini.html">Mini form element gallery</a></li>
<li><a href="../textinputs/index.html">Text inputs</a></li>
<li><a href="../search/">Search input</a></li>
<li><a href="../slider/">Slider</a></li>
1  docs/forms/search/events.html
View
@@ -70,6 +70,7 @@
<li data-role="list-divider">Form elements</li>
<li><a href="../docs-forms.html">Form basics</a></li>
<li><a href="../forms-all.html">Form element gallery</a></li>
+ <li><a href="../forms-all-mini.html">Mini form element gallery</a></li>
<li><a href="../textinputs/index.html">Text inputs</a></li>
<li data-theme="a"><a href="index.html">Search input</a></li>
<li><a href="../slider/">Slider</a></li>
22 docs/forms/search/index.html
View
@@ -37,15 +37,29 @@