2010-10-11 21:49:12 +00:00
<!DOCTYPE html>
< html >
2010-11-02 01:46:29 +00:00
< head >
2011-02-18 20:00:18 +00:00
< meta charset = "utf-8" >
2011-05-17 21:28:19 +00:00
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
2011-03-31 13:11:26 +00:00
< title > jQuery Mobile Docs - Theming Pages< / title >
2011-01-06 00:19:24 +00:00
< link rel = "stylesheet" href = "../../themes/default/" / >
2010-11-11 19:15:42 +00:00
< link rel = "stylesheet" href = "../_assets/css/jqm-docs.css" / >
2011-04-14 20:04:47 +00:00
< script src = "../../js/jquery.js" > < / script >
2011-06-20 19:41:40 +00:00
< script src = "../../experiments/themeswitcher/jquery.mobile.themeswitcher.js" > < / script >
< script src = "../_assets/js/jqm-docs.js" > < / script >
2011-04-14 20:04:47 +00:00
< script src = "../../js/" > < / script >
2010-10-11 21:49:12 +00:00
< / head >
< body >
2011-06-20 19:57:04 +00:00
< div data-role = "page" class = "type-interior" >
2010-10-11 21:49:12 +00:00
2011-06-20 19:57:04 +00:00
< div data-role = "header" data-theme = "f" >
2010-10-11 22:39:25 +00:00
< h1 > Theming pages< / h1 >
2011-03-10 03:36:14 +00:00
< a href = "../../" data-icon = "home" data-iconpos = "notext" data-direction = "reverse" class = "ui-btn-right jqm-home" > Home< / a >
2010-10-11 21:49:12 +00:00
< / div > <!-- /header -->
2011-03-10 03:36:14 +00:00
< div data-role = "content" >
2011-06-20 20:35:27 +00:00
< div class = "content-primary" >
2010-10-15 20:39:57 +00:00
< h2 > Page Theming< / h2 >
2010-10-11 21:49:12 +00:00
2011-02-02 03:55:10 +00:00
< p > jQuery Mobile has a rich < a href = "../api/themes.html" > theming system< / a > that gives you full control of how pages are styled. There is detailed theming documentation within each page widget, but let's look at a few high-level examples of how theming is applied.< / p >
2010-10-11 21:49:12 +00:00
2011-03-10 03:36:14 +00:00
< p > The < code > data-theme< / code > attribute can be applied to the header and footer containers to apply any of the lettered theme color swatches. While the < code > data-theme< / code > attribute could be added to the content container, we recommend adding it instead to < code > div< / code > or container that has been assigned the < code > data-role="page"< / code > attribute to ensure that the background color is applied to the full page.< / p >
2010-10-12 21:40:28 +00:00
2010-10-15 22:06:56 +00:00
< p > The default Theme mixes styles from multiple swatches to create visual texture and present the various elements in optimal contrast to one another:< / p >
2010-10-11 21:49:12 +00:00
2011-03-10 03:36:14 +00:00
< div data-role = "header" >
2010-10-18 21:41:47 +00:00
< h1 > Default Theme< / h1 >
2010-10-15 22:06:56 +00:00
< / div >
2010-10-16 00:00:21 +00:00
< div class = "ui-bar ui-bar-c" >
2011-03-10 03:36:14 +00:00
< div data-role = "controlgroup" data-type = "horizontal" >
< a href = "#" data-icon = "gear" data-role = "button" data-inline = "true" > Tools< / a >
< a href = "#" data-icon = "star" data-role = "button" data-inline = "true" > Like< / a >
< a href = "#" data-icon = "refresh" data-role = "button" data-inline = "true" > Refresh< / a >
2010-10-16 00:00:21 +00:00
< / div > <!-- /controlgroup -->
< / div >
2010-10-15 22:06:56 +00:00
< div class = "ui-body ui-body-c" >
< h3 > Default Theme Content Header< / h3 >
< p > This is the default content color swatch and a preview of a < a href = "#" class = "ui-link" > link< / a > .< / p >
< label for = "slider1" > Input slider:< / label >
2010-10-16 00:00:21 +00:00
< input type = "range" name = "slider1" id = "slider1" value = "50" min = "0" max = "100" / >
2011-03-10 03:36:14 +00:00
< fieldset data-role = "controlgroup" data-type = "horizontal" data-role = "fieldcontain" >
2010-10-15 22:06:56 +00:00
< legend > Cache settings:< / legend >
2011-01-26 03:24:05 +00:00
< input type = "radio" name = "radio-choice-z1" id = "radio-choice-y1" value = "on" checked = "checked" / >
2010-10-16 00:00:21 +00:00
< label for = "radio-choice-y1" > On< / label >
< input type = "radio" name = "radio-choice-z1" id = "radio-choice-z1" value = "off" / >
< label for = "radio-choice-z1" > Off< / label >
2010-10-15 22:06:56 +00:00
< / fieldset >
2011-03-10 03:36:14 +00:00
< a href = "#" data-role = "button" data-inline = "true" > Button< / a >
2010-10-15 22:06:56 +00:00
< / div >
< div class = "ui-bar ui-bar-a" >
2011-03-10 03:36:14 +00:00
< div data-role = "controlgroup" data-type = "horizontal" >
< a href = "#" data-inline = "true" data-role = "button" > Button< / a > < a href = "#" data-inline = "true" data-role = "button" > Button< / a > < a href = "#" data-inline = "true" data-role = "button" > Button< / a >
2010-10-15 22:06:56 +00:00
< / div > <!-- /controlgroup -->
< / div >
2010-10-11 22:38:34 +00:00
2010-10-11 21:49:12 +00:00
2010-10-15 22:06:56 +00:00
< p > And each of the five "swatches" applies its style consistently across all page elements, as shown below:< / p >
2010-10-11 22:38:34 +00:00
< h2 > Swatch A< / h2 >
2011-03-10 03:36:14 +00:00
< div data-role = "header" data-position = "inline" >
2010-10-11 22:38:34 +00:00
< h1 > Header A< / h1 >
< / div >
< div class = "ui-body ui-body-a" >
< h3 > Header< / h3 >
< p > This is content color swatch "A" and a preview of a < a href = "#" class = "ui-link" > link< / a > .< / p >
< label for = "slider1" > Input slider:< / label >
2011-03-10 03:36:14 +00:00
< input type = "range" name = "slider1" id = "slider1" value = "50" min = "0" max = "100" data-theme = "a" / >
< fieldset data-role = "controlgroup" data-type = "horizontal" data-role = "fieldcontain" >
2010-10-11 22:38:34 +00:00
< legend > Cache settings:< / legend >
< input type = "radio" name = "radio-choice-a1" id = "radio-choice-a1" value = "on" checked = "checked" / >
< label for = "radio-choice-a1" > On< / label >
< input type = "radio" name = "radio-choice-a1" id = "radio-choice-b1" value = "off" / >
< label for = "radio-choice-b1" > Off< / label >
< / fieldset >
2011-03-10 03:36:14 +00:00
< a href = "#" data-role = "button" data-inline = "true" > Button< / a >
2010-10-11 22:38:34 +00:00
< / div >
< div class = "ui-bar ui-bar-a" >
2011-03-10 03:36:14 +00:00
< div data-role = "controlgroup" data-type = "horizontal" >
< a href = "#" data-inline = "true" data-role = "button" > Button< / a > < a href = "#" data-inline = "true" data-role = "button" > Button< / a > < a href = "#" data-inline = "true" data-role = "button" > Button< / a >
2010-10-12 21:40:28 +00:00
< / div > <!-- /controlgroup -->
2010-10-11 22:38:34 +00:00
< / div >
2010-10-11 21:49:12 +00:00
2010-10-11 22:38:34 +00:00
< h2 > Swatch B< / h2 >
2011-03-10 03:36:14 +00:00
< div data-role = "header" data-theme = "b" >
2010-10-11 22:38:34 +00:00
< h1 > Header B< / h1 >
< / div >
< div class = "ui-body ui-body-b" >
< h3 > Header< / h3 >
< p > This is content color swatch "B" and a preview of a < a href = "#" class = "ui-link" > link< / a > .< / p >
< label for = "slider1" > Input slider:< / label >
2011-03-10 03:36:14 +00:00
< input type = "range" name = "slider1" id = "slider1" value = "50" min = "0" max = "100" data-theme = "b" / >
< fieldset data-role = "controlgroup" data-type = "horizontal" data-role = "fieldcontain" >
2010-10-11 22:38:34 +00:00
< legend > Cache settings:< / legend >
< input type = "radio" name = "radio-choice-a2" id = "radio-choice-a2" value = "on" checked = "checked" / >
< label for = "radio-choice-a2" > On< / label >
< input type = "radio" name = "radio-choice-a2" id = "radio-choice-b2" value = "off" / >
< label for = "radio-choice-b2" > Off< / label >
< / fieldset >
2011-03-10 03:36:14 +00:00
< a href = "#" data-role = "button" data-inline = "true" > Button< / a >
2010-10-11 22:38:34 +00:00
< / div >
< div class = "ui-bar ui-bar-b" >
2011-03-10 03:36:14 +00:00
< div data-role = "controlgroup" data-type = "horizontal" >
< a href = "#" data-inline = "true" data-role = "button" > Button< / a > < a href = "#" data-inline = "true" data-role = "button" > Button< / a > < a href = "#" data-inline = "true" data-role = "button" > Button< / a >
2010-10-12 21:40:28 +00:00
< / div > <!-- /controlgroup -->
2010-10-11 22:38:34 +00:00
< / div >
< h2 > Swatch C< / h2 >
2011-03-10 03:36:14 +00:00
< div data-role = "header" data-theme = "c" >
2010-10-11 22:38:34 +00:00
< h1 > Header C< / h1 >
< / div >
< div class = "ui-body ui-body-c" >
< h3 > Header< / h3 >
< p > This is content color swatch "C" and a preview of a < a href = "#" class = "ui-link" > link< / a > .< / p >
< label for = "slider1" > Input slider:< / label >
2011-03-10 03:36:14 +00:00
< input type = "range" name = "slider1" id = "slider1" value = "50" min = "0" max = "100" data-theme = "c" / >
< fieldset data-role = "controlgroup" data-type = "horizontal" data-role = "fieldcontain" >
2010-10-11 22:38:34 +00:00
< legend > Cache settings:< / legend >
< input type = "radio" name = "radio-choice-a3" id = "radio-choice-a3" value = "on" checked = "checked" / >
< label for = "radio-choice-a3" > On< / label >
< input type = "radio" name = "radio-choice-a3" id = "radio-choice-b3" value = "off" / >
< label for = "radio-choice-b3" > Off< / label >
< / fieldset >
2011-03-10 03:36:14 +00:00
< a href = "#" data-role = "button" data-inline = "true" > Button< / a >
2010-10-11 22:38:34 +00:00
< / div >
< div class = "ui-bar ui-bar-c" >
2011-03-10 03:36:14 +00:00
< div data-role = "controlgroup" data-type = "horizontal" >
< a href = "#" data-inline = "true" data-role = "button" > Button< / a > < a href = "#" data-inline = "true" data-role = "button" > Button< / a > < a href = "#" data-inline = "true" data-role = "button" > Button< / a >
2010-10-12 21:40:28 +00:00
< / div > <!-- /controlgroup -->
2010-10-11 22:38:34 +00:00
< / div >
2010-10-11 21:49:12 +00:00
2010-10-11 22:38:34 +00:00
< h2 > Swatch D< / h2 >
2011-03-10 03:36:14 +00:00
< div data-role = "header" data-theme = "d" >
2010-10-11 22:38:34 +00:00
< h1 > Header D< / h1 >
< / div >
< div class = "ui-body ui-body-d" >
< h3 > Header< / h3 >
< p > This is content color swatch "D" and a preview of a < a href = "#" class = "ui-link" > link< / a > .< / p >
< label for = "slider1" > Input slider:< / label >
2011-03-10 03:36:14 +00:00
< input type = "range" name = "slider1" id = "slider1" value = "50" min = "0" max = "100" data-theme = "d" / >
< fieldset data-role = "controlgroup" data-type = "horizontal" data-role = "fieldcontain" >
2010-10-11 22:38:34 +00:00
< legend > Cache settings:< / legend >
< input type = "radio" name = "radio-choice-a4" id = "radio-choice-a4" value = "on" checked = "checked" / >
< label for = "radio-choice-a4" > On< / label >
< input type = "radio" name = "radio-choice-a4" id = "radio-choice-b4" value = "off" / >
< label for = "radio-choice-b4" > Off< / label >
< / fieldset >
2011-03-10 03:36:14 +00:00
< a href = "#" data-role = "button" data-inline = "true" > Button< / a >
2010-10-11 22:38:34 +00:00
< / div >
< div class = "ui-bar ui-bar-d" >
2011-03-10 03:36:14 +00:00
< div data-role = "controlgroup" data-type = "horizontal" >
< a href = "#" data-inline = "true" data-role = "button" > Button< / a > < a href = "#" data-inline = "true" data-role = "button" > Button< / a > < a href = "#" data-inline = "true" data-role = "button" > Button< / a >
2010-10-12 21:40:28 +00:00
< / div > <!-- /controlgroup -->
< / div >
< h2 > Swatch E< / h2 >
2011-03-10 03:36:14 +00:00
< div data-role = "header" data-theme = "e" >
2010-10-12 21:40:28 +00:00
< h1 > Header E< / h1 >
< / div >
< div class = "ui-body ui-body-e" >
< h3 > Header< / h3 >
2011-08-01 01:25:38 +00:00
< p > This is content color swatch "E" and a preview of a < a href = "#" class = "ui-link" > link< / a > .< / p >
2010-10-12 21:40:28 +00:00
< label for = "slider1" > Input slider:< / label >
2011-03-10 03:36:14 +00:00
< input type = "range" name = "slider1" id = "slider1" value = "50" min = "0" max = "100" data-theme = "e" / >
< fieldset data-role = "controlgroup" data-type = "horizontal" data-role = "fieldcontain" >
2010-10-12 21:40:28 +00:00
< legend > Cache settings:< / legend >
< input type = "radio" name = "radio-choice-a5" id = "radio-choice-a5" value = "on" checked = "checked" / >
< label for = "radio-choice-a5" > On< / label >
< input type = "radio" name = "radio-choice-a5" id = "radio-choice-b5" value = "off" / >
< label for = "radio-choice-b5" > Off< / label >
< / fieldset >
2011-03-10 03:36:14 +00:00
< a href = "#" data-role = "button" data-inline = "true" > Button< / a >
2010-10-12 21:40:28 +00:00
< / div >
< div class = "ui-bar ui-bar-e" >
2011-03-10 03:36:14 +00:00
< div data-role = "controlgroup" data-type = "horizontal" >
< a href = "#" data-inline = "true" data-role = "button" > Button< / a > < a href = "#" data-inline = "true" data-role = "button" > Button< / a > < a href = "#" data-inline = "true" data-role = "button" > Button< / a >
2010-10-12 21:40:28 +00:00
< / div > <!-- /controlgroup -->
2010-10-11 22:38:34 +00:00
< / div >
2011-06-20 20:35:27 +00:00
< / div > <!-- /content - primary -->
< div class = "content-secondary" >
2011-09-29 20:35:31 +00:00
< div data-role = "collapsible" data-collapsed = "true" data-theme = "b" data-content-theme = "d" >
2011-06-20 20:35:27 +00:00
2011-06-20 22:23:09 +00:00
< h3 > More in this section< / h3 >
2011-06-20 20:35:27 +00:00
< ul data-role = "listview" data-theme = "c" data-dividertheme = "d" >
2011-06-20 21:17:04 +00:00
< li data-role = "list-divider" > Pages & Dialogs< / li >
2011-07-29 21:29:31 +00:00
< li > < a href = "page-anatomy.html" > Anatomy of a page< / a > < / li >
2011-07-15 21:02:25 +00:00
< li > < a href = "page-template.html" data-ajax = "false" > Single page template< / a > < / li >
< li > < a href = "multipage-template.html" data-ajax = "false" > Multi-page template< / a > < / li >
2011-07-29 21:29:31 +00:00
< li > < a href = "page-titles.html" > Page titles< / a > < / li >
< li > < a href = "page-links.html" > Linking pages< / a > < / li >
2011-08-27 00:07:38 +00:00
< li > < a href = "page-transitions.html" data-ajax = "false" > Page transitions< / a > < / li >
2011-07-29 21:29:31 +00:00
< li > < a href = "page-dialogs.html" > Dialogs< / a > < / li >
2011-09-01 06:46:48 +00:00
< li > < a href = "page-cache.html" > Prefetching & caching pages< / a > < / li >
2011-07-29 21:29:31 +00:00
< li > < a href = "page-navmodel.html" > Ajax, hashes & history< / a > < / li >
2011-09-08 19:34:48 +00:00
< li > < a href = "page-dynamic.html" > Dynamically Injecting Pages< / a > < / li >
2011-08-03 14:10:18 +00:00
< li > < a href = "page-scripting.html" > Scripting pages< / a > < / li >
2011-06-20 21:17:04 +00:00
< li data-theme = "a" > < a href = "pages-themes.html" > Theming pages< / a > < / li >
2011-06-20 20:35:27 +00:00
< / ul >
< / div >
< / div >
< / div > <!-- /content -->
< div data-role = "footer" class = "footer-docs" data-theme = "c" >
2011-06-20 22:50:52 +00:00
< p > © 2011 The jQuery Project< / p >
2011-06-20 20:35:27 +00:00
< / div >
< / div > <!-- /page -->
2010-10-11 21:49:12 +00:00
2011-06-20 20:35:27 +00:00
< / body >
2011-09-01 06:46:48 +00:00
< / html >
