jQuery Mobile Page create用法及代码示例

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

在本文中，我们将使用 jQuery Mobile页面创建创建页面后触发的事件。如果您想动态地将内容添加到页面并让 jQuery Mobile 为您设置样式，那么这是最好的事件。

用法:

使用以下命令初始化页面创造指定回调。

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

绑定页面创建事件到事件监听器。

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

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

event:它接受事件类型值。
ui: 它接受对象类型值。 ui 对象可以为空，但用于与其他事件保持一致。

CDN 链接：

<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>

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

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=
"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://www.geeksforgeeks.org/courses">
                      https://www.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 Page create Event

参考：https://api.jquerymobile.com/page/#event-create

相关用法

注：本文由纯净天空筛选整理自vpsop大神的英文原创作品 jQuery Mobile Page create Event。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。