Skip to content
Related Articles

Related Articles

jQuery Mobile Navbar create Event

View Discussion
Improve Article
Save Article
Like Article
  • Last Updated : 24 Jan, 2022

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!