mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-03-17 06:20:26 +00:00
81 lines
No EOL
5.8 KiB
HTML
Executable file
81 lines
No EOL
5.8 KiB
HTML
Executable file
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>jQuery Mobile Docs - Lists</title>
|
|
<link rel="stylesheet" media="only all" href="css/all" />
|
|
<script type="text/javascript" src="js/all"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<div data-role="page">
|
|
|
|
<div data-role="header">
|
|
<h1>Lists</h1>
|
|
</div><!-- /header -->
|
|
|
|
<div data-role="content">
|
|
<div class="ui-body ui-body-c">
|
|
|
|
<h2>Basic lists</h2>
|
|
<p>A list view is coded as a simple unordered list containing linked list items with a <code>data-role="listview"</code> attribute. jQuery Mobile will apply all the necessary styles to transform the list into a mobile-friendly list view that fills the full width of the browser window. When you tap on the list item, the framework will trigger a click on the first link inside the list item, issue an AJAX request for the URL in the link, create the new page in the DOM, then kick off a page transition.</p>
|
|
|
|
<a href="lists-ul.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Basic list example</a>
|
|
|
|
<h2>Nested lists</h2>
|
|
<p>By nesting child <code>ul</code> of <code>ol</code> inside list items, you can create nested lists. When a list item with a child list is clicked, the framework will generate a new ui-page populated with the title of the parent in the header and the list of child elements. These dynamic nested lists are styled with the "b" theme swatch (blue in the default theme) to indicate that you are in a secondary level of navigation. Lists can be nested multiple level deep and all pages and linking will be automatically handled by the framework.</p>
|
|
<a href="lists-nested.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Nested list example</a>
|
|
|
|
<h2>Numbered lists</h2>
|
|
<p>Lists can also be created from ordered lists <code>(ol)</code> which is useful when presented items that are in a sequence such as search results or a movie queue. When the enhanced markup is applied to the list view, jQuery Mobile will try to first use CSS to add numbers to the list and, if not supported, will fall back to injecting numbers with JavaScript.</p>
|
|
|
|
<a href="lists-ol.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Numbered list example</a>
|
|
|
|
<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 in a header class (swatch "c" by defaut") and won't be clickable.</p>
|
|
|
|
<a href="lists-divider.html" data-role="button" data-icon="arrow-r" data-iconpos="right">List divider example</a>
|
|
|
|
|
|
<h2>Search filter</h2>
|
|
<p>jQuery Mobile provides a very easy way to filter a list client-side with a simple search tol. 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 clear (x) icon shows the full list when clicked.</p>
|
|
|
|
<a href="lists-ul.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Search filter example</a>
|
|
|
|
|
|
<h2>Text formatting & counts</h2>
|
|
<p>The framework includes text formatting conventions for common list patterns like header/descriptions, secondary information, counts through HTML semantic markup. </p>
|
|
|
|
<ul>
|
|
<li>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></li>
|
|
<li>To add text hierarchy, use headings to increase font emphasis and use paragraphs to reduce emphasis. </li>
|
|
<li>Supplemental information can be added to the right of each list item by wrapping content in an element with a class of <code>ui-li-aside</code></li>
|
|
<li>To add thumbnails to the left of a list item, add an image </li>
|
|
</ul>
|
|
<a href="lists-count.html" data-role="button" data-icon="arrow-r" data-iconpos="right">List with count bubbles</a>
|
|
<a href="lists-formatting.html" data-role="button" data-icon="arrow-r" data-iconpos="right">List with text formatting</a>
|
|
<a href="lists-thumbnails.html" data-role="button" data-icon="arrow-r" data-iconpos="right">List with thumbnail images</a>
|
|
|
|
|
|
<h2>Split button lists</h2>
|
|
<p>In cases where there is more than one possible action per list item, a split button can be used to offer two independently clickable items -- the list item and a small arrow icon in the far right. To make a split list item, simply add a second link inside the <code>li</code> and the framework will add a vertical divider line, style the link as an icon-only arrow button, and sets the <code>title</code> attribute of the link to the text the link for accessibility.</p>
|
|
|
|
<a href="lists-split.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Split list example</a>
|
|
|
|
<h2>Inset lists</h2>
|
|
<p>If lists are embedded in a page with other types of content, an inset list packages the list into a block that sits inside the content area with a bit of margin and rounded corners (theme controlled). By adding the <code>data-inset="true"</code> attribute to the list (ul or ol), applies the inset appearance.</p>
|
|
|
|
<a href="lists-inset.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Inset list example</a>
|
|
|
|
<h2>List theming</h2>
|
|
<p>Themes contain two list theme swatch styles. The default theme is "f" (silver in the default theme). The theme swatch can be changed to any other lit swatch by adding the <code>data-theme="e"</code> attribute to the list, where the letter is the name of any list swatch in the theme.</p>
|
|
|
|
<a href="lists-themes.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Themed list example</a>
|
|
|
|
|
|
|
|
</div><!-- /ui-body wrapper -->
|
|
</div><!-- /content -->
|
|
</div><!-- /page -->
|
|
|
|
</body>
|
|
</html> |