Hopiu/jquery-mobile
1
0
Fork 0
mirror of https://github.com/Hopiu/jquery-mobile.git synced 2026-05-14 09:33:09 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fixed missing hyphens in listview theming data- attribues and re-coded some mangled list code examples. Everything is working right again. Closes #992

Browse source
This commit is contained in:
toddparker 2011-03-30 23:15:27 -04:00
parent e9e7a78e99
commit 43ea8df112
1 changed files with 36 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

68
docs/lists/lists-themes.html
View file

@ -60,13 +60,13 @@
<h2>Theming dividers</h2>
<p>The theme for <strong>list dividers</strong> can be set by adding the <code>data-dividertheme</code> to the list and specifying a swatch letter. Here is an example of the same list above with swatch &quot;d&quot; set on the dividers.</p>
<p>The theme for <strong>list dividers</strong> can be set by adding the <code>data-divider-theme</code> to the list and specifying a swatch letter. Here is an example of the same list above with swatch &quot;d&quot; set on the dividers.</p>
<code>
&lt;ul data-role=&quot;listview&quot; data-inset=&quot;true&quot; data-theme=&quot;d&quot; data-dividertheme=&quot;c&quot;&gt;
&lt;ul data-role=&quot;listview&quot; data-inset=&quot;true&quot; data-theme=&quot;d&quot; data-divider-theme=&quot;e&quot;&gt;
</code>
<ul data-role="listview" data-inset="true" data-theme="d" data-dividertheme="c">
<ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="e">
<li data-role="list-divider">Divider</li>
<li><a href="index.html">Inbox <span class="ui-li-count">12</span></a></li>
<li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
@ -75,13 +75,13 @@
<h2>Theming count bubbles</h2>
<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 &quot;e&quot; set on the dividers.</p>
<p>The theme for <strong>count bubbles</strong> can be set by adding the <code>data-count-theme</code> to the list and specifying a swatch letter. Here is an example with swatch &quot;e&quot; set on the dividers.</p>
<code>
&lt;ul data-role=&quot;listview&quot; data-inset=&quot;true&quot; data-theme=&quot;a&quot; data-dividertheme=&quot;d&quot; data-counttheme=&quot;e&quot;&gt;
&lt;ul data-role=&quot;listview&quot; data-inset=&quot;true&quot; data-theme=&quot;d&quot; data-divider-theme=&quot;e&quot; data-count-theme=&quot;b&quot;&gt;
</code>
<ul data-role="listview" data-inset="true" data-theme="a" data-dividertheme="d" data-counttheme="e">
<ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="e" data-count-theme="b">
<li data-role="list-divider">Divider</li>
<li><a href="index.html">Inbox <span class="ui-li-count">12</span></a></li>
<li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
@ -95,15 +95,16 @@
<code>
&lt;li data-icon=&quot;info&quot;&gt;&lt;a href="#"&gt;Notices&lt;/a&gt;&lt;/li&gt;
&lt;li data-icon=&quot;alert&quot;&gt;&lt;a href="#"&gt;Alerts&lt;/a&gt;&lt;/li&gt;
&lt;li data-icon=&quot;false&quot;&gt;&lt;a href="#"&gt;All Notifications&lt;/a&gt;&lt;/li&gt;
&lt;li data-icon=&quot;false&quot;&gt;&lt;a href="#"&gt;No icon&lt;/a&gt;&lt;/li&gt;
</code>
</pre>
<ul data-role="listview" data-inset="true" data-icon="false">
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">Divider</li>
<li data-icon="info">Notices</a></a></li>
<li data-icon="alert">Alerts</a></a></li>
<li data-icon="false">All Notifications</a></a></li>
<li data-icon="info"><a href="#">Notices</a></li>
<li data-icon="alert"><a href="#">Alerts</a></li>
<li data-icon="false"><a href="#">No icon</a></li>
</ul>
<h2>Theming split buttons</h2>
@ -125,14 +126,15 @@
</ul>
<code>
&lt;ul data-role=&quot;listview&quot; data-inset=&quot;true&quot; data-splittheme=&quot;a&quot;&gt;
&lt;ul data-role=&quot;listview&quot; data-inset=&quot;true&quot; data-split-theme=&quot;a&quot;&gt;
</code>
<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-theme</code> attribute to specific links (see second list item).</p>
<ul data-role="listview" data-inset="true" data-splittheme="a">
<p>To specify the color swatch for the icon button on the right, add the <code>data-split-theme</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-theme</code> attribute to specific links (see second list item).</p>
<ul data-role="listview" data-inset="true" data-split-theme="a">
<li><a href="index.html">
<img src="images/album-bb.jpg" />
<h3>Broken Bells</h3>
<p>Broken Bells</p></a>
<p>Broken Bells</p>
</a>
<a href="index.html">Purchase album</a>
</li>
<li><a href="index.html">
@ -144,27 +146,29 @@
</li>
</ul>
<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 <a href="../buttons/buttons-icons.html">standard icon</a>. This attribute can also be added to individual split inside list items by adding a <code> data-icon</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-split-icon</code> to the list and specifying a <a href="../buttons/buttons-icons.html">standard icon</a>. This attribute can also be added to individual split inside list items by adding a <code> data-icon</code> attribute to specific links (see second list item).</p>
<code>
&lt;ul data-role=&quot;listview&quot; data-inset=&quot;true&quot; data-splittheme=&quot;a&quot; data-spliticon=&quot;plus&quot;&gt;
&lt;ul data-role=&quot;listview&quot; data-inset=&quot;true&quot; data-split-theme=&quot;d&quot; data-split-icon=&quot;delete&quot;&gt;
</code>
<ul data-role="listview" data-inset="true" data-splittheme="a" data-spliticon="plus">
<li><a href="index.html">
<img src="images/album-bb.jpg" />
<h3>Broken Bells</h3>
<p>Broken Bells</p></a>
<a href="index.html" data-theme="e" data-icon="delete">Purchase album</a>
</li>
<li><a href="index.html">
<img src="images/album-hc.jpg" />
<h3>Warning</h3>
<p>Hot Chip</p></a>
<a href="index.html" data-theme="e" data-icon="delete">Purchase album</a>
</li>
</ul>
<ul data-role="listview" data-inset="true" data-split-theme="d" data-split-icon="delete" >
<li><a href="index.html">
<img src="images/album-bb.jpg" />
<h3>Broken Bells</h3>
<p>Broken Bells</p>
</a>
<a href="index.html">Purchase album</a>
</li>
<li><a href="index.html">
<img src="images/album-hc.jpg" />
<h3>Warning</h3>
<p>Hot Chip</p>
</a>
<a href="index.html">Purchase album</a>
</li>
</ul>
<h2>Examples of all basic list swatches</h2>