jQuery Mobile supports a themable design that allows designers to quickly re-style their UI. By default, jQuery Mobile provides five themable designs with the flexibility to interchange themes for all components including page, header, content, and footer components. The most useful tool for creating custom themes is ThemeRoller3.
Restyling a UI takes minimal effort. For example, I can quickly take a default themed jQuery Mobile application (see Figure 1–13) and re-style it with another built-in theme in seconds. In the case of my modified theme (see Figure 1–14), I chose an alternate theme from the list. The only markup required was an addition of a data-theme attribute. We will discuss themes in greater detail in Chapter 7.
<!-- Set the lists background to black -->
<ul data-role="listview" data-inset="true" data-theme="a">__________
3 See http://jqueryui.com/themeroller/. ThemeRoller is a web-based tool that automates the process of generating new CSS-based themes.
Figure 1–14. Alternate ThemeCopycopyHighlighthighlightAdd NotenoteGet Linklink
Leave a Reply