jQuery Mobile list content
May 21, 2021 jQuery Mobile
Table of contents
jQuery Mobile list thumbnail
By default, each jQuery Mobile list item contains a right arrow icon.
For images larger than 16x16px, add the element to the link.
jQuery Mobile automatically scales the image to 80x80px:
Add list information using standard HTML:
<li>
<a href="#">
<img src="chrome.png">
<h2>Google Chrome</h2>
<p>Google Chrome 免费的开源 web 浏览器。发布于 2008 年。</p>
</a>
</li>
</ul>
Try it out . . .
jQuery Mobile list icon
Add a 16x16px icon to the list with class"ui-li-icon":
Split button
In JQuery Mobile's list, there are times when you need to do two different things about the contents of an option, and then you need to split the link buttons in the options. The way to implement segmentation is to add an additional element to the element, so that you can achieve the split effect on the page.
jQuery Mobile automatically sets the second icon with a blue arrow, and the link text of the icon, if any, will appear when the user hovers over the icon:
<li>
<a href="#"><img src="chrome.png"></a>
<a href="#">Some Text</a>
</li>
</ul>
Try it out . . .
Add some pages and dialog boxes to make the link features richer:
<li>
<a href="#"><img src="chrome.png"></a>
<a href="#download" data-rel="dialog">下载浏览器</a>
</li>
</ul>
Try it out . . .
Bubble numbers
Bubble numbers are numbers that are used to display list items, such as messages in a mailbox:
To add bubble numbers, set the class "ui-li-count" property and add numbers using in-line elements, such as .lt;span>:
<li><a href="#">Inbox<span class="ui-li-count">335</span></a></li>
<li><a href="#">Sent<span class="ui-li-count">123</span></a></li>
<li><a href="#">Trash<span class="ui-li-count">7</span></a></li>
</ul>
Try it out . . .
Note: A correct bubble number must be displayed and programming must be modified. This will be explained in a later section.
More instances
Change the default link icon for a list item
How to set the default link icon for list items (the default is the right arrow).
A collapsible list
How to create a display/hidden list.
More content formats
How to make a calendar.
This is the end of the introduction to the contents of the jQuery Mobile list, and in the next chapter we'll begin with the jQuery Mobile form.