JQuery mobileinit用法及代碼示例

mobileinit event

添加的版本：1.0

說明：表示 jQuery Mobile 已完成加載的事件。

jQuery( ".selector" ).on( "mobileinit", function( event ) { ... } )

此事件在 jQuery Mobile 完成加載之後觸發，但在它開始增強起始頁之前。因此，此事件的處理程序有機會在影響庫行為之前修改 jQuery Mobile 的全局配置options 和所有小部件的默認選項值。

在加載 jQuery Mobile 之前，您必須將處理程序連接到 mobileinit 事件，因為它是作為庫加載過程的一部分觸發的。實現這一點的最簡單方法是在加載 jQuery 的 script 標記之後和加載 jQuery Mobile 的 script 標記之前放置一個 script 標記：

<!doctype html>
<html>
<head>
  <title>Example illustrating use of the "mobileinit" event</title>
  <meta charset=utf-8 />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet"  href="//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css" />
  <script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
  <script>
// Update configuration to our liking
$( document ).on( "mobileinit", function() {
 
  // We want popups to cover the page behind them with a dark background
  $.mobile.popup.prototype.options.overlayTheme = "b";
 
  // Set a namespace for jQuery Mobile data attributes
  $.mobile.ns = "jqm-";
});
  </script>
  <script src="//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js"></script>
</head>
<body>
  <div data-jqm-role="page">
    <div data-jqm-role="header">
      <h2>jQuery Mobile Example</h2>
    </div>
    <div data-jqm-role="content">
      <div id="the-popup" data-jqm-role="popup" data-jqm-position-to="window">
        <p>Example popup.</p>
      </div>
      <a href="#the-popup" data-jqm-rel="popup" class="ui-btn ui-corner-all ui-shadow">Open Popup</a>
    </div>
  </div>
</body>
</html>

效果演示

相關用法

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