jQuery Mobile页面创建事件

jQuery Mobile是一个建立在jQuery之上的JavaScript库。它被用来为智能手机、平板电脑和台式机等各种设备创建响应性和可访问性的网站。

在这篇文章中，我们将使用jQuery Mobile的页面创建事件，该事件在页面被创建后触发。如果你想动态地添加内容到你的页面，并让jQuery Mobile为你设计样式，这是一个最好的事件。

语法:

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

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

将pagecreate事件绑定到一个事件监听器上。

$( ".selector" ).on( "pagecreate", 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>

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

<!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("pagecreate", function (event, ui) {
            alert("Pagecreate 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 create 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页面创建事件