mobileinit

Categories: Events

mobileinit eventversion added: 1.0

Description: Event indicating that jQuery Mobile has finished loading.

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

This event is triggered after jQuery Mobile has finished loading, but before it has started enhancing the start page. Thus, handlers of this event have the opportunity to modify jQuery Mobile's global configuration options and all the widgets' default option values before they influence the library's behavior.

You must connect a handler to the mobileinit event before you load jQuery Mobile, because it is triggered as part of the library's loading process. The easiest way of achieving this is to place a script tag after the script tag that loads jQuery, and before the script tag that loads jQuery Mobile:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 
<!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>