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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。