Open In App

jQuery Mobile Navbar create Event

Improve
Improve
Like Article
Like
Save
Share
Report

jQuery Mobile is a web-based technology designed to make responsive websites and apps that are accessible on all smartphone, tablet, and desktop devices.

In this tutorial, we are going to learn the jQuery Mobile Navbar create Event. The create event is triggered when the Navbar widget is created. The callback function with the event and UI is called whenever the Navbar is created.

Syntax: The create event callback function is called as follows.

$("#gfgnavbar").navbar({
    create: function (event, ui){}
});
  • Bind an event listener to the navbarcreate event:

    $( ".selector" ).on( "navbarcreate",
        function( event, ui ) {} );

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 the following example, we have logged a message and the event in the console using the create Event.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <link rel="stylesheet" href=
    <script src=
    </script>
    <script src=
    </script>
</head>
  
<body>
    <div data-role="page" id="gfgpage">
        <div data-role="header">
            <h1 style="color: green;">
              GeeksforGeeks
            </h1>
        </div>
        <div id="gfgnavbar">
            <ul>
                <li>
                  <a href="#one" 
                       data-icon="cloud">One
                  </a>
                </li>
                <li>
                  <a href="#two" 
                       data-icon="star">Two
                  </a>
                </li>
            </ul>
        </div>
        <div data-role="main" class="ui-content">
            <h3>jQuery Mobile Navbar create Event</h3>
        </div>
          
    </div>
    <script>
        $("#gfgnavbar").navbar({
            create: function (event, ui){
                
                  // Log out a message and the returned event
                console.log(
                  "Welcome to GeeksforGeeks\n", event
                );
            }
        });
    </script>
</body>
  
</html>


Output:

jQuery Mobile Navbar create Event

jQuery Mobile Navbar create Event

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



Last Updated : 24 Jan, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads