Skip to content
This repository has been archived by the owner on Oct 8, 2021. It is now read-only.

Commit

Permalink
Docs: cleaned up (consistency) the data attribute reference.
Browse files Browse the repository at this point in the history
  • Loading branch information
@jaspermdegroot
jaspermdegroot committed Jul 25, 2012
1 parent 2170b4d commit e322835
Showing 1 changed file with 50 additions and 54 deletions.
104 changes: 50 additions & 54 deletions docs/api/data-attributes.html
View file
Expand Up @@ -25,7 +25,7 @@ <h1>Data Attributes</h1>
<div data-role="content" data-theme="c">

<div class="content-primary">
<h2>Data-attribute reference</h2>
<h2>Data attribute reference</h2>
<p>The jQuery Mobile framework uses HTML5 <code>data-</code> attributes to allow for markup-based initialization and configuration of widgets. These attributes are completely optional; calling plugins manually and passing options directly is also supported. To avoid naming conflicts with other plugins or frameworks that also use <code>data-</code> attributes, set a custom namespace by modifying the <a href="globalconfig.html"><code>ns</code> global option</a>.<p>

<style>
Expand Down Expand Up @@ -81,7 +81,7 @@ <h2><a href="../forms/checkboxes/">Checkbox</a></h2>
</tr>
<tr>
<th>data-role</th>
<td>none (prevents auto-enhancement to use native control)</td>
<td>none - Prevents auto-enhancement to use native control</td>
</tr>
<tr>
<th>data-theme</th>
Expand Down Expand Up @@ -187,23 +187,23 @@ <h2><a href="../pages/page-dialogs.html">Dialog</a></h2>
<table>
<tr>
<th>data-close-btn-text</th>
<td>string (text for the close button, dialog only)</td>
<td>string - Text for the close button, dialog only</td>
</tr>
<tr>
<th>data-dom-cache</th>
<td>true | <strong>false</strong></td>
</tr>
<tr>
<th>data-overlay-theme</th>
<td>swatch letter (a-z) - overlay theme when the page is opened in a dialog</td>
<td>swatch letter (a-z) - Overlay theme when the page is opened in a dialog</td>
</tr>
<tr>
<th>data-theme</th>
<td>swatch letter (a-z)</td>
</tr>
<tr>
<th>data-title</th>
<td>string (title used when page is shown)</td>
<td>string - Title used when page is shown</td>
</tr>
</table>

Expand Down Expand Up @@ -235,7 +235,7 @@ <h2><a href="../toolbars/bars-fixed.html">Fixed Toolbar</a></h2>
</tr>
<tr>
<th>data-fullscreen</th>
<td>true | <strong>false</strong> - Setting toolbars <strong>over</strong> the page-content</td>
<td>true | <strong>false</strong> - Setting toolbars <u>over</u> the page-content</td>
</tr>
<tr>
<th>data-tap-toggle</th>
Expand All @@ -247,7 +247,7 @@ <h2><a href="../toolbars/bars-fixed.html">Fixed Toolbar</a></h2>
</tr>
<tr>
<th>data-update-page-padding</th>
<td><strong>true</strong> | false - Have the page top/bottom padding updated on other events than when page is shown as well (resize, transition, "updatelayout")</td>
<td><strong>true</strong> | false - Have the page top and bottom padding updated on resize, transition, "updatelayout" events (the framework always updates the padding on the "pageshow" event).</td>
</tr>
<tr>
<th>data-visible-on-page-show</th>
Expand All @@ -256,15 +256,15 @@ <h2><a href="../toolbars/bars-fixed.html">Fixed Toolbar</a></h2>
</table>

