mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-03-20 16:00:31 +00:00
161f5e6ae3
This makes our include model match the include model on the CDN, and allows devs to make use of mobileinit for debugging some of the samples since that must be set up after jquery.js, but before jquery-mobile.
200 lines
8.7 KiB
HTML
Executable file
200 lines
8.7 KiB
HTML
Executable file
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>jQuery Mobile Docs - Lists</title>
|
|
<link rel="stylesheet" href="../../themes/default/" />
|
|
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
|
|
<script type="text/javascript" src="../../js/jquery.js"></script>
|
|
<script type="text/javascript" src="../../js/"></script>
|
|
<script type="text/javascript" src="../docs/docs.js"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<div data-role="page">
|
|
|
|
<div data-role="header">
|
|
<h1>Theming lists</h1>
|
|
</div><!-- /header -->
|
|
|
|
<div data-role="content" class="ui-body">
|
|
|
|
|
|
<p>All the standard button swatches can be applied to lists. The framework assigns a default list theme swatch of "c" (silver in the default theme) and swatch "b" (blue in default theme) for dividers. Below is a default themed list.</p>
|
|
|
|
<code>
|
|
<ul data-role="listview" data-inset="true">
|
|
</code>
|
|
<ul data-role="listview" data-inset="true">
|
|
<li data-role="list-divider">Divider</li>
|
|
<li><a href="index.html">Inbox</a> <span class="ui-li-count">12</span></li>
|
|
<li><a href="index.html">Outbox</a> <span class="ui-li-count">0</span></li>
|
|
<li><a href="index.html">Sent</a> <span class="ui-li-count">328</span></li>
|
|
</ul>
|
|
|
|
<h2>Theming list items</h2>
|
|
<p>The list item color scheme can be changed to any button color theme swatch by adding the <code>data-theme</code> attribute to the list, and setting the letter theme swatch. Here is the same list above with the "a" swatch applied. </p>
|
|
|
|
<code>
|
|
<ul data-role="listview" data-inset="true" data-theme="d">
|
|
</code>
|
|
|
|
<ul data-role="listview" data-inset="true" data-theme="d">
|
|
<li data-role="list-divider">Divider</li>
|
|
<li><a href="index.html">Inbox</a> <span class="ui-li-count">12</span></li>
|
|
<li><a href="index.html">Outbox</a> <span class="ui-li-count">0</span></li>
|
|
<li><a href="index.html">Sent</a> <span class="ui-li-count">328</span></li>
|
|
</ul>
|
|
|
|
<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 "d" set on the dividers.</p>
|
|
|
|
<code>
|
|
<ul data-role="listview" data-inset="true" data-theme="d" data-dividertheme="c">
|
|
</code>
|
|
|
|
<ul data-role="listview" data-inset="true" data-theme="d" data-dividertheme="c">
|
|
<li data-role="list-divider">Divider</li>
|
|
<li><a href="index.html">Inbox</a> <span class="ui-li-count">12</span></li>
|
|
<li><a href="index.html">Outbox</a> <span class="ui-li-count">0</span></li>
|
|
<li><a href="index.html">Sent</a> <span class="ui-li-count">328</span></li>
|
|
</ul>
|
|
|
|
<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 "e" set on the dividers.</p>
|
|
|
|
<code>
|
|
<ul data-role="listview" data-inset="true" data-theme="a" data-dividertheme="d" data-counttheme="e">
|
|
</code>
|
|
|
|
<ul data-role="listview" data-inset="true" data-theme="a" data-dividertheme="d" data-counttheme="e">
|
|
<li data-role="list-divider">Divider</li>
|
|
<li><a href="index.html">Inbox</a> <span class="ui-li-count">12</span></li>
|
|
<li><a href="index.html">Outbox</a> <span class="ui-li-count">0</span></li>
|
|
<li><a href="index.html">Sent</a> <span class="ui-li-count">328</span></li>
|
|
</ul>
|
|
|
|
<h2>Theming icons</h2>
|
|
|
|
<p>The default icon for each list item is <code>arrow-r</code>. To override this, set the <code>data-icon</code> attribute on the desired list item to the <a href="../buttons/buttons-icons.html">name of a standard icon</a>. To prevent icons from appearing altogether, set the <code>data-icon</code> attribute to "false".</p>
|
|
<pre>
|
|
<code>
|
|
<li data-icon="info"><a href="#">Notices</a></li>
|
|
<li data-icon="alert"><a href="#">Alerts</a></li>
|
|
<li data-icon="false"><a href="#">All Notifications</a></li>
|
|
</code>
|
|
</pre>
|
|
<ul data-role="listview" data-inset="true" data-icon="false">
|
|
<li data-role="list-divider">Divider</li>
|
|
<li data-icon="info"><a href="index.html">Notices</a></li>
|
|
<li data-icon="alert"><a href="index.html">Alerts</a></li>
|
|
<li data-icon="false"><a href="index.html">All Notifications</a></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">
|
|
<li>
|
|
<img src="images/album-bb.jpg" />
|
|
<h3><a href="index.html">Broken Bells</a></h3>
|
|
<p>Broken Bells</p>
|
|
<a href="index.html">Purchase album</a>
|
|
</li>
|
|
<li>
|
|
<img src="images/album-hc.jpg" />
|
|
<h3><a href="index.html">Warning</a></h3>
|
|
<p>Hot Chip</p>
|
|
<a href="index.html">Purchase album</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<code>
|
|
<ul data-role="listview" data-inset="true" data-splittheme="a">
|
|
</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">
|
|
<li>
|
|
<img src="images/album-bb.jpg" />
|
|
<h3><a href="index.html">Broken Bells</a></h3>
|
|
<p>Broken Bells</p>
|
|
<a href="index.html">Purchase album</a>
|
|
</li>
|
|
<li>
|
|
<img src="images/album-hc.jpg" />
|
|
<h3><a href="index.html">Warning</a></h3>
|
|
<p>Hot Chip</p>
|
|
<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 (see second list item).</p>
|
|
|
|
<code>
|
|
<ul data-role="listview" data-inset="true" data-splittheme="a" data-spliticon="plus">
|
|
</code>
|
|
|
|
<ul data-role="listview" data-inset="true" data-splittheme="a" data-spliticon="plus">
|
|
<li>
|
|
<img src="images/album-bb.jpg" />
|
|
<h3><a href="index.html">Broken Bells</a></h3>
|
|
<p>Broken Bells</p>
|
|
<a href="index.html">Purchase album</a>
|
|
</li>
|
|
<li>
|
|
<img src="images/album-hc.jpg" />
|
|
<h3><a href="index.html">Warning</a></h3>
|
|
<p>Hot Chip</p>
|
|
<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>
|
|
<ul data-role="listview" data-inset="true" data-theme="a">
|
|
<li><a href="index.html">Inbox</a> <span class="ui-li-count">12</span></li>
|
|
<li><a href="index.html">Outbox</a> <span class="ui-li-count">0</span></li>
|
|
<li><a href="index.html">Trash</a> <span class="ui-li-count">62</span></li>
|
|
</ul>
|
|
|
|
<p><strong>B</strong> swatch</p>
|
|
<ul data-role="listview" data-inset="true" data-theme="b">
|
|
<li><a href="index.html">Inbox</a> <span class="ui-li-count">12</span></li>
|
|
<li><a href="index.html">Outbox</a> <span class="ui-li-count">0</span></li>
|
|
<li><a href="index.html">Trash</a> <span class="ui-li-count">62</span></li>
|
|
</ul>
|
|
|
|
<p><strong>C</strong> swatch</p>
|
|
<ul data-role="listview" data-inset="true" data-theme="c">
|
|
<li><a href="index.html">Inbox</a> <span class="ui-li-count">12</span></li>
|
|
<li><a href="index.html">Outbox</a> <span class="ui-li-count">0</span></li>
|
|
<li><a href="index.html">Trash</a> <span class="ui-li-count">62</span></li>
|
|
</ul>
|
|
|
|
<p><strong>D</strong> swatch</p>
|
|
<ul data-role="listview" data-inset="true" data-theme="d">
|
|
<li><a href="index.html">Inbox</a> <span class="ui-li-count">12</span></li>
|
|
<li><a href="index.html">Outbox</a> <span class="ui-li-count">0</span></li>
|
|
<li><a href="index.html">Trash</a> <span class="ui-li-count">62</span></li>
|
|
</ul>
|
|
|
|
<p><strong>E</strong> swatch</p>
|
|
<ul data-role="listview" data-inset="true" data-theme="e">
|
|
<li><a href="index.html">Inbox</a> <span class="ui-li-count">12</span></li>
|
|
<li><a href="index.html">Outbox</a> <span class="ui-li-count">0</span></li>
|
|
<li><a href="index.html">Trash</a> <span class="ui-li-count">62</span></li>
|
|
</ul>
|
|
|
|
|
|
|
|
</div><!-- /content -->
|
|
</div><!-- /page -->
|
|
|
|
</body>
|
|
</html>
|