<commit_before><!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Listview - jQuery Mobile Demos</title>
	<link rel="shortcut icon" href="../favicon.ico">
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
	<link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css">
	<link rel="stylesheet" href="../_assets/css/jqm-demos.css">
	<script src="../../js/jquery.js"></script>
	<script src="../_assets/js/"></script>
	<script src="../../js/"></script>
	<style id="custom-icon">
        .ui-icon-custom:after {
			background-image: url("../_assets/img/glyphish-icons/21-skull.png");
			background-position: 3px 3px;
			background-size: 70%;
		}
    </style>
</head>
<body>
<div data-role="page" class="jqm-demos" data-quicklinks="true">

	<div data-role="header" class="jqm-header">
		<h2><a href="../" title="jQuery Mobile Demos home"><img src="../_assets/img/jquery-logo.png" alt="jQuery Mobile"></a></h2>
		<p><span class="jqm-version"></span> Demos</p>
		<a href="#" class="jqm-navmenu-link ui-btn ui-btn-icon-notext ui-corner-all ui-icon-bars ui-nodisc-icon ui-alt-icon ui-btn-left">Menu</a>
		<a href="#" class="jqm-search-link ui-btn ui-btn-icon-notext ui-corner-all ui-icon-search ui-nodisc-icon ui-alt-icon ui-btn-right">Search</a>
	</div><!-- /header -->

	<div role="main" class="ui-content jqm-content">

		<h1>Listview</h1>

		<p>A listview is coded as a simple unordered list (ul) or ordered list (ol) with a <code> data-role="listview"</code> attribute and has a wide range of features.
			</p>

		<h2>Read-only, unordered</h2>
		<p>A listview is a simple unordered list containing linked list items with a <code> data-role="listview"</code> attribute.</p>
			<div data-demo-html="true">
				<ul data-role="listview">
					<li>Acura</li>
					<li>Audi</li>
					<li>BMW</li>
					<li>Cadillac</li>
					<li>Ferrari</li>
				</ul>
			</div><!--/demo-html -->

		<h2>Read-only, ordered</h2>
		<p>Lists can also be created from ordered lists (<code>ol</code>) which is useful when presenting items that are in a sequence such as search results or a movie queue.</p>
			<div data-demo-html="true">
				<ol data-role="listview">
					<li>Acura</li>
					<li>Audi</li>
					<li>BMW</li>
					<li>Cadillac</li>
					<li>Ferrari</li>
				</ol>
			</div><!--/demo-html -->

		<h2>Linked</h2>
		<p>List items with links are styled as button.
			<div data-demo-html="true">
				<ul data-role="listview">
					<li><a href="#">Acura</a></li>
					<li><a href="#">Audi</a></li>
					<li><a href="#">BMW</a></li>
					<li><a href="#">Cadillac</a></li>
					<li><a href="#">Ferrari</a></li>
				</ul>
			</div><!--/demo-html -->

		<h2>Inset</h2>
		<p>Adding the <code> data-inset="true"</code> attribute to the list (ul or ol), applies the inset appearance which is useful for mixing a listview with other content on a page.</p>
			<div data-demo-html="true">
				<ul data-role="listview" data-inset="true">
					<li><a href="#">Acura</a></li>
					<li><a href="#">Audi</a></li>
					<li><a href="#">BMW</a></li>
					<li><a href="#">Cadillac</a></li>
					<li><a href="#">Ferrari</a></li>
				</ul>
			</div><!--/demo-html -->

		<h2>Filter</h2>
		<p>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, use the <code>data-filter-placeholder</code> attribute. 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>
			<div data-demo-html="true">
				<ul data-role="listview" data-filter="true" data-filter-placeholder="Search fruits..." data-inset="true">
					<li><a href="#">Apple</a></li>
					<li><a href="#">Banana</a></li>
					<li><a href="#">Cherry</a></li>
					<li><a href="#">Cranberry</a></li>
					<li><a href="#">Grape</a></li>
					<li><a href="#">Orange</a></li>
				</ul>
			</div><!--/demo-html -->

		<h2>Filter reveal</h2>
		<p>The filter reveal feature makes it easy to build a simple autocomplete with local data. When a filterable list has the <code>data-filter-reveal="true"</code> attribute, it will auto-hide all the list items when the search field is blank. The <code>data-filter-placeholder</code> attribute can be added to specify the placeholder text for the filter. If you need to search against a long list of values, we provide a way to create a filter with a <a href="../listview-autocomplete-remote/" data-ajax="false">remote data source</a>.</p>
			<div data-demo-html="true">
				<ul data-role="listview" data-filter="true" data-filter-reveal="true" data-filter-placeholder="Search fruits..." data-inset="true">
					<li><a href="#">Apple</a></li>
					<li><a href="#">Banana</a></li>
					<li><a href="#">Cherry</a></li>
					<li><a href="#">Cranberry</a></li>
					<li><a href="#">Grape</a></li>
					<li><a href="#">Orange</a></li>
				</ul>
			</div><!--/demo-html -->

		<h2>List dividers</h2>
		<p>List items can be turned into dividers to organize and group the list items. This is done by adding the <code> data-role="list-divider"</code> to any list item. These items are styled with the bar swatch "b" by default (blue in the default theme) but you can specify a theme for dividers by adding the <code>data-divider-theme</code> attribute to the list element (<code>ul</code> or <code>ol</code>) and specifying a theme swatch letter. You can override the divider-theme for a specific divider by adding the <code>data-theme</code> attribute to the list item.</p>

			<div data-demo-html="true">
				<ul data-role="listview" data-inset="true" data-divider-theme="a">
					<li data-role="list-divider">Mail</li>
					<li><a href="#">Inbox</a></li>
					<li><a href="#">Outbox</a></li>
					<li data-role="list-divider">Contacts</li>
					<li><a href="#">Friends</a></li>
					<li><a href="#">Work</a></li>
				</ul>
			</div><!--/demo-html -->

		<h2>Autodividers</h2>
		<p><p>A listview can be configured to automatically generate dividers for its items by adding a <code>data-autodividers="true"</code> attribute to any listview. By default, the text used to create dividers is the uppercased first letter of the item's text. Alternatively you can specify divider text by setting the <code>autodividersSelector</code> option on the listview programmatically. This feature is designed to work seamlessly with the filter.</p>
			<div data-demo-html="true">
				<ul data-role="listview" data-autodividers="true"  data-filter="true" data-inset="true">
					<li><a href="index.html"><NAME></a></li>
					<li><a href="index.html"><NAME></a></li>
					<li><a href="index.html"><NAME></a></li>
					<li><a href="index.html"><NAME></a></li>
					<li><a href="index.html"><NAME></a></li>
					<li><a href="index.html"><NAME></a></li>
					<li><a href="index.html"><NAME></a></li>
				</ul>
			</div><!--/demo-html -->

		<h2>Count bubbles</h2>
		<p>To add a count indicator to the right of the list item, wrap the number in an element with a class of <code>ui-li-count</code>. 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. </p>

			<div data-demo-html="true">
				<ul data-role="listview" data-count-theme="b" data-inset="true">
					<li><a href="#">Inbox <span class="ui-li-count">12</span></a></li>
					<li><a href="#">Outbox <span class="ui-li-count">0</span></a></li>
					<li><a href="#">Drafts <span class="ui-li-count">4</span></a></li>
					<li><a href="#">Sent <span class="ui-li-count">328</span></a></li>
					<li><a href="#">Trash <span class="ui-li-count">62</span></a></li>
				</ul>
			</div><!--/demo-html -->

		<h2>Icons: Standard</h2>

		<p>The default icon for each list item containing a link is <code>arrow-r</code>. To override this, set the <code>data-icon</code> attribute on the desired list item to the <a href="../icons/">name of a standard icon</a>. To prevent icons from appearing altogether, set the <code> data-icon</code> attribute to &quot;false&quot;. With a bit of custom styling it's also possible to use third party icons.</p>

			<div data-demo-html="true" data-demo-css="#custom-icon">
                <ul data-role="listview" data-inset="true">
                    <li data-icon="custom" id="skull"><a href="#">custom-icon</a></li>
                    <li data-icon="delete"><a href="#">data-icon="delete"</a></li>
                    <li data-icon="gear"><a href="#">data-icon="gear"</a></li>
                    <li data-icon="info"><a href="#">data-icon="info"</a></li>
                    <li data-icon="false"><a href="#">data-icon="false"</a></li>
                </ul>
			</div><!--/demo-html -->

		<h2>Icons: 16x16</h2>
		<p>To use standard 16x16 pixel icons in list items, add the class of <code>ui-li-icon</code> to the image element and insert 16x16 icons as <code>img</code> tags inside the list items.</p>
			<div data-demo-html="true"><commit_msg>Demos: Listview: Fixed a typo arrow-r for the default icon value.<commit_after><!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Listview - jQuery Mobile Demos</title>
	<link rel="shortcut icon" href="../favicon.ico">
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
	<link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css">
	<link rel="stylesheet" href="../_assets/css/jqm-demos.css">
	<script src="../../js/jquery.js"></script>
	<script src="../_assets/js/"></script>
	<script src="../../js/"></script>
	<style id="custom-icon">
        .ui-icon-custom:after {
			background-image: url("../_assets/img/glyphish-icons/21-skull.png");
			background-position: 3px 3px;
			background-size: 70%;
		}
    </style>
