Open In App

jQuery Mobile Listview icon Option

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

jQuery Mobile is a set of HTML5 based user system interaction widget toolbox used for various purposes build on top of jQuery. It is designed to build fast and responsive sites accessible to mobile, tabs, and desktops. jQuery Listview is a widget used to create beautiful lists. It is a simple and responsive Listview used to view the unordered lists.

In this article, we will be using the jQuery Mobile Listview icon option. The linked list items can have different icons from the jQuery Mobile. The icon appears at the end of the list item. We have lots of icons to demonstrate different conditions. This option is also exposed to the “data attribute: data-icon”

Syntax: The syntax for changing the icon of the linked list item is as follows.

$(".items").listview({
  icon:"arrow-r",
});

There are multiple icons from jQuery Mobile. The whole list is as follows:

 

ICONS LIST

action audio check grid power
alert back clock heart recycle
arrow-d bars cloud home refresh
arrow-d-l bullets comment info search
arrow-d-r calendar delete location shop
arrow-l camera edit lockmail star
arrow-r carat-d eye minus tag
arrow-u carat-l forbidden navigation user
arrow-u-l carat-r forward phone video
arrow-u-r carat-u gear plus  

CDN Link: First, add jQuery Mobile scripts needed for your project.

<link rel=”stylesheet” href=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css” />
<script src=”https://code.jquery.com/jquery-1.11.1.min.js”></script>
<script src=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js”></script>

Example 1: The following example demonstrates a listview using a star icon.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible"
          content="IE=edge" />
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0" />
    <title>GeeksforGeeks</title>
    <link rel="stylesheet" href=
    <script src=
    </script>
    <script src=
   </script>
</head>
  
<body>
    <h4>GeeksforGeeks Light Theme Listview</h4>
    <ul class="items" data-role="listview">
        <li>
            <a href=
               target="_blank">
              Data Structures
            </a>
        </li>
        <li>
            <a href=
               target="_blank">
              Interview preparation
            </a>
        </li>
        <li>
            <a href="https://www.geeksforgeeks.org/java"
               target="_blank">
              Java Prgramming
            </a>
        </li>
    </ul>
    <script>
      $(".items").listview({
          icon: "star",
      });
    </script>
</body>
  
</html>


Output:

Example 2: The following example demonstrates listview using a right arrow icon as “arrow-r”.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible"
          content="IE=edge" />
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0" />
    <title>GeeksforGeeks</title>
    <link rel="stylesheet"
          href=
    <script src=
    </script>
    <script src=
    </script>
</head>
  
<body>
    <h4>GeeksforGeeks Light Theme Listview</h4>
    <ul class="items" data-role="listview">
        <li>
            <a href=
               target="_blank">
              Data Structures
            </a>
        </li>
        <li>
            <a href=
               target="_blank">
              Interview preparation
            </a>
        </li>
        <li>
            <a href="https://www.geeksforgeeks.org/java"
               target="_blank">
              Java Prgramming
            </a>
        </li>
    </ul>
    <script>
          $(".items").listview({
              icon: "arrow-r",
          });
    </script>
</body>
</html>


Output:

Reference: https://api.jquerymobile.com/listview/#option-icon



Last Updated : 16 Dec, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads