Skip to content

Commit e8c5b3a

Browse files
agcolomagcolom
committed
changed examples fo button and checkboxradio acording to the new template
1 parent 92fd756 commit e8c5b3a

File tree

5 files changed

+50
-36
lines changed

5 files changed

+50
-36
lines changed

‎entries/collapsible-set.xml‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -64,8 +64,8 @@
6464

6565
<h3>Expanding or collapsing items in a set</h3>
6666

67-
<p>To expand or collapse items in a set, call the respective methods on individual collapsibles. The selector for the collapse method can include multiple items in a set:
68-
</p>
67+
<p>To expand or collapse items in a set, call the respective methods on individual collapsibles. The selector for the collapse method can include multiple items in a set:</p>
68+
6969
<pre><code>
7070
$( "#myCollapsibleSet" ).children().trigger( "collapse" );
7171
</code></pre>
@@ -138,17 +138,17 @@ $( document ).on( "mobileinit", function() {
138138
</event>
139139
</events>
140140
<methods>
141-
142141
<method name="refresh">
143142
<desc>Updates the collapsible set.
144143
<p>If you manipulate a collapsible set via JavaScript (e.g. add new collapsible containers), you must call the refresh method on it to update the visual styling.</p>
145-
146144
</desc>
147145
</method>
148146
</methods>
149147
<example>
150148
<desc>A basic example of a collapsible set.</desc>
151-
<html><![CDATA[<div data-role="header">
149+
<html><![CDATA[
150+
<div data-role="page" id="page1">
151+
<div data-role="header">
152152
<h1>jQuery Mobile Example</h1>
153153
</div>
154154
<div data-role="content">
@@ -162,7 +162,9 @@ $( document ).on( "mobileinit", function() {
162162
<p>I'm the collapsible set content for section B.</p>
163163
</div>
164164
</div>
165-
</div>]]></html>
165+
</div>
166+
</div>
167+
]]></html>
166168
</example>
167169
<category slug="widgets"/>
168170
</entry>

‎entries/collapsible.xml‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -212,15 +212,19 @@ $( document ).on( "mobileinit", function() {
212212
</methods>
213213
<example>
214214
<desc>A basic example of a collapsible content block.</desc>
215-
<html><![CDATA[<div data-role="header">
215+
<html><![CDATA[
216+
<div data-role="page" id="page1">
217+
<div data-role="header">
216218
<h1>jQuery Mobile Example</h1>
217219
</div>
218220
<div data-role="content">
219221
<div data-role="collapsible">
220222
<h3>I'm a header</h3>
221223
<p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
222224
</div>
223-
</div>]]></html>
225+
</div>
226+
</div>
227+
]]></html>
224228
</example>
225229
<category slug="widgets"/>
226230
</entry>

‎entries/controlgroup.xml‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<title>Controlgroup Widget</title>
55
<desc>Groups buttons together.</desc>
66
<longdesc>
7-
<p>Occasionally, you may want to visually group a set of buttons to form a single block that looks contained like a navigation component. To get this effect, wrap a set of buttons in a container with the <code> data-role="controlgroup"</code> attribute &#8212; the framework will create a vertical button group, remove all margins and drop shadows between the buttons, and only round the first and last buttons of the set to create the effect that they are grouped together. </p>
7+
<p>Occasionally, you may want to visually group a set of buttons to form a single block that looks contained like a navigation component. To get this effect, wrap a set of buttons in a container with the <code> data-role="controlgroup"</code> attribute &#8212; the framework will create a vertical button group, remove all margins and drop shadows between the buttons, and only round the first and last buttons of the set to create the effect that they are grouped together. </p>
88

99
<pre><code>
1010
&lt;div data-role=&quot;controlgroup&quot;&gt;
@@ -90,17 +90,22 @@ $( document ).on( "mobileinit", function() {
9090
<pre><code>
9191
$( ".selector" ).controlgroup( "container" );
9292
</code></pre>
93-
9493
</desc>
9594
</method>
9695
</methods>
9796
<example>
9897
<desc>A basic example of a controlgroup.</desc>
99-
<html><![CDATA[<div data-role="controlgroup">
100-
<a href="#" data-role="button">Yes</a>
101-
<a href="#" data-role="button">No</a>
102-
<a href="#" data-role="button">Maybe</a>
103-
</div>]]></html>
98+
<html><![CDATA[
99+
<div data-role="page" id="page1">
100+
<div data-role="content">
101+
<div data-role="controlgroup">
102+
<a href="#" data-role="button">Yes</a>
103+
<a href="#" data-role="button">No</a>
104+
<a href="#" data-role="button">Maybe</a>
105+
</div>
106+
</div>
107+
</div>
108+
]]></html>
104109
</example>
105110
<category slug="widgets"/>
106111
</entry>

‎entries/dialog.xml‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -147,11 +147,13 @@ $( document ).on( "mobileinit", function() {
147147
</methods>
148148
<example>
149149
<desc>A basic example of opening a page as a dialog by adding <code>data-rel="dialog"</code> to the anchor tag.</desc>
150-
<html><![CDATA[<div data-role="header">
150+
<html><![CDATA[
151+
<div data-role="page" id="page1">
152+
<div data-role="header">
151153
<h1>jQuery Mobile Example</h1>
152154
</div>
153155
<div data-role="content">
154-
<a href="#dialogPage" data-rel="dialog">Open dialog</a>
156+
<a href="#dialogPage" data-rel="dialog" data-role="button">Open dialog</a>
155157
</div>
156158
<div data-role="footer">
157159
<h2></h2>
@@ -164,7 +166,9 @@ $( document ).on( "mobileinit", function() {
164166
</div>
165167
<div data-role="content">
166168
<p>I am a dialog</p>
167-
</div>]]></html>
169+
</div>
170+
</div>
171+
]]></html>
168172
</example>
169173
<category slug="widgets"/>
170174
</entry>

‎entries/fixedtoolbar.xml‎

Lines changed: 17 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -28,13 +28,13 @@
2828

2929
<p>Fullscreen fixed toolbars sit on top of the content at all times when they are visible, and unlike regular fixed toolbars, fullscreen toolbars do not fall back to static positioning when toggled. Instead they disappear from the screen entirely. Fullscreen toolbars are ideal for more immersive interfaces, like a photo viewer that is meant to fill the entire screen with the photo itself and no distractions.</p>
3030

31-
<p>To enable this option on a fixed header or footer, add the <code>data-fullscreen</code> attribute to the element.</p>
31+
<p>To enable this option on a fixed header or footer, add the <code>data-fullscreen</code> attribute to the element.</p>
3232

33-
<pre><code>
33+
<pre><code>
3434
&lt;div data-role=&quot;header&quot; data-position=&quot;fixed&quot; data-fullscreen=&quot;true&quot;&gt;
3535
&lt;h1&gt;Fixed Header!&lt;/h1&gt;
3636
&lt;/div&gt;
37-
</code></pre>
37+
</code></pre>
3838
<iframe src="/resources/fixedtoolbar/example2.html" style="width:100%;height:420px;border:0px"></iframe>
3939

4040
<h3>Forms in toolbars</h3>
@@ -49,8 +49,8 @@
4949
<p>The fixed toolbar plugin degrades gracefully in platforms that do not support CSS <code>position:fixed</code> properly, such as iOS4.3. If you still need to support fixed toolbars on that platform (with the show/hide behavior) included in previous releases, Filament Group has developed a polyfill that you can use.</p>
5050

5151
<ul>
52-
<li><a href="https://github.com/filamentgroup/jQuery-Mobile-FixedToolbar-Legacy-Polyfill">Github code repository with CSS, and JavaScript required for the fixed toolbars polyfill</a></li>
53-
<li><a href="http://filamentgroup.github.com/jQuery-Mobile-FixedToolbar-Legacy-Polyfill/">Preview URL using the code in the repo above</a></li>
52+
<li><a href="https://github.com/filamentgroup/jQuery-Mobile-FixedToolbar-Legacy-Polyfill">Github code repository with CSS, and JavaScript required for the fixed toolbars polyfill</a></li>
53+
<li><a href="http://filamentgroup.github.com/jQuery-Mobile-FixedToolbar-Legacy-Polyfill/">Preview URL using the code in the repo above</a></li>
5454
</ul>
5555

5656
<p>Just include the CSS and JS files after your references to jQuery Mobile and Fixed toolbars will work similarly to jQuery Mobile 1.0 in iOS4.3, with the inclusion of the new API for the 1.1 fixedtoolbar plugin.</p>
@@ -59,8 +59,7 @@
5959

6060
<h3>Known issue with form controls inside fixed toolbars, and programmatic scroll</h3>
6161
<p>An obscure issue exists in iOS5 and some Android platforms where form controls placed inside fixed-positioned containers can lose their hit area when the window is programatically scrolled (using <code>window.scrollTo</code> for example). This is not an issue specific to jQuery Mobile, but because of it, we recommend not programatically scrolling a document when using form controls inside jQuery Mobile fixed toolbars. <a href="https://github.com/scottjehl/Device-Bugs/issues/1">This ticket</a> from the <a href="https://github.com/scottjehl/Device-Bugs/">Device Bugs project</a> tracker explains this problem in more detail.</p>
62-
63-
62+
6463
<h3>Known issues in Android 2.2/2.3</h3>
6564
<p>Android 2.2/2.3's implementation of <code>position: fixed;</code> can, in conjunction with seemingly unrelated styles and markup patterns, cause a number of strange issues, particularly in the case of <code>position: absolute</code> elements inside of <code>position: fixed</code> elements. While we've done our best to work around a number of these unique bugs within the scope of the library, custom styles may cause a number of issues.</p>
6665
<ul>
@@ -73,12 +72,10 @@
7372

7473
<p>While we will continue to try to find ways to mitigate these bugs as best we can, we currently advise against implementing fixed toolbars containing complicated user styles and form elements without extensive testing in all versions of Android's native browser.</p>
7574

76-
77-
<div class="ui-body ui-body-e">
78-
<h2>No longer supported: touchOverflowEnabled</h2>
79-
80-
<p>Prior to jQuery Mobile 1.1, true fixed toolbar support was contingent on native browser support for the CSS property <code>overflow-scrolling: touch</code>, which is currently only supported in iOS5. As of version 1.1, jQuery Mobile no longer uses this CSS property at all. We've removed all internal usage of this property in the framework, but we've left it defined globally on the $.mobile object to reduce the risk that its removal will cause trouble with existing applications. This property is flagged for removal, so please update your code to no longer use it. The support test for this property, however, remains defined under <code>$.support</code> and we have no plans to remove that test at this time. </p>
81-
</div>
75+
<div class="warning">
76+
<h2>No longer supported: touchOverflowEnabled</h2>
77+
<p>Prior to jQuery Mobile 1.1, true fixed toolbar support was contingent on native browser support for the CSS property <code>overflow-scrolling: touch</code>, which is currently only supported in iOS5. As of version 1.1, jQuery Mobile no longer uses this CSS property at all. We've removed all internal usage of this property in the framework, but we've left it defined globally on the $.mobile object to reduce the risk that its removal will cause trouble with existing applications. This property is flagged for removal, so please update your code to no longer use it. The support test for this property, however, remains defined under <code>$.support</code> and we have no plans to remove that test at this time. </p>
78+
</div>
8279

8380
</longdesc>
8481
<added>1.0</added>
@@ -195,24 +192,26 @@ $( document ).on( "mobileinit", function() {
195192
</methods>
196193
<example>
197194
<desc>A basic example of a page with fixed toolbars.</desc>
198-
<html><![CDATA[<div data-role="header" <div data-role="header" data-position="fixed" data-theme="a">
195+
<html><![CDATA[
196+
<div data-role="page" id="page1">
197+
<div data-role="header" data-position="fixed" data-theme="a">
199198
<h1>Fixed Header</h1>
200199
</div>
201200
<div data-role="content" >
202-
203201
<p>This page demonstrates the "fixed" toolbar mode. </p>
204202
<br /><br />
205203
<p>To enable this toolbar feature type, you apply the <code>data-position="fixed"</code> attribute to both the header and footer <code>div</code> elements.</p>
206204
<br /><br />
207205
<p>And we're adding more text here so that you can really see the fixed toobars in action.</p>
208206
<br /><br />
209207
<p>If you tap the screen while in the middle of the page (i.e. neither at the top nor the bottom of the page, the visibility of the toolbars will toggle</p>
210-
<p></p>
211-
208+
<p></p>
212209
</div>
213210
<div data-role="footer" data-theme="a" data-position="fixed">
214211
<h1>Fixed Footer</h1>
215-
</div>]]></html>
212+
</div>
213+
</div>
214+
]]></html>
216215
</example>
217216
<category slug="widgets"/>
218217
</entry>

0 commit comments

Comments
 (0)