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

added docs for split button theming

Browse source
This commit is contained in:
Todd Parker 2010-10-12 16:38:07 -04:00
parent a8e7ce9886
commit 0be3f7c539
1 changed files with 37 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -73,6 +73,43 @@
<li><a href="index.html">Sent</a> <span class="ui-li-count">328</span></li>
</ul>
<h2>Theming split buttons</h2>
<p>For split lists which a second button, the framework default to "b" for the theme swatch (blue in the default theme) Here is a default split list:</p>
<ul data-role="listview" data-inset="true" data-splittheme="a">
<li data-role="list-divider">Divider</li>
<li><a href="index.html">Inbox</a> <span class="ui-li-count">12</span> <a href="index.html">Purchase album</a></li>
<li><a href="index.html">Outbox</a> <span class="ui-li-count">0</span> <a href="index.html">Purchase album</a></li>
<li><a href="index.html">Sent</a> <span class="ui-li-count">328</span> <a href="index.html">Purchase album</a></li>
</ul>
<code>
&lt;ul data-role=&quot;listview&quot; data-inset=&quot;true&quot; data-splittheme=&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 specifying 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.</p>
<ul data-role="listview" data-inset="true" data-splittheme="a">
<li data-role="list-divider">Divider</li>
<li><a href="index.html">Inbox</a> <span class="ui-li-count">12</span> <a href="index.html">Purchase album</a></li>
<li><a href="index.html">Outbox</a> <span class="ui-li-count">0</span> <a href="index.html">Purchase album</a></li>
<li><a href="index.html">Sent</a> <span class="ui-li-count">328</span> <a href="index.html" data-theme="e">Purchase album</a></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.</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;
</code>
<ul data-role="listview" data-inset="true" data-splittheme="a" data-spliticon="plus">
<li data-role="list-divider">Divider</li>
<li><a href="index.html">Inbox</a> <span class="ui-li-count">12</span> <a href="index.html">Purchase album</a></li>
<li><a href="index.html">Outbox</a> <span class="ui-li-count">0</span> <a href="index.html">Purchase album</a></li>
<li><a href="index.html">Sent</a> <span class="ui-li-count">328</span> <a href="index.html"data-theme="e" data-icon="delete">Purchase album</a></li>
</ul>
<h2>Examples of all basic list swatches</h2>
<p><strong>A</strong> swatch</p>