jQuery Mobile Listview inset Option

Last Updated : 23 Dec, 2021

jQuery Mobile is an HTML5 based user interface system designed to make responsive websites and apps that are accessible on all smartphone, tablet, and desktop devices. 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 inset option which gives an inset appearance to the ListView. It is very useful for mixing the lists with other content on the page. It gives a good UI look to Listview. The listview appears to be raised from the screen because of the shadows around the listview.

Syntax: The syntax for the inset option in jQuery Mobile takes a boolean value. If true, it applies the inset else it does not apply the inset.

Initialize the listview with the inset option specified:

$(".selector").listview({
    inset: true
});

Get or set the inset option, after initialization:

// Getter
var inset = $( ".selector" ).listview( "option", "inset" );
 
// Setter
$( ".selector" ).listview( "option", "inset", true );

CDN Links: Use the following CDN links for jQuery Mobile.

<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: In this example, we will set inset option value to true.

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= 
"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> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
    <h3>jQuery Mobile Listview inset Option</h3> 
      
    <ul class="items" data-role="listview"> 
        <li> 
            <a href= 
            "https://www.geeksforgeeks.org/data-structures" 
                target="_blank"> 
                Data Structures</a> 
        </li> 
        <li> 
            <a href= 
"https://www.geeksforgeeks.org/courses/complete-interview-preparation" 
                target="_blank"> 
                Interview preparation</a> 
        </li> 
        <li> 
            <a href="https://www.geeksforgeeks.org/java" 
                target="_blank"> 
                Java Programming</a> 
        </li> 
    </ul> 
  
    <script> 
        $(".items").listview({ 
            inset: true 
        }); 
    </script> 
</body> 
  
</html>

Output:

Example 2: In this example, we turned the inset option to false.

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= 
"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> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
    <h3>jQuery Mobile Listview inset Option</h3> 
  
    <ul class="items" data-role="listview"> 
        <li> 
            <a href= 
            "https://www.geeksforgeeks.org/data-structures" 
                target="_blank"> 
                Data Structures</a> 
        </li> 
        <li> 
            <a href= 
"https://www.geeksforgeeks.org/courses/complete-interview-preparation"
                 target="_blank"> 
                Interview preparation</a> 
        </li> 
        <li> 
            <a href="https://www.geeksforgeeks.org/java" 
                target="_blank"> 
                Java Programming</a> 
        </li> 
    </ul> 
      
    <script> 
        $(".items").listview({ 
            inset: false, 
        }); 
    </script> 
</body> 
  
</html>