Skip to content

Commit

Permalink
Docs: consistency in how we write "data attributes"
Browse files Browse the repository at this point in the history
  • Loading branch information
jaspermdegroot committed Jul 25, 2012
1 parent e322835 commit e3cf255
Show file tree
Hide file tree
Showing 5 changed files with 5 additions and 5 deletions.
2 changes: 1 addition & 1 deletion docs/api/events-nav.html
Original file line number Diff line number Diff line change
Expand Up @@ -483,7 +483,7 @@ <h2>Page initialization events</h2>
alert( 'This page was just inserted into the dom!' );
});
</code></pre>
<p>Note that by binding to <code>pagebeforecreate</code>, you can manipulate markup before jQuery Mobile's default widgets are auto-initialized. For example, say you want to add data-attributes via JavaScript instead of in the HTML source, this is the event you'd use.</p>
<p>Note that by binding to <code>pagebeforecreate</code>, you can manipulate markup before jQuery Mobile's default widgets are auto-initialized. For example, say you want to add data attributes via JavaScript instead of in the HTML source, this is the event you'd use.</p>

<pre><code>
$( '#aboutPage' ).live( 'pagebeforecreate',function(event){
Expand Down
2 changes: 1 addition & 1 deletion docs/api/events.html
Original file line number Diff line number Diff line change
Expand Up @@ -443,7 +443,7 @@ <h2>Page initialization events</h2>
alert( 'This page was just inserted into the dom!' );
});
</code></pre>
<p>Note that by binding to <code>pagebeforecreate</code>, you can manipulate markup before jQuery Mobile's default widgets are auto-initialized. For example, say you want to add data-attributes via JavaScript instead of in the HTML source, this is the event you'd use.</p>
<p>Note that by binding to <code>pagebeforecreate</code>, you can manipulate markup before jQuery Mobile's default widgets are auto-initialized. For example, say you want to add data attributes via JavaScript instead of in the HTML source, this is the event you'd use.</p>

<pre><code>
$( '#aboutPage' ).live( 'pagebeforecreate',function(event){
Expand Down
2 changes: 1 addition & 1 deletion docs/api/globalconfig.html
Original file line number Diff line number Diff line change
Expand Up @@ -134,7 +134,7 @@ <h2>Configurable options</h2>
<dd>Minimum scroll distance that will be remembered when returning to a page.</dd>

<dt><code>ns</code> <em>string</em>, default: ""</dt>
<dd>The namespace used in data- attributes (e.g., data-role). Can be set to any string, including a blank string which is the default. When using, it's clearest if you include a trailing dash, such as "mynamespace-" which maps to <code>data-mynamespace-foo="..."</code>.
<dd>The namespace used in data attributes (e.g., data-role). Can be set to any string, including a blank string which is the default. When using, it's clearest if you include a trailing dash, such as "mynamespace-" which maps to <code>data-mynamespace-foo="..."</code>.
<p>If you use data- namespacing, you will need to update/override one selector in the theme CSS. The following data selectors should incorporate the namespace you're using:
<pre><code>
.ui-mobile [data-<strong>mynamespace-</strong>role=page], .ui-mobile [data-<strong>mynamespace-</strong>role=dialog], .ui-page { ...
Expand Down
2 changes: 1 addition & 1 deletion docs/lists/docs-lists.html
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,7 @@ <h2>Autodividers</h2>


<h2>Search filter</h2>
<p>jQuery Mobile provides a very easy way to filter a list with a simple client-side search feature. To make a list filterable, simply add the <code>data-filter="true"</code> attribute to the list. The framework will then append a search box above the list and add the behavior to filter out list items that don't contain the current search string as the user types. The input's placeholder text defaults to "Filter items...". To configure the placeholder text in the search input, you can either <a href="../api/globalconfig.html">bind to the <code>mobileinit</code> event</a> and set the <code>$.mobile.listview.prototype.options.filterPlaceholder</code> option to a string of your choosing, or use the data-attribute <code>data-filter-placeholder</code> on your listview. By default the search box will inherit its theme from its parent. The search box theme can be configured using the data-attribute <code>data-filter-theme</code> on your listview.</p>
<p>jQuery Mobile provides a very easy way to filter a list with a simple client-side search feature. To make a list filterable, simply add the <code>data-filter="true"</code> attribute to the list. The framework will then append a search box above the list and add the behavior to filter out list items that don't contain the current search string as the user types. The input's placeholder text defaults to "Filter items...". To configure the placeholder text in the search input, you can either <a href="../api/globalconfig.html">bind to the <code>mobileinit</code> event</a> and set the <code>$.mobile.listview.prototype.options.filterPlaceholder</code> option to a string of your choosing, or use the data attribute <code>data-filter-placeholder</code> on your listview. By default the search box will inherit its theme from its parent. The search box theme can be configured using the data attribute <code>data-filter-theme</code> on your listview.</p>

<a href="lists-search.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Search filter example</a>

Expand Down
2 changes: 1 addition & 1 deletion docs/toolbars/bars-fixed-options.html
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ <h2>Fixed toolbars</h2>
<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. <a href="bars-fullscreen.html">This page</a> demonstrates toolbars that use the fullscreen option. This option is also exposed as a data attribute: <code>data-fullscreen=&quot;true&quot;</code></p>
<pre><code>$("[data-role=header]").fixedtoolbar(<strong>{ fullscreen: true }</strong>);</code></pre>

<p class="ui-body ui-body-e"><strong>Note:</strong> While the data-attribute syntax for this option has not changed, it is now only supported on the toolbar element itself, and not the page element. </p>
<p class="ui-body ui-body-e"><strong>Note:</strong> While the data attribute syntax for this option has not changed, it is now only supported on the toolbar element itself, and not the page element. </p>

</dd>

Expand Down

0 comments on commit e3cf255

Please sign in to comment.