jQuery Mobile Page beforecreate用法及代碼示例

jQuery Mobile 是一組構建在 jQuery 之上的基於 HTML5 的用戶接口係統，用於開發可在智能手機、平板電腦、台式機和筆記本電腦等各種屏幕尺寸的設備上訪問的網站。

在本文中，我們將使用 jQuery Mobile 頁麵創建之前 在創建頁麵小部件之前觸發的事件。

用法:

使用指定的 beforecreate 回調初始化頁麵。

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

綁定一個事件監聽器創建前的頁麵 事件。

$(".selector").on( "pagebeforecreate", 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("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://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 beforecreate Event

參考： https://api.jquerymobile.com/page/#event-beforecreate

相關用法

注：本文由純淨天空篩選整理自vpsop大神的英文原創作品 jQuery Mobile Page beforecreate Event。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。