Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

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

  • Loading branch information...
commit e13757d1d613f5d489a78f33ce4bf78b7e679cdd 2 parents 5dd7f6d + c224b60
unknown authored
Showing with 415 additions and 65 deletions.
  1. +1 −1  css/structure/jquery.mobile.button.css
  2. +1 −1  css/structure/jquery.mobile.controlgroup.css
  3. +1 −1  css/structure/jquery.mobile.forms.fieldcontain.css
  4. +1 −1  css/structure/jquery.mobile.forms.select.css
  5. +1 −1  css/structure/jquery.mobile.forms.slider.css
  6. +1 −1  css/structure/jquery.mobile.forms.textinput.css
  7. +12 −0 css/structure/jquery.mobile.grid.css
  8. +1 −1  css/structure/jquery.mobile.popup.css
  9. +2 −3 css/themes/default/jquery.mobile.theme.css
  10. +1 −0  docs/content/content-collapsible-events.html
  11. +1 −0  docs/content/content-collapsible-methods.html
  12. +1 −0  docs/content/content-collapsible-options.html
  13. +1 −0  docs/content/content-collapsible-set-events.html
  14. +1 −0  docs/content/content-collapsible-set-methods.html
  15. +1 −0  docs/content/content-collapsible-set-options.html
  16. +1 −0  docs/content/content-collapsible-set.html
  17. +1 −0  docs/content/content-collapsible.html
  18. +200 −0 docs/content/content-grids-responsive.html
  19. +5 −12 docs/content/content-grids.html
  20. +1 −0  docs/content/content-html.html
  21. +1 −0  docs/content/content-themes.html
  22. +1 −0  docs/content/index.html
  23. +3 −0  docs/nav.html
  24. +1 −1  js/jquery.mobile.navigation.js
  25. +12 −8 js/widgets/controlgroup.js
  26. +42 −16 js/widgets/dialog.js
  27. +1 −1  js/widgets/fixedToolbar.js
  28. +3 −0  js/widgets/listview.filter.js
  29. +30 −0 tests/jquery.testHelper.js
  30. +14 −14 tests/unit/collapsible/collapsible_core.js
  31. +16 −0 tests/unit/controlgroup/controlgroup_core.js
  32. +7 −0 tests/unit/controlgroup/index.html
  33. +32 −0 tests/unit/dialog/dialog_events.js
  34. +13 −0 tests/unit/dialog/index.html
  35. +1 −1  tests/unit/slider/slider_events.js
  36. +1 −0  tests/unit/support/support_core.js
  37. +2 −2 tests/unit/textinput/textinput_core.js
