If you do not add data-theme attributes to a page, jQuery Mobile will apply default themes for all page containers and form elements (see Table 7–1).
For instance, if we create a basic jQuery Mobile page without explicitly setting its themes, our elements will fall back to their default theme or inherit the theme of their parent container. In Figure 7–7, default themes were applied to the page, header, footer, content, and list elements, whereas the form elements inherit their themes.
Figure 7–7. Page with default and inherited themes
By referencing our “Default themes by component” Table (see Table 7–1), we can determine what defaults will be applied for each component. Let’s take a closer look at the content and button components. By default, the content component will have data-theme=”c” applied. However, the button component does not have a default theme, so it will inherit its default theme from its parent container. In Listing 7–6, the button’s parent is the content container; as a result, the button will inherit theme “c”. Moreover, if the button was within the head container, it would inherit the head container’s theme.
Listing 7–6. Page with default themes (ch7/theme-defaults.html)<div data-role="page">
<div data-role="header">
<h1>default = "a"</h1>
</div>
<div data-role="content">
default = "c"
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">default = "b"</li>
<li>default = "c"</li>
<li>default = "c"</li>
</ul>
<form id="test" id="test" action="#" method="post">
<p>
<label for="text">inherits "c":</label>
<input type="text" name="text" id="text" value="" />
</p>
<p>
<label for="sound">inherits "c":</label>
<select name="slider" id="sound" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</p>
<a href="#" data-role="button">Button (inherits "c")</a>
</form>
</div>
<div data-role="footer" data-position="fixed">
<h3>default = "a"</h3>
</div>
</div>CopycopyHighlighthighlightAdd NotenoteGet Linklink
Leave a Reply