Skip to content

Commit d53d7f8

Browse files
agcolomagcolom
committed
updated widget entries (rangleslider to textinput) to match the new template
1 parent b79897e commit d53d7f8

File tree

7 files changed

+96
-88
lines changed

7 files changed

+96
-88
lines changed

‎entries/rangeslider.xml‎

Lines changed: 12 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -113,20 +113,15 @@
113113
$( "input" ).rangeslider();
114114
</code></pre>
115115

116-
117116
</longdesc>
118117
<added>1.3</added>
119118
<options>
120119
<option name="disabled" default="false" example-value="true">
121-
<desc>Sets the default state of the rangeslider to disabled when "true".
122-
123-
</desc>
120+
<desc>Sets the default state of the rangeslider to disabled when "true".</desc>
124121
<type name="Boolean" />
125122
</option>
126123
<option name="highlight" default="true" example-value="false">
127-
<desc>Sets an active state fill on the track between the two rangeslider handles when set to "true".
128-
129-
</desc>
124+
<desc>Sets an active state fill on the track between the two rangeslider handles when set to "true".</desc>
130125
<type name="Boolean" />
131126
</option>
132127
<option name="initSelector" default='"input[type=&#39;rangeslider&#39;], :jqmData(type=&#39;range&#39;), :jqmData(role=&#39;slider&#39;)"'>
@@ -141,22 +136,19 @@ $( document ).on( "mobileinit", function() {
141136
</option>
142137
<option name="mini" default="false" example-value="true">
143138
<desc>Sets the size of the element to a more compact, mini version. This option is also exposed as a data attribute: data-mini="true"
144-
145139
<p>This option is also exposed as a data attribute: <code>data-mini="true"</code>.</p>
146140
</desc>
147141
<type name="Boolean" />
148142
</option>
149143
<option name="theme" default="null, inherited from parent" example-value='"a"'>
150144
<desc>Sets the color scheme (swatch) for all instances of this widget. It accepts a single letter from a-z that maps to the swatches included in your theme. By default, it will inherit the same swatch color as its parent container if not explicitly set.
151-
152145
<p>Possible values: swatch letter (a-z).</p>
153146
<p>This option is also exposed as a data attribute: <code>data-theme="a"</code>.</p>
154147
</desc>
155148
<type name="String" />
156149
</option>
157150
<option name="trackTheme" default="null, inherited from parent" example-value='"a"'>
158151
<desc>Sets the color scheme (swatch) for the slider's track, specifically. It accepts a single letter from a-z that maps to the swatches included in your theme.
159-
160152
<p>Possible values: swatch letter (a-z).</p>
161153
<p>This option can be overridden in the markup by assigning a data attribute to the input, e.g. <code>data-track-theme="a"</code>.</p>
162154
</desc>
@@ -195,15 +187,19 @@ $( document ).on( "mobileinit", function() {
195187
</methods>
196188
<example>
197189
<desc>A basic example of a rangeslider.</desc>
198-
<html><![CDATA[<div data-role="header">
190+
<html><![CDATA[
191+
<div data-role="page" id="page1">
192+
<div data-role="header">
199193
<h1>jQuery Mobile Example</h1>
200194
</div>
201195
<div data-role="rangeslider">
202-
<label for="range-1a">Rangeslider:</label>
203-
<input name="range-1a" id="range-1a" min="0" max="100" value="0" type="range">
204-
<label for="range-1b">Rangeslider:</label>
205-
<input name="range-1b" id="range-1b" min="0" max="100" value="100" type="range">
206-
</div>]]></html>
196+
<label for="range-1a">Rangeslider:</label>
197+
<input name="range-1a" id="range-1a" min="0" max="100" value="0" type="range">
198+
<label for="range-1b">Rangeslider:</label>
199+
<input name="range-1b" id="range-1b" min="0" max="100" value="100" type="range">
200+
</div>
201+
</div>
202+
]]></html>
207203
</example>
208204
<category slug="widgets"/>
209205
</entry>

‎entries/selectmenu.xml‎

Lines changed: 7 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -153,14 +153,12 @@
153153

154154
<p>To use custom menus on a specific <code>select</code>, just add the <code>data-native-menu="false"</code> attribute. Alternately, this can also programmatically set the select menu's <code>nativeMenu</code> configuration option to <code>false</code> in a callback bound to the <code>mobileinit</code> event to achieve the same effect. This will globally make all selects use the custom menu by default. The following must be included in the page after jQuery is loaded but before jQuery Mobile is loaded.</p>
155155

156-
157156
<pre><code>
158157
$(document).on( "mobileinit", function() {
159158
$.mobile.selectmenu.prototype.options.nativeMenu = false;
160159
});
161160
</code></pre>
162161

163-
164162
<p>When the <code>select</code> has a small number of options that will fit on the device's screen, the menu will appear as a small overlay with a pop transition:
165163
<iframe src="/resources/select/example9.html" style="width:100%;height:270px;border:0px"></iframe></p>
166164

@@ -237,30 +235,25 @@ $( "select" ).selectmenu();
237235
<options>
238236
<option name="corners" default="true" example-value="false">
239237
<desc>Applies the theme button border-radius to the select button if set to true.
240-
241238
<p>This option is also exposed as a data attribute: <code>data-corners="false"</code>.</p>
242239
</desc>
243240
<type name="Boolean" />
244241
</option>
245242
<option name="icon" default='"arrow-down"' example-value='"star"'>
246243
<desc>Replaces the default icon "arrow-down" with an icon from the icon set. Setting this attribute to "false" suppresses the icon.
247-
248244
<p>To suppress the icon, a boolean expression must be used:</p>
249-
250245
<p>This option is also exposed as a data attribute: <code>data-icon="star"</code>.</p>
251246
</desc>
252247
<type name="String" />
253248
</option>
254249
<option name="iconpos" default='"right"' example-value='"left"'>
255250
<desc>Position of the icon in the select button. Possible values: left, right, top, bottom, notext. The notext value will display the select as an icon-only button with no text feedback.
256-
257251
<p>This option is also exposed as a data attribute: <code>data-iconpos="left"</code>.</p>
258252
</desc>
259253
<type name="String" />
260254
</option>
261255
<option name="iconshadow" default="true" example-value="false">
262256
<desc>Applies the theme shadow to the select button if set to true.
263-
264257
<p>This option is also exposed as a data attribute: <code>data-iconshadow="false"</code>.</p>
265258
</desc>
266259
<type name="Boolean" />
@@ -279,49 +272,42 @@ $( document ).on( "mobileinit", function() {
279272
</option>
280273
<option name="inline" default="null (false)" example-value="true">
281274
<desc>If set to true, this will make the select button act like an inline button so the width is determined by the button's text. By default, this is null (false) so the select button is full width, regardless of the feedback content. Possible values: true, false.
282-
283275
<p>This option is also exposed as a data attribute: <code>data-inline="true"</code>.</p>
284276
</desc>
285277
<type name="Boolean" />
286278
</option>
287279
<option name="mini" default="false" example-value="true">
288-
<desc>Sets the size of the element to a more compact, mini version.
289-
280+
<desc>Sets the size of the element to a more compact, mini version.
290281
<p>This option is also exposed as a data attribute: <code>data-mini="true"</code>.</p>
291282
</desc>
292283
<type name="Boolean" />
293284
</option>
294285
<option name="nativeMenu" default="true" example-value="false">
295286
<desc>When set to true, clicking the custom-styled select menu will open the native select menu which is best for performance. If set to false, the custom select menu style will be used instead of the native menu.
296-
297287
<p>This option is also exposed as a data attribute: <code>data-native-menu="false"</code>.</p>
298288
</desc>
299289
<type name="Boolean" />
300290
</option>
301291
<option name="preventFocusZoom" default="true on iOS platforms" example-value="false">
302292
<desc>This option disables page zoom temporarily when a custom select is focused, which prevents iOS devices from zooming the page into the select. By default, iOS often zooms into form controls, and the behavior is often unnecessary and intrusive in mobile-optimized layouts.
303-
304293
<p>This option is also exposed as a data attribute: <code>data-prevent-focus-zoom="true"</code>.</p>
305294
</desc>
306295
<type name="Boolean" />
307296
</option>
308297
<option name="shadow" default="true" example-value="false">
309298
<desc>Applies the drop shadow style to the select button if set to true.
310-
311299
<p>This option is also exposed as a data attribute: <code>data-shadow="false"</code>.</p>
312300
</desc>
313301
<type name="Boolean" />
314302
</option>
315303
<option name="overlayTheme" default='"a"' example-value='"d"'>
316304
<desc>Sets the color of the overlay layer for the dialog-based custom select menus and the outer border of the smaller custom menus. It accepts a single letter from a-z that maps to the swatches included in your theme. By default, the content block colors for swatch "a" will be used for the overlays.
317-
318305
<p>This option is also exposed as a data attribute: <code>ui-body-d</code>.</p>
319306
</desc>
320307
<type name="String" />
321308
</option>
322309
<option name="theme" default="null, inherited from parent" example-value='"a"'>
323310
<desc>Sets the color scheme (swatch) for all instances of this widget. It accepts a single letter from a-z that maps to the swatches included in your theme. By default, it will inherit the same swatch color as its parent container if not explicitly set.
324-
325311
<p>Possible values: swatch letter (a-z).</p>
326312
<p>This option is also exposed as a data attribute: <code>data-theme="a"</code>.</p>
327313
</desc>
@@ -372,7 +358,9 @@ $( document ).on( "mobileinit", function() {
372358
</methods>
373359
<example>
374360
<desc>A basic example of a simple native select</desc>
375-
<html><![CDATA[<div data-role="header">
361+
<html><![CDATA[
362+
<div data-role="page" id="page1">
363+
<div data-role="header">
376364
<h1>jQuery Mobile Example</h1>
377365
</div>
378366
<div data-role="content">
@@ -383,7 +371,9 @@ $( document ).on( "mobileinit", function() {
383371
<option value="express">Express: next day</option>
384372
<option value="overnight">Overnight</option>
385373
</select>
386-
</div>]]></html>
374+
</div>
375+
</div>
376+
]]></html>
387377
</example>
388378
<category slug="widgets"/>
389379
</entry>

‎entries/slider.xml‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -327,7 +327,9 @@ $( document ).on( "mobileinit", function() {
327327
</example>
328328
<example>
329329
<desc>A basic example of a flip toggle switch.</desc>
330-
<html><![CDATA[<div data-role="header">
330+
<html><![CDATA[
331+
<div data-role="page" id="page1">
332+
<div data-role="header">
331333
<h1>jQuery Mobile Example</h1>
332334
</div>
333335
<div data-role="content">
@@ -336,7 +338,9 @@ $( document ).on( "mobileinit", function() {
336338
<option value="off">Off</option>
337339
<option value="on">On</option>
338340
</select>
339-
</div> ]]></html>
341+
</div>
342+
</div>
343+
]]></html>
340344
</example>
341345
<category slug="widgets"/>
342346
</entry>

‎entries/table-columntoggle.xml‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -201,8 +201,11 @@
201201
</method>
202202
</methods>
203203
<example>
204+
<height>550</height>
204205
<desc>A basic example of a responsive table in column toggle mode.</desc>
205-
<html><![CDATA[<div data-role="header">
206+
<html><![CDATA[
207+
<div data-role="page" id="page1">
208+
<div data-role="header">
206209
<h1>jQuery Mobile Example</h1>
207210
</div>
208211
<div data-role="content">
@@ -290,7 +293,9 @@
290293
</tbody>
291294
</table>
292295
293-
</div>]]></html>
296+
</div>
297+
</div>
298+
]]></html>
294299
</example>
295300
<category slug="widgets"/>
296301
</entry>

‎entries/table-reflow.xml‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,7 @@
1313

1414
<pre><code>&lt;table data-role=&quot;table&quot; id=&quot;my-table&quot;&gt;</code></pre>
1515

16-
17-
<h3>How reflow mode works</h3>
16+
<h3>How reflow mode works</h3>
1817

1918
<p>The plugin works by parsing the values (or <code>abbr title</code>) of the first row of header (<code>th</code>) elements found in the table. For example, in the table above, the third table header is parsed to grab the contents ("Year"):</p>
2019

@@ -72,7 +71,6 @@
7271

7372
<pre><code>&lt;table data-role=&quot;table&quot; class=&quot;ui-responsive&quot;&gt;</code></pre>
7473

75-
7674
<h3>Working with grouped column headers</h3>
7775

7876
<p>It's fairly common to need to logically group multiple columns together under a heading group for financial or scientific data. The framework can support the most simple version of this by allowing for two rows of table headers (<code>TH</code>), with the first row containing simple <code>colspan</code> attributes to group the columns below. In this configuration, the framework will add a class to the label of the first cell in each group to allow you to style these differently and provide aditional visual hierarchy. </p>
@@ -120,8 +118,11 @@ $( document ).on( "mobileinit", function() {
120118
</method>
121119
</methods>
122120
<example>
121+
<height>550</height>
123122
<desc>A basic example of a responsive table in reflow mode.</desc>
124-
<html><![CDATA[<div data-role="header">
123+
<html><![CDATA[
124+
<div data-role="page" id="page1">
125+
<div data-role="header">
125126
<h1>jQuery Mobile Example</h1>
126127
</div>
127128
<div data-role="content">
@@ -209,7 +210,9 @@ $( document ).on( "mobileinit", function() {
209210
</tbody>
210211
</table>
211212
212-
</div>]]></html>
213+
</div>
214+
</div>
215+
]]></html>
213216
</example>
214217
<category slug="widgets"/>
215218
</entry>

0 commit comments

Comments
 (0)