Skip to content

Commit 43ea8df

Browse files
toddparkertoddparker
committed
Fixed missing hyphens in listview theming data- attribues and re-coded some mangled list code examples. Everything is working right again. Closes jquery-archive#992 
1 parent e9e7a78 commit 43ea8df

File tree

1 file changed

+36
-32
lines changed

1 file changed

+36
-32
lines changed

‎docs/lists/lists-themes.html

Lines changed: 36 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -60,13 +60,13 @@ <h2>Theming list items</h2>
6060

6161
<h2>Theming dividers</h2>
6262

63-
<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>
63+
<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>
6464

6565
<code>
66-
&lt;ul data-role=&quot;listview&quot; data-inset=&quot;true&quot; data-theme=&quot;d&quot; data-dividertheme=&quot;c&quot;&gt;
66+
&lt;ul data-role=&quot;listview&quot; data-inset=&quot;true&quot; data-theme=&quot;d&quot; data-divider-theme=&quot;e&quot;&gt;
6767
</code>
6868

69-
<ul data-role="listview" data-inset="true" data-theme="d" data-dividertheme="c">
69+
<ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="e">
7070
<li data-role="list-divider">Divider</li>
7171
<li><a href="index.html">Inbox <span class="ui-li-count">12</span></a></li>
7272
<li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
@@ -75,13 +75,13 @@ <h2>Theming dividers</h2>
7575

7676
<h2>Theming count bubbles</h2>
7777

78-
<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>
78+
<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>
7979

8080
<code>
81-
&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;
81+
&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;
8282
</code>
8383

84-
<ul data-role="listview" data-inset="true" data-theme="a" data-dividertheme="d" data-counttheme="e">
84+
<ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="e" data-count-theme="b">
8585
<li data-role="list-divider">Divider</li>
8686
<li><a href="index.html">Inbox <span class="ui-li-count">12</span></a></li>
8787
<li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
@@ -95,15 +95,16 @@ <h2>Theming icons</h2>
9595
<code>
9696
&lt;li data-icon=&quot;info&quot;&gt;&lt;a href="#"&gt;Notices&lt;/a&gt;&lt;/li&gt;
9797
&lt;li data-icon=&quot;alert&quot;&gt;&lt;a href="#"&gt;Alerts&lt;/a&gt;&lt;/li&gt;
98-
&lt;li data-icon=&quot;false&quot;&gt;&lt;a href="#"&gt;All Notifications&lt;/a&gt;&lt;/li&gt;
98+
&lt;li data-icon=&quot;false&quot;&gt;&lt;a href="#"&gt;No icon&lt;/a&gt;&lt;/li&gt;
9999
</code>
100100
</pre>
101-
<ul data-role="listview" data-inset="true" data-icon="false">
101+
<ul data-role="listview" data-inset="true">
102102
<li data-role="list-divider">Divider</li>
103-
<li data-icon="info">Notices</a></a></li>
104-
<li data-icon="alert">Alerts</a></a></li>
105-
<li data-icon="false">All Notifications</a></a></li>
103+
<li data-icon="info"><a href="#">Notices</a></li>
104+
<li data-icon="alert"><a href="#">Alerts</a></li>
105+
<li data-icon="false"><a href="#">No icon</a></li>
106106
</ul>
107+
107108

108109
<h2>Theming split buttons</h2>
109110

@@ -125,14 +126,15 @@ <h3>Warning</h3>
125126
</ul>
126127

127128
<code>
128-
&lt;ul data-role=&quot;listview&quot; data-inset=&quot;true&quot; data-splittheme=&quot;a&quot;&gt;
129+
&lt;ul data-role=&quot;listview&quot; data-inset=&quot;true&quot; data-split-theme=&quot;a&quot;&gt;
129130
</code>
130-
<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>
131-
<ul data-role="listview" data-inset="true" data-splittheme="a">
131+
<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>
132+
<ul data-role="listview" data-inset="true" data-split-theme="a">
132133
<li><a href="index.html">
133134
<img src="images/album-bb.jpg" />
134135
<h3>Broken Bells</h3>
135-
<p>Broken Bells</p></a>
136+
<p>Broken Bells</p>
137+
</a>
136138
<a href="index.html">Purchase album</a>
137139
</li>
138140
<li><a href="index.html">
@@ -144,27 +146,29 @@ <h3>Warning</h3>
144146
</li>
145147
</ul>
146148

147-
<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>
149+
<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>
148150

149151
<code>
150-
&lt;ul data-role=&quot;listview&quot; data-inset=&quot;true&quot; data-splittheme=&quot;a&quot; data-spliticon=&quot;plus&quot;&gt;
152+
&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;
151153
</code>
152154

153-
<ul data-role="listview" data-inset="true" data-splittheme="a" data-spliticon="plus">
154-
<li><a href="index.html">
155-
<img src="images/album-bb.jpg" />
156-
<h3>Broken Bells</h3>
157-
<p>Broken Bells</p></a>
158-
<a href="index.html" data-theme="e" data-icon="delete">Purchase album</a>
159-
</li>
160-
<li><a href="index.html">
161-
<img src="images/album-hc.jpg" />
162-
<h3>Warning</h3>
163-
<p>Hot Chip</p></a>
164-
<a href="index.html" data-theme="e" data-icon="delete">Purchase album</a>
165-
</li>
166-
</ul>
167-
155+
<ul data-role="listview" data-inset="true" data-split-theme="d" data-split-icon="delete" >
156+
<li><a href="index.html">
157+
<img src="images/album-bb.jpg" />
158+
<h3>Broken Bells</h3>
159+
<p>Broken Bells</p>
160+
</a>
161+
<a href="index.html">Purchase album</a>
162+
</li>
163+
<li><a href="index.html">
164+
<img src="images/album-hc.jpg" />
165+
<h3>Warning</h3>
166+
<p>Hot Chip</p>
167+
</a>
168+
<a href="index.html">Purchase album</a>
169+
</li>
170+
</ul>
171+
168172

169173

170174
<h2>Examples of all basic list swatches</h2>

0 commit comments

Comments
 (0)