Skip to content
Related Articles

Related Articles

jQuery Mobile Page beforecreate Event

View Discussion
Improve Article
Save Article
  • Last Updated : 14 Mar, 2022
View Discussion
Improve Article
Save Article

jQuery Mobile is a set of HTML5-based user interface systems built on top of jQuery which is used for developing websites that are accessible on devices of various screen sizes like smartphones, tablets, desktops, and laptops.

In this article, we will be using the jQuery Mobile page beforecreate event which triggers before the creation of the page widget.

Syntax:

Initialize the page with the beforecreate callback specified.

  •  
$( ".selector" ).page({
  beforecreate: function( event, ui ) {
      // Your code here.
  }
});

Bind an event listener to pagebeforecreate event.

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

Parameters: It accepts a callback function that has two parameters.

  • event: It accepts Event type value.
  • ui: It accepts Object type value. The ui object can be empty but used for consistency with other events across the library.

CDN Links:

<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-2.1.3.js”></script>
<script src=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js”></script>

Example: The below example demonstrates the use of page beforecreate event. We bind an event listener to pagebeforecreate event which opens an alert box when the event triggers.

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="utf-8">
    <meta name="viewport" content=
          "width=device-width, initial-scale=1">
 
    <link rel="stylesheet" href=
    <script src=
    </script>
    <script src=
    </script>
 
    <script>
        $(document).on("pagebeforecreate", function (event, ui) {
            alert("Page beforecreate event triggered.");
        });
    </script>
</head>
 
<body>
    <div id="#page1" data-role="page">
        <div data-role="header">
            <h1 style="color:green;">GeeksforGeeks</h1>
            <h3>jQuery Mobile Page beforecreate event</h3>
        </div>
 
        <div role="main" class="ui-content">
            <center>
                <h2>What is GeekforGeeks?</h2>
                <p style="padding: 0px 20px">
                    GeeksforGeeks is a computer science
                    portal for geeks by geeks. Here
                    you can find articles on various
                    computer science topics like Data
                    Structures, Algorithms and many more.
                    GeeksforGeeks also provide courses,
                    you can find the courses at
                    <a href="https://practice.geeksforgeeks.org/courses">
                      https://practice.geeksforgeeks.org/courses</a>
                </p>
 
 
                <p class="do-not-toggle-on-tap">
                    For cracking interviews of top product
                    based companies, you need to
                    have good and deep understanding of
                    topics like DSA, System design etc.
                    GeeksforGeeks provide you quality
                    content so that you can prepare for
                    the interviews. GeeksforGeeks also
                    have a practice portal where you
                    can practice problems and brush
                    on your skills. You can visit the
                    practice portal at
                    <a href="https://practice.geeksforgeeks.org">
                      https://practice.geeksforgeeks.org
                    </a>
                </p>
 
            </center>
        </div>
    </div>
</body>
</html>


Output:

jQuery Mobile Page beforecreate Event

Reference: https://api.jquerymobile.com/page/#event-beforecreate


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!