jQuery.mobile.getInheritedTheme()

Categories: Methods

jQuery.mobile.getInheritedTheme( el, defaultTheme )Returns: Stringversion deprecated: 1.4.0

Description: Retrieves the theme of the nearest parent that has a theme assigned.

  • jQuery.mobile.getInheritedTheme( el, defaultTheme )

    • el
      Type: jQuery
      A jQuery collection object containing an element for which the inherited theme is to be determined.
    • defaultTheme
      Type: String
      The color scheme (swatch) to apply if no theme is found on any of the parents. It accepts a single letter from a-z that maps to the swatches included in your theme.

      Possible values: swatch letter (a-z).

This method is no longer useful, since theme inheritance is implemented entirely in CSS as of jQuery Mobile 1.4.0.

Example:

Retrieve the inherited theme for an element

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
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery.mobile.getInheritedTheme demo</title>
  <link rel="stylesheet" href="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
  <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
  <script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
 
  <script>
  $.mobile.document.on( "click", "#check-theme", function() {
    alert( "I inherit theme '" +
      $.mobile.getInheritedTheme( $( this ), "x" ) + "'" );
  });
  </script>
  <div data-role="header">
    <h2>jQuery Mobile Example</h2>
  </div>
  <div role="main" class="ui-content">
    <p>Click the button below to find out what theme it inherits.</p>
    <a href="#" id="check-theme" class="ui-btn ui-corner-all ui-shadow">Check my theme</a> 
  </div>
 
</body>
</html>

Demo: