You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
<p>By adding the <code>data-type="horizontal"</code> attribute to the <code>controlgroup</code> container, you can swap to a horizontal-style group that floats the buttons side-by-side and sets the width to only be large enough to fit the content. (Be aware that these will wrap to multiple lines if the number of buttons or the overall text length is too wide for the screen.)
39
+
<p>By adding the <code>data-jq-type="horizontal"</code> attribute to the <code>controlgroup</code> container, you can swap to a horizontal-style group that floats the buttons side-by-side and sets the width to only be large enough to fit the content. (Be aware that these will wrap to multiple lines if the number of buttons or the overall text length is too wide for the screen.)
Copy file name to clipboardExpand all lines: docs/content/content-collapsible.html
+4-4Lines changed: 4 additions & 4 deletions
Original file line number
Diff line number
Diff line change
@@ -42,10 +42,10 @@ <h3>I'm a header</h3>
42
42
</div>
43
43
44
44
45
-
<p>As the example notes, by default the content will be expanded. To collapse the content when the page loads, add the <code>data-collapsed="true"</code> attribute to the wrapper.</p>
45
+
<p>As the example notes, by default the content will be expanded. To collapse the content when the page loads, add the <code>data-jq-collapsed="true"</code> attribute to the wrapper.</p>
<p>I'm closed when the page loads because I have the <code>data-collapsed="true"</code> attribute on my container. </p>
66
+
<p>I'm closed when the page loads because I have the <code>data-jq-collapsed="true"</code> attribute on my container. </p>
67
67
<p>I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. </p>
68
68
</div><!-- /section 1 -->
69
69
70
70
<divdata-jq-role="collapsible">
71
71
<h3>Section 2: Expanded on load</h3>
72
-
<p>I'm open when the page loads because I don't have the <code>data-collapsed="true"</code> attribute on my container. </p>
72
+
<p>I'm open when the page loads because I don't have the <code>data-jq-collapsed="true"</code> attribute on my container. </p>
73
73
<p>I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content.</p>
Copy file name to clipboardExpand all lines: docs/forms/docs-forms.html
+1-1Lines changed: 1 addition & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -58,7 +58,7 @@ <h2>Preventing auto-initialization of form elements</h2>
58
58
});
59
59
</pre></code>
60
60
61
-
<p>One special case is that of selects. The above sample will prevent any and all augmentation from taking place on select elements in the page if <code>select</code> is included. If you wish to retain the native performance, look/feel of the menu itself and benefit from the visual augmentation of the select button by jQuery Mobile you can set $.mobile.nativeSelectMenu to true in a <code>mobileinit</code> callback as a global setting or use <code>data-native="true"</code> on a case by case basis.</p>
61
+
<p>One special case is that of selects. The above sample will prevent any and all augmentation from taking place on select elements in the page if <code>select</code> is included. If you wish to retain the native performance, look/feel of the menu itself and benefit from the visual augmentation of the select button by jQuery Mobile you can set $.mobile.nativeSelectMenu to true in a <code>mobileinit</code> callback as a global setting or use <code>data-jq-native="true"</code> on a case by case basis.</p>
Copy file name to clipboardExpand all lines: docs/forms/forms-radiobuttons.html
+1-1Lines changed: 1 addition & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -78,7 +78,7 @@ <h2>Horizontal radio button sets</h2>
78
78
<p>Radio buttons can also be used for grouped button sets only a single button can be selected at once, such as a view switcher control. To make a horizontal radio button set, add the <code> data-jq-type="horizontal"</code> to the <code>fieldset</code>.</p>
<p>The framework will float the labels so they sit side-by-side on a line, hide the radio button icons and only round the left and right edges of the group.</p>
Copy file name to clipboardExpand all lines: docs/forms/forms-selects.html
+2-2Lines changed: 2 additions & 2 deletions
Original file line number
Diff line number
Diff line change
@@ -118,7 +118,7 @@ <h2>Select menus</h2>
118
118
119
119
<h2>Option to use native menus</h2>
120
120
<p>The custom select menus add the ability to theme the select and provide visual consistency across platforms In addition, it fixes over some missing functionality on certain platforms: <code>optgroup</code> support on Android, multi-select capability on WebOS, and adds an elegant way to handle placeholder values (explained below).</p>
121
-
<p>However, there is overhead involved in parsing the native select to build a custom menu and if the number of selects or options within are fairly large, this can impact the performance of the page. By adding the <code>data-native-menu="true"</code> attribute to the <code>select</code>, the framework will use the browser's native select menu when the select button is clicked. Because this option doesn't use any of the custom menu parsing and menu generation logic, it is significantly faster than the custom menu version.</p>
121
+
<p>However, there is overhead involved in parsing the native select to build a custom menu and if the number of selects or options within are fairly large, this can impact the performance of the page. By adding the <code>data-jq-native-menu="true"</code> attribute to the <code>select</code>, the framework will use the browser's native select menu when the select button is clicked. Because this option doesn't use any of the custom menu parsing and menu generation logic, it is significantly faster than the custom menu version.</p>
122
122
123
123
<p>You can also programmatically set the select menu's configuration option to true in a callback bound to the <code>mobileinit</code> event to achieve the same effect. The following must be included in the page after jQuery is loaded but before jQuery Mobile is loaded.</p>
124
124
@@ -191,7 +191,7 @@ <h2>Placeholder options</h2>
191
191
<ul>
192
192
<li>An option with no value attribute (or an empty value attribute)</li>
193
193
<li>An option with no text node</li>
194
-
<li>An option with a <code>data-placeholder="true"</code> attribute. (This allows you to use an option that has a value and a textnode as a placeholder option).</li>
194
+
<li>An option with a <code>data-jq-placeholder="true"</code> attribute. (This allows you to use an option that has a value and a textnode as a placeholder option).</li>
195
195
</ul>
196
196
197
197
<p>You can disable this feature through the selectmenu plugin's <code>hidePlaceholderMenuItems</code> option, like this:</p>
Copy file name to clipboardExpand all lines: docs/lists/lists-themes.html
+3-3Lines changed: 3 additions & 3 deletions
Original file line number
Diff line number
Diff line change
@@ -74,7 +74,7 @@ <h2>Theming dividers</h2>
74
74
75
75
<h2>Theming count bubbles</h2>
76
76
77
-
<p>The theme for <strong>count bubbles</strong> can be set by adding the <code>data-counttheme</code> to the list and specifying a swatch letter. Here is an example with swatch "e" set on the dividers.</p>
77
+
<p>The theme for <strong>count bubbles</strong> can be set by adding the <code>data-jq-counttheme</code> to the list and specifying a swatch letter. Here is an example with swatch "e" set on the dividers.</p>
<p>To specify the color swatch for the icon button on the right, add the <code>data-splittheme</code> to the list and specify a swatch letter. This attribute can also be added to individual split inside list items by adding a <code> data-jq-theme</code> attribute to specific links (see second list item).</p>
129
+
<p>To specify the color swatch for the icon button on the right, add the <code>data-jq-splittheme</code> to the list and specify a swatch letter. This attribute can also be added to individual split inside list items by adding a <code> data-jq-theme</code> attribute to specific links (see second list item).</p>
<p>The icon for the split theme can set at the list level by adding the <code>data-spliticon</code> to the list and specifying a <ahref="../buttons/buttons-icons.html">standard icon</a>. This attribute can also be added to individual split inside list items by adding a <code> data-jq-icon</code> attribute to specific links (see second list item).</p>
145
+
<p>The icon for the split theme can set at the list level by adding the <code>data-jq-spliticon</code> to the list and specifying a <ahref="../buttons/buttons-icons.html">standard icon</a>. This attribute can also be added to individual split inside list items by adding a <code> data-jq-icon</code> attribute to specific links (see second list item).</p>
<p>A "page" in jQuery Mobile consists of an element (usually a <code>div</code>) with a <code> data-jq-role</code> attribute set to <code>"page"</code>, which generally contains <code>div</code> elements with roles of <code>"header"</code>, <code>"content"</code>, and <code>"footer"</code>, each containing common markup, forms, and custom jQuery Mobile widgets.</p>
25
25
26
-
<p>The basic workflow with page loading is as follows: first, a page is requested with a normal HTTP request, and subsequent "pages" are then requested and injected into that page's DOM. Because of this, the DOM may have a number of "pages" in it at a time, each of which can be re-visited by linking to its <code>data-url</code> attribute.</p>
26
+
<p>The basic workflow with page loading is as follows: first, a page is requested with a normal HTTP request, and subsequent "pages" are then requested and injected into that page's DOM. Because of this, the DOM may have a number of "pages" in it at a time, each of which can be re-visited by linking to its <code>data-jq-url</code> attribute.</p>
27
27
28
28
<p>When a url is initially requested, there may be one or more "pages" in the response, and only the first one will be shown. The advantage of storing more than one "page" is that it allows you to pre-fetch static pages that are likely to be visited.</p>
29
29
@@ -61,7 +61,7 @@ <h2>Auto-generated pages and sub-hash urls</h2>
61
61
<p>Some plugins may choose to dynamically break a page's content into separate navigable pages, which can then be reached via deep links. One example of this would be the Listview plugin, which will break a nested UL (or OL) into separate pages, which are each given a data-jq-url attribute so they can be linked to like any normal "page" in jQuery Mobile. However, in order to link to these pages, the page that generates them must first be requested from the server. To make this work, pages that are auto-generated by plugins use the following special data-jq-url structure:
<p>So, for example, a page generated by the listview plugin may have an data-jq-url attribute like this: <code>data-url="artists.html&ui-page=listview-1"</code></p>
64
+
<p>So, for example, a page generated by the listview plugin may have an data-jq-url attribute like this: <code>data-jq-url="artists.html&ui-page=listview-1"</code></p>
65
65
66
66
<p>When a page is requested, jQuery Mobile knows to split the URL at "&ui-page" and make an HTTP request to the portion of the URL before that key. In the case of the listview example mentioned above, the URL would look like this: http://example.com/artists.html&ui-page=listview-1
67
67
...and jQuery Mobile would request artists.html, which would then generate its sub-pages, creating the div with data-jq-url="artists.html&ui-page=listview-1", which it will then display as the active page.</p>
Copy file name to clipboardExpand all lines: docs/pages/docs-pages.html
+1-1Lines changed: 1 addition & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -176,7 +176,7 @@ <h2>Back linking</h2>
176
176
<h2>Redirects and linking to directories</h2>
177
177
<p>When linking to directory indexes (such as href="typesofcats/" instead of href="typesofcats/index.html"), you must provide a trailing slash. This is because jQuery Mobile assumes the section after the last "/" character in a url is a filename, and it will remove that section when creating base urls from which future pages will be referenced.</p>
178
178
179
-
<p>However, you can work around this issue by returning your page div with a <code>data-url</code> attribute already specified. When you do this, jQuery Mobile will use that attribute's value for updating the URL, instead of the url used to request that page. This also allows you to return urls that change as the result of a redirect, for example, you might post a form to "/login.html" but return a page from the url "/account" after a successful submission. This tool allows you to take control of the jQuery Mobile history stack in these situations. Here's an example:</p>
179
+
<p>However, you can work around this issue by returning your page div with a <code>data-jq-url</code> attribute already specified. When you do this, jQuery Mobile will use that attribute's value for updating the URL, instead of the url used to request that page. This also allows you to return urls that change as the result of a redirect, for example, you might post a form to "/login.html" but return a page from the url "/account" after a successful submission. This tool allows you to take control of the jQuery Mobile history stack in these situations. Here's an example:</p>
180
180
181
181
<p>The following link points to "docs-links-urltest/index.html": <ahref="docs-links-urltest/index.html">Test Link</a> which is a directory with an index page. The return page will update the hash as "docs/pages/docs-links-urltest/" with a trailing slash. This is done via the data-jq-url attribute in that page's source. Keep in mind that the value will replace the entire hash, and it is up to you to replace it with a URL that actually resolves to the correct page when requested via refresh or deep link.</p>
0 commit comments