Open In App

jQuery Mobile Listview splitIcon Option

Improve
Improve
Like Article
Like
Save
Share
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 splitIcon option. If a list item has a second link, then the splitIcon appears on the right-hand side of the list item. This displays that there is some content inside the list item. The default value of splitIcon is of type carat-r.

Note: It is necessary to have a second link in order to split-icon appear else it won’t display, rather it will display the normal icon.

 

Syntax: 

Initialize the listview with the splitIcon option specified:

$(".items").listview({
    splitIcon: "star",
});

Get or set the splitIcon option, after initialization:

// Getter
var splitIcon = $(".selector").listview("option", "splitIcon");
 
// Setter
$( ".selector" ).listview( "option", "splitIcon", "star" );

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

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 carrot-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: In this example, we have a listview with one of the list items having two links. On clicking the link, the popup opens with a message and two options either to proceed to the link or close the pop-up. The pop-up is also from the jQuery Mobile UI library. The splitIcon used is of star type.

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" />
    <link rel="stylesheet" href=
    </script>
    <script src=
    </script>
</head>
  
<body>
    <h1 style="color:green">
        GeeksforGeeks
    </h1>
    <h3>jQuery Mobile Listview splitIcon Option</h3>
          
    <ul class="items" data-role="listview">
        <li>
            <a href=
                Data Structures</a>
        </li>
        <li>
            <a href=
                Interview preparation
            </a>
            <a href="#java" data-rel="popup" 
                data-position-to="window" 
                data-transition="pop">
                Java Programming
            </a>
        </li>
        <li>
            <a href="https://www.geeksforgeeks.org/java">
                Java Programming
            </a>
        </li>
    </ul>
    <div data-role="popup" id="java" 
        class="ui-content" 
        style="max-width:280px; padding-bottom:2rem;">
        <h3>GeeksforGeeks</h3>
        <p>
            Open the Java Tutorial link by clicking 
            the Open button given below to learn 
            java from GeeksforGeeks.
        </p>
  
        <a href="https://www.geeksforgeeks.org/java" 
            class="ui-shadow ui-btn ui-corner-all
                     ui-btn-inline ui-mini">
            Open
        </a>
  
        <a href="" data-rel="back" class="ui-shadow 
        ui-btn ui-corner-all ui-btn-inline ui-mini">
            Cancel
        </a>
    </div>
  
    <script>
        $(".items").listview({
            splitIcon: "star"
        });
    </script>
</body>
  
</html>


Output:

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



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