<h2><a href="../forms/switch/">Flip toggle switch</a></h2>
<p>Select with <code>data-role="slider"</code>, two options only</p>
<p>Select with <code>data-role="slider"</code> and two <code style="font-weight:normal;">option</code> element</p>
<table>
<tr>
<th>data-mini</th>
<td>true | <strong>false</strong> - Compact sized version</td>
</tr>
<tr>
<th>data-role</th>
<td>none (prevents auto-enhancement to use native control)</td>
<td>none - Prevents auto-enhancement to use native control</td>
</tr>
<tr>
<th>data-theme</th>
Expand All @@ -281,15 +281,15 @@ <h2><a href="../toolbars/docs-footers.html">Footer</a></h2>
<table>
<tr>
<th>data-id</th>
<td>string (unique id, useful in persistent footers)</td>
<td>string - Unique ID. Required for persistent footers</td>
</tr>
<tr>
<th>data-position</th>
<td>fixed</td>
</tr>
<tr>
<th>data-fullscreen</th>
<td>true (used in conjunction with fixed toolbars)</td>
<td>true | <strong>false</strong> - Used in conjunction with fixed toolbars</td>
</tr>
<tr>
<th>data-theme</th>
Expand All @@ -302,15 +302,15 @@ <h2><a href="../toolbars/docs-headers.html">Header</a></h2>
<table>
<tr>
<th>data-id</th>
<td>string (unique id, useful in persistent headers)</td>
<td>string - Unique ID. Required for persistent headers</td>
</tr>
<tr>
<th>data-position</th>
<td>fixed</td>
</tr>
<tr>
<th>data-fullscreen</th>
<td>true (used in conjunction with fixed toolbars)</td>
<td>true | <strong>false</strong> - Used in conjunction with fixed toolbars</td>
</tr>
<tr>
<th>data-theme</th>
Expand All @@ -327,7 +327,7 @@ <h2><a href="../pages/page-links.html">Link</a></h2>
</tr>
<tr>
<th>data-direction</th>
<td>reverse (reverse page transition animation)</td>
<td>reverse - Reverse page transition animation</td>
</tr>
<tr>
<th>data-dom-cache</th>
Expand All @@ -339,38 +339,38 @@ <h2><a href="../pages/page-links.html">Link</a></h2>
</tr>
<tr>
<th>data-rel</th>
<td>back (to move one step back in history)<br />
dialog (to open link styled as dialog, not tracked in history)<br />
external (for linking to another domain)<br />
popup (for opening a popup)</td>
<td>back - To move one step back in history<br />
dialog - To open link styled as dialog, not tracked in history<br />
external - For linking to another domain<br />
popup - For opening a popup</td>
</tr>
<tr>
<th>data-transition</th>
<td><strong>fade</strong> | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none</td>
</tr>
<tr>
<th>data-position-to</th>
<td><strong>origin</strong> (centers the popup over the link that opens it)<br />
jQuery selector (centers the popup over the specified element)<br />
window (centers the popup in the window)<br />
<u>Note:</u> option only available when used with popups. See also: Popup <a href="../pages/popup/options.html">options</a></td>
<td><strong>origin</strong> - Centers the popup over the link that opens it<br />
jQuery selector - Centers the popup over the specified element<br />
window - Centers the popup in the window<br />
<u>Note:</u> option only available when used with popups. See also: popup <a href="../pages/popup/options.html">options</a>.</td>
</tr>
</table>

<h2><a href="../lists/docs-lists.html">Listview</a></h2>
<p>OL or UL with <code>data-role="listview"</code></p>
<p><code style="font-weight:normal;">OL</code> or <code style="font-weight:normal;">UL</code> with <code>data-role="listview"</code></p>
<table>
<tr>
<th>data-autodividers</th>
<td>true | <strong>false</strong></td>
</tr>
<tr>
<th>data-count-theme</th>
<td>swatch letter (a-z) (default "c" if unset)</td>
<td>swatch letter (a-z) - Default "c"</td>
</tr>
<tr>
<th>data-divider-theme</th>
<td>swatch letter (a-z) (default "b" if unset)</td>
<td>swatch letter (a-z) - Default "b"</td>
</tr>
<tr>
<th>data-filter</th>
Expand Down Expand Up @@ -398,7 +398,7 @@ <h2><a href="../lists/docs-lists.html">Listview</a></h2>
</tr>
<tr>
<th>data-split-theme</th>
<td>swatch letter (a-z) (default "b" if unset)<td>
<td>swatch letter (a-z) - Default "b"<td>
</tr>
<tr>
<th>data-theme</th>
Expand All @@ -407,11 +407,11 @@ <h2><a href="../lists/docs-lists.html">Listview</a></h2>
</table>

<h2><a href="../lists/docs-lists.html">Listview item</a></h2>
<p>LI within a listview</p>
<p><code style="font-weight:normal;">LI</code> within a listview</p>
<table>
<tr>
<th>data-filtertext</th>
<td>string (filter by this value instead of inner text)</td>
<td>string - Filter by this value instead of inner text</td>
</tr>
<tr>
<th>data-icon</th>
Expand All @@ -423,13 +423,13 @@ <h2><a href="../lists/docs-lists.html">Listview item</a></h2>
</tr>
<tr>
<th>data-theme</th>
<td>swatch letter (a-z) - can also be set on individual LIs</td>
<td>swatch letter (a-z)</td>
</tr>
</table>
<p>The <code>data-icon</code> attribute is only applicable for a listview item, if it contains a link.</p>

