Skip to content

Commit 0b3b56e

Browse files
committed
Merge branch 'master' of git://github.com/jquery/jquery-mobile
2 parents eea1731 + 4ca4152 commit 0b3b56e

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

50 files changed

+487
-303
lines changed

README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ When [submitting issues on github](https://github.com/jquery/jquery-mobile/issue
1717
5. Actual outcome
1818
6. Browsers/platforms tested
1919

20-
Also, in the interest of creating more readable issues please include code snippets inside a triple backtick box appropriate for the JavaScript/HTML/CSS snippet you wish to discuss. More information is available at the [introduction page](http://github.github.com/github-flavored-markdown/) for github flavored markdown (see, Syntax Highlighting).
20+
Also, in the interest of creating more readable issues please include code snippets inside a triple backtick box appropriate for the JavaScript/HTML/CSS snippet you wish to discuss. More information is available at the [introduction page](http://github.github.com/github-flavored-markdown/) for github flavored markdown (see Syntax Highlighting).
2121

2222
## Pull Requests
2323

css/structure/jquery.mobile.button.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121

2222
.ui-btn-icon-notext { width: 24px; height: 24px; }
2323
.ui-btn-icon-notext .ui-btn-inner { padding: 0; height: 100%; }
24-
.ui-btn-icon-notext .ui-btn-inner .ui-icon { margin: 2px 1px 2px 3px; }
24+
.ui-btn-icon-notext .ui-btn-inner .ui-icon { margin: 2px 1px 2px 3px; float: left; }
2525

2626
.ui-btn-text { position: relative; z-index: 1; width: 100%; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; }
2727
.ui-btn-icon-notext .ui-btn-text { position: absolute; left: -9999px; }
@@ -75,7 +75,7 @@
7575
.ui-mini .ui-btn-icon-bottom .ui-icon { bottom: 5px; }
7676

7777
/*hiding native button,inputs */
78-
.ui-btn-hidden { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-appearance: none; opacity: .1; cursor: pointer; background: #fff; background: rgba(255,255,255,0); filter: Alpha(Opacity=.0001); font-size: 1px; border: none; text-indent: -9999px; }
78+
.ui-btn-hidden { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-appearance: none; opacity: .1; cursor: pointer; background: #fff; background: rgba(255,255,255,0); filter: Alpha(Opacity=0); font-size: 1px; border: none; text-indent: -9999px; }
7979

8080
.ui-field-contain .ui-btn.ui-submit { margin: 0; }
8181
label.ui-submit { font-size: 16px; line-height: 1.4; font-weight: normal; margin: 0 0 .3em; display: block; }

css/structure/jquery.mobile.forms.slider.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ div.ui-slider-bg { border: none; height: 100%; padding-right: 8px; }
1313
.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; }
1414
a.ui-slider-handle .ui-btn-inner { padding: 0; height: 100%; }
1515
div.ui-slider-mini a.ui-slider-handle { height: 14px; width: 14px; margin: -8px 0 0 -7px; }
16-
div.ui-slider-mini a.ui-slider-handle .ui-btn-inner { height: 30px; width: 30px; padding: 0; margin: -9px 0 0 -9px; }
16+
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; }
1717

1818
@media all and (min-width: 450px){
1919
.ui-field-contain label.ui-slider { vertical-align: top; display: inline-block; width: 20%; margin: 0 2% 0 0; }

css/structure/jquery.mobile.popup.css

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,11 @@
1818
z-index: 1099;
1919
}
2020

21+
.ui-popup-screen-background-hack {
22+
background-color: black;
23+
filter: Alpha(Opacity=0);
24+
}
25+
2126
@-webkit-keyframes popup-fadein {
2227
from { opacity: 0; }
2328
to { opacity: 0.5; }

css/themes/default/jquery.mobile.theme.css

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1159,15 +1159,19 @@ a.ui-link-inherit {
11591159
/* Focus state - set here for specificity (note: these classes are added by JavaScript)
11601160
-----------------------------------------------------------------------------------------------------------*/
11611161

1162-
.ui-btn:focus {
1162+
.ui-btn:focus, .ui-link-inherit:focus {
11631163
outline: 0;
11641164
}
11651165

1166+
.ui-btn.ui-focus {
1167+
z-index: 1;
1168+
}
1169+
11661170
.ui-focus,
11671171
.ui-btn:focus {
1168-
-moz-box-shadow: 0px 0px 12px #387bbe /*{global-active-background-color}*/;
1169-
-webkit-box-shadow: 0px 0px 12px #387bbe /*{global-active-background-color}*/;
1170-
box-shadow: 0px 0px 12px #387bbe /*{global-active-background-color}*/;
1172+
-moz-box-shadow: inset 0px 0px 3px #387bbe /*{global-active-background-color}*/, 0px 0px 9px #387bbe /*{global-active-background-color}*/;
1173+
-webkit-box-shadow: inset 0px 0px 3px #387bbe /*{global-active-background-color}*/, 0px 0px 9px #387bbe /*{global-active-background-color}*/;
1174+
box-shadow: inset 0px 0px 3px #387bbe /*{global-active-background-color}*/, 0px 0px 9px #387bbe /*{global-active-background-color}*/;
11711175
}
11721176

11731177
/* unset box shadow in browsers that don't do it right
@@ -1181,7 +1185,8 @@ a.ui-link-inherit {
11811185

11821186
/* ...and bring back focus */
11831187
.ui-mobile-nosupport-boxshadow .ui-focus,
1184-
.ui-mobile-nosupport-boxshadow .ui-btn:focus {
1188+
.ui-mobile-nosupport-boxshadow .ui-btn:focus,
1189+
.ui-mobile-nosupport-boxshadow .ui-link-inherit:focus {
11851190
outline-width: 1px;
1186-
outline-style: dotted;
1191+
outline-style: auto;
11871192
}

docs/buttons/buttons-events.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ <h2>Button basics</h2>
5151
<dd>
5252

5353
<pre><code>
54-
$('[type='submit']').button({
54+
$('[type="submit"]').button({
5555
create: function(event, ui) { ... }
5656
});
5757
</code></pre>

docs/buttons/buttons-types.html

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -50,8 +50,14 @@ <h2>Styling links as buttons</h2>
5050
<a href="index.html" data-role="button">Link button</a>
5151

5252
<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>
53-
54-
<h2>Mini size</h2>
53+
<code>
54+
&lt;a href=&quot;index.html&quot; data-role=&quot;button&quot; class=&quot;ui-disabled&quot;&gt;Link button&lt;/a&gt;
55+
</code>
56+
57+
<p>Produces this disabled <strong>link-based</strong> button:</p>
58+
<a href="index.html" data-role="button" class="ui-disabled">Link button</a>
59+
60+
<h2>Mini size</h2>
5561

5662
<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>
5763

docs/forms/radiobuttons/index.html

Lines changed: 25 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -50,16 +50,16 @@ <h2>Vertically grouped radio buttons</h2>
5050
<pre><code>
5151
<strong>&lt;fieldset data-role=&quot;controlgroup&quot;&gt;
5252
&lt;legend&gt;Choose a pet:&lt;/legend&gt;</strong>
53-
&lt;input type=&quot;radio&quot; name=&quot;radio-choice-1&quot; id=&quot;radio-choice-1&quot; value=&quot;choice-1&quot; checked=&quot;checked&quot; /&gt;
53+
&lt;input type=&quot;radio&quot; name=&quot;radio-choice&quot; id=&quot;radio-choice-1&quot; value=&quot;choice-1&quot; checked=&quot;checked&quot; /&gt;
5454
&lt;label for=&quot;radio-choice-1&quot;&gt;Cat&lt;/label&gt;
5555

56-
&lt;input type=&quot;radio&quot; name=&quot;radio-choice-1&quot; id=&quot;radio-choice-2&quot; value=&quot;choice-2&quot; /&gt;
56+
&lt;input type=&quot;radio&quot; name=&quot;radio-choice&quot; id=&quot;radio-choice-2&quot; value=&quot;choice-2&quot; /&gt;
5757
&lt;label for=&quot;radio-choice-2&quot;&gt;Dog&lt;/label&gt;
5858

59-
&lt;input type=&quot;radio&quot; name=&quot;radio-choice-1&quot; id=&quot;radio-choice-3&quot; value=&quot;choice-3&quot; /&gt;
59+
&lt;input type=&quot;radio&quot; name=&quot;radio-choice&quot; id=&quot;radio-choice-3&quot; value=&quot;choice-3&quot; /&gt;
6060
&lt;label for=&quot;radio-choice-3&quot;&gt;Hamster&lt;/label&gt;
6161

62-
&lt;input type=&quot;radio&quot; name=&quot;radio-choice-1&quot; id=&quot;radio-choice-4&quot; value=&quot;choice-4&quot; /&gt;
62+
&lt;input type=&quot;radio&quot; name=&quot;radio-choice&quot; id=&quot;radio-choice-4&quot; value=&quot;choice-4&quot; /&gt;
6363
&lt;label for=&quot;radio-choice-4&quot;&gt;Lizard&lt;/label&gt;
6464
<strong>&lt;/fieldset&gt;</strong>
6565
</code></pre>
@@ -70,16 +70,16 @@ <h2>Vertically grouped radio buttons</h2>
7070

7171
<fieldset data-role="controlgroup">
7272
<legend>Choose a pet:</legend>
73-
<input type="radio" name="radio-pet-1a" id="radio-pet-1a" value="choice-1" checked="checked" />
73+
<input type="radio" name="radio-pet" id="radio-pet-1a" value="choice-1" checked="checked" />
7474
<label for="radio-pet-1a">Cat</label>
7575

76-
<input type="radio" name="radio-pet-1a" id="radio-pet-2a" value="choice-2" />
76+
<input type="radio" name="radio-pet" id="radio-pet-2a" value="choice-2" />
7777
<label for="radio-pet-2a">Dog</label>
7878

79-
<input type="radio" name="radio-pet-1a" id="radio-pet-3a" value="choice-3" />
79+
<input type="radio" name="radio-pet" id="radio-pet-3a" value="choice-3" />
8080
<label for="radio-pet-3a">Hamster</label>
8181

82-
<input type="radio" name="radio-pet-1a" id="radio-pet-4a" value="choice-4" />
82+
<input type="radio" name="radio-pet" id="radio-pet-4a" value="choice-4" />
8383
<label for="radio-pet-4a">Lizard</label>
8484
</fieldset>
8585

@@ -89,48 +89,46 @@ <h2>Mini version</h2>
8989

9090
<pre><code>
9191
&lt;fieldset data-role=&quot;controlgroup&quot; <strong>data-mini=&quot;true&quot;</strong>&gt;
92-
93-
&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;
94-
92+
&lt;input type=&quot;radio&quot; name=&quot;radio-mini&quot; id=&quot;radio-mini-1&quot; value=&quot;choice-1&quot; checked=&quot;checked&quot; /&gt;
9593
&lt;label for=&quot;radio-mini-1&quot;&gt;Credit&lt;/label&gt;
96-
&lt;input type=&quot;radio&quot; name=&quot;radio-choice-1&quot; id=&quot;radio-mini-2&quot; value=&quot;choice-2&quot; /&gt;
9794

95+
&lt;input type=&quot;radio&quot; name=&quot;radio-mini&quot; id=&quot;radio-mini-2&quot; value=&quot;choice-2&quot; /&gt;
9896
&lt;label for=&quot;radio-mini-2&quot;&gt;Debit&lt;/label&gt;
99-
&lt;input type=&quot;radio&quot; name=&quot;radio-choice-1&quot; id=&quot;radio-mini-3&quot; value=&quot;choice-3&quot; /&gt;
100-
97+
98+
&lt;input type=&quot;radio&quot; name=&quot;radio-mini&quot; id=&quot;radio-mini-3&quot; value=&quot;choice-3&quot; /&gt;
10199
&lt;label for=&quot;radio-mini-3&quot;&gt;Cash&lt;/label&gt;
102100
&lt;/fieldset&gt;
103101
</code></pre>
104102

105103
<p>This will produce a radio button that is not as tall as the standard version and has a smaller text size.</p>
106104

107105
<fieldset data-role="controlgroup" data-mini="true">
108-
<input type="radio" name="radio-choice-1" id="radio-mini-1" value="choice-1" checked="checked" />
106+
<input type="radio" name="radio-mini" id="radio-mini-1" value="choice-1" checked="checked" />
109107
<label for="radio-mini-1">Credit</label>
110-
<input type="radio" name="radio-choice-1" id="radio-mini-2" value="choice-2" />
108+
<input type="radio" name="radio-mini" id="radio-mini-2" value="choice-2" />
111109
<label for="radio-mini-2">Debit</label>
112-
<input type="radio" name="radio-choice-1" id="radio-mini-3" value="choice-3" />
110+
<input type="radio" name="radio-mini" id="radio-mini-3" value="choice-3" />
113111
<label for="radio-mini-3">Cash</label>
114112
</fieldset>
115113

116114
<h2>Field containers</h2>
117115

118116
<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>
119117
<pre><code>
120-
<strong>&lt;div data-role=&quot;fieldcontain&quot;&gt;
121-
</strong> &lt;fieldset data-role=&quot;controlgroup&quot;&gt;
118+
<strong>&lt;div data-role=&quot;fieldcontain&quot;&gt;</strong>
119+
&lt;fieldset data-role=&quot;controlgroup&quot;&gt;
122120
&lt;legend&gt;Choose a pet:&lt;/legend&gt;
123-
&lt;input type=&quot;radio&quot; name=&quot;radio-choice-1&quot; id=&quot;radio-choice-1&quot; value=&quot;choice-1&quot; checked=&quot;checked&quot; /&gt;
124-
&lt;label for=&quot;radio-choice-1&quot;&gt;Cat&lt;/label&gt;
121+
&lt;input type=&quot;radio&quot; name=&quot;radio-choice-2&quot; id=&quot;radio-choice-21&quot; value=&quot;choice-1&quot; checked=&quot;checked&quot; /&gt;
122+
&lt;label for=&quot;radio-choice-21&quot;&gt;Cat&lt;/label&gt;
125123

126-
&lt;input type=&quot;radio&quot; name=&quot;radio-choice-1&quot; id=&quot;radio-choice-2&quot; value=&quot;choice-2&quot; /&gt;
127-
&lt;label for=&quot;radio-choice-2&quot;&gt;Dog&lt;/label&gt;
124+
&lt;input type=&quot;radio&quot; name=&quot;radio-choice-2&quot; id=&quot;radio-choice-22&quot; value=&quot;choice-2&quot; /&gt;
125+
&lt;label for=&quot;radio-choice-22&quot;&gt;Dog&lt;/label&gt;
128126

129-
&lt;input type=&quot;radio&quot; name=&quot;radio-choice-1&quot; id=&quot;radio-choice-3&quot; value=&quot;choice-3&quot; /&gt;
130-
&lt;label for=&quot;radio-choice-3&quot;&gt;Hamster&lt;/label&gt;
127+
&lt;input type=&quot;radio&quot; name=&quot;radio-choice-2&quot; id=&quot;radio-choice-23&quot; value=&quot;choice-3&quot; /&gt;
128+
&lt;label for=&quot;radio-choice-23&quot;&gt;Hamster&lt;/label&gt;
131129

132-
&lt;input type=&quot;radio&quot; name=&quot;radio-choice-1&quot; id=&quot;radio-choice-4&quot; value=&quot;choice-4&quot; /&gt;
133-
&lt;label for=&quot;radio-choice-4&quot;&gt;Lizard&lt;/label&gt;
130+
&lt;input type=&quot;radio&quot; name=&quot;radio-choice-2&quot; id=&quot;radio-choice-24&quot; value=&quot;choice-4&quot; /&gt;
131+
&lt;label for=&quot;radio-choice-24&quot;&gt;Lizard&lt;/label&gt;
134132
&lt;/fieldset&gt;
135133
<strong>&lt;/div&gt;
136134
</strong> </code></pre>

docs/pages/page-scripting.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -101,14 +101,14 @@ <h2>data-ajax="false" now works on containers</h2>
101101

102102

103103
<h2>Scrolling to a position within a page</h2>
104-
<p>Since we use the URL hash to preserve Back button behavior, using page anchors to jump down to a position on the page isn't supported by using the traditional anchor link (#foo). Use the <a href="../api/methods.html"><code>silentScroll</code></a> method to scroll to a particular Y position without triggering scroll event listeners. You can pass in a <code>yPos</code> arguments to scroll to that Y location. For example:</p>
104+
<p>Since we use the URL hash to preserve Back button behavior, using page anchors to jump down to a position on the page isn't supported by using the traditional anchor link (#foo). Use the <a href="../api/methods.html"><code>silentScroll</code></a> method to scroll to a particular Y position without triggering scroll event listeners. You can pass in a <code>yPos</code> argument to scroll to that Y location. For example:</p>
105105
<pre><code>
106106
//scroll to Y 300px
107107
$.mobile.silentScroll(300);
108108
</code></pre>
109109

110110
<h2>Binding to mouse and touch events</h2>
111-
<p>One inportant consideration in mobile is handling mouse and touch events. These events differ significantly across mobile platforms, but the common denominator is that click events will work everywhere, but usually after a significant delay of 500-700ms. This delay is necessary for the browser to wait for double tap, scroll and extended hold tap events to potentially occur. To avoid this delay, it's possible to bind to touch events (ex. touchstart) but the issue with this approach is that some mobile platforms (WP7, Blackberry) don't support touch. To compound this issue, some platforms will emit <em>both</em> touch and mouse events so if you bind to both types, duplicate events will be fired for a single interaction.</p>
111+
<p>One important consideration in mobile is handling mouse and touch events. These events differ significantly across mobile platforms, but the common denominator is that click events will work everywhere, but usually after a significant delay of 500-700ms. This delay is necessary for the browser to wait for double tap, scroll and extended hold tap events to potentially occur. To avoid this delay, it's possible to bind to touch events (ex. touchstart) but the issue with this approach is that some mobile platforms (WP7, Blackberry) don't support touch. To compound this issue, some platforms will emit <em>both</em> touch and mouse events so if you bind to both types, duplicate events will be fired for a single interaction.</p>
112112
<p>Our solution is to create a set of <a href="../api/events.html">virtual events</a> that normalize mouse and touch events. This allows the developer to register listeners for the basic mouse events, such as mousedown, mousemove, mouseup, and click, and the plugin will take care of registering the correct listeners behind the scenes to invoke the listener at the fastest possible time for that device. This still retains the order of event firing in the traditional mouse environment, should multiple handlers be registered on the same element for different events. The virtual mouse system exposes the following virtual events to jQuery bind methods: <code>vmouseover</code>, <code>vmousedown</code>, <code>vmousemove</code>, <code>vmouseup</code>, <code>vclick</code>, and <code>vmousecancel</code></p>
113113

114114

docs/pages/phonegap.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ <h1>PhoneGap apps</h1>
2828

2929
<h2>Building PhoneGap apps with jQuery Mobile</h2>
3030

31-
<p><a href="http://phonegap.com/" rel="external">PhoneGap</a> is an HTML5 app platform that allows developers to author native applications with web technologies and get access to APIs and app stores. Applications are built as normal HTML pages and packaged up to run as a native application within a UIWebView or WebView (a chromeless browser, referred to hereafter as a webview). Since PhoneGap is frequently used in conjunction with jQuery Mobile, we wanted to offer a few tips and recommendations to help you get staretd. </p>
31+
<p><a href="http://phonegap.com/" rel="external">PhoneGap</a> is an HTML5 app platform that allows developers to author native applications with web technologies and get access to APIs and app stores. Applications are built as normal HTML pages and packaged up to run as a native application within a UIWebView or WebView (a chromeless browser, referred to hereafter as a webview). Since PhoneGap is frequently used in conjunction with jQuery Mobile, we wanted to offer a few tips and recommendations to help you get started. </p>
3232

3333
<p>The initial application document is loaded by the PhoneGap application by a local file:// URL. This means that if you want to pull in pages from your company's remote server (phone home) you will have to refer to them with absolute URLs to your server. Because your document originates from a file:// URL, loading pages or assets from your remote server is considered a cross-domain request that can be blocked in certain scenarios. </p>
3434

0 commit comments

Comments
 (0)