View
2  css/structure/jquery.mobile.button.css
@@ -90,7 +90,7 @@
.ui-field-contain .ui-btn.ui-submit { margin: 0; }
label.ui-submit { font-size: 16px; line-height: 1.4; font-weight: normal; margin: 0 0 .3em; display: block; }
-@media all and (min-width: 450px){
+@media all and (min-width: 28em){
.ui-field-contain label.ui-submit { vertical-align: top; display: inline-block; width: 20%; margin: 0 2% 0 0; }
.ui-field-contain .ui-btn.ui-submit { width: 78%; display: inline-block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
.ui-hide-label .ui-btn.ui-submit { width: auto; display: block; }
View
2  css/structure/jquery.mobile.controlgroup.css
@@ -75,7 +75,7 @@
box-shadow: none;
}
-@media all and (min-width: 450px){
+@media all and (min-width: 28em){
.ui-field-contain .ui-controlgroup-label { vertical-align: top; display: inline-block; width: 20%; margin: 0 2% 0 0; }
.ui-field-contain .ui-controlgroup-controls { width: 78%; display: inline-block; }
.ui-field-contain .ui-controlgroup .ui-select { width: 100%; display: block; }
View
2  css/structure/jquery.mobile.forms.fieldcontain.css
@@ -1,6 +1,6 @@
.ui-field-contain, fieldset.ui-field-contain { padding: .8em 0; margin: 0; border-width: 0 0 1px 0; overflow: visible; }
.ui-field-contain:last-child { border-bottom-width: 0; }
.ui-field-contain { max-width: 100%; } /* This prevents horizontal scrollbar in IE7 */
-@media all and (min-width: 450px){
+@media all and (min-width: 28em){
.ui-field-contain, .ui-mobile fieldset.ui-field-contain { border-width: 0; padding: 0; margin: 1em 0; }
}
View
2  css/structure/jquery.mobile.forms.select.css
@@ -41,7 +41,7 @@ label.ui-select { font-size: 16px; line-height: 1.4; font-weight: normal; margin
.ui-selectmenu.ui-popup .ui-header { -webkit-border-top-left-radius: 0; border-top-left-radius: 0; -webkit-border-top-right-radius: 0; border-top-right-radius: 0; }
.ui-selectmenu .ui-header .ui-title { margin: 0.6em 46px 0.8em; }
-@media all and (min-width: 450px){
+@media all and (min-width: 28em){
.ui-field-contain label.ui-select { vertical-align: top; display: inline-block; width: 20%; margin: 0 2% 0 0; }
.ui-field-contain .ui-select { width: 78%; display: inline-block; }
.ui-hide-label .ui-select { width: 100%; }
View
2  css/structure/jquery.mobile.forms.slider.css
@@ -16,7 +16,7 @@ a.ui-btn.ui-slider-handle .ui-btn-inner { padding: 0; height: 100%; }
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; border-top: none; }
-@media all and (min-width: 450px){
+@media all and (min-width: 28em){
.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: 5.5em; }
View
2  css/structure/jquery.mobile.forms.textinput.css
@@ -23,7 +23,7 @@ input:-moz-placeholder { color: #aaa; }
/* Resolves issue #5131: Width of textinput depends on its type, for Android 4.1 */
input[type=number]::-webkit-outer-spin-button { margin: 0; }
-@media all and (min-width: 450px){
+@media all and (min-width: 28em){
.ui-field-contain label.ui-input-text { vertical-align: top; display: inline-block; width: 20%; margin: 0 2% 0 0 }
.ui-field-contain input.ui-input-text,
.ui-field-contain textarea.ui-input-text,
View
12 css/structure/jquery.mobile.grid.css
@@ -21,3 +21,15 @@
.ui-grid-d .ui-block-a, .ui-grid-d .ui-block-b, .ui-grid-d .ui-block-c, .ui-grid-d .ui-block-d, .ui-grid-d .ui-block-e { width: 19.925%; }
.ui-grid-d > :nth-child(n) { width: 20%; }
.ui-grid-d .ui-block-a { clear: left; }
+
+/* preset breakpoint to switch to stacked grid styles below 35em (560px) */
+@media all and (max-width: 35em) {
+ .ui-responsive .ui-block-a,
+ .ui-responsive .ui-block-b,
+ .ui-responsive .ui-block-c,
+ .ui-responsive .ui-block-d,
+ .ui-responsive .ui-block-e {
+ width: 100%;
+ float:none;
+ }
+}
View
2  css/structure/jquery.mobile.popup.css
@@ -103,7 +103,7 @@
vertical-align: middle;
}
-@media all and (min-width: 450px){
+@media all and (min-width: 28em){
.ui-popup .ui-field-contain label.ui-submit,
.ui-popup .ui-field-contain .ui-controlgroup-label,
.ui-popup .ui-field-contain label.ui-select,
View
5 css/themes/default/jquery.mobile.theme.css
@@ -981,9 +981,8 @@ a.ui-link-inherit {
/* radius clip workaround for cleaning up corner trapping */
.ui-corner-all,
.ui-btn-corner-all {
- -webkit-background-clip: padding-box;
- -moz-background-clip: padding;
- background-clip: padding-box;
+ -webkit-background-clip: padding;
+ background-clip: padding-box;
}
/* Overlay / modal
View
1  docs/content/content-collapsible-events.html
@@ -89,6 +89,7 @@
<li data-role="list-divider">Content Formatting</li>
<li><a href="content-html.html">Basic HTML styles</a></li>
<li><a href="content-grids.html">Layout grids (columns)</a></li>
+ <li><a href="content-grids-responsive.html">Responsive grids</a></li>
<li data-theme="a"><a href="content-collapsible.html">Collapsible content blocks</a></li>
<li><a href="content-collapsible-set.html">Collapsible sets (accordions)</a></li>
<li><a href="content-themes.html">Theming content</a></li>
View
1  docs/content/content-collapsible-methods.html
@@ -62,6 +62,7 @@
<li data-role="list-divider">Content Formatting</li>
<li><a href="content-html.html">Basic HTML styles</a></li>
<li><a href="content-grids.html">Layout grids (columns)</a></li>
+ <li><a href="content-grids-responsive.html">Responsive grids</a></li>
<li data-theme="a"><a href="content-collapsible.html">Collapsible content blocks</a></li>
<li><a href="content-collapsible-set.html">Collapsible sets (accordions)</a></li>
<li><a href="content-themes.html">Theming content</a></li>
View
1  docs/content/content-collapsible-options.html
@@ -192,6 +192,7 @@
<li data-role="list-divider">Content Formatting</li>
<li><a href="content-html.html">Basic HTML styles</a></li>
<li><a href="content-grids.html">Layout grids (columns)</a></li>
+ <li><a href="content-grids-responsive.html">Responsive grids</a></li>
<li data-theme="a"><a href="content-collapsible.html">Collapsible content blocks</a></li>
<li><a href="content-collapsible-set.html">Collapsible sets (accordions)</a></li>
<li><a href="content-themes.html">Theming content</a></li>
View
1  docs/content/content-collapsible-set-events.html
@@ -69,6 +69,7 @@
<li data-role="list-divider">Content Formatting</li>
<li><a href="content-html.html">Basic HTML styles</a></li>
<li><a href="content-grids.html">Layout grids (columns)</a></li>
+ <li><a href="content-grids-responsive.html">Responsive grids</a></li>
<li><a href="content-collapsible.html">Collapsible content blocks</a></li>
<li data-theme="a"><a href="content-collapsible-set.html">Collapsible sets (accordions)</a></li>
<li><a href="content-themes.html">Theming content</a></li>
View
1  docs/content/content-collapsible-set-methods.html
@@ -65,6 +65,7 @@
<li data-role="list-divider">Content Formatting</li>
<li><a href="content-html.html">Basic HTML styles</a></li>
<li><a href="content-grids.html">Layout grids (columns)</a></li>
+ <li><a href="content-grids-responsive.html">Responsive grids</a></li>
<li><a href="content-collapsible.html">Collapsible content blocks</a></li>
<li data-theme="a"><a href="content-collapsible-set.html">Collapsible sets (accordions)</a></li>
<li><a href="content-themes.html">Theming content</a></li>
View
1  docs/content/content-collapsible-set-options.html
@@ -125,6 +125,7 @@
<li data-role="list-divider">Content Formatting</li>
<li><a href="content-html.html">Basic HTML styles</a></li>
<li><a href="content-grids.html">Layout grids (columns)</a></li>
+ <li><a href="content-grids-responsive.html">Responsive grids</a></li>
<li><a href="content-collapsible.html">Collapsible content blocks</a></li>
<li data-theme="a"><a href="content-collapsible-set.html">Collapsible sets (accordions)</a></li>
<li><a href="content-themes.html">Theming content</a></li>
View
1  docs/content/content-collapsible-set.html
@@ -216,6 +216,7 @@
<li data-role="list-divider">Content Formatting</li>
<li><a href="content-html.html">Basic HTML styles</a></li>
<li><a href="content-grids.html">Layout grids (columns)</a></li>
+ <li><a href="content-grids-responsive.html">Responsive grids</a></li>
<li><a href="content-collapsible.html">Collapsible content blocks</a></li>
<li data-theme="a"><a href="content-collapsible-set.html">Collapsible sets (accordions)</a></li>
<li><a href="content-themes.html">Theming content</a></li>
View
1  docs/content/content-collapsible.html
@@ -229,6 +229,7 @@
<li data-role="list-divider">Content Formatting</li>
<li><a href="content-html.html">Basic HTML styles</a></li>
<li><a href="content-grids.html">Layout grids (columns)</a></li>
+ <li><a href="content-grids-responsive.html">Responsive grids</a></li>
<li data-theme="a"><a href="content-collapsible.html">Collapsible content blocks</a></li>
<li><a href="content-collapsible-set.html">Collapsible sets (accordions)</a></li>
<li><a href="content-themes.html">Theming content</a></li>
View
200 docs/content/content-grids-responsive.html
@@ -0,0 +1,200 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Content Grids</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>RWD grids</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+
+ <h2>Responsive grids</h2>
+ <p>When using <a href="content-grids.html">layout grids</a> for building full-level layouts, it may make sense to apply responsive web design (RWD) principles to ensure that the layout adapts to a wide range screen widths.</p>
+ <p>The simplest form of responsive behavior swaps from a stacked layout on narrow screens like a smartphone to the multi-column grid layouts at wider screens. This can be done by targeting styles to specific screen widths by using CSS media queries.</p>
+
+ <h2>Making the grids responsive</h2>
+ <p>By default, the grid classes will result in a multi column layout across all screen widths. The styles to make the grids responsive are added by applying a media query with rules to switch to the stacked style presentation below a specific screen width.</p>
+
+ <p>We normally recommend starting with mobile-first approach for media queries: starting with the styles that apply to the smallest screen sizes in the core widget styles, then progressively layering breakpoints up to larger screens by using <code>min-width</code> media queries.</p>
+ <p>However, in the case of grids we can use a <code>max-width</code> media query to only apply the stacked grid styles <em>below</em> a width breakpoint. This allows us to leverage all the default grid styles but just tweak them at narrow widths.</p>
+
+
+ <p>Without the custom styles, our grid will be a 3 column layout across all screen widths:</p>
+ <div class="ui-grid-b">
+ <div class="ui-block-a"><div class="ui-body ui-body-d">Block A</div></div>
+ <div class="ui-block-b"><div class="ui-body ui-body-d">Block B</div></div>
+ <div class="ui-block-c"><div class="ui-body ui-body-d">Block C</div></div>
+ </div><!-- /grid-b -->
+
+ <p>In our custom styles, we want this grid to stack at narrow widths, then switch to a standard 3 column layout. At very wide screen widths, we want first column to take up 50% of the width, like this:</p>
+
+ <div class="ui-grid-b my-breakpoint">
+ <div class="ui-block-a"><div class="ui-body ui-body-d">Block A</div></div>
+ <div class="ui-block-b"><div class="ui-body ui-body-d">Block B</div></div>
+ <div class="ui-block-c"><div class="ui-body ui-body-d">Block C</div></div>
+ </div><!-- /grid-b -->
+
+ <p>To make this responsive, start by adding the <code>my-breakpoint</code> class to the grid container that references the custom breakpoint in your custom stylesheet:</p>
+
+<pre><code>
+&lt;div class=&quot;ui-grid-b <strong>my-breakpoint</strong>&quot;&gt;
+ &lt;div class=&quot;ui-block-a&quot;&gt;Block A&lt;/div&gt;
+ &lt;div class=&quot;ui-block-b&quot;&gt;Block B&lt;/div&gt;
+ &lt;div class=&quot;ui-block-c&quot;&gt;Block C&lt;/div&gt;
+&lt;/div&gt;&lt;!-- /grid-b --&gt;
+</code></pre>
+
+ <h3>Adding the stack breakpoint at narrow widths</h3>
+
+ <p>This class is used to scope the styles within the custom media query so they will only apply when this class is added to the grid container. The media query wraps the conditional styles we only want applied below 50em. </p>
+ <p>In your media queries, use em units instead of pixels to ensure that the media query will take font size into account in addition to just screen width. To calculate a screen widths in ems, divide the target width in pixels by 16 which is the default font size of the body.</p>
+
+<pre><code>
+<strong>@media all and (max-width: 50em) {</strong>
+ .my-breakpoint .ui-block-a,
+ .my-breakpoint .ui-block-b,
+ .my-breakpoint .ui-block-c,
+ .my-breakpoint .ui-block-d,
+ .my-breakpoint .ui-block-e {
+ width: 100%;
+ float:none;
+ }
+<strong>}</strong>
+</code></pre>
+
+ <p>Within this media query, we set the width to 100% and negate the float property to make the grid blocks stack below 50em screen widths. These rules are applied to every <a href="content-grids.html">grid type</a> by stacking up selectors for all the grid classes from <code>ui-block-a</code> to <code>ui-block-e</code> on the styles.</p>
+
+ <style>
+ @media all and (max-width: 50em) {
+ .my-breakpoint .ui-block-a,
+ .my-breakpoint .ui-block-b,
+ .my-breakpoint .ui-block-c,
+ .my-breakpoint .ui-block-d,
+ .my-breakpoint .ui-block-e {
+ width: 100%;
+ float:none;
+ }
+ }
+
+ @media all and (min-width: 75em) {
+ .my-breakpoint.ui-grid-b .ui-block-a { width: 49.95%; }
+ .my-breakpoint.ui-grid-b .ui-block-b,
+ .my-breakpoint.ui-grid-b .ui-block-c { width: 24.925%; }
+ }
+ }
+ </style>
+
+ <p>That is all it takes to make grids responsive and it's easy to add additional styling rules to each breakpoint to change it up even more. We encourage you to create as many custom breakpoints as you need based on your unique content and layout needs.</p>
+
+ <h3>Adding a widescreen breakpoint to adjust ratios</h3>
+
+ <p>Building on the example above, we can add an additional breakpoint to shift the widths to make the first column 50% width and the other two 25% above 75em (1,200 pixels) by layering an additional <code>min-width</code> media query to tweak widths in our custom style like this:</p>
+
+ <pre><code>
+<strong>@media all and (min-width: 75em) {</strong>
+ .my-breakpoint.ui-grid-b .ui-block-a { width: 49.95%; }
+ .my-breakpoint.ui-grid-b .ui-block-b,
+ .my-breakpoint.ui-grid-b .ui-block-c { width: 24.925%; }
+ .my-breakpoint.ui-grid-b .ui-block-a { clear: left; }
+ }
+<strong>}
+</strong> </code></pre>
+ <p>Note the slightly narrower widths set to work around rounding issues across platforms. </p>
+
+
+ <h2>Applying a preset breakpoint</h2>
+ <p>Even though we strongly encourage you to write custom breakpoints yourself, the framework includes a single pre-configured breakpoint that targets the stacked style to smaller phones and swaps to the multi-column presentation on larger phones, tablet and desktop devices. </p>
+ <p>To use this preset breakpoint, add the <code>ui-responsive</code> class to the grid container to apply the stacked presentation <em>below</em> 560px (35em). If this breakpoint doesn't work for your content, we encourage you to write a custom breakpoint as described above.</p>
+
+ <pre><code>&lt;div class=&quot;ui-grid-b <strong>ui-responsive</strong>&quot;&gt;</code></pre>
+
+ <p>These are standard grids that are made responsive by <code>ui-responsive</code> class to the grid container:</p>
+
+
+ <h3>Grid A (50/50)</h3>
+
+ <div class="ui-grid-a ui-responsive">
+ <div class="ui-block-a"><div class="ui-body ui-body-d">Block A</div></div>
+ <div class="ui-block-b"><div class="ui-body ui-body-d">Block B</div></div>
+ </div><!-- /grid-a -->
+
+
+ <h3>Grid B (33/33/33)</h3>
+
+ <div class="ui-grid-b ui-responsive">
+ <div class="ui-block-a"><div class="ui-body ui-body-d">Block A</div></div>
+ <div class="ui-block-b"><div class="ui-body ui-body-d">Block B</div></div>
+ <div class="ui-block-c"><div class="ui-body ui-body-d">Block C</div></div>
+ </div><!-- /grid-b -->
+
+
+ <h3>Grid C (25/25/25/25)</h3>
+
+ <div class="ui-grid-c ui-responsive">
+ <div class="ui-block-a"><div class="ui-body ui-body-d">A</div></div>
+ <div class="ui-block-b"><div class="ui-body ui-body-d">B</div></div>
+ <div class="ui-block-c"><div class="ui-body ui-body-d">C</div></div>
+ <div class="ui-block-d"><div class="ui-body ui-body-d">D</div></div>
+ </div><!-- /grid-c -->
+
+
+ <h3>Grid D (20/20/20/20/20)</h3>
+
+ <div class="ui-grid-d ui-responsive">
+ <div class="ui-block-a"><div class="ui-body ui-body-d">A</div></div>
+ <div class="ui-block-b"><div class="ui-body ui-body-d">B</div></div>
+ <div class="ui-block-c"><div class="ui-body ui-body-d">C</div></div>
+ <div class="ui-block-d"><div class="ui-body ui-body-d">D</div></div>
+ <div class="ui-block-e"><div class="ui-body ui-body-d">E</div></div>
+ </div><!-- /grid-d -->
+
+ </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">Content Formatting</li>
+ <li><a href="content-html.html">Basic HTML styles</a></li>
+ <li><a href="content-grids.html">Layout grids (columns)</a></li>
+ <li data-theme="a"><a href="content-grids-responsive.html">Responsive grids</a></li>
+ <li><a href="content-collapsible.html">Collapsible content blocks</a></li>
+ <li><a href="content-collapsible-set.html">Collapsible sets (accordions)</a></li>
+ <li><a href="content-themes.html">Theming content</a></li>
+
+ </ul>
+ </div>
+ </div>
+
+</div><!-- /content -->
+
+<div data-role="footer" class="footer-docs" data-theme="c">
+ <p class="jqm-version"></p>
+ <p>&copy; 2012 jQuery Foundation and other contributors</p>
+</div>
+
+</div><!-- /page -->
+
+</body>
+</html>
View
17 docs/content/content-grids.html
@@ -17,7 +17,7 @@
<div data-role="page" class="type-interior">
<div data-role="header" data-theme="f">
- <h1>Layout grids</h1>
+ <h1>Grids</h1>
<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
</div><!-- /header -->
@@ -25,6 +25,7 @@
<div data-role="content">
<div class="content-primary">
+ <h2>Layout grids</h2>
<p>Using multiple column layouts isn't generally recommended on a mobile device because of the narrow screen width, but there are times where you may need to place small elements side-by-side (like buttons or navigation tabs, for example). </p>
<p>The jQuery Mobile framework provides a simple way to build CSS-based columns through a block style class convention called <code>ui-grid</code>. </p>
@@ -169,17 +170,8 @@
</div><!-- /grid-c -->
- <h2>Grids in toolbars</h2>
- <p>Grids are helpful for creating layouts within a toolbar. Here's a footer with a 4 column grid.</p>
- <!-- NOTE: Inline styles are for demo purposes only, please use external styles -->
- <div data-role="footer" data-theme="a" class="ui-bar ui-grid-c">
- <div class="ui-block-a"><h3 style="margin-top:10px;">Settings</h3></div>
- <div class="ui-block-b"><label for="value" style="margin:8px 10px 0 0; text-align:right;">Price</label></div>
- <div class="ui-block-c"><input id="value" value="5,000"></div>
- <div class="ui-block-d">
- <div style="margin:6px 0 0 10px;"><button type="submit" data-theme="b">Update</button></div>
- </div>
- </div><!-- /footer -->
+ <h2>Making responsive grids</h2>
+ <p>Grids can be made responsive so they adapt to various screen widths which is useful if used for building full page layouts. Learn more in the <a href="content-grids-responsive.html">responsive grids</a>.</p>
</div><!--/content-primary -->
@@ -195,6 +187,7 @@
<li data-role="list-divider">Content Formatting</li>
<li><a href="content-html.html">Basic HTML styles</a></li>
<li data-theme="a"><a href="content-grids.html">Layout grids (columns)</a></li>
+ <li><a href="content-grids-responsive.html">Responsive grids</a></li>
<li><a href="content-collapsible.html">Collapsible content blocks</a></li>
<li><a href="content-collapsible-set.html">Collapsible sets (accordions)</a></li>
<li><a href="content-themes.html">Theming content</a></li>
View
1  docs/content/content-html.html
@@ -124,6 +124,7 @@
<li data-role="list-divider">Content Formatting</li>
<li data-theme="a"><a href="content-html.html">Basic HTML styles</a></li>
<li><a href="content-grids.html">Layout grids (columns)</a></li>
+ <li><a href="content-grids-responsive.html">Responsive grids</a></li>
<li><a href="content-collapsible.html">Collapsible content blocks</a></li>
<li><a href="content-collapsible-set.html">Collapsible sets (accordions)</a></li>
<li><a href="content-themes.html">Theming content</a></li>
View
1  docs/content/content-themes.html
@@ -137,6 +137,7 @@
<li data-role="list-divider">Content Formatting</li>
<li><a href="content-html.html">Basic HTML styles</a></li>
<li><a href="content-grids.html">Layout grids (columns)</a></li>
+ <li><a href="content-grids-responsive.html">Responsive grids</a></li>
<li><a href="content-collapsible.html">Collapsible content blocks</a></li>
<li><a href="content-collapsible-set.html">Collapsible sets (accordions)</a></li>
<li data-theme="a"><a href="content-themes.html">Theming content</a></li>
View
1  docs/content/index.html
@@ -40,6 +40,7 @@
<li data-role="list-divider">Content Formatting</li>
<li><a href="content-html.html">Basic HTML styles</a></li>
<li><a href="content-grids.html">Layout grids (columns)</a></li>
+ <li><a href="content-grids-responsive.html">Responsive grids</a></li>
<li><a href="content-collapsible.html">Collapsible content blocks</a></li>
<li><a href="content-collapsible-set.html">Collapsible sets (accordions)</a></li>
<li><a href="content-themes.html">Theming content</a></li>
View
3  docs/nav.html
@@ -249,6 +249,9 @@
<li data-filtertext="refresh forms elements property change update programatically checked selectedindex value update widget input text slider switch select button checkbox radiobutton">
<a href="forms/docs-forms.html">Refreshing form elements</a>
</li>
+ <li data-filtertext="grids, rwd, breakpoints, layout">
+ <a href="content/content-grids-responsive.html">Responsive grids</a>
+ </li>
<li data-filtertext="scripting pages loading scripts executing scripts document.ready() api developer firing fire pagecreate pageinit changing pages loading enhancing create refresh scolling silentscroll binding to mouse touch events passing url parameters backbone router">
<a href="pages/page-scripting.html">Scripting pages</a>
</li>
View
2  js/jquery.mobile.navigation.js
@@ -1132,7 +1132,7 @@ define( [
// However, if a dialog is already displayed at this point, and we're
// about to display another dialog, then we must add another hash and
// history entry on top so that one may navigate back to the original dialog
- if ( active.url.indexOf( dialogHashKey ) > -1 && !$.mobile.activePage.is( ".ui-dialog" ) ) {
+ if ( active.url && active.url.indexOf( dialogHashKey ) > -1 && !$.mobile.activePage.is( ".ui-dialog" ) ) {
settings.changeHash = false;
alreadyThere = true;
}
View
20 js/widgets/controlgroup.js
@@ -38,14 +38,20 @@ define( [ "jquery",
}
$el.addClass( "ui-corner-all ui-controlgroup" );
+ $.extend( this, {
+ _initialRefresh: true
+ });
+
$.each( this.options, function( key, value ) {
// Cause initial options to be applied by their handler by temporarily setting the option to undefined
// - the handler then sets it to the initial value
self.options[ key ] = undefined;
self._setOption( key, value, true );
});
+ },
- this._refresh( true );
+ _init: function() {
+ this.refresh();
},
_setOption: function( key, value ) {
@@ -63,7 +69,7 @@ define( [ "jquery",
this.element
.removeClass( "ui-controlgroup-horizontal ui-controlgroup-vertical" )
.addClass( "ui-controlgroup-" + value );
- this._refresh( false );
+ this.refresh();
},
_setCorners: function( value ) {
@@ -82,16 +88,14 @@ define( [ "jquery",
return this.element.children( ".ui-controlgroup-controls" );
},
- _refresh: function( create ) {
- var els = this.element.find( ".ui-btn" ).not( ".ui-slider-handle" );
+ refresh: function() {
+ var els = this.element.find( ".ui-btn" ).not( ".ui-slider-handle" ),
+ create = this._initialRefresh;
if ( $.mobile.checkboxradio ) {
this.element.find( ":mobile-checkboxradio" ).checkboxradio( "refresh" );
}
this._addFirstLastClasses( els, this.options.excludeInvisible ? this._getVisibles( els, create ) : els, create );
- },
-
- refresh: function() {
- this._refresh( false );
+ this._initialRefresh = false;
}
});
View
58 js/widgets/dialog.js
@@ -11,6 +11,7 @@ define( [ "jquery", "../jquery.mobile.widget" ], function( $ ) {
$.widget( "mobile.dialog", $.mobile.widget, {
options: {
+ closeBtn: "left",
closeBtnText: "Close",
overlayTheme: "a",
corners: true,
@@ -19,7 +20,6 @@ $.widget( "mobile.dialog", $.mobile.widget, {
_create: function() {
var self = this,
$el = this.element,
- headerCloseButton = $( "<a href='#' data-" + $.mobile.ns + "icon='delete' data-" + $.mobile.ns + "iconpos='notext'>"+ this.options.closeBtnText + "</a>" ),
cornerClass = !!this.options.corners ? " ui-corner-all" : "",
dialogWrap = $( "<div/>", {
"role" : "dialog",
@@ -30,21 +30,7 @@ $.widget( "mobile.dialog", $.mobile.widget, {
// Class the markup for dialog styling
// Set aria role
- $el
- .wrapInner( dialogWrap )
- .children()
- .find( ":jqmData(role='header')" )
- .prepend( headerCloseButton );
-
- // this must be an anonymous function so that select menu dialogs can replace
- // the close method. This is a change from previously just defining data-rel=back
- // on the button and letting nav handle it
- //
- // Use click rather than vclick in order to prevent the possibility of unintentionally
- // reopening the dialog if the dialog opening item was directly under the close button.
- headerCloseButton.bind( "click", function() {
- self.close();
- });
+ $el.wrapInner( dialogWrap );
/* bind events
- clicks and submits should use the closing transition that the dialog opened with
@@ -75,6 +61,46 @@ $.widget( "mobile.dialog", $.mobile.widget, {
.page( "setContainerBackground", self.options.overlayTheme );
}
});
+
+ this._setCloseBtn( this.options.closeBtn );
+ },
+
+ _setCloseBtn: function( value ) {
+ var self = this, btn, location;
+
+ if ( this._headerCloseButton ) {
+ this._headerCloseButton.remove();
+ this._headerCloseButton = null;
+ }
+ if ( value !== "none" ) {
+ // Sanitize value
+ location = ( value === "left" ? "left" : "right" );
+ btn = $( "<a href='#' class='ui-btn-" + location + "' data-" + $.mobile.ns + "icon='delete' data-" + $.mobile.ns + "iconpos='notext'>"+ this.options.closeBtnText + "</a>" );
+ if ( $.fn.buttonMarkup ) {
+ btn.buttonMarkup();
+ }
+ this.element.children().find( ":jqmData(role='header')" ).prepend( btn );
+
+ // this must be an anonymous function so that select menu dialogs can replace
+ // the close method. This is a change from previously just defining data-rel=back
+ // on the button and letting nav handle it
+ //
+ // Use click rather than vclick in order to prevent the possibility of unintentionally
+ // reopening the dialog if the dialog opening item was directly under the close button.
+ btn.bind( "click", function() {
+ self.close();
+ });
+
+ this._headerCloseButton = btn;
+ }
+ },
+
+ _setOption: function( key, value ) {
+ if ( key === "closeBtn" ) {
+ this._setCloseBtn( value );
+ this._super( key, value );
+ this.element.attr( "data-" + ( $.mobile.ns || "" ) + "close-btn", value );
+ }
},
// Close method goes back in history
View
2  js/widgets/fixedToolbar.js
@@ -275,7 +275,7 @@ define( [ "jquery", "../jquery.mobile.widget", "../jquery.mobile.core", "../jque
});
},
- destroy: function() {
+ _destroy: function() {
var $el = this.element,
header = $el.is( ".ui-header" );
View
3  js/widgets/listview.filter.js
@@ -35,6 +35,9 @@ $( document ).delegate( "ul, ol", "listviewcreate", function() {
var wrapper = $( "<form>", {
"class": "ui-listview-filter ui-bar-" + listview.options.filterTheme,
"role": "search"
+ }).submit( function( e ) {
+ e.preventDefault();
+ search.blur();
}),
search = $( "<input>", {
placeholder: listview.options.filterPlaceholder
View
30 tests/jquery.testHelper.js
@@ -372,6 +372,36 @@
}
},
+ // Convert a pair of version strings into a pair of integers and pass the
+ // resulting integers to a comparison function
+ versionTest: function( l, t, r ) {
+ var lAr = l.split( "." ), lLength = lAr.length,
+ rAr = r.split( "." ), rLength = rAr.length,
+ lVal, rVal, lRes = "", rRes = "", min, max, str, idx1, diff;
+ for ( idx = 0 ; idx < lLength || idx < rLength ; idx++ ) {
+ str = {};
+ lVal = ( idx < lLength ? parseInt( lAr[ idx ] ) : 0 );
+ rVal = ( idx < rLength ? parseInt( rAr[ idx ] ) : 0 );
+
+ // This ignores things like 10a vs. 10b for now
+ str.l = String( lVal );
+ str.r = String( rVal );
+ min = ( str.l.length < str.r.length ) ? "l" : "r";
+ max = ( str.l.length < str.r.length ) ? "r" : "l";
+ diff = str[ max ].length - str[ min ].length;
+
+ // Make sure orders of magnitude align
+ for ( idx1 = 0; idx1 < diff ; idx1++ ) {
+ str[ min ] = "0" + str[ min ];
+ }
+ lRes = lRes + str.l;
+ rRes = rRes + str.r;
+ }
+
+ // trim initial 0s and return the result of the comparison
+ return t( parseInt( lRes.replace( /^0*/, "" ) ), parseInt( rRes.replace( /^0*/, "" ) ) );
+ },
+
navReset: function( url ) {
var pageReset = function( hash ) {
var timeout;
View
28 tests/unit/collapsible/collapsible_core.js
@@ -10,7 +10,7 @@
expect( 5 );
$.testHelper.pageSequence([
function(){
- $.testHelper.openPage( "#basic-collapsible-test" );
+ $.mobile.changePage( $( "#basic-collapsible-test" ) );
},
function() {
@@ -29,7 +29,7 @@
expect( 3 );
$.testHelper.pageSequence([
function(){
- $.testHelper.openPage( "#basic-collapsible-test" );
+ $.mobile.changePage( $( "#basic-collapsible-test" ) );
},
function() {
@@ -49,7 +49,7 @@
var nTests = 2;
$.testHelper.pageSequence([
function(){
- $.testHelper.openPage( "#basic-collapsible-set-test" );
+ $.mobile.changePage( $( "#basic-collapsible-set-test" ) );
},
function() {
@@ -74,7 +74,7 @@
var nTests = 0;
$.testHelper.pageSequence([
function(){
- $.testHelper.openPage( "#collapsible-set-with-lonely-collapsible-test" );
+ $.mobile.changePage( $( "#collapsible-set-with-lonely-collapsible-test" ) );
},
function() {
@@ -96,7 +96,7 @@
expect( 2 );
$.testHelper.pageSequence([
function(){
- $.testHelper.openPage( "#basic-collapsible-set-test" );
+ $.mobile.changePage( $( "#basic-collapsible-set-test" ) );
},
function() {
@@ -111,7 +111,7 @@
expect( 3 );
$.testHelper.pageSequence([
function(){
- $.testHelper.openPage( "#basic-collapsible-set-test" );
+ $.mobile.changePage( $( "#basic-collapsible-set-test" ) );
},
function() {
@@ -129,7 +129,7 @@
expect( 7 );
$.testHelper.pageSequence([
function(){
- $.testHelper.openPage( "#collapsible-set-with-dynamic-content" );
+ $.mobile.changePage( $( "#collapsible-set-with-dynamic-content" ) );
},
function() {
@@ -154,7 +154,7 @@
expect( 7 );
$.testHelper.pageSequence([
function(){
- $.testHelper.openPage( "#collapsible-set-with-static-and-dynamic-content" );
+ $.mobile.changePage( $( "#collapsible-set-with-static-and-dynamic-content" ) );
},
function() {
@@ -179,7 +179,7 @@
expect( 1 );
$.testHelper.pageSequence([
function(){
- $.testHelper.openPage( "#collapsible-set-with-last-collapsible-expanded" );
+ $.mobile.changePage( $( "#collapsible-set-with-last-collapsible-expanded" ) );
},
function() {
@@ -194,7 +194,7 @@
expect( 3 );
$.testHelper.pageSequence([
function(){
- $.testHelper.openPage( "#collapsible-set-with-legends" );
+ $.mobile.changePage( $( "#collapsible-set-with-legends" ) );
},
function() {
@@ -213,7 +213,7 @@
expect( 6 );
$.testHelper.pageSequence([
function(){
- $.testHelper.openPage( "#collapsible-with-custom-icons" );
+ $.mobile.changePage( $( "#collapsible-with-custom-icons" ) );
},
function() {
@@ -237,7 +237,7 @@
expect( 6 );
$.testHelper.pageSequence([
function(){
- $.testHelper.openPage( "#collapsible-set-with-custom-icons" );
+ $.mobile.changePage( $( "#collapsible-set-with-custom-icons" ) );
},
function() {
@@ -259,7 +259,7 @@
expect( 6 );
$.testHelper.pageSequence([
function(){
- $.testHelper.openPage( "#collapsible-with-theming" );
+ $.mobile.changePage( $( "#collapsible-with-theming" ) );
},
function() {
@@ -280,7 +280,7 @@
expect( 13 );
$.testHelper.pageSequence([
function(){
- $.testHelper.openPage( "#collapsible-set-with-theming" );
+ $.mobile.changePage( $( "#collapsible-set-with-theming" ) );
},
function() {
View
16 tests/unit/controlgroup/controlgroup_core.js
@@ -142,4 +142,20 @@
$.mobile.ignoreContentEnabled = false;
});
+
+ test( "calling .controlgroup() again is the same as calling .controlgroup( 'refresh' )", function() {
+ var btn1 = $( "<a href='#' data-" + ( $.mobile.ns || "" ) + "role='button'>Option 3</a>" ).buttonMarkup(),
+ btn2 = $( "<a href='#' data-" + ( $.mobile.ns || "" ) + "role='button'>Option 4</a>" ).buttonMarkup(),
+ grp = $( "#test-reinstantiate" )
+
+ grp
+ .controlgroup( "container" )
+ .prepend( btn1 )
+ .append( btn2 )
+ grp
+ .controlgroup();
+
+ ok( btn1.hasClass( "ui-first-child" ), "The prepended button has class ui-first-child" );
+ ok( btn2.hasClass( "ui-last-child" ), "The appended button has class ui-last-child" );
+ });
})(jQuery);
View
7 tests/unit/controlgroup/index.html
@@ -73,6 +73,13 @@ <h2 id="qunit-userAgent"></h2>
</fieldset>
</div>
+ <div data-nstest-role="fieldcontain">
+ <fieldset data-nstest-role="controlgroup" id="test-reinstantiate">
+ <legend>Options</legend>
+ <a href="#" data-nstest-role="button">Option 1</a>
+ <a href="#" data-nstest-role="button">Option 2</a>
+ </fieldset>
+ </div>
</div>
</div>
View
32 tests/unit/dialog/dialog_events.js
@@ -38,6 +38,38 @@
]);
});
+ asyncTest( "Test option data-close-btn", function() {
+ expect( 5 );
+
+ $.testHelper.pageSequence([
+ function() {
+ // bring up the dialog
+ $( "#close-btn-test-link" ).click();
+ },
+
+ function() {
+ var a = $( "#close-btn-test .ui-header a" );
+ deepEqual( a.length, 0, "Initially, the dialog header has no anchor elements (option value 'none')" );
+
+ $( "#close-btn-test" ).dialog( "option", "closeBtn", "left" );
+ a = $( "#close-btn-test .ui-header a" );
+ deepEqual( a.length, 1, "The dialog header has eactly one anchor element when the option value is set to 'left'" );
+ ok( a.hasClass( "ui-btn-left" ), "The close button has class ui-btn-left when the closeBtn option is set to 'left'" );
+
+ $( "#close-btn-test" ).dialog( "option", "closeBtn", "right" );
+ a = $( "#close-btn-test .ui-header a" );
+ deepEqual( a.length, 1, "The dialog header has eactly one anchor element when the option value is set to 'right'" );
+ ok( a.hasClass( "ui-btn-right" ), "The close button has class ui-btn-right when the closeBtn option is set to 'right'" );
+
+ $( "#close-btn-test" ).dialog( "close" );
+ },
+
+ function() {
+ start();
+ }
+ ]);
+ });
+
asyncTest( "clicking dialog 'Close' button twice in quick succession does not cause the browser history to retreat by two", function() {
var correctLocation;
View
13 tests/unit/dialog/index.html
@@ -45,6 +45,7 @@ <h2 id="qunit-userAgent"></h2>
<div id="mypage" data-nstest-role="page" data-nstest-theme="a">
<a href="#foo-dialog" id="foo-dialog-link" data-nstest-role="button" data-nstest-inline="true" data-nstest-rel="dialog"></a>
+ <a href="#close-btn-test" id="close-btn-test-link" data-nstest-role="button" data-nstest-inline="true" data-nstest-rel="dialog">Go</a>
<a href="#dialog-a" id="link-a" data-nstest-role="button" data-nstest-inline="true" data-nstest-rel="dialog">no theme set</a>
<a href="#dialog-b" id="link-b" data-nstest-role="button" data-nstest-inline="true" data-nstest-rel="dialog">data-theme set</a>
<a href="#dialog-c" id="link-c" data-nstest-role="button" data-nstest-inline="true" data-nstest-rel="dialog">data-theme & data-nstest-overlay-theme set</a>
@@ -68,6 +69,18 @@ <h2 id="qunit-userAgent"></h2>
</div>
</div>
+<div id="close-btn-test" data-nstest-role="dialog" data-nstest-theme="b" data-nstest-close-btn="none">
+ <div data-nstest-role="header" data-nstest-position="inline">
+ <h1>Dialog</h1>
+ </div>
+ <div data-nstest-role="content" >
+ <a href="#" id="internal-link">foo</a>
+ </div>
+ <div data-nstest-role="footer">
+ footer
+ </div>
+</div>
+
<div data-nstest-role="page" id="dialog-a">
<div data-nstest-role="header" data-nstest-position="inline">
<h1> No theme set </h1>
View
2  tests/unit/slider/slider_events.js
@@ -401,7 +401,7 @@
// and with the advent of the widget _on method we are actually testing the
// widget from UI which has it's own test suite for these sorts of things
// ie, don't test your dependencies / framework
- if( !( $.fn.jquery.match(/^1.8/) )){
+ if( $.testHelper.versionTest( $.fn.jquery, function( l, r ) { return ( l < r ); }, "1.8" ) ){
test( "slider should detach event", function() {
var slider = $( "#remove-events-slider" ),
doc = $( document ),
View
1  tests/unit/support/support_core.js
@@ -98,6 +98,7 @@ $.testHelper.excludeFileProtocol(function(){
if ( !$.browser ) {
ok( true, "Cannot perform test because $.browser has been removed" );
start();
+ return;
}
$.testHelper.reloadModule( moduleName ).done( function() {
//here we're just comparing our version to what the conditional compilation finds
View
4 tests/unit/textinput/textinput_core.js
@@ -8,7 +8,7 @@
// and with the advent of the widget _on method we are actually testing the
// widget from UI which has it's own test suite for these sorts of things
// ie, don't test your dependencies / framework
- if( !( $.fn.jquery.match(/^1.8/) )){
+ if( $.testHelper.versionTest( $.fn.jquery, function( l, r ) { return ( l < r ); }, "1.8" ) ){
test( "input is cleaned up on destroy", function(){
var input = $( "#destroycorrectly" ),
win = $( window ),
@@ -81,4 +81,4 @@
test( "'clear text' button for search inputs should use configured text", function(){
strictEqual( $( "#search-input" ).closest( ".ui-input-search" ).find( ".ui-input-clear" ).attr( "title" ), "custom value" );
});
-})(jQuery);
+})(jQuery);
Please sign in to comment.
Something went wrong with that request. Please try again.