Themable Styling

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 ...

Get Pro jQuery Mobile now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.