From 06e23c1e60253107e41a378f51d11185825e9d70 Mon Sep 17 00:00:00 2001 From: Todd Parker Date: Tue, 12 Oct 2010 16:10:19 -0400 Subject: [PATCH] re-vample list theme demos --- docs/lists/lists-themes.html | 97 +++++++++++++++++++++++++----------- 1 file changed, 69 insertions(+), 28 deletions(-) diff --git a/docs/lists/lists-themes.html b/docs/lists/lists-themes.html index 5c9bbdca..35ba24a3 100755 --- a/docs/lists/lists-themes.html +++ b/docs/lists/lists-themes.html @@ -2,9 +2,9 @@ jQuery Mobile Docs - Lists - - - + + + @@ -14,23 +14,71 @@

List themes

-
+

Assigning theme swatches to lists

-

All the standard button swatches can be applied to lists. The default theme is "f" (silver in the default theme).

- -

The list item color scheme can be changed to any button color theme swatch by adding the data-theme="e" attribute to the list, and setting the letter theme swatch.

+

All the standard button swatches can be applied to lists. Here is an example of the default list theme "c" (silver in the default theme) with default divider swatch "b" (blue in default theme).

-

The theme for list dividers can be set by adding the data-dividertheme to the list and specifying a swatch letter.

- -

The theme for list dividers can be set by adding the data-counttheme to the list and specifying a swatch letter.

- -

A swatch

-
    + +<ul data-role="listview" data-inset="true"> + + + + +

    The list item color scheme can be changed to any button color theme swatch by adding the data-theme attribute to the list, and setting the letter theme swatch. Here is the same list above with the "a" swatch applied.

    + + +<ul data-role="listview" data-inset="true" data-theme="a"> + + + + +

    Theming dividers

    + +

    The theme for list dividers can be set by adding the data-dividertheme to the list and specifying a swatch letter. Here is an example of the same list above with swatch "d" set on the dividers.

    + + +<ul data-role="listview" data-inset="true" data-theme="a" data-dividertheme="d"> + + + + +

    Theming count bubbles

    + +

    The theme for count bubbles can be set by adding the data-counttheme to the list and specifying a swatch letter. Here is an example with swatch "e" set on the dividers.

    + + +<ul data-role="listview" data-inset="true" data-theme="a" data-dividertheme="d" data-counttheme="e"> + + + + +

    Examples of all basic list swatches

    + +

    A swatch

    + @@ -38,8 +86,6 @@ @@ -47,8 +93,6 @@ @@ -56,8 +100,6 @@ @@ -65,12 +107,11 @@ -

    Theme variation: "a" body, "a" lists, "a" dividers

    +

    Theme variations

    +

    A page, A lists, D dividers

    @@ -113,7 +154,7 @@
-
-

Theme variation: "b" body, "c" lists, "b" dividers

+

B page, C lists, D dividers

@@ -170,7 +211,7 @@ -
-

Theme variation: "d" body, "c" lists, "b" dividers

+

D page, C lists, E dividers

@@ -227,7 +268,7 @@ -