</head>
<body>
<div data-role="page" class="jqm-demos" data-quicklinks="true">

	<div data-role="header" class="jqm-header">
		<h2><a href="../" title="jQuery Mobile Demos home"><img src="../_assets/img/jquery-logo.png" alt="jQuery Mobile"></a></h2>
		<p><span class="jqm-version"></span> Demos</p>
		<a href="#" class="jqm-navmenu-link ui-btn ui-btn-icon-notext ui-corner-all ui-icon-bars ui-nodisc-icon ui-alt-icon ui-btn-left">Menu</a>
		<a href="#" class="jqm-search-link ui-btn ui-btn-icon-notext ui-corner-all ui-icon-search ui-nodisc-icon ui-alt-icon ui-btn-right">Search</a>
	</div><!-- /header -->

	<div role="main" class="ui-content jqm-content">

		<h1>Listview</h1>

		<p>A listview is coded as a simple unordered list (ul) or ordered list (ol) with a <code> data-role="listview"</code> attribute and has a wide range of features.
			</p>

		<h2>Read-only, unordered</h2>
		<p>A listview is a simple unordered list containing linked list items with a <code> data-role="listview"</code> attribute.</p>
			<div data-demo-html="true">
				<ul data-role="listview">
					<li>Acura</li>
					<li>Audi</li>
					<li>BMW</li>
					<li>Cadillac</li>
					<li>Ferrari</li>
				</ul>
			</div><!--/demo-html -->

		<h2>Read-only, ordered</h2>
		<p>Lists can also be created from ordered lists (<code>ol</code>) which is useful when presenting items that are in a sequence such as search results or a movie queue.</p>
			<div data-demo-html="true">
				<ol data-role="listview">
					<li>Acura</li>
					<li>Audi</li>
					<li>BMW</li>
					<li>Cadillac</li>
					<li>Ferrari</li>
				</ol>
			</div><!--/demo-html -->

		<h2>Linked</h2>
		<p>List items with links are styled as button.
			<div data-demo-html="true">
				<ul data-role="listview">
					<li><a href="#">Acura</a></li>
					<li><a href="#">Audi</a></li>
					<li><a href="#">BMW</a></li>
					<li><a href="#">Cadillac</a></li>
					<li><a href="#">Ferrari</a></li>
				</ul>
			</div><!--/demo-html -->

		<h2>Inset</h2>
		<p>Adding the <code> data-inset="true"</code> attribute to the list (ul or ol), applies the inset appearance which is useful for mixing a listview with other content on a page.</p>
			<div data-demo-html="true">
				<ul data-role="listview" data-inset="true">
					<li><a href="#">Acura</a></li>
					<li><a href="#">Audi</a></li>
					<li><a href="#">BMW</a></li>
					<li><a href="#">Cadillac</a></li>
					<li><a href="#">Ferrari</a></li>
				</ul>
			</div><!--/demo-html -->

		<h2>Filter</h2>
		<p>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, use the <code>data-filter-placeholder</code> attribute. 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>
			<div data-demo-html="true">
				<ul data-role="listview" data-filter="true" data-filter-placeholder="Search fruits..." data-inset="true">
					<li><a href="#">Apple</a></li>
					<li><a href="#">Banana</a></li>
					<li><a href="#">Cherry</a></li>
					<li><a href="#">Cranberry</a></li>
					<li><a href="#">Grape</a></li>
					<li><a href="#">Orange</a></li>
				</ul>
			</div><!--/demo-html -->

		<h2>Filter reveal</h2>
		<p>The filter reveal feature makes it easy to build a simple autocomplete with local data. When a filterable list has the <code>data-filter-reveal="true"</code> attribute, it will auto-hide all the list items when the search field is blank. The <code>data-filter-placeholder</code> attribute can be added to specify the placeholder text for the filter. If you need to search against a long list of values, we provide a way to create a filter with a <a href="../listview-autocomplete-remote/" data-ajax="false">remote data source</a>.</p>
			<div data-demo-html="true">
				<ul data-role="listview" data-filter="true" data-filter-reveal="true" data-filter-placeholder="Search fruits..." data-inset="true">
					<li><a href="#">Apple</a></li>
					<li><a href="#">Banana</a></li>
					<li><a href="#">Cherry</a></li>
					<li><a href="#">Cranberry</a></li>
					<li><a href="#">Grape</a></li>
					<li><a href="#">Orange</a></li>
				</ul>
			</div><!--/demo-html -->

		<h2>List dividers</h2>
		<p>List items can be turned into dividers to organize and group the list items. This is done by adding the <code> data-role="list-divider"</code> to any list item. These items are styled with the bar swatch "b" by default (blue in the default theme) but you can specify a theme for dividers by adding the <code>data-divider-theme</code> attribute to the list element (<code>ul</code> or <code>ol</code>) and specifying a theme swatch letter. You can override the divider-theme for a specific divider by adding the <code>data-theme</code> attribute to the list item.</p>

			<div data-demo-html="true">
				<ul data-role="listview" data-inset="true" data-divider-theme="a">
					<li data-role="list-divider">Mail</li>
					<li><a href="#">Inbox</a></li>
					<li><a href="#">Outbox</a></li>
					<li data-role="list-divider">Contacts</li>
					<li><a href="#">Friends</a></li>
					<li><a href="#">Work</a></li>
				</ul>
			</div><!--/demo-html -->

		<h2>Autodividers</h2>
		<p><p>A listview can be configured to automatically generate dividers for its items by adding a <code>data-autodividers="true"</code> attribute to any listview. By default, the text used to create dividers is the uppercased first letter of the item's text. Alternatively you can specify divider text by setting the <code>autodividersSelector</code> option on the listview programmatically. This feature is designed to work seamlessly with the filter.</p>
			<div data-demo-html="true">
				<ul data-role="listview" data-autodividers="true"  data-filter="true" data-inset="true">
					<li><a href="index.html"><NAME></a></li>
					<li><a href="index.html"><NAME></a></li>
					<li><a href="index.html"><NAME></a></li>
					<li><a href="index.html"><NAME></a></li>
					<li><a href="index.html">C<NAME></a></li>
					<li><a href="index.html"><NAME></a></li>
					<li><a href="index.html"><NAME></a></li>
				</ul>
			</div><!--/demo-html -->

		<h2>Count bubbles</h2>
		<p>To add a count indicator to the right of the list item, wrap the number in an element with a class of <code>ui-li-count</code>. 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. </p>

			<div data-demo-html="true">
				<ul data-role="listview" data-count-theme="b" data-inset="true">
					<li><a href="#">Inbox <span class="ui-li-count">12</span></a></li>
					<li><a href="#">Outbox <span class="ui-li-count">0</span></a></li>
					<li><a href="#">Drafts <span class="ui-li-count">4</span></a></li>
					<li><a href="#">Sent <span class="ui-li-count">328</span></a></li>
					<li><a href="#">Trash <span class="ui-li-count">62</span></a></li>
				</ul>
			</div><!--/demo-html -->

		<h2>Icons: Standard</h2>

		<p>The default icon for each list item containing a link is <code>carat-r</code>. To override this, set the <code>data-icon</code> attribute on the desired list item to the <a href="../icons/">name of a standard icon</a>. To prevent icons from appearing altogether, set the <code> data-icon</code> attribute to &quot;false&quot;. With a bit of custom styling it's also possible to use third party icons.</p>

			<div data-demo-html="true" data-demo-css="#custom-icon">
                <ul data-role="listview" data-inset="true">
                    <li data-icon="custom" id="skull"><a href="#">custom-icon</a></li>
                    <li data-icon="delete"><a href="#">data-icon="delete"</a></li>
                    <li data-icon="gear"><a href="#">data-icon="gear"</a></li>
                    <li data-icon="info"><a href="#">data-icon="info"</a></li>
                    <li data-icon="false"><a href="#">data-icon="false"</a></li>
                </ul>
			</div><!--/demo-html -->

		<h2>Icons: 16x16</h2>
		<p>To use standard 16x16 pixel icons in list items, add the class of <code>ui-li-icon</code> to the image element and insert 16x16 icons as <code>img</code> tags inside the list items.</p>
			<div data-demo-html="true">
{'fraction_non_alphanumeric': 0.20052375607931164, 'fraction_numerical': 0.006840895729784619, 'mean_word_length': 3.558343483556638, 'pattern_counts': {'":': 0, '<': 809, '<?xml version=': 0, '>': 809, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6578337', 'n_tokens_mistral': 7235, 'n_tokens_neox': 6245, 'n_words': 1733}