<h2><a href="../toolbars/docs-navbar.html">Navbar</a></h2>
<p>A number of LIs wrapped in a container with <code>data-role="navbar"</code></p>
<p>A number of <code style="font-weight:normal;">LI</code>s wrapped in a container with <code>data-role="navbar"</code></p>
<table>
<tr>
<th>data-iconpos</th>
Expand All @@ -444,7 +444,7 @@ <h2><a href="../pages/page-anatomy.html">Page</a></h2>
<table>
<tr>
<th>data-add-back-btn</th>
<td>true | <strong>false</strong> (auto add back button, header only)</td>
<td>true | <strong>false</strong> - Auto add back button, header only</td>
</tr>
<tr>
<th>data-back-btn-text</th>
Expand All @@ -456,31 +456,31 @@ <h2><a href="../pages/page-anatomy.html">Page</a></h2>
</tr>
<tr>
<th>data-close-btn-text</th>
<td>string (text for the close button, dialog only)</td>
<td>string - Text for the close button, dialog only</td>
</tr>
<tr>
<th>data-dom-cache</th>
<td>true | <strong>false</strong></td>
</tr>
<tr>
<th>data-fullscreen</th>
<td>true (used in conjunction with fixed toolbars) <p class="ui-bar-e">Deprecated in 1.1 - use on header and footer instead.</p></td>
<td>true | <strong>false</strong> - Used in conjunction with fixed toolbars <p class="ui-bar-e">Deprecated in 1.1 - use on header and footer instead.</p></td>
</tr>
<tr>
<th>data-overlay-theme</th>
<td>swatch letter (a-z) - overlay theme when the page is opened in a dialog</td>
<td>swatch letter (a-z) - Overlay theme when the page is opened in a dialog</td>
</tr>
<tr>
<th>data-theme</th>
<td>swatch letter (a-z)</td>
<td>swatch letter (a-z) - Default "c"</td>
</tr>
<tr>
<th>data-title</th>
<td>string (title used when page is shown)</td>
<td>string - Title used when page is shown</td>
</tr>
<tr>
<th>data-url</th>
<td>url (value for updating the URL, instead of the url used to request the page)</td>
<td>url - Value for updating the URL, instead of the url used to request the page</td>
</tr>
</table>

Expand All @@ -493,19 +493,15 @@ <h2><a href="../pages/popup/">Popup</a></h2>
</tr>
<tr>
<th>data-overlay-theme</th>
<td>swatch letter (a-z) - default null: transparent background</td>
<td>swatch letter (a-z) - Default "null" (transparent background)</td>
</tr>
<tr>
<th>data-shadow</th>
<td><strong>true</strong> | false</td>
</tr>
<tr>
<th>data-theme</th>
<td>swatch letter (a-z) - Added to the popup container. Default inherited, none sets the popup to transparent</td>
</tr>
<tr>
<th>data-transition</th>
<td><strong>none</strong> - the transition to be used when showing/hiding the popup</td>
<td>swatch letter (a-z) | none - Added to the popup container. Default inherited, "none" sets the popup to transparent</td>
</tr>
<tr>
<th>data-tolerance</th>
Expand All @@ -516,17 +512,17 @@ <h2><a href="../pages/popup/">Popup</a></h2>
<table>
<tr>
<th>data-position-to</th>
<td><strong>origin</strong> (centers the popup over the link that opens it)<br />
jQuery selector (centers the popup over the specified element)<br />
window (centers the popup in the window)</td>
<td><strong>origin</strong> - Centers the popup over the link that opens it<br />
jQuery selector - Centers the popup over the specified element<br />
window - Centers the popup in the window</td>
</tr>
<tr>
<th>data-rel</th>
<td>popup (for opening a popup)</td>
<td>popup - For opening a popup</td>
</tr>
<tr>
<th>data-transition</th>
<td>fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | <strong>none</strong></td>
<td>fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | <strong>none</strong> - The transition to be used when showing/hiding the popup</td>
</tr>
</table>

Expand All @@ -539,7 +535,7 @@ <h2><a href="../forms/radiobuttons/">Radio button</a></h2>
</tr>
<tr>
<th>data-role</th>
<td>none (prevents auto-enhancement to use native control)</td>
<td>none - Prevents auto-enhancement to use native control</td>
</tr>
<tr>
<th>data-theme</th>
Expand Down Expand Up @@ -573,15 +569,15 @@ <h2><a href="../forms/selects/">Select</a></h2>
</tr>
<tr>
<th>data-overlay-theme</th>
<td>swatch letter (a-z) - overlay theme for non-native selects</td>
<td>swatch letter (a-z) - Overlay theme for non-native selects</td>
</tr>
<tr>
<th>data-placeholder</th>
<td>true | false - Add to the Option</td>
<td>true | <strong>false</strong> - Can be set on <code style="font-weight:normal;">option</code> element of a non-native select</td>
</tr>
<tr>
<th>data-role</th>
<td>none (prevents auto-enhancement to use native control)</td>
<td>none - Prevents auto-enhancement to use native control</td>
</tr>
<tr>
<th>data-theme</th>
Expand All @@ -603,7 +599,7 @@ <h2><a href="../forms/slider/">Slider</a></h2>
</tr>
<tr>
<th>data-role</th>
<td>none (prevents auto-enhancement to use native control)</td>
<td>none - Prevents auto-enhancement to use native control</td>
</tr>
<tr>
<th>data-theme</th>
Expand All @@ -624,7 +620,7 @@ <h2><a href="../forms/textinputs/">Text input &amp; Textarea</a></h2>
</tr>
<tr>
<th>data-role</th>
<td>none (prevents auto-enhancement to use native control)</td>
<td>none - Prevents auto-enhancement to use native control</td>
</tr>
<tr>
<th>data-theme</th>
Expand Down

0 comments on commit e322835

Please sign in to comment.