jQuery Mobile Pagecontainer创建事件

jQuery Mobile是一种基于网络的技术，旨在制作可在所有智能手机、平板电脑和桌面设备上访问的响应式网站和应用程序。

在本教程中，我们将学习jQuery Mobile Pagecontainer的创建事件。Pagecontainer中的创建事件是在Pagecontainer被创建时触发的。创建事件是一个回调函数，我们可以在需要时执行所需的动作。它有事件和ui参数，这些参数的初始化如下。

语法:

用指定的创建回调初始化pagecontainer。

$( "#page1" ).pagecontainer({
    create: function( event, ui ) {
        // Code
    },
});

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

$( "#page1" ).on( "pagecontainercreate", function( event, ui ) {
    // Code
} );

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

event : 它是一个事件类型的对象，包含了Pagecontainer被创建时的事件细节，如时间戳和pagecontainer的初始化值。
ui 。这是空的，但用于保持与jQuery Mobile中其他部件的一致性。

CDN链接 。

<link href=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css” rel=”stylesheet”/>
<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>

例子。在下面的例子中，当Pagecontainer被创建时，我们使用create事件显示一条警告信息。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <meta content="IE=edge" http-equiv="X-UA-Compatible"/>
        <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
        <link href=
"https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" 
             rel="stylesheet"/>
        <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>
    </head>
    <body>
        <div data-role="page" id="page1">
            <div data-role="header">
                <h1 style="color:green;">
                    GeeksforGeeks
                </h1>
            </div>
            <div class="ui-content" role="main">
                <center>
                    <h3>
                        jQuery Mobile Pagecontainer create event
                    </h3>
                    <a class="ui-btn ui-corner-all ui-btn-inline" 
                       data-transition="slide" href="#page2">
                        Go To Page 2
                    </a>
                </center>
            </div>
        </div>
        <div data-role="page" id="page2">
            <div data-role="header">
                <h1 style="color:green;">
                    GeeksforGeeks
                </h1>
            </div>
            <div class="ui-content" role="main">
                <center>
                    <h3>
                        jQuery Mobile Pagecontainer create Event
                    </h3>
                    <a class="ui-btn ui-corner-all ui-btn-inline" data-rel="back" 
                       data-transition="slide" href="#page1">
                        Go Back To Page 1
                    </a>
                </center>
            </div>
        </div>
        <script>
             $(document).ready(function(){$ ( "#page1" ).pagecontainer({
                    create: function( event, ui ) {
                        alert("Page 1 has been created")
                    },
                });
            })
        </script>
    </body>
</html>

输出:

jQuery Mobile Pagecontainer创建事件