Using Default Theme Swatches to Style Pages & Elements - Exercise

Contact Us or call 1-877-932-8228
Using Default Theme Swatches to Style Pages & Elements - Exercise

Using Default Theme Swatches to Style Pages & Elements

Duration: 15 to 20 minutes.

In this exercise, you will use the default jQuery Mobile theme to style pages and elements.

  1. Open ThemeFramework/Exercises/swatches.html in a file editor.
  2. Add a listview to the #home page; style it with swatch "b" as shown:swatch exercise
  3. Style #page2 with swatch "b". Add a button, linking to the #home page, at the bottom of #page2; style this home button with swatch "a". The result should look like this:swatch exercise
  4. Add a form to #page3 with a text input and a set of three checkboxes: style the text input as "a" and the checkboxes as "b":swatch exercise

Solution:

ThemeFramework/Solutions/swatches.html

Code Explanation:

On the #home page, we add data-theme="b" to the listview.

We add data-theme="b" to #page2; note how the page elements (those not otherwise explicitly styled) inherit the swatch color. The button at bottom gets a class of ui-btn-a.

We style the individual form elements on #page3 with various swatch letters to produce the desired visual look.

Next