Open In App

jQuery Mobile Listview create Event

Improve
Improve
Like Article
Like
Save
Share
Report

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 learn the create Event of listview. The create event is a callback function that is triggered when the listview is created. The function returns the event and the UI element that is the Listview.

Syntax: 

  • The syntax for the create event for the jQuery Mobile Listview is given below. Here, we have initialized the listview by specifying the create callback function.
    $(".selector").listview({
        create: function(event, ui) {
            // Code
        }
    });
  • The syntax for binding the event listener with listviewcreate event is given below:
    $(".selector").on("listviewcreate", function(event, ui) {
        // Code
    });

 

Parameter:

  • event: It is used to normalize the event object as per the W3C standards & is of the event type.
  • ui: It is of an object type with an empty object that is added in order to make consistency with other events.
    • helper: This is the helper object which is being dragged.
    • position: This is the current position of the helper as { top, left } object.
    • offset: This is the offset position of the helper as { top, left } object.

CDN Links: Use the following CDN links for your jQuery Mobile 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 logged a message in the console using the create event of jQuery Mobile Listview.

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 src=
    </script>
    <script src=
    </script>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
    <h3>jQuery Mobile Listview create event</h3>
    <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=
               target="_blank">Java Programming
            </a
        </li>
    </ul>
    
    <script>
        $(".items").listview({
            create: function(event, ui) {
                console.log("Welcome to GeeksforGeeks!");
                console.log("jQuery Mobile Listview create Event Tutorial.");
            }
        });
    </script>
</body>
  
</html>


Output:

jQuery Mobile Listview create Event

Reference: https://api.jquerymobile.com/listview/#event-create



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