jQuery Mobile页面beforecreate事件

jQuery Mobile是一套基于HTML5的用户界面系统，建立在jQuery之上，用于开发可在智能手机、平板电脑、台式机和笔记本电脑等不同屏幕尺寸的设备上访问的网站。

在这篇文章中，我们将使用jQuery Mobile页面的beforecreate事件，该事件在创建页面小部件之前触发。

语法:

用指定的beforecreate回调初始化页面。

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

为pagebeforecreate事件绑定一个事件监听器。

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

参数：它接受一个有两个参数的回调函数。

event。它接受Event类型的值。
ui。它接受Object类型的值。ui对象可以是空的，但为了与整个库的其他事件保持一致。

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>

例子：下面的例子演示了页面beforecreate事件的使用。我们将一个事件监听器绑定到pagebeforecreate事件上，当事件触发时打开一个警报框。

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="utf-8">
    <meta name="viewport" content=
          "width=device-width, initial-scale=1">
 
    <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>
 
    <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>

输出:

jQuery Mobile页面beforecreate事件