diff --git a/css/structure/jquery.mobile.accordion.css b/css/structure/jquery.mobile.accordion.css index 17a1394e506..d02c027cb06 100644 --- a/css/structure/jquery.mobile.accordion.css +++ b/css/structure/jquery.mobile.accordion.css @@ -19,9 +19,10 @@ .ui-accordion-header .ui-accordion-header-icon { position: absolute; + bottom: auto; left: .5em; top: 50%; - margin-top: -8px; + margin-top: -11px; } .ui-accordion-content { @@ -31,7 +32,7 @@ } .ui-accordion-header-active, -.ui-accordion-header.ui-state-active { +.ui-accordion-header.ui-state-active { border: 1px solid #aaaaaa; font-weight: normal; } diff --git a/css/themes/default/jquery.mobile.theme.css b/css/themes/default/jquery.mobile.theme.css index f58fa212d3b..3781fdc1064 100644 --- a/css/themes/default/jquery.mobile.theme.css +++ b/css/themes/default/jquery.mobile.theme.css @@ -190,6 +190,7 @@ html .ui-alt-icon .ui-radio-off .ui-icon { } /* No disc */ +.ui-nodisc-icon .ui-icon, .ui-nodisc-icon.ui-button .ui-icon, .ui-nodisc-icon .ui-button .ui-icon { background-color: transparent; @@ -238,7 +239,7 @@ html .ui-alt-icon .ui-radio-off .ui-icon { html .ui-bar-a .ui-bar-inherit, html .ui-body-a .ui-bar-inherit, html body .ui-group-theme-a .ui-bar-inherit { - background-color: #e9e9e9 /*{a-bar-background-color}*/; + background-color: #e9e9e9 /*{a-bar-background-color}*/; border-color: #ddd /*{a-bar-border}*/; color: #333 /*{a-bar-color}*/; text-shadow: 0 /*{a-bar-shadow-x}*/ 1px /*{a-bar-shadow-y}*/ 0 /*{a-bar-shadow-radius}*/ #eee /*{a-bar-shadow-color}*/; @@ -253,7 +254,7 @@ html body .ui-group-theme-a .ui-bar-inherit { .ui-overlay-a, .ui-page-theme-a, .ui-page-theme-a .ui-panel-wrapper { - background-color: #f9f9f9 /*{a-page-background-color}*/; + background-color: #f9f9f9 /*{a-page-background-color}*/; border-color: #bbb /*{a-page-border}*/; color: #333 /*{a-page-color}*/; text-shadow: 0 /*{a-page-shadow-x}*/ 1px /*{a-page-shadow-y}*/ 0 /*{a-page-shadow-radius}*/ #f3f3f3 /*{a-page-shadow-color}*/; @@ -268,7 +269,7 @@ html body .ui-group-theme-a .ui-body-inherit, html .ui-panel-page-container-a, .ui-page-theme-a .ui-accordion-content, html .ui-body-a .ui-accordion-content { - background-color: #fff /*{a-body-background-color}*/; + background-color: #fff /*{a-body-background-color}*/; border-color: #ddd /*{a-body-border}*/; color: #333 /*{a-body-color}*/; text-shadow: 0 /*{a-body-shadow-x}*/ 1px /*{a-body-shadow-y}*/ 0 /*{a-body-shadow-radius}*/ #f3f3f3 /*{a-body-shadow-color}*/; @@ -319,8 +320,8 @@ html body .ui-group-theme-a .ui-button:visited, html head + body .ui-button.ui-button-a:visited, /* Accordion */ .ui-page-theme-a .ui-accordion-header, -html .ui-body-a .ui-accordion-header{ - background-color: #f6f6f6 /*{a-bup-background-color}*/; +html .ui-body-a .ui-accordion-header { + background-color: #f6f6f6 /*{a-bup-background-color}*/; border-color: #ddd /*{a-bup-border}*/; color: #333 /*{a-bup-color}*/; text-shadow: 0 /*{a-bup-shadow-x}*/ 1px /*{a-bup-shadow-y}*/ 0 /*{a-bup-shadow-radius}*/ #f3f3f3 /*{a-bup-shadow-color}*/; @@ -334,7 +335,7 @@ html head + body .ui-button.ui-button-a:hover, /* Accordion Hover */ .ui-page-theme-a .ui-accordion-header:hover, html .ui-body-a .ui-accordion-header:hover { - background-color: #ededed /*{a-bhover-background-color}*/; + background-color: #ededed /*{a-bhover-background-color}*/; border-color: #ddd /*{a-bhover-border}*/; color: #333 /*{a-bhover-color}*/; text-shadow: 0 /*{a-bhover-shadow-x}*/ 1px /*{a-bhover-shadow-y}*/ 0 /*{a-bhover-shadow-radius}*/ #f3f3f3 /*{a-bhover-shadow-color}*/; @@ -345,7 +346,7 @@ html .ui-bar-a .ui-button:active, html .ui-body-a .ui-button:active, html body .ui-group-theme-a .ui-button:active, html head + body .ui-button.ui-button-a:active { - background-color: #e8e8e8 /*{a-bdown-background-color}*/; + background-color: #e8e8e8 /*{a-bdown-background-color}*/; border-color: #ddd /*{a-bdown-border}*/; color: #333 /*{a-bdown-color}*/; text-shadow: 0 /*{a-bdown-shadow-x}*/ 1px /*{a-bdown-shadow-y}*/ 0 /*{a-bdown-shadow-radius}*/ #f3f3f3 /*{a-bdown-shadow-color}*/; @@ -419,7 +420,7 @@ html head + body .ui-body-a.ui-focus { html .ui-bar-b .ui-bar-inherit, html .ui-body-b .ui-bar-inherit, html body .ui-group-theme-b .ui-bar-inherit { - background-color: #1d1d1d /*{b-bar-background-color}*/; + background-color: #1d1d1d /*{b-bar-background-color}*/; border-color: #1b1b1b /*{b-bar-border}*/; color: #fff /*{b-bar-color}*/; text-shadow: 0 /*{b-bar-shadow-x}*/ 1px /*{b-bar-shadow-y}*/ 0 /*{b-bar-shadow-radius}*/ #111 /*{b-bar-shadow-color}*/; @@ -434,7 +435,7 @@ html body .ui-group-theme-b .ui-bar-inherit { .ui-overlay-b, .ui-page-theme-b, .ui-page-theme-b .ui-panel-wrapper { - background-color: #252525 /*{b-page-background-color}*/; + background-color: #252525 /*{b-page-background-color}*/; border-color: #454545 /*{b-page-border}*/; color: #fff /*{b-page-color}*/; text-shadow: 0 /*{b-page-shadow-x}*/ 1px /*{b-page-shadow-y}*/ 0 /*{b-page-shadow-radius}*/ #111 /*{b-page-shadow-color}*/; @@ -448,7 +449,7 @@ html .ui-body-b .ui-body-inherit, html body .ui-group-theme-b .ui-body-inherit, .ui-page-theme-b .ui-accordion-content, html .ui-body-b .ui-accordion-content { - background-color: #2a2a2a /*{b-body-background-color}*/; + background-color: #2a2a2a /*{b-body-background-color}*/; border-color: #1d1d1d /*{b-body-border}*/; color: #fff /*{b-body-color}*/; text-shadow: 0 /*{b-body-shadow-x}*/ 1px /*{b-body-shadow-y}*/ 0 /*{b-body-shadow-radius}*/ #111 /*{b-body-shadow-color}*/; @@ -500,7 +501,7 @@ html head + body .ui-button.ui-button-b:visited, /* Accordion */ .ui-page-theme-b .ui-accordion-header, html .ui-body-b .ui-accordion-header { - background-color: #333 /*{b-bup-background-color}*/; + background-color: #333 /*{b-bup-background-color}*/; border-color: #1f1f1f /*{b-bup-border}*/; color: #fff /*{b-bup-color}*/; text-shadow: 0 /*{b-bup-shadow-x}*/ 1px /*{b-bup-shadow-y}*/ 0 /*{b-bup-shadow-radius}*/ #111 /*{b-bup-shadow-color}*/; @@ -513,7 +514,7 @@ html body .ui-group-theme-b .ui-button:hover, html head + body .ui-button.ui-button-b:hover, .ui-page-theme-b .ui-accordion-header:hover, html .ui-body-b .ui-accordion-header:hover { - background-color: #373737 /*{b-bhover-background-color}*/; + background-color: #373737 /*{b-bhover-background-color}*/; border-color: #1f1f1f /*{b-bhover-border}*/; color: #fff /*{b-bhover-color}*/; text-shadow: 0 /*{b-bhover-shadow-x}*/ 1px /*{b-bhover-shadow-y}*/ 0 /*{b-bhover-shadow-radius}*/ #111 /*{b-bhover-shadow-color}*/; @@ -524,7 +525,7 @@ html .ui-bar-b .ui-button:active, html .ui-body-b .ui-button:active, html body .ui-group-theme-b .ui-button:active, html head + body .ui-button.ui-button-b:active { - background-color: #404040 /*{b-bdown-background-color}*/; + background-color: #404040 /*{b-bdown-background-color}*/; border-color: #1f1f1f /*{b-bdown-border}*/; color: #fff /*{b-bdown-color}*/; text-shadow: 0 /*{b-bdown-shadow-x}*/ 1px /*{b-bdown-shadow-y}*/ 0 /*{b-bdown-shadow-radius}*/ #111 /*{b-bdown-shadow-color}*/; diff --git a/demos/_assets/css/jqm-demos.css b/demos/_assets/css/jqm-demos.css index aa7e91cf97f..f281bf10797 100644 --- a/demos/_assets/css/jqm-demos.css +++ b/demos/_assets/css/jqm-demos.css @@ -1,382 +1,797 @@ /* JQM Demos custom CSS */ +/* Typography */ + +.jqm-demos .jqm-header, +.jqm-demos .jqm-footer, +.jqm-content > h1, +.jqm-content > h2, +.jqm-content > h3, +.jqm-content > p, +.jqm-content > ul, +.jqm-content .jqm-api-docs-link, +.jqm-content .jqm-toc-link, +.jqm-content .jqm-top-link, +.jqm-content > a.ui-button, +.jqm-content > p > a.ui-button, +.jqm-home .jqm-block-content h3, +.jqm-home .jqm-block-content p, +.jqm-demos .jqm-navmenu-panel .ui-listview-item-divider, +.jqm-demos .jqm-navmenu-panel .ui-button, +.jqm-demos .jqm-navmenu-panel .ui-accordion-header, +.jqm-demos .jqm-quicklink-panel .ui-listview-item-divider, +.jqm-demos .jqm-quicklink-panel .ui-button, +.jqm-search-list .ui-listview-item-button, +.jqm-content .jqm-view-source-link, +.jqm-view-source .ui-collapsible-heading .ui-button { + font-family: 'Open Sans', sans-serif; +} + +/* Page */ + +@media ( min-width: 60em ) { + .jqm-demos { + background-image: -moz-linear-gradient(left, #f5f5f5 0%, #f5f5f5 30%, #f9f9f9 30%, #f9f9f9 100%); + background-image: -webkit-linear-gradient(left, #f5f5f5 0%, #f5f5f5 30%, #f9f9f9 30%, #f9f9f9 100%); + background-image: linear-gradient(to right, #f5f5f5 0%, #f5f5f5 30%, #f9f9f9 30%, #f9f9f9 100%); + } +} + +@media ( min-width: 80em ) { + .jqm-demos { + background-image: -moz-linear-gradient(left, #f5f5f5 0%, #f5f5f5 22%, #f9f9f9 22%, #f9f9f9 100%); + background-image: -webkit-linear-gradient(left, #f5f5f5 0%, #f5f5f5 22%, #f9f9f9 22%, #f9f9f9 100%); + background-image: linear-gradient(to right, #f5f5f5 0%, #f5f5f5 22%, #f9f9f9 22%, #f9f9f9 100%); + } +} + /* Header */ + .jqm-demos .jqm-header { background: #fff; - border-top: 4px solid #3eb249; - border-bottom-color: #eee; + border: 0; } -.jqm-demos .jqm-header h2 { - padding: .4em 0 .1em; + +.jqm-header > .ui-toolbar-title { margin: 0 3em; + padding: .5em 0; } -.jqm-demos .jqm-header h2 a { + +.jqm-header > .ui-toolbar-title > a { display: inline-block; text-decoration: none; - min-height: 40px; + vertical-align: middle; } -.jqm-demos .jqm-header h2 img { + +.jqm-header > .ui-toolbar-title img { display: block; - width: 140px; height: auto; + width: 140px; + max-width: 100%; } -.jqm-demos .jqm-header h2 > img { + +.jqm-home > .jqm-header > .ui-toolbar-title img { display: inline-block; + vertical-align: middle; } -.jqm-demos .jqm-header p { - position: absolute; - bottom: -2em; - left: 1em; - margin: 0; - color: #666; - font-family: 'Open Sans', sans-serif; - font-weight: 300; - text-transform: uppercase; -} -.jqm-demos .jqm-header .ui-button { - width: 2em; - height: 2em; + +.jqm-header .jqm-navmenu-link, +.jqm-header .jqm-search-link { background: none; border: 0; + display: block; + height: 2em; + width: 2em; top: 50%; - margin-top: -1em; - -webkit-border-radius: .3125em; - border-radius: .3125em; - opacity: .4; - filter: Alpha(Opacity=40); + margin-top: -29px; + transition: background-color 300ms ease; +} + +.jqm-header .jqm-navmenu-link { + left: .5em; +} + +.jqm-header .jqm-search-link { + right: .5em; +} + +.jqm-header .jqm-banner { + background: #0e82a5; + padding: .25em 1em; +} + +.jqm-header .jqm-banner > h3 { + color: #fff; + font-size: .875em; + font-weight: 400; + text-shadow: 0 1px 0 #0d7696; + text-transform: uppercase; + text-align: center; + margin: 0; +} + +@media ( min-width: 48em ) { + .jqm-header > .ui-toolbar-title { + margin: 0 4em; + padding: .75em 0; + } + + .jqm-header .jqm-banner > h3 { + font-size: .9375em; + } + + .jqm-header > .ui-toolbar-title img { + width: 157px; + } + + .jqm-header .jqm-navmenu-link { + margin-top: -30px; + left: 1.5em; + } + + .jqm-header .jqm-search-link { + margin-top: -30px; + right: 1.5em; + } +} + +@media ( min-width: 60em ) { + .jqm-header > .ui-toolbar-title { + text-align: left; + margin: 0 4em 0 2em; + } + + .jqm-header .jqm-banner { + padding: .375em 2em; + } + + .jqm-header .jqm-banner > h3 { + font-size: 1em; + text-align: left; + } + + .jqm-header > .ui-toolbar-title img { + width: 175px; + } + + .jqm-header .jqm-navmenu-link { + display: none; + } + + .jqm-header .jqm-search-link { + margin-top: -32px; + } } /* Footer */ -.jqm-demos .jqm-footer.ui-toolbar-footer { + +.jqm-demos .jqm-footer { position: absolute; bottom: 0; - padding-bottom: 0; + background: #e9e9e9; + border-bottom: 0; + border-top: 2px solid #0e82a5; + color: #111; + text-align: center; + padding: .75em 0; } -.jqm-demos .jqm-footer { - border-top: 1px solid #3eb249; + +.jqm-footer h6.ui-toolbar-title { + font-size: .9375em; + font-weight: 700; + margin: 0 1.0667em 1.0667em; + padding: 0; } -.jqm-demos .jqm-footer p { - font-size: .8em; - color: #999; - font-family: 'Open Sans', sans-serif; + +.jqm-footer p { + font-size: .75em; font-weight: 300; - margin: 0 1.25em 1.25em; + margin: 0; } -.jqm-demos .jqm-footer p:first-child { - font-size: 1em; - color: #666; - font-weight: 400; - margin: 1em 1em .75em; + +.jqm-footer > ul { + margin: 0 1em 1em; + padding: 0; + list-style: none; + border-top: 1px solid #ddd; + border-bottom: 1px solid #ddd; + padding: 0 .15em; + display: inline-block; } -/* Content */ -.jqm-demos .jqm-content { - padding-top: 3em; -} -.jqm-demos .jqm-content > h1, -.jqm-demos .jqm-content > h2, -.jqm-demos .jqm-content > h3, -.jqm-demos .jqm-content > p, -.jqm-demos .jqm-content > ul li, -.jqm-demos .jqm-content > a, -.jqm-demos-intro h1, -.jqm-demos-intro p { - font-family: 'Open Sans', sans-serif; - font-weight: 300; +.jqm-footer > ul > li { + font-size: .875em; + display: inline-block; + margin: 0 .5em; + padding: .3em 0; } -.jqm-demos .jqm-content > h1, -.jqm-demos-intro > h1 { - font-size: 2.4em; - margin: 0 0 .625em; + +.jqm-footer > ul > li > a, +.jqm-footer > ul > li > a:visited { + font-weight: 400; + text-decoration: none; + color: #757575; + transition: color 300ms ease; } -.jqm-demos-intro { - width:65%; - padding:2%; + +.jqm-footer > ul > li > a:hover, +.jqm-footer > ul > li > a:active { + color: #333; +} + +.jqm-footer > ul > li > a::before { + content: ''; display: inline-block; - vertical-align: top; + vertical-align: middle; + margin-right: .5em; + height: 16px; + width: 16px; + background-position: center; + background-repeat: no-repeat; + background-size: 16px 16px; + background-image: url("../img/github.png"); } -.jqm-demos-hero { - width: 190px; - float: left; - margin-right: 2em; + +.jqm-footer > ul > li:first-child > a::before { + background-image: url("../img/jqm-icon.png"); } -.jqm-demos .jqm-content > h2 { - color: #3eb249; - background-color: transparent; - border-bottom: 1px solid #ddd; - font-size: 1.6em; - padding-bottom: .2em; - margin: 0 0 .7375em; + +@media ( min-width: 48em ) { + .jqm-footer h6.ui-toolbar-title { + font-size: 1em; + margin: 0 1em 1em; + } } -.jqm-demos .jqm-content > h3 { - color: #3eb249; - background-color: transparent; - font-size: 1.4em; - margin: 0 0 1em; + +@media ( min-width: 60em ) { + .jqm-demos .jqm-footer { + text-align: left; + padding: .75em 0; + } + + .jqm-footer h6.ui-toolbar-title { + font-size: 1em; + font-weight: 400; + margin: 0 0 .5em 2em; + float: left; + } + + .jqm-footer p { + font-size: .875em; + margin: 0 0 0 2.2857em; + float: left; + clear: left; + } + + .jqm-footer > ul { + margin: .75em 2em 0 0; + border: 0; + padding: 0; + display: block; + float: right; + } + + .jqm-footer > ul > li { + font-size: .9375em; + display: block; + margin: 0 0 0 2em; + padding: 0; + float: left; + } } -.jqm-demos .jqm-content > p, -.jqm-demos-intro > p { - font-size: 1.2em; - line-height: 1.5; + +/* Content */ + +.jqm-content { + padding: 2em 1em; } -.jqm-demos .jqm-content > ul:not(.jqm-list) li { - font-size: 1.2em; - line-height: 1.5; + +@media ( min-width: 48em ) { + .jqm-content { + padding: 2em; + } } -.jqm-demos .jqm-content > p { - margin: 0 0 1.25em; + +@media ( min-width: 60em ) { + .jqm-content { + -webkit-box-sizing: border-box; + box-sizing: border-box; + position: relative; + float: right; + width: 70%; + padding: 5% 8%; + } + + .jqm-content.jqm-fullwidth { + float: none; + padding: 5% 23%; + width: auto; + } } -.jqm-demos .jqm-content > ul, -.jqm-demos .jqm-content > ol { - padding-left: 1.3em; + +@media ( min-width: 80em ) { + .jqm-content { + width: 78%; + padding: 5% 12%; + } } -.jqm-demos .jqm-content > .ui-listview { - padding-left: 0; + +@media ( min-width: 120em ) { + .jqm-content { + padding: 5% 16%; + } } -.jqm-demos .jqm-content > a, -.jqm-demos .jqm-content > p a, -.jqm-demos .jqm-content > ul:not(.jqm-list) li a { - font-weight: 400; - text-decoration: none; + +/* Headings */ + +.jqm-content > h1 { + font-size: 2em; + font-weight: 300; + margin: 0 0 .75em; } -.jqm-demos .jqm-content strong { - font-weight: 700; + +.jqm-content > h2 { + font-size: 1.5em; + font-weight: 400; + color: #3eb249; + margin: 0 0 .75em; } -.jqm-demos .jqm-content > p strong { + +.jqm-content > h3 { + font-size: 1.25em; font-weight: 400; + color: #999; + margin: 1.5em 0 .75em; } -/* Homepage */ -.jqm-home .ui-grid-a { - margin: 2.5em -.5em -.5em; +.jqm-content > .jqm-toc-link + h2, +.jqm-content > .jqm-top-link-container + h2 { + margin-top: 1.38em; } -.jqm-block-content { - margin: .5em; - padding: 1em; - background: #fff; - border: 1px solid #eee; - -webkit-border-radius: .3125em; - border-radius: .3125em; - font-family: 'Open Sans', sans-serif; + +@media ( min-width: 48em ) { + .jqm-content > h1 { + font-size: 2.5em; + } } -.jqm-block-content h3 { - font-size: 1.5em; - font-weight: 300; - color: #3eb249; - border-bottom: 1px solid #ddd; - padding-bottom: .25em; - margin: 0 0 .5em; + +@media ( min-width: 60em ) { + .jqm-content > h1 { + font-size: 3.5em; + } + + .jqm-content > h2 { + font-size: 2em; + } + + .jqm-content > h3 { + font-size: 1.75em; + } + + .jqm-content > .jqm-toc-link + h2, + .jqm-content > .jqm-top-link-container + h2 { + margin-top: 1.5em; + } } -.jqm-block-content p { - font-size: 1.1em; + +/* Paragraphs */ + +.jqm-content > p { font-weight: 300; - line-height: 1.4; - margin: .7em 0; + line-height: 1.6; + margin: 0 0 .75em; } -.jqm-block-content p:last-child { - margin-bottom: 0; + +.jqm-content > h1 + p, +.jqm-content > h1 + .jqm-api-docs-link + p { + font-size: 1.15em; + font-weight: 400; + margin-bottom: 1.5em; } -.jqm-block-content a:link { - font-weight: 300; + +@media ( min-width: 60em ) { + .jqm-content > p { + font-size: 1.25em; + } + + .jqm-content > h1 + p, + .jqm-content > h1 + .jqm-api-docs-link + p { + font-size: 1.4em; + margin-bottom: 2.4em; + } +} + +/* Links */ + +.jqm-content > p a { + font-weight: 400; text-decoration: none; + transition: color 300ms ease; +} + +/* Buttons */ + +.jqm-content > p > a.ui-button, +.jqm-content > a.ui-button { + font-weight: 400; + margin-bottom: 1.5em; +} + +/* Lists */ + +.jqm-content > ul { + font-weight: 300; + line-height: 1.6; + padding-left: 1.3em; +} + +.jqm-content > ul li { + margin-bottom: .75em; +} + +@media ( min-width: 60em ) { + .jqm-content > ul { + font-size: 1.25em; + } } /* Code */ -.jqm-content pre, -.jqm-content code { + +.jqm-content > p code, +.jqm-content > pre > code { font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; - background: #e5e5e5; - background: rgba(0,0,0,.05); - padding: 0 .125em; } -.jqm-content pre { - padding: 0 1em 1.2em; + +.jqm-content > p code, +.jqm-content > pre { + background: #efefef; + background: rgba(0,0,0,.04); + -webkit-border-radius: 3px; + border-radius: 3px; +} + +.jqm-content > p code { + font-size: 1.1em; + padding: 0 .2em; +} + +.jqm-content > pre { + border: 1px solid #e2e2e2; white-space: pre-wrap; + margin: 1.5em 0; + padding: 0 1em 1.2em; } -.jqm-content pre > code { - padding: 0; - background: none; + +.jqm-content > pre > code { font-size: .9em; } -/* Lists */ -.jqm-demos .jqm-search .jqm-list { - margin: 0 -1em 1em; +@media ( min-width: 60em ) { + .jqm-content > pre { + margin: 2em 0; + } + .jqm-content > pre > code { + font-size: 1em; + } } -.jqm-demos .jqm-list .ui-button, -.jqm-demos .jqm-list .ui-button:visited, -.jqm-demos .jqm-list .ui-listview-item-divider { - font-family: 'Open Sans', sans-serif; - font-weight: 300; - text-shadow: none !important; + +/* Strong */ + +.jqm-content > p strong, +.jqm-content > ul >li strong { + font-weight: 400; } -.jqm-demos .jqm-list .ui-button:hover, -.jqm-demos .jqm-list .ui-button:active { - color: #3388cc; + +/* API docs link and Table of Contents link */ + +.jqm-content > .jqm-api-docs-link, +.jqm-content > .jqm-api-docs-link:visited, +.jqm-content > .jqm-toc-link, +.jqm-content > .jqm-toc-link:visited { + color: #757575; + font-size: .875em; + text-decoration: none; + transition: color 300ms ease; } -.jqm-demos .jqm-list .ui-button.ui-button-active { - color: #fff; + +.jqm-content > .jqm-api-docs-link:hover, +.jqm-content > .jqm-api-docs-link:active, +.jqm-content > .jqm-toc-link:hover, +.jqm-content > .jqm-toc-link:active { + color: #333; } -.jqm-demos .jqm-list .ui-listview-item-divider { - color: #3eb249; + +.jqm-content > .jqm-toc-link { + margin-left: -5px; } -/* Navmenu */ -.jqm-navmenu-panel .ui-listview > li .ui-collapsible-heading { - margin: 0; +.jqm-content > .jqm-api-docs-link > .ui-icon, +.jqm-toc-link > .ui-icon { + opacity: .55; + transition: opacity 300ms ease; } -.jqm-navmenu-panel .ui-collapsible.ui-listview-item-static { - padding: 0; - border: none !important; + +.jqm-content > .jqm-api-docs-link:hover > .ui-icon, +.jqm-content > .jqm-api-docs-link:active > .ui-icon, +.jqm-toc-link:hover > .ui-icon, +.jqm-toc-link:active > .ui-icon { + opacity: .75; } -.jqm-navmenu-panel .ui-collapsible + li > .ui-button, -.jqm-navmenu-panel .ui-collapsible + .ui-collapsible > .ui-collapsible-heading > .ui-button, -.jqm-navmenu-panel .ui-panel-inner > .ui-listview > li.ui-first-child .ui-button { - border-top: none !important; + +@media ( max-width: 60em ) { + .jqm-content > .jqm-api-docs-link::before, + .jqm-content > .jqm-api-docs-link::after { + content: ''; + display: block; + height: 0; + border-top: 1px solid #eee; + } + + .jqm-content > .jqm-api-docs-link::before { + margin-bottom: .25em; + } + + .jqm-content > .jqm-api-docs-link::after { + margin: .25em 0 1.5em; + } } -.jqm-navmenu-panel .ui-listview .ui-listview .ui-button { - padding-left: 1.5em; + +@media ( min-width: 60em ) { + .jqm-content > .jqm-api-docs-link, + .jqm-content > .jqm-toc-link { + font-size: .9375em; + } + + .jqm-content > .jqm-api-docs-link { + position: absolute; + right: 1.6em; + top: 1.6em; + } +} + +/* Scroll to top links */ + +.jqm-top-link-container { + text-align: right; + position: relative; +} + +.jqm-top-link-container > span { + font-size: .75em; +} + +.jqm-top-link-container .jqm-top-link, +.jqm-top-link-container .jqm-top-link:visited { + color: #bbb; + text-decoration: none; + transition: color 300ms ease; +} + +.jqm-top-link-container .jqm-top-link:hover, +.jqm-top-link-container .jqm-top-link:active { color: #999; } -.jqm-navmenu-panel .ui-listview .ui-listview .ui-button.ui-button-active { + +.jqm-top-link > .ui-icon { + height: 10px; + width: 10px; + background-size: cover; + margin-left: 3px; + opacity: .25; + transition: opacity 300ms ease; +} + +.jqm-top-link:hover > .ui-icon, +.jqm-top-link:active > .ui-icon { + opacity: .4; +} + +.jqm-top-link-container > span::before { + content: ''; + display: block; + height: 0; + border-top: 1px solid #eee; + position: absolute; + top: 50%; + left: 0; + right: 4.5em; +} + +@media ( min-width: 60em ) { + .jqm-content .jqm-top-link-container { + margin: 0 -10%; + } +} + +/* Navmenu */ + +.jqm-navmenu-panel { + background: #f5f5f5; +} + +.jqm-navmenu-panel .ui-listview-item-divider, +.jqm-navmenu-panel li.ui-listview-item-static, +.jqm-navmenu-panel .ui-listview li > .ui-listview-item-button, +.jqm-navmenu-panel li > .ui-accordion-header, +.jqm-navmenu-panel li > .ui-accordion-header.ui-accordion-header-active { + background: transparent; + border: 0; +} + +.jqm-navmenu-panel li.ui-listview-item-divider { + background: #8ac75b; color: #fff; + text-shadow: 0 1px 0 #6abb45; + font-size: .9375em; + margin: 2px 2px 0; + padding: .5em .9333em; +} + +.jqm-navmenu-panel li.ui-listview-item-static { + padding: 0; +} + +.jqm-navmenu-panel .ui-listview li > .ui-listview-item-button, +.jqm-navmenu-panel .ui-listview li > .ui-listview-item-button:visited, +.jqm-navmenu-panel li > .ui-accordion-header { + color: #757575; + text-shadow: 0 1px 0 #f3f3f3; + font-size: .9375em; + font-weight: 400; + padding: .75em 2em .75em .9333em; + transition: all 300ms ease; +} + +.jqm-navmenu-panel .ui-accordion-content li > .ui-listview-item-button, +.jqm-navmenu-panel .ui-accordion-content li > .ui-accordion-header { + padding-left: 1.75em; +} + +.jqm-navmenu-panel .ui-accordion-content .ui-accordion-content li > .ui-listview-item-button, +.jqm-navmenu-panel .ui-accordion-content .ui-accordion-content li > .ui-accordion-header { + padding-left: 2.5em; +} + +.jqm-navmenu-panel li > .ui-accordion-header { + -webkit-border-radius: 0; + border-radius: 0; + margin: 0; +} + +.jqm-navmenu-panel li > .ui-accordion-content { + background: transparent; + border: 0; + -webkit-border-radius: 0; + border-radius: 0; + padding: 0; } -.jqm-navmenu-panel .ui-button > .ui-icon { - opacity: .4; - filter: Alpha(Opacity=40); + +.jqm-navmenu-panel .ui-accordion-header > .ui-icon { + left: auto; + right: .5em; + opacity: .1; + transition: opacity 300ms ease; } -.jqm-demos .jqm-navmenu-panel.jqm-panel-page-nav { - display: none; + +.jqm-navmenu-panel .ui-listview-item-button > .ui-icon { position: absolute; - top: 178px; - left: 12px; + right: .5em; + opacity: 0; + transition: opacity 300ms ease; } -.jqm-demos .jqm-navmenu-panel.jqm-panel-page-nav ul li:first-child a{ - border-top: none; + +.jqm-navmenu-panel .ui-accordion-header:hover > .ui-icon, +.jqm-navmenu-panel .ui-accordion-header:focus > .ui-icon, +.jqm-navmenu-panel .ui-accordion-header:active > .ui-icon, +.jqm-navmenu-panel .ui-listview-item-button:hover > .ui-icon, +.jqm-navmenu-panel .ui-listview-item-button:focus > .ui-icon, +.jqm-navmenu-panel .ui-listview-item-button:active > .ui-icon { + opacity: .4; } -/* Search */ -.jqm-search-panel .ui-panel-inner { - padding-top: 0; + +.jqm-navmenu-panel > .ui-panel-inner > .ui-listview > li .ui-listview-item-button, +.jqm-navmenu-panel > .ui-panel-inner > .ui-listview > li .ui-accordion-header { + margin-top: 2px; } -.jqm-search-panel .ui-textinput-search { - margin: 1em 0; + +.jqm-navmenu-panel > .ui-panel-inner > .ui-listview > li > .ui-listview-item-button, +.jqm-navmenu-panel > .ui-panel-inner > .ui-listview > li > .ui-accordion-header { + margin: 2px 2px 0; } -.jqm-search-panel .ui-textinput-search.ui-focus { - -webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,.2); - -moz-box-shadow: inset 0 1px 3px rgba(0,0,0,.2); - box-shadow: inset 0 1px 3px rgba(0,0,0,.2); + +.jqm-navmenu-panel > .ui-panel-inner > .ui-listview > li > .ui-accordion-content { + margin: 0 2px; } -.jqm-list .jqm-search-results-keywords { - padding: .46857em 0 0; - font-size: .8em; - font-weight: 300; - color: #999; - display: block; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; + +.jqm-navmenu-panel > .ui-panel-inner > .ui-listview > li:nth-child(even) > .ui-listview-item-button, +.jqm-navmenu-panel > .ui-panel-inner > .ui-listview > li:nth-child(even) > .ui-accordion-header { + background: #f1f1f1; } -.ui-button-active .jqm-search-results-keywords { - color: #fff; + +.jqm-navmenu-panel > .ui-panel-inner > .ui-listview > li:nth-child(odd) > .ui-listview-item-button, +.jqm-navmenu-panel > .ui-panel-inner > .ui-listview > li:nth-child(odd) > .ui-accordion-header { + background: #ececec; } -.jqm-search-results-highlight { - color: #3388cc; - font-weight: 400; + +.jqm-navmenu-panel .ui-listview li > .ui-listview-item-button:hover, +.jqm-navmenu-panel .ui-listview li > .ui-listview-item-button:focus, +.jqm-navmenu-panel .ui-listview li > .ui-listview-item-button:active, +.jqm-navmenu-panel .ui-listview li > .ui-accordion-header:hover, +.jqm-navmenu-panel .ui-listview li > .ui-accordion-header:focus, +.jqm-navmenu-panel .ui-listview li > .ui-accordion-header:active { + color: #333; + text-shadow: 0 1px 0 #f3f3f3; } -.ui-button-active .jqm-search-results-highlight { - color: #fff; - font-weight: 300; + +.jqm-navmenu-panel > .ui-panel-inner > .ui-listview > li .ui-accordion-content .ui-accordion-header:hover { + background: transparent; } -/* API docs links */ -.jqm-api-docs-link { - float: right; +.jqm-navmenu-panel > .ui-panel-inner > .ui-listview > li .ui-listview-item-button:focus, +.jqm-navmenu-panel > .ui-panel-inner > .ui-listview > li .ui-accordion-header:focus { + outline: 0; + -webkit-box-shadow: inset 0 0 1px #3388cc; + -moz-box-shadow: inset 0 0 1px #3388cc; + box-shadow: inset 0 0 1px #3388cc; } -/* Quick links */ -.jqm-demos .jqm-content .jqm-deeplink { - display: block; - color: #999; - font-weight: 300; - border-top: 1px solid #eee; - text-align: right; - padding-top: .2em; - margin: 0 0 1.5em; +.jqm-navmenu-panel > .ui-panel-inner > .ui-listview > li .ui-accordion-header.ui-accordion-header-active { + background: #e1e1e1; + color: #333; + text-shadow: 0 1px 0 #f3f3f3; } -.jqm-demos .jqm-content .jqm-deeplink .ui-icon { - opacity: .4; - filter: Alpha(Opacity=40); + +.jqm-navmenu-panel > .ui-panel-inner > .ui-listview > li .ui-accordion-content-active { + background: #f5f5f5; + border-bottom: 2px solid #e1e1e1; } -/* View source links */ -.jqm-demos .jqm-content .jqm-view-source-link, -.jqm-demos .jqm-content .jqm-view-source-link:visited, -.jqm-demos .jqm-content .jqm-view-source-link:hover, -.jqm-demos .jqm-content .jqm-view-source-link:active { - color: #3eb249; - font-family: 'Open Sans', sans-serif; - font-weight: 400; - margin: 2em 0 1.5em 1em; +.jqm-navmenu-panel > .ui-panel-inner > .ui-listview > li .ui-accordion-content .ui-accordion-header.ui-accordion-header-active { + background: #ededed; + color: #333; + text-shadow: 0 1px 0 #f3f3f3; } -.jqm-demos .jqm-content .jqm-view-source-link.ui-button-active:link { - color: #fff; + +.jqm-navmenu-panel > .ui-panel-inner > .ui-listview > li .ui-accordion-content .ui-accordion-content-active { + background: #fafafa; + border-bottom: 2px solid #ededed; } -.ui-listview > li.jqm-3rd-party { - background: rgba(51, 136, 204, .1); - overflow: hidden; +.jqm-navmenu-panel > .ui-panel-inner > .ui-listview li.jqm-3rd-party .ui-listview-item-button { + background: #ebeff3; } -.jqm-3rd-party:after { +li.jqm-3rd-party .ui-listview-item-button::before { content: "3rd Party"; padding: .3em 3em; - background: #3388cc; + background: #99c3e5; color: #fff; + text-shadow: none; position: absolute; - top: 1em; - right: -3em; - font-size: .7em; - -webkit-transform: rotate(45deg); - -ms-transform: rotate(45deg); - transform: rotate(45deg); + top: 1.4em; + left: -3.2em; + font-size: .625em; + -webkit-transform: rotate(-60deg); + -ms-transform: rotate(-60deg); + transform: rotate(-60deg); +} +.jqm-panel-page .ui-panel-wrapper > .jqm-navmenu-panel { + display: none; } -@media (min-width: 60em) { - .jqm-demos .jqm-header h2 { - margin: 0 1em 0 3%; - text-align: left; - } - .jqm-demos .jqm-header p { - bottom: auto; - left: auto; - top: 50%; - right: 15%; - font-size: 1.2em; - margin-top: -.625em; - } - .jqm-demos .jqm-navmenu-link { - display: none; - } - .jqm-demos .jqm-search-link { - right: 3%; - } - .jqm-demos .jqm-footer p { - float: right; - margin: 1.5em 3% 1.5em 1.5em; - } - .jqm-demos .jqm-footer p:first-child { - float: left; - margin: 1.25em 1.25em 1.25em 3%; - } +.jqm-panel-page .ui-panel-wrapper ~ .jqm-navmenu-panel { + display: block; +} + +@media ( min-width: 60em ) { .jqm-demos .jqm-navmenu-panel { visibility: visible; position: relative; left: 0; clip: initial; float: left; - width: 25%; - background: none; + width: 30%; -webkit-transition: none !important; -moz-transition: none !important; transition: none !important; @@ -386,161 +801,387 @@ -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; + padding-bottom: 2px; + z-index: auto; } - .jqm-demos.jqm-panel-page .jqm-navmenu-panel { + + .jqm-navmenu-panel li.ui-listview-item-divider { display: none; } - html .jqm-demos.jqm-panel-page .jqm-navmenu-panel.jqm-panel-page-nav { - display: block; + + .jqm-navmenu-panel .ui-listview li > .ui-listview-item-button, + .jqm-navmenu-panel li > .ui-accordion-header { + padding-left: 2em; } - .jqm-demos .jqm-navmenu-panel .ui-panel-inner { - margin-top: 3em; - margin-bottom: 3em; + + .jqm-navmenu-panel .ui-accordion-content li > .ui-listview-item-button, + .jqm-navmenu-panel .ui-accordion-content li > .ui-accordion-header { + padding-left: 2.75em; } - .jqm-demos .jqm-content { - width: 67%; - padding-top: 2em; - padding-left: 5%; - padding-right: 3%; - float: right; + + .jqm-navmenu-panel .ui-accordion-content .ui-accordion-content li > .ui-listview-item-button, + .jqm-navmenu-panel .ui-accordion-content .ui-accordion-content li > .ui-accordion-header { + padding-left: 3.5em; } - .jqm-demos .jqm-content.jqm-fullwidth { - width: auto; - padding-left: 15%; - padding-right: 15%; - float: none; + + .jqm-panel-page .ui-panel-wrapper > .jqm-navmenu-panel { + display: block; } - .jqm-navmenu-panel .ui-listview .ui-button { - padding-left: 12.5%; + + .jqm-panel-page .ui-panel-wrapper ~ .jqm-navmenu-panel { + display: none; } - .jqm-navmenu-panel .ui-listview .ui-listview .ui-button { - padding-left: 15%; +} + +@media ( min-width: 80em ) { + .jqm-demos .jqm-navmenu-panel { + width: 22%; } - .jqm-navmenu-panel .ui-collapsible, - .jqm-navmenu-panel .ui-collapsible-content, - .jqm-navmenu-panel .ui-button { - background: none !important; - border-color: #ddd !important; +} + +/* Table of Contents panel */ + +.jqm-quicklink-panel { + background: #f5f5f5; +} + +.jqm-quicklink-panel li.ui-listview-item-divider { + background: #8ac75b; + color: #fff; + text-shadow: 0 1px 0 #6abb45; + font-size: .9375em; + margin: 2px 2px 0; + padding: .5em .9333em; +} + +.jqm-quicklink-panel > .ui-panel-inner > .ui-listview > li > .ui-listview-item-button { + color: #757575; + text-shadow: 0 1px 0 #f3f3f3; + font-size: .9375em; + font-weight: 400; + border: 0; + padding: .75em 1.5em .75em 1em; + transition: all 300ms ease; + margin: 2px 2px 0; +} + +.jqm-quicklink-panel .ui-listview li > .ui-listview-item-button:hover, +.jqm-quicklink-panel .ui-listview li > .ui-listview-item-button:focus, +.jqm-quicklink-panel .ui-listview li > .ui-listview-item-button:active { + color: #333; + text-shadow: 0 1px 0 #f3f3f3; +} + +.jqm-quicklink-panel > .ui-panel-inner > .ui-listview > li .ui-listview-item-button:focus { + outline: 0; + -webkit-box-shadow: inset 0 0 1px #0e82a5; + -moz-box-shadow: inset 0 0 1px #0e82a5; + box-shadow: inset 0 0 1px #0e82a5; +} + +.jqm-quicklink-panel > .ui-panel-inner > .ui-listview > li:nth-child(even) > .ui-listview-item-button { + background: #f1f1f1; +} + +.jqm-quicklink-panel > .ui-panel-inner > .ui-listview > li:nth-child(odd) > .ui-listview-item-button { + background: #ececec; +} + +@media ( min-width: 60em ) { + .jqm-demos .jqm-quicklink-panel { + width: 20em; } - .jqm-navmenu-panel .ui-button.ui-button-active { - color: #3388cc !important; + + .jqm-quicklink-panel.ui-panel-animate.ui-panel-position-left.ui-panel-display-overlay { + -webkit-transform: translate3d(-20em,0,0); + -moz-transform: translate3d(-20em,0,0); + transform: translate3d(-20em,0,0); } - .jqm-navmenu-panel .ui-button > .ui-icon { - opacity: 0; - -webkit-transition: opacity 500ms ease; - -moz-transition: opacity 500ms ease; - transition: opacity 500ms ease; + + .jqm-quicklink-panel.ui-panel-animate.ui-panel-open.ui-panel-position-left.ui-panel-display-overlay { + -webkit-transform: translate3d(0,0,0); + transform: translate3d(0,0,0); + -moz-transform: none; } - .jqm-navmenu-panel .ui-button:hover > .ui-icon { - opacity: .4; + + .jqm-demos-quicklink-panel-open ~ .ui-panel-dismiss-open.ui-panel-dismiss-position-left { + left: 20em; } +} + +/* Search */ + +.jqm-search-panel .jqm-search { + display: none; +} + +.jqm-search-panel.ui-panel-open .jqm-search { + display: block; +} + +.jqm-search .ui-textinput.ui-textinput-search { + background: transparent; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; + -webkit-border-radius: 0; + border-radius: 0; + border: 0; + border-bottom: 1px solid #ccc; +} + +.jqm-search .jqm-search-input { + padding-left: 2em; + text-shadow: 0 1px 0 #f5f5f5; +} + +.jqm-search .ui-textinput.ui-textinput-search .ui-button.ui-textinput-clear-button { + margin: -14px 0 0; +} + +.jqm-search .ui-textinput-clear-button > .ui-textinput-clear-button-icon { + opacity: .2; + transition: opacity 300ms ease; +} + +.jqm-search .ui-textinput-clear-button:hover > .ui-textinput-clear-button-icon, +.jqm-search .ui-textinput-clear-button:active > .ui-textinput-clear-button-icon { + opacity: .4; +} + +.jqm-search-list.ui-listview > .ui-listview-item > .ui-listview-item-button, +.jqm-search-list.ui-listview > .ui-listview-item > .ui-listview-item-button:visited, +.jqm-search-list.ui-listview > .ui-listview-item > .ui-listview-item-button:hover, +.jqm-search-list.ui-listview > .ui-listview-item > .ui-listview-item-button:focus, +.jqm-search-list.ui-listview > .ui-listview-item > .ui-listview-item-button:active { + background: transparent; + border-top: 0; + border-bottom: 1px solid #eee; + font-weight: 400; + color: #757575; + text-shadow: 0 1px 0 #f5f5f5; +} + +.jqm-search-list.ui-listview > .ui-listview-item > .ui-listview-item-button:hover, +.jqm-search-list.ui-listview > .ui-listview-item > .ui-listview-item-button:focus, +.jqm-search-list.ui-listview > .ui-listview-item > .ui-listview-item-button:active { + color: #333; +} + +.jqm-search-list.ui-listview > .ui-listview-item > .ui-listview-item-button:focus { + -webkit-box-shadow: inset 0 0 1px #0e82a5; + -moz-box-shadow: inset 0 0 1px #0e82a5; + box-shadow: inset 0 0 1px #0e82a5; +} + +.jqm-search.jqm-search-results-wrap .jqm-search-list { + padding: 1em; +} + +.jqm-search-list > li:first-child > .ui-listview-item-button > .ui-icon { + display: none; +} + +.jqm-search-list > li.jqm-3rd-party .ui-listview-item-button::before { + display: none; +} + +.jqm-search-results-keywords { + display: block; + font-size: .75em; + font-weight: 300; + white-space: normal; + margin-top: .25em; +} + +.jqm-search-results-keywords::before { + content: '# '; + color: #bbb; +} + +.jqm-search-results-highlight { + color: #0e82a5; +} + +@media ( min-width: 60em ) { .jqm-search-panel { - width: 26em; - right: -26em; - z-index: 1003; /* Puts the panel on top of the dismiss modal which is not adjusted to custom width */ + width: 24em; + } + + .jqm-search-panel.ui-panel-animate.ui-panel-position-right.ui-panel-display-overlay { + -webkit-transform: translate3d(24em,0,0); + -moz-transform: translate3d(24em,0,0); + transform: translate3d(24em,0,0); } - .jqm-search-panel.ui-panel-animate.ui-panel-position-right { - -webkit-transform: translate3d(26em,0,0); - -moz-transform: translate3d(26em,0,0); - transform: translate3d(26em,0,0); + + .jqm-search-panel.ui-panel-animate.ui-panel-open.ui-panel-position-right.ui-panel-display-overlay { + -webkit-transform: translate3d(0,0,0); + transform: translate3d(0,0,0); + -moz-transform: none; } - .ui-panel-dismiss-open.ui-panel-dismiss-position-right { - left: -17em; - right: 17em; + + .jqm-demos-search-panel-open ~ .ui-panel-dismiss-open.ui-panel-dismiss-position-right { + right: 24em; } } -@media (min-width: 35em) { - .jqm-block-content { - min-height: 10em; + +/* View source */ + +div[data-demo-html] { + padding-top: 1em; +} + +.jqm-content .jqm-view-source-link-container { + padding: 1.5em 0; +} + +@media ( min-width: 60em ) { + div[data-demo-html] { + padding-top: 1.5em; } + + .jqm-content .jqm-view-source-link-container { + padding: 2em 0; + } +} +.jqm-content .jqm-view-source-link { + margin: 0; + padding: .3em .7em .3em .5em; +} + +.jqm-content .jqm-view-source-link, +.jqm-content .jqm-view-source-link:visited { + background: #fcfcfc; + border-color: #e5e5e5; + color: #757575; + text-shadow: 0 1px 0 #f5f5f5; + transition: all 300ms ease; +} + +.jqm-content .jqm-view-source-link:hover { + background: #f9f9f9; + border-color: #e5e5e5; + color: #333; + text-shadow: 0 1px 0 #f5f5f5; +} + +.jqm-content .jqm-view-source-link:active, +.jqm-content .jqm-view-source-link.ui-button-active { + background: #f5f5f5; + border-color: #e5e5e5; + color: #333; + text-shadow: 0 1px 0 #f5f5f5; +} + +.jqm-view-source-link > .ui-icon { + opacity: .56; + bottom: 1px; + transition: opacity 300ms ease; +} + +.jqm-view-source-link:hover > .ui-icon, +.jqm-view-source-link:active > .ui-icon { + opacity: .76; } -/* View source popup */ #jqm-view-source-popup.ui-popup-container { width: 90%; max-width: 1500px; } + .jqm-view-source .ui-collapsible-set { margin: 0; } + .jqm-view-source .ui-collapsible-heading .ui-button { - font-family: 'Open Sans', sans-serif; font-weight: 400; } + .jqm-view-source .ui-collapsible-heading .ui-button-inner { padding: .4em; } + .jqm-view-source .ui-collapsible-content { padding: 0; overflow: auto; } + .jqm-view-source .ui-collapsible-content .phpStatus { padding: 1em; } + .jqm-view-source .ui-collapsible-content > div, .jqm-view-source .ui-collapsible-content .syntaxhighlighter { border-bottom-right-radius: inherit; border-bottom-left-radius: inherit; } + .jqm-view-source .ui-collapsible-content::-webkit-scrollbar { width: 5px; } + .jqm-view-source .ui-collapsible-content::-webkit-scrollbar-track { background: transparent; } + .jqm-view-source .ui-collapsible-content::-webkit-scrollbar-thumb { background: #435A5F; border: solid #222; border-width: 12px 2px 12px 0; border-bottom-right-radius: 5px; } + .jqm-view-source .ui-collapsible-content td.code .container > textarea { resize: none; } -/* Button C - HTML */ +/* Swatch C - HTML */ + .jqm-view-source .ui-button.ui-button-c, .jqm-view-source .ui-button.ui-button-c:visited, .jqm-view-source .ui-button.ui-button-c:hover, .jqm-view-source .ui-button.ui-button-c:active, .jqm-view-source .ui-button.ui-button-c.ui-button-active { - background: #005aff; - border-color: #0033cc; + background: #3388cc; + border-color: #277cc0; color: #fff; - text-shadow: 0 1px 0 #0033cc; + text-shadow: 0 1px 0 #277cc0; } -/* Button D - PHP */ +/* Swatch D - PHP */ + .jqm-view-source .ui-button.ui-button-d, .jqm-view-source .ui-button.ui-button-d:visited, .jqm-view-source .ui-button.ui-button-d:hover, .jqm-view-source .ui-button.ui-button-d:active, .jqm-view-source .ui-button.ui-button-d.ui-button-active { - background: #ed1c24; - border-color: #ff0000; + background: #ff6666; + border-color: #ef6060; color: #fff; - text-shadow: 0 1px 0 #ff0000; + text-shadow: 0 1px 0 #ef6060; } -/* Button E - JS */ +/* Swatch E - JS */ + .jqm-view-source .ui-button.ui-button-e, .jqm-view-source .ui-button.ui-button-e:visited, .jqm-view-source .ui-button.ui-button-e:hover, .jqm-view-source .ui-button.ui-button-e:active, .jqm-view-source .ui-button.ui-button-e.ui-button-active { - background: #3EB249; - border-color: #108040; + background: #3eb249; + border-color: #3aa244; color: #fff; - text-shadow: 0 1px 0 #108040; + text-shadow: 0 1px 0 #3aa244; } -/* Button F - CSS */ +/* Swatch F - CSS */ + .jqm-view-source .ui-button.ui-button-f, .jqm-view-source .ui-button.ui-button-f:visited, .jqm-view-source .ui-button.ui-button-f:hover, .jqm-view-source .ui-button.ui-button-f:active, .jqm-view-source .ui-button.ui-button-f.ui-button-active { - background: #ec008c; - border-color: #cc0099; + background: #ea0053; + border-color: #d80751; color: #fff; - text-shadow: 0 1px 0 #cc0099; + text-shadow: 0 1px 0 #d80751; } /** @@ -594,6 +1235,7 @@ min-height: inherit; min-height: auto; } + .syntaxhighlighter { width: auto; margin: 0; @@ -602,32 +1244,41 @@ overflow: auto; font-size: 13px; } + .syntaxhighlighter.source { overflow: hidden; } + .syntaxhighlighter .bold { font-weight: bold; } + .syntaxhighlighter .italic { font-style: italic; } + .syntaxhighlighter .line { white-space: pre; white-space: pre-wrap; } + .syntaxhighlighter table { width: 100%; } + .syntaxhighlighter table caption { text-align: left; padding: .5em 0 0.5em 1em; } + .syntaxhighlighter table td.code { width: 100%; } + .syntaxhighlighter table td.code .container { position: relative; } + .syntaxhighlighter table td.code .container textarea { box-sizing: border-box; position: absolute; @@ -641,114 +1292,182 @@ overflow: hidden; white-space: pre; } + .syntaxhighlighter table td.gutter .line { text-align: right; padding: 0 0.5em 0 1em; } + .syntaxhighlighter table td.code .line { padding: 0 1em; } + .syntaxhighlighter.show { display: block; } + .syntaxhighlighter.collapsed table { display: none; } + .syntaxhighlighter .line.alt1 { background-color: transparent; } + .syntaxhighlighter .line.alt2 { background-color: transparent; } + .syntaxhighlighter .line.highlighted.alt1, .syntaxhighlighter .line.highlighted.alt2 { background-color: #253e5a; } + .syntaxhighlighter .line.highlighted.number { color: #38566f; } + .syntaxhighlighter table caption { color: #d1edff; } + .syntaxhighlighter .gutter { color: #afafaf; } + .syntaxhighlighter .gutter .line { border-right: 3px solid #435a5f; } + .syntaxhighlighter .gutter .line.highlighted { background-color: #435a5f; color: #0f192a; } + .syntaxhighlighter.collapsed { overflow: visible; } + .syntaxhighlighter .plain, .syntaxhighlighter .plain a { color: #eee; } + .syntaxhighlighter .comments, .syntaxhighlighter .comments a { color: #5ba1cf; } + .syntaxhighlighter .string { color: #98da31; } + .syntaxhighlighter .string a { color: #1dc116; } + .syntaxhighlighter .keyword { color: #ffae00; } + .syntaxhighlighter .preprocessor { color: #8aa6c1; } + .syntaxhighlighter .variable { color: #ffaa3e; } + .syntaxhighlighter .value { color: #f7e741; } + .syntaxhighlighter .functions { color: #ffaa3e; } + .syntaxhighlighter .constants { color: #e0e8ff; } + .syntaxhighlighter .script { font-weight: bold; color: #b43d3d; background-color: none; } + .syntaxhighlighter .color1 { color: #8df; } + .syntaxhighlighter .color1 a { color: #f8bb00; } + .syntaxhighlighter .color2, .syntaxhighlighter .color2 a { color: white; } + .syntaxhighlighter .color3, .syntaxhighlighter .color3 a { color: #ffaa3e; } + .syntaxhighlighter table td.code { cursor: text; } + .syntaxhighlighter table td.code .container textarea { background: #eee; white-space: pre; white-space: pre-wrap; } + .syntaxhighlighter ::-moz-selection { background-color: #3399ff; color: #fff; text-shadow: none; } + .syntaxhighlighter ::-webkit-selection { background-color: #3399ff; color: #fff; text-shadow: none; } + .syntaxhighlighter ::selection { background-color: #3399ff; color: #fff; text-shadow: none; } + +/* Homepage */ + +.jqm-home p .jqm-intro-span { + font-weight: 700; +} + +.jqm-home > .jqm-content > img { + display: block; + max-width: 100%; + margin-bottom: 3em; +} + +.jqm-grid { + margin: 0 -1em; +} + +.jqm-block-content { + background: #fff; + margin: 1em; + padding: 1em; +} + +.jqm-block-content h3 { + font-weight: 400; + margin: 0 0 1em; +} +.jqm-block-content p { + font-weight: 300; +} + +.jqm-block-content a { + font-weight: 400; + text-decoration: none; +} diff --git a/demos/_assets/img/devices.png b/demos/_assets/img/devices.png index af3e0514602..f354d37a262 100644 Binary files a/demos/_assets/img/devices.png and b/demos/_assets/img/devices.png differ diff --git a/demos/_assets/img/github.png b/demos/_assets/img/github.png new file mode 100644 index 00000000000..8b25551a979 Binary files /dev/null and b/demos/_assets/img/github.png differ diff --git a/demos/_assets/img/jqm-icon.png b/demos/_assets/img/jqm-icon.png new file mode 100644 index 00000000000..38ff61c0fff Binary files /dev/null and b/demos/_assets/img/jqm-icon.png differ diff --git a/demos/_assets/img/jquery-logo.png b/demos/_assets/img/jquerymobile-logo.png similarity index 100% rename from demos/_assets/img/jquery-logo.png rename to demos/_assets/img/jquerymobile-logo.png diff --git a/demos/_assets/js/h2widget.js b/demos/_assets/js/h2widget.js index dd2278d1e62..0d6e3c107eb 100644 --- a/demos/_assets/js/h2widget.js +++ b/demos/_assets/js/h2widget.js @@ -110,7 +110,7 @@ _create:function(){ var self = this, bodyid = "ui-page-top", - panel = "
", + panel = "
", first = true, h2dictionary = new Object(); if(typeof $("body").attr("id") === "undefined"){ @@ -130,15 +130,16 @@ h2dictionary[id] = text; if(!first){ - $(this).before( "Top "); + $(this).before( "
Top
"); } else { - $(this).before("Quick Links "); + $(this).before(" Table of Contents"); } first = false; }); this._on(".jqm-open-quicklink-panel", { "click": function(){ $(".ui-page-active .jqm-quicklink-panel").panel("open"); + $(".ui-page-active").addClass("jqm-demos-quicklink-panel-open"); return false; } }); @@ -149,7 +150,7 @@ } }); if( $(h2dictionary).length > 0 ){ - this.element.prepend(panel) + this.element.append(panel) this.element.find(".jqm-quicklink-panel").panel().find("ul").listview(); } $.each(h2dictionary,function(id,text){ diff --git a/demos/_assets/js/jqm-demos.js b/demos/_assets/js/jqm-demos.js index 54f17bf5f8b..457ad8a7fde 100644 --- a/demos/_assets/js/jqm-demos.js +++ b/demos/_assets/js/jqm-demos.js @@ -48,10 +48,9 @@ if ( location.protocol.substr(0,4) === 'file' || $( document ).on( "pagecreate", ".jqm-demos", function( event ) { var search, page = $( this ), - that = this, searchUrl = ( $( this ).hasClass( "jqm-home" ) ) ? "_search/" : "../_search/", - searchContents = $( ".jqm-search ul.jqm-list" ).find( "li:not(.ui-collapsible)" ), - version = $.mobile.version || "dev", + searchContents = $( ".jqm-search-panel ul.jqm-search-list" ).find( "li[data-filtertext]" ), + version = $.mobile.version || "Dev", words = version.split( "-" ), ver = words[0], str = words[1] || "", @@ -71,10 +70,14 @@ $( document ).on( "pagecreate", ".jqm-demos", function( event ) { text += " " + str; } + if ( "@VERSION" === $.mobile.version ) { + text = version = "Dev"; + } + $( ".jqm-version" ).html( text ); // Insert version in API documentation links - if ( version !== "dev" ) { + if ( version !== "Dev" ) { $( ".jqm-api-docs-link" ).each(function() { href = $( this ).attr( "href" ).replace( "api.jquerymobile.com/", "api.jquerymobile.com/" + apiVersion + "/" ); @@ -85,24 +88,75 @@ $( document ).on( "pagecreate", ".jqm-demos", function( event ) { // Global navmenu panel $( ".jqm-navmenu-panel ul" ).listview(); - $( document ).on( "panelopen", ".jqm-search-panel", function() { - $( this ).find( "input" ).focus(); - }) + $( ".jqm-navmenu-panel ul" ).accordion({ + "header": "> li > h3", + "collapsible": true, + "active": false, + "heightStyle": "content", + "icons": { + "header": "ui-icon-plus", + "activeHeader": "ui-icon-minus" + } + }); + + // Collapse nested accordions when their parent is being collapsed. + $( ".jqm-navmenu-panel > .ui-panel-inner > .ui-accordion" ).on( "accordionbeforeactivate", function( event, ui ) { + var target = $( event.target ); + + if ( target.is( ".jqm-navmenu-panel > .ui-panel-inner > .ui-accordion" ) ) { + target.find( ".ui-accordion" ).accordion( "option", "active", false ); + } + }); + + // Keyboard accessibility of the navmenu. + $( ".jqm-navmenu-panel .ui-accordion-header, .jqm-navmenu-panel .ui-listview-item-button" ).on( "keydown", function( event ) { + if ( event.which == 9 ) { + var target = $( event.target ), + parent = target.parent( "li" ); + + parent.next( "li" ) + .add( parent.prev( "li" ) ) + .children( "h3" ) + .attr( "tabIndex", 0 ); + } + }); + + // On panel demo pages copy the navmenu into the wrapper + if ( $( this ).is( '.jqm-panel-page' ) ) { + var wrapper = $( this ).children( '.ui-panel-wrapper' ); + + if ( wrapper ) { + $( '.jqm-navmenu-panel' ).clone( true, true ).appendTo( wrapper ); + } + } $( ".jqm-navmenu-link" ).on( "click", function() { - page.find( ".jqm-navmenu-panel:not(.jqm-panel-page-nav)" ).panel( "open" ); + page.find( ".jqm-navmenu-panel" ).panel( "open" ); }); // Turn off autocomplete / correct for demos search $( this ).find( ".jqm-search input" ).attr( "autocomplete", "off" ).attr( "autocorrect", "off" ); // Global search + + // Initalize search panel + $( ".jqm-search-panel" ).panel({ + position: "right", + display: "overlay", + theme: "a", + }); + $( ".jqm-search-link" ).on( "click", function() { - page.find( ".jqm-search-panel" ).panel( "open" ); + $( "body" ).find( ".jqm-search-panel" ).panel( "open" ); + $( ".ui-page-active" ).addClass( "jqm-demos-search-panel-open" ); }); - // Initalize search panel list and filter also remove collapsibles - $( this ).find( ".jqm-search ul.jqm-list" ).html( searchContents ).listview({ + $( document ).on( "panelopen", ".jqm-search-panel", function() { + $( this ).find( ".jqm-search-input" ).focus(); + }) + + // Initalize search panel list and filter + $( ".jqm-search-panel ul.jqm-search-list" ).html( searchContents ).listview({ inset: false, theme: null, dividerTheme: null, @@ -117,9 +171,9 @@ $( document ).on( "pagecreate", ".jqm-demos", function( event ) { submitTo: searchUrl }).filterable(); - // Initalize search page list and remove collapsibles - $( this ).find( ".jqm-search-results-wrap ul.jqm-list" ).html( searchContents ).listview({ - inset: true, + // Initalize search page list + $( this ).find( ".jqm-search-results-wrap ul.jqm-search-list" ).html( searchContents ).listview({ + inset: false, theme: null, dividerTheme: null, icon: false, @@ -128,27 +182,27 @@ $( document ).on( "pagecreate", ".jqm-demos", function( event ) { highlight: true }).filterable(); - // Fix links on homepage to point to sub directories - if ( $( event.target ).hasClass( "jqm-home") ) { - $( this ).find( "a" ).each( function() { - $( this ).attr( "href", $( this ).attr( "href" ).replace( "../", "" ) ); - }); - } - // Search results page get search query string and enter it into filter then trigger keyup to filter - if ( $( event.target ).hasClass( "jqm-demos-search-results") ) { + if ( $( event.target ).hasClass( "jqm-demos-search-results" ) ) { search = $.mobile.path.parseUrl( window.location.href ).search.split( "=" )[ 1 ]; setTimeout(function() { e = $.Event( "keyup" ); e.which = 65; - $( that ).find( ".jqm-content .jqm-search-results-wrap input" ).val( search ).trigger(e).trigger( "change" ); + $( this ).find( "#jqm-search-results-input" ).val( search ).trigger(e).trigger( "change" ); }, 0 ); } + + // Fix links on homepage to point to sub directories + if ( $( event.target ).hasClass( "jqm-home") ) { + $( this ).find( "a" ).each( function() { + $( this ).attr( "href", $( this ).attr( "href" ).replace( "../", "" ) ); + }); + } }); // Append keywords list to each list item $( document ).one( "pagecreate", ".jqm-demos", function( event ) { - $( this ).find( ".jqm-search-results-list li, .jqm-search li" ).each(function() { + $( ".jqm-search-results-list li, .jqm-search li" ).each(function() { var text = $( this ).attr( "data-filtertext" ); $( this ) diff --git a/demos/_assets/js/view-source.js b/demos/_assets/js/view-source.js index 1a5345add9c..3bcae3c28bd 100644 --- a/demos/_assets/js/view-source.js +++ b/demos/_assets/js/view-source.js @@ -144,12 +144,16 @@ $( document ).bind( "pagebeforechange", function( e, data ) { function makeButton() { var d = document.createElement( "div" ) a = document.createElement( "a" ), - txt = document.createTextNode( "View Source" ); + txt = document.createTextNode( " View Source" ), + icon = document.createElement( "span" ); - a.className = "jqm-view-source-link ui-button ui-corner-all ui-button-inline ui-mini"; + d.className = "jqm-view-source-link-container"; + a.className = "jqm-view-source-link ui-button ui-corner-all ui-button-inline ui-mini ui-alt-icon ui-nodisc-icon"; + icon.className = "ui-icon ui-icon-eye"; a.setAttribute( "href", "#popupDemo" ); a.setAttribute( "data-rel", "popup" ); + a.appendChild( icon ); a.appendChild( txt ); d.appendChild( a ); diff --git a/demos/_search/index.php b/demos/_search/index.php index 8da604092dd..6f965443119 100644 --- a/demos/_search/index.php +++ b/demos/_search/index.php @@ -6,31 +6,33 @@ jQuery Mobile Demos - + - -
+
-

jQuery Mobile

-

Demos

+

jQuery Mobile

Menu Search +

Version Demos

Search Results

-
-
    - -
+
+
+ +
+
    + +
@@ -38,13 +40,17 @@
-

jQuery Mobile Demos version

+
jQuery Mobile Version Demos
+

Copyright jQuery Foundation

- -
+ + diff --git a/demos/accordion/index.php b/demos/accordion/index.php index 7c41e974584..c745062eea6 100644 --- a/demos/accordion/index.php +++ b/demos/accordion/index.php @@ -15,17 +15,18 @@
-
-

jQuery Mobile

-

Demos

- Menu - Search +
+

jQuery Mobile

+ Menu + Search +

Version Demos

-

Accordion API

+

Accordion

+ API Documentation

Displays collapsible content panels for presenting information in a limited amount of space.

@@ -74,6 +75,7 @@

Fill Space

Because the accordion is comprised of block-level elements, by default its width fills the available horizontal space. To fill the vertical space allocated by its container, set the data-height-style option to "fill", and the script will automatically set the dimensions of the accordion to the height of its parent container.

+
@@ -114,7 +116,8 @@

No Auto Height

-

Setting data-height-style: "content" allows the accordion panels to keep their native height.

+

Setting data-height-style="content" allows the accordion panels to keep their native height.

+

Section 1

@@ -153,7 +156,7 @@

Collapse Content

-

By default, accordions always keep one section open. To allow for all sections to be be collapsible, set the data-collapsible option to true. Click on the currently open section to collapse its content pane.

+

By default, accordions always keep one section open. To allow for all sections to be be collapsible, set the data-collapsible option to true. Click on the currently open section to collapse its content pane.

@@ -192,13 +195,13 @@
-

Custon Icons

-

You can add or remove icons with the data-icons option, which accepts classes for the header's default and active (open) state. Use any class from jQuery Mobile, or create custom classes with background images

+

Custom Icons

+

You can add or remove icons with the data-icons option, which accepts classes for the header's default and active (open) state. Use any class from jQuery Mobile, or create custom classes with background images.

Icons

-
-
+
+

Section 1

@@ -235,8 +238,8 @@

No Icons

-
+

Section 1

@@ -278,7 +281,6 @@

Customize the theme with the data-theme option.

-

Section 1

@@ -318,14 +320,18 @@ -
-

jQuery Mobile Demos version

-

Copyright The jQuery Foundation

+
+
jQuery Mobile Version Demos
+ +

Copyright jQuery Foundation

- -
+ + diff --git a/demos/backbone-requirejs/backbone-require.html b/demos/backbone-requirejs/backbone-require.html index 0271186fc41..598f20ed008 100644 --- a/demos/backbone-requirejs/backbone-require.html +++ b/demos/backbone-requirejs/backbone-require.html @@ -21,13 +21,13 @@

Categories

Select a Category Below:

diff --git a/demos/backbone-requirejs/index.php b/demos/backbone-requirejs/index.php index 1ac607a21bb..d76e6a87e7b 100644 --- a/demos/backbone-requirejs/index.php +++ b/demos/backbone-requirejs/index.php @@ -17,10 +17,10 @@
-

jQuery Mobile

-

Demos

+

jQuery Mobile

Menu Search +

Version Demos

@@ -150,9 +150,9 @@

Copyright jQuery Foundation

- -
+ + diff --git a/demos/body-bar-classes/index.php b/demos/body-bar-classes/index.php index b5e908fb047..39920cd9870 100644 --- a/demos/body-bar-classes/index.php +++ b/demos/body-bar-classes/index.php @@ -31,10 +31,10 @@
-

jQuery Mobile

-

Demos

+

jQuery Mobile

Menu Search +

Version Demos

@@ -99,13 +99,17 @@
-

jQuery Mobile Demos version

+
jQuery Mobile Version Demos
+

Copyright jQuery Foundation

- -
+ + diff --git a/demos/button/index.php b/demos/button/index.php index 4cd526f4bb6..719e7b064d6 100644 --- a/demos/button/index.php +++ b/demos/button/index.php @@ -16,15 +16,17 @@
-

jQuery Mobile

-

Demos

+

jQuery Mobile

Menu Search +

Version Demos

-

Buttons API

+

Buttons

+ + API Documentation

Basic markup

@@ -81,28 +83,28 @@
- +

Mini inline

- +

Theme

- +

Icons

- +

Link buttons and button elements can contain icons. The use of icons in input buttons is no longer supported.

@@ -117,7 +119,7 @@ - + @@ -150,13 +152,17 @@
-

jQuery Mobile Demos version

+
jQuery Mobile Version Demos
+

Copyright jQuery Foundation

- -
+ + diff --git a/demos/checkboxradio-checkbox/index.php b/demos/checkboxradio-checkbox/index.php index 98881db5eee..43bcd7b47da 100644 --- a/demos/checkboxradio-checkbox/index.php +++ b/demos/checkboxradio-checkbox/index.php @@ -16,17 +16,19 @@
-

jQuery Mobile

-

Demos

+

jQuery Mobile

Menu Search +

Version Demos

-

Checkbox API

+

Checkbox

-

Checkbox inputs are used to provide a list of options where more than one can be selected. Checkbox buttons are enhanced by the checkboxradio widget.

+ API Documentation + +

Checkbox inputs are used to provide a list of options where more than one can be selected. Checkbox buttons are enhanced by the Checkboxradio widget.

Basic markup

@@ -68,7 +70,7 @@
- +

Vertical group

To make a vertical button set, add data-direction="vertical" to the fieldset.

@@ -123,7 +125,7 @@ I agree - +
@@ -131,13 +133,17 @@
-

jQuery Mobile Demos version

+
jQuery Mobile Version Demos
+

Copyright jQuery Foundation

- -
+ + diff --git a/demos/checkboxradio-radio/index.php b/demos/checkboxradio-radio/index.php index 83c7d228167..f82120fe786 100644 --- a/demos/checkboxradio-radio/index.php +++ b/demos/checkboxradio-radio/index.php @@ -16,15 +16,17 @@
-

jQuery Mobile

-

Demos

+

jQuery Mobile

Menu Search +

Version Demos

-

Radio buttons API

+

Radio buttons

+ + API Documentation

Radio inputs are used to provide a list of options where only a single option can be selected. Radio buttons are enhanced by the checkboxradio widget.

@@ -78,7 +80,7 @@
- +

Mini size

For a more compact version that is useful in toolbars and tight spaces, add the data-mini="true" attribute to the controlgroup to create a mini version.

@@ -103,7 +105,7 @@
-
+
Horizontal: @@ -135,7 +137,7 @@
- +
- +
- +
-

jQuery Mobile Demos version

+
jQuery Mobile Version Demos
+

Copyright jQuery Foundation

- -
+ + diff --git a/demos/collapsible-dynamic/index.php b/demos/collapsible-dynamic/index.php index cee8a92a8b0..502d458baaf 100644 --- a/demos/collapsible-dynamic/index.php +++ b/demos/collapsible-dynamic/index.php @@ -36,10 +36,10 @@
-

jQuery Mobile

-

Demos

+

jQuery Mobile

Menu Search +

Version Demos

@@ -67,14 +67,17 @@
-

jQuery Mobile Demos version

+
jQuery Mobile Version Demos
+

Copyright jQuery Foundation

- -
+ + - diff --git a/demos/collapsible/index.php b/demos/collapsible/index.php index a5d6f370131..3b5a19beaa9 100644 --- a/demos/collapsible/index.php +++ b/demos/collapsible/index.php @@ -19,15 +19,17 @@
-

jQuery Mobile

-

Demos

+

jQuery Mobile

Menu Search +

Version Demos

-

Collapsible API

+

Collapsible

+ + API Documentation

Collapsibles are simple widgets that allow you to expand or collapse content when tapped and are useful in mobile to provide a compact presentation of content.

@@ -261,13 +263,17 @@
-

jQuery Mobile Demos version

+
jQuery Mobile Version Demos
+

Copyright jQuery Foundation

- -
+ + diff --git a/demos/collapsibleset/index.php b/demos/collapsibleset/index.php index f092f4f0652..ae3e9618670 100644 --- a/demos/collapsibleset/index.php +++ b/demos/collapsibleset/index.php @@ -16,15 +16,17 @@
-

jQuery Mobile

-

Demos

+

jQuery Mobile

Menu Search +

Version Demos

-

Collapsible set API

+

Collapsible set

+ + API Documentation

An accordion is created in jQuery Mobile by grouping a series of individual collapsibles into set.

@@ -216,13 +218,17 @@
-

jQuery Mobile Demos version

+
jQuery Mobile Version Demos
+

Copyright jQuery Foundation

- -
+ + diff --git a/demos/controlgroup-dynamic/index.php b/demos/controlgroup-dynamic/index.php index abf8a9d7853..e5d3cf5aae9 100644 --- a/demos/controlgroup-dynamic/index.php +++ b/demos/controlgroup-dynamic/index.php @@ -66,10 +66,10 @@
-

jQuery Mobile

-

Demos

+

jQuery Mobile

Menu Search +

Version Demos

@@ -96,7 +96,7 @@
-
+
Widget type @@ -111,7 +111,7 @@
-
+
Action
on click/change @@ -126,7 +126,7 @@
-
+
Switch orientation @@ -146,13 +146,17 @@
-

jQuery Mobile Demos version

+
jQuery Mobile Version Demos
+

Copyright jQuery Foundation

- -
+ + diff --git a/demos/controlgroup/index.php b/demos/controlgroup/index.php index 2184a6a74a7..5927f83f743 100644 --- a/demos/controlgroup/index.php +++ b/demos/controlgroup/index.php @@ -4,36 +4,38 @@ Controlgroup - jQuery Mobile Demos - - - - - - - - - - - -
- -
-

jQuery Mobile

-

Demos

- Menu - Search -
- -
- -

Controlgroup API

+ + + + + + + + + + + +
+ +
+

jQuery Mobile

+ Menu + Search +

Version Demos

+
+ +
+ +

Controlgroup

+ + API Documentation

Controlgroups are used to visually group a set of buttons to form a single block that looks contained like a navigation component.

@@ -57,10 +59,10 @@ Icon only Icon only
- +
- Home + Home @@ -367,7 +369,7 @@ Three Four
- +
@@ -379,29 +381,29 @@
- - + +

Pre-rendered markup

- +

You can supply pre-rendered markup for any controlgroup to save startup time. The example below illustrates the markup you have to provide for a pre-rendered controlgroup. Note that the widgets inside the controlgroup need not necessarily be pre-rendered.

- + - + - +
- +

Textinputs

- +

While textinputs are not officially supported by the controlgroup they can be made to work with some simple CSS.

To make this work you will need to add one CSS rule and use textinput's wrapperClass option to set two classes on the textinput wrapper.

- +
@@ -423,20 +425,24 @@
- +
-

jQuery Mobile Demos version

+
jQuery Mobile Version Demos
+

Copyright jQuery Foundation

- -
+ + diff --git a/demos/datepicker/index.php b/demos/datepicker/index.php index 6157eae831c..cd4c6f2d1b1 100644 --- a/demos/datepicker/index.php +++ b/demos/datepicker/index.php @@ -19,23 +19,25 @@
-

jQuery Mobile

-

Demos

+

jQuery Mobile

Menu Search +

Version Demos

-

Datepicker Widget

- -

PLEASE NOTE: This is not a jQuery Mobile widget and is not supported by jQuery Mobile.

+

Datepicker

This demo uses the jQuery UI Datepicker widget combined with a 3rd party wrapper to make this work with jQuery Mobile. This widget has all the same options and methods as the jQuery UI widget.

-

For documentation on the Datepicker widget please see jQuery UI API docs http://api.jqueryui.com/datepicker/.

+

Information

+ +

For documentation on the Datepicker widget, please see the jQuery UI API docs.

-

For information and support on the jQuery Mobile Wrapper please see https://github.com/arschmitz/jquery-mobile-datepicker-wrapper.

+

For information and support on the jQuery Mobile Wrapper, please see https://github.com/arschmitz/jquery-mobile-datepicker-wrapper.

+ +

PLEASE NOTE: This is not a jQuery Mobile widget and is not supported by jQuery Mobile.

Popup Datepicker

@@ -56,13 +58,17 @@
-

jQuery Mobile Demos version

+
jQuery Mobile Version Demos
+

Copyright jQuery Foundation

- -
+ + diff --git a/demos/external-widgets/index.php b/demos/external-widgets/index.php index 08a84a844e8..df6d12d6205 100644 --- a/demos/external-widgets/index.php +++ b/demos/external-widgets/index.php @@ -7,7 +7,7 @@ - + @@ -16,8 +16,7 @@
-

jQuery Mobile

-

Demos

+

jQuery Mobile

Menu Search
@@ -39,13 +38,17 @@
-

jQuery Mobile Demos version

+
jQuery Mobile Version Demos
+

Copyright jQuery Foundation

- -
+ + diff --git a/demos/external-widgets/page-c.php b/demos/external-widgets/page-c.php index 952a189b435..84694753474 100644 --- a/demos/external-widgets/page-c.php +++ b/demos/external-widgets/page-c.php @@ -21,7 +21,7 @@
- Back + Back

Fixed external header

@@ -103,7 +103,7 @@

Purchase Album?

Your download will begin immediately on your mobile device when you purchase.

- Buy: $10.99 + Buy: $10.99 Cancel
diff --git a/demos/external-widgets/page-d.php b/demos/external-widgets/page-d.php index 99d2dd15374..a305eca1661 100644 --- a/demos/external-widgets/page-d.php +++ b/demos/external-widgets/page-d.php @@ -21,7 +21,7 @@
- Back + Back

Fixed external header

diff --git a/demos/filterable/index.php b/demos/filterable/index.php index 95be5acf4b4..77b149141c7 100644 --- a/demos/filterable/index.php +++ b/demos/filterable/index.php @@ -16,15 +16,17 @@
-

jQuery Mobile

-

Demos

+

jQuery Mobile

Menu Search +

Version Demos

-

Filterable API

+

Filterable

+ + API Documentation

The children of any element can be filtered by setting the attribute data-filter="true" on the element. By default, the text contained in each child is used for filtering, however, you also have the option of setting the attribute data-filtertext to a string value on any child that will be considered for filtering to associate custom filter text instead.

@@ -303,13 +305,17 @@
-

jQuery Mobile Demos version

+
jQuery Mobile Version Demos
+

Copyright jQuery Foundation

- -
+ + diff --git a/demos/flipswitch/index.php b/demos/flipswitch/index.php index 5fad7f79546..8d000b89560 100644 --- a/demos/flipswitch/index.php +++ b/demos/flipswitch/index.php @@ -51,15 +51,17 @@
-

jQuery Mobile

-

Demos

+

jQuery Mobile

Menu Search +

Version Demos

-

Flip switch API

+

Flip switch

+ + API Documentation

Flip switches are used for boolean style inputs like true/false or on/off in a compact UI element.

@@ -215,13 +217,17 @@
-

jQuery Mobile Demos version

+
jQuery Mobile Version Demos
+

Copyright jQuery Foundation

- -
+ + diff --git a/demos/forms-disabled/index.php b/demos/forms-disabled/index.php index a4428cd2d17..8a1650219ee 100644 --- a/demos/forms-disabled/index.php +++ b/demos/forms-disabled/index.php @@ -16,10 +16,10 @@
-

jQuery Mobile

-

Demos

+

jQuery Mobile

Menu Search +

Version Demos

@@ -76,20 +76,20 @@
Vertical controlgroup, buttons: - + - Three + Three
-
+
Horizontal controlgroup, buttons: - + - Three + Three
@@ -122,7 +122,7 @@
-
+
Horizontal controlgroup, select: @@ -219,7 +219,7 @@
-
+
Horizontal controlgroup, checkbox: @@ -233,7 +233,7 @@
-
+
Horizontal controlgroup, radio: @@ -306,20 +306,20 @@
Vertical controlgroup, buttons: - + - Three + Three
-
+
Horizontal controlgroup, buttons: - + - Three + Three
@@ -352,7 +352,7 @@
-
+
Horizontal controlgroup, select: @@ -449,7 +449,7 @@
-
+
Horizontal controlgroup, checkbox: @@ -463,7 +463,7 @@
-
+
Horizontal controlgroup, radio: @@ -487,11 +487,11 @@

Class ui-state-disabled

@@ -499,13 +499,17 @@
-

jQuery Mobile Demos version

+
jQuery Mobile Version Demos
+

Copyright jQuery Foundation

- -
+ + diff --git a/demos/forms-field-contain/index.php b/demos/forms-field-contain/index.php index 46d930b76da..aeb6d21dec4 100644 --- a/demos/forms-field-contain/index.php +++ b/demos/forms-field-contain/index.php @@ -16,10 +16,10 @@
-

jQuery Mobile

-

Demos

- Menu - Search +

jQuery Mobile

+ Menu + Search +

Version Demos

@@ -101,20 +101,20 @@
Vertical controlgroup, buttons: - + - Three + Three
-
+
Horizontal controlgroup, buttons: - + - Three + Three
@@ -147,7 +147,7 @@
-
+
Horizontal controlgroup, select: @@ -244,7 +244,7 @@
-
+
Horizontal controlgroup, checkbox: @@ -258,7 +258,7 @@
-
+
Horizontal controlgroup, radio: @@ -331,20 +331,20 @@
Vertical controlgroup, buttons: - + - Three + Three
-
+
Horizontal controlgroup, buttons: - + - Three + Three
@@ -377,7 +377,7 @@
-
+
Horizontal controlgroup, select: @@ -474,7 +474,7 @@
-
+
Horizontal controlgroup, checkbox: @@ -488,7 +488,7 @@
-
+
Horizontal controlgroup, radio: @@ -514,13 +514,17 @@
-

jQuery Mobile Demos version

+
jQuery Mobile Version Demos
+

Copyright jQuery Foundation

- -
+ + diff --git a/demos/forms-gallery/index.php b/demos/forms-gallery/index.php index df82c5b9bd7..be694526d19 100644 --- a/demos/forms-gallery/index.php +++ b/demos/forms-gallery/index.php @@ -16,10 +16,10 @@
-

jQuery Mobile

-

Demos

+

jQuery Mobile

Menu Search +

Version Demos

@@ -65,18 +65,18 @@
Vertical controlgroup, buttons: - + - Three + Three
-
+
Horizontal controlgroup, buttons: - + - Three + Three
@@ -105,7 +105,7 @@
-
+
Horizontal controlgroup, select: @@ -197,7 +197,7 @@
-
+
Horizontal controlgroup, checkbox: @@ -209,7 +209,7 @@
-
+
Horizontal controlgroup, radio: @@ -268,18 +268,18 @@
Vertical controlgroup, buttons: - + - Three + Three
-
+
Horizontal controlgroup, buttons: - + - Three + Three
@@ -308,7 +308,7 @@
-
+
Horizontal controlgroup, select: @@ -391,7 +391,7 @@
-
+
Horizontal controlgroup, checkbox: @@ -403,7 +403,7 @@
-
+
Horizontal controlgroup, radio: @@ -426,13 +426,17 @@
-

jQuery Mobile Demos version

+
jQuery Mobile Version Demos
+

Copyright jQuery Foundation

- -
+ + diff --git a/demos/forms-label-hidden-accessible/index.php b/demos/forms-label-hidden-accessible/index.php index 283b83b0374..9954cc5107c 100644 --- a/demos/forms-label-hidden-accessible/index.php +++ b/demos/forms-label-hidden-accessible/index.php @@ -16,10 +16,10 @@
-

jQuery Mobile

-

Demos

+

jQuery Mobile

Menu Search +

Version Demos

@@ -67,18 +67,18 @@
Vertical controlgroup, buttons: - + - Three + Three
-
+
Horizontal controlgroup, buttons: - + - Three + Three
@@ -107,7 +107,7 @@
-
+
Horizontal controlgroup, select: @@ -190,7 +190,7 @@
-
+
Horizontal controlgroup, checkbox: @@ -202,7 +202,7 @@
-
+
Horizontal controlgroup, radio: @@ -261,18 +261,18 @@
Vertical controlgroup, buttons: - + - Three + Three
-
+
Horizontal controlgroup, buttons: - + - Three + Three
@@ -301,7 +301,7 @@
-
+
Horizontal controlgroup, select: @@ -384,7 +384,7 @@
-
+
Horizontal controlgroup, checkbox: @@ -396,7 +396,7 @@
-
+
Horizontal controlgroup, radio: @@ -419,13 +419,17 @@
-

jQuery Mobile Demos version

+
jQuery Mobile Version Demos
+

Copyright jQuery Foundation

- -
+ + diff --git a/demos/forms/index.php b/demos/forms/index.php index 1a74cb9aa98..e3ba4e62fa6 100644 --- a/demos/forms/index.php +++ b/demos/forms/index.php @@ -4,23 +4,23 @@ Form elements - jQuery Mobile Demos - - - - - - - - - -
- -
-

jQuery Mobile

-

Demos

- Menu - Search -
+ + + + + + + + + +
+ +
+

jQuery Mobile

+ Menu + Search +

Version Demos

+
@@ -46,17 +46,17 @@

Inline buttons

Horizontal grouped buttons

- @@ -147,7 +147,7 @@
-
+
Checkboxes, mini, horizontal controlgroup: @@ -182,7 +182,7 @@
-
+
Radio buttons, mini, horizontal controlgroup: @@ -422,13 +422,17 @@
-

jQuery Mobile Demos version

+
jQuery Mobile Version Demos
+

Copyright jQuery Foundation

- -
+ + diff --git a/demos/grids-buttons/index.php b/demos/grids-buttons/index.php index 3f5297d7422..a21e9d050c6 100644 --- a/demos/grids-buttons/index.php +++ b/demos/grids-buttons/index.php @@ -27,10 +27,10 @@
-

jQuery Mobile

-

Demos

+

jQuery Mobile

Menu Search +

Version Demos

@@ -153,13 +153,17 @@
-

jQuery Mobile Demos version

+
jQuery Mobile Version Demos
+

Copyright jQuery Foundation

- -
+ + diff --git a/demos/grids-custom-responsive/index.php b/demos/grids-custom-responsive/index.php index 644e724a6d0..6fddc4cf873 100644 --- a/demos/grids-custom-responsive/index.php +++ b/demos/grids-custom-responsive/index.php @@ -110,15 +110,17 @@
-

jQuery Mobile

-

Demos

+

jQuery Mobile

Menu Search +

Version Demos

-

Custom responsive grid API

+

Custom responsive grid

+ + API Documentation

It's easy to extend the basic grid styles into a custom responsive layout by using CSS media queries to adjust the layout and design across various screen width breakpoints.

@@ -163,13 +165,17 @@
-

jQuery Mobile Demos version

+
jQuery Mobile Version Demos
+

Copyright jQuery Foundation

- -
+ + diff --git a/demos/grids/index.php b/demos/grids/index.php index b7737afcb72..a91c2a3985c 100644 --- a/demos/grids/index.php +++ b/demos/grids/index.php @@ -16,15 +16,17 @@
-

jQuery Mobile

-

Demos

+

jQuery Mobile

Menu Search +

Version Demos

-

Grids API

+

Grids

+ + API Documentation

The jQuery Mobile framework provides a simple way to build CSS-based columns that can also be responsive.

@@ -205,13 +207,17 @@
-

jQuery Mobile Demos version

+
jQuery Mobile Version Demos
+

Copyright jQuery Foundation

- -
+ + diff --git a/demos/icons-grunticon/index.php b/demos/icons-grunticon/index.php index 44887f5634d..37dd83ebf64 100644 --- a/demos/icons-grunticon/index.php +++ b/demos/icons-grunticon/index.php @@ -1,236 +1,243 @@ - - - - Grunticon Loader - jQuery Mobile Demos - - - - - - - - - - - + + + + + + + + + - - -
-
-

jQuery Mobile

-

Demos

- Menu - Search -
- -
-

Grunticon

- -

Grunticon is a grunt plugin built by the Filament Group which takes SVG files and creates style sheets and PNG icons for use in your webpage. See https://github.com/filamentgroup/grunticon.

-

Grunticon Loader Script

- - -

jQuery Mobile uses grunticon to generate SVG icons with PNG fallbacks and the style sheets for these. By default the library uses inline SVGs but falls back to individual PNGs if inline SVG is not supported.

- -

However, you can further optimize for a wider variety of devices by using a loader script for selecting the approriate style sheet. This reduces data transfer and the length of the style sheet.

- -

To use the grunticon loader place the script in the "View Source" button below in the head of your page before all other stylesheets or scripts. In the script you will see a call to the grunticon function at the bottom which is being passed an array of three stylesheet URLs. You will want to change this to match your setup or to point at the corresponding style sheets on the CDN.

- - - -

After this script you will want to place a fallback style sheet in a noscript tag, in case JavaScript is disabled. Link in the "View Source" button below:

- - - -

So what style sheet was loaded?

-

Based on your browser's abilities the style sheet loaded was:

-

-

Which means you are seeing

-

- -

Grunticon Icons

-

All the icons in the buttons below were loaded using the grunticon loader script. Use the toggle buttons to try all different options for icon style.

-
-
-
- Theme: - - - - -
-
-
-
- Style: - - - - - - - - - - - - -
-
-
- -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- -
- - - -
-

jQuery Mobile Demos version

-

Copyright jQuery Foundation

-
- - - -
- + + var eye, + stylesheet = $( "head" ).find( "link" ).eq( "1" ).attr( "href" ), + svg = /svg/.test( "svg" ), + external = /external/.test( stylesheet ), + using = ( ( external ? "External " : "Inline " ) + ( svg ? "SVGs " : "PNGs" ) ); + + $( "#grunticon-stylesheet" ).text( stylesheet ); + + $( " " ).css({ + "width": "200px", + "height": "200px", + "display": "block", + "background-size": "200px 200px", + "background-image": svg ? "url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22iso-8859-1%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20%20width%3D%2214px%22%20height%3D%2210px%22%20viewBox%3D%220%200%2014%2010%22%20style%3D%22enable-background%3Anew%200%200%2014%2010%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpath%20fill%3D%22%23FFF%22%20d%3D%22M7%2C0C3%2C0%2C0%2C5%2C0%2C5s3%2C5%2C7%2C5s7-5%2C7-5S11%2C0%2C7%2C0z%20M7%2C8C5.343%2C8%2C4%2C6.657%2C4%2C5s1.343-3%2C3-3s3%2C1.343%2C3%2C3S8.657%2C8%2C7%2C8z%20M7%2C4%20C6.448%2C4%2C6%2C4.447%2C6%2C5s0.448%2C1%2C1%2C1s1-0.447%2C1-1S7.552%2C4%2C7%2C4z%22%2F%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3C%2Fsvg%3E')" : "url(../../css/themes/default/images/icons-png/eye-white.png)", + "background-color": "rgba(0,0,0,.3)" + }) + .insertAfter("#grunticon-icon-type"); + + if ( !svg ) { + $( "#grunticon-icon-type" ).after( "

Pixels make me sad :(

" ); + } else { + $( "#grunticon-icon-type" ).after( "

Woo! Vector graphics!

" ); + } + + $( "#grunticon-icon-type" ).text( using ); + }); + + + +
+ +
+

jQuery Mobile

+ Menu + Search +

Version Demos

+
+ +
+

Grunticon

+ +

Grunticon is a grunt plugin built by the Filament Group which takes SVG files and creates style sheets and PNG icons for use in your webpage. See https://github.com/filamentgroup/grunticon.

+

Grunticon Loader Script

+ + +

jQuery Mobile uses grunticon to generate SVG icons with PNG fallbacks and the style sheets for these. By default the library uses inline SVGs but falls back to individual PNGs if inline SVG is not supported.

+ +

However, you can further optimize for a wider variety of devices by using a loader script for selecting the approriate style sheet. This reduces data transfer and the length of the style sheet.

+ +

To use the grunticon loader place the script in the "View Source" button below in the head of your page before all other stylesheets or scripts. In the script you will see a call to the grunticon function at the bottom which is being passed an array of three stylesheet URLs. You will want to change this to match your setup or to point at the corresponding style sheets on the CDN.

+ + + +

After this script you will want to place a fallback style sheet in a noscript tag, in case JavaScript is disabled. Link in the "View Source" button below:

+ + + +

So what style sheet was loaded?

+

Based on your browser's abilities the style sheet loaded was:

+

+

Which means you are seeing

+

+ +

Grunticon Icons

+

All the icons in the buttons below were loaded using the grunticon loader script. Use the toggle buttons to try all different options for icon style.

+
+
+
+ Theme: + + + + +
+
+
+
+ Style: + + + + + + + + + + + + +
+
+
+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ +
+ + + +
+
jQuery Mobile Version Demos
+ +

Copyright jQuery Foundation

+
+ +
+ + + + diff --git a/demos/icons/index.php b/demos/icons/index.php index ea8883f0c66..5d9d1a51b1f 100644 --- a/demos/icons/index.php +++ b/demos/icons/index.php @@ -22,15 +22,17 @@
-

jQuery Mobile

-

Demos

+

jQuery Mobile

Menu Search +

Version Demos

-

Icons API

+

Icons

+ + API Documentation

A set of built-in icons in jQuery Mobile can be applied to buttons, collapsibles, listview buttons and more. There is an SVG and PNG image of each icon. By default the SVG icons, that look great on both SD and HD screens, are used. On platforms that don't support SVG the framework falls back to PNG icons.

@@ -95,7 +97,7 @@

Custom Icons

-

Icons are displayed as background image of a spancode> element and have a background size of 18x18px. The example below shows the custom CSS that you would need to use to add your own icons.

+

Icons are displayed as background image of a span element and have a background size of 18x18px. The example below shows the custom CSS that you would need to use to add your own icons.

@@ -112,31 +114,31 @@ background-image: url("iconimg.png"); } - +

Icon positioning

In case of link buttons and button elements there are four possible icon positions; "beginning" (left), "end" (right), "top", and "bottom". By default the icon is placed at the beginning, but this can be overridden by using the data-iconpos attribute.

Block buttons

- + - +

Mini buttons

- + - +

Inline buttons

- +
Beginning End @@ -145,7 +147,7 @@

Inline mini buttons

- +
Beginning End @@ -154,9 +156,9 @@

Float icons

- +

The framework offers helper classes, ui-widget-icon-floatbeginning and ui-widget-icon-floatend to make icons inside block buttons float to the beginning or end.

- +
Beginning @@ -167,21 +169,21 @@ End
- +

Examples of adding the helper class to icons in pre-enhanced buttons.

- +
Beginning -
- +
+

Examples of adding the helper class to icons in CSS-only buttons.

- + - +

Icon-only

Add data-show-label="false" if you want to create an icon-only button.

@@ -208,7 +210,7 @@
-

Black vs. white icon sets

+

Black versus white icon sets

Icons are white by default but you can switch to black icons by adding the ui-alt-icon class to the element or its container. This also changes the color that is used for the discs.

@@ -234,7 +236,7 @@ Alt icon without disc No disc
- +

Example of the classes being applied to a wrapper.

@@ -265,35 +267,39 @@

CSS only buttons with icons

- +

Examples of buttons with icons that don't use the Button widget.

- +
Link
- +

Enhanced buttons with icons

- +

Examples of buttons with icons that do use the Button widget, but are pre-enhanced.

- +
Link
- +
-

jQuery Mobile Demos version

+
jQuery Mobile Version Demos
+

Copyright jQuery Foundation

- -
+ + diff --git a/demos/index.php b/demos/index.php index 76ebf80dc5e..06d792bfe7f 100644 --- a/demos/index.php +++ b/demos/index.php @@ -16,20 +16,22 @@
-

jQuery Mobile

-

Version

+

jQuery Mobile

Menu Search +

Version Demos

+

Demos

+ +

jQuery Mobile is a touch-optimized HTML5 UI framework designed to make responsive web sites and apps that are accessible on all smartphone, tablet and desktop devices.

+ -

Demos

-

jQuery Mobile is a touch-optimized HTML5 UI framework designed to make responsive web sites and apps that are accessible on all smartphone, tablet and desktop devices.

+

New to jQuery Mobile? Get started by reading this introduction. For technical info, visit the API documentation. Downloads and info about the project can be found on jquerymobile.com.

-

New to jQuery Mobile? Get started by reading this introduction. For technical info, visit the API documentation. Downloads and info about the project can be found on jquerymobile.com.

-
+

Pages & Navigation

@@ -54,7 +56,7 @@

Toolbar, Navbar, Controlgroup

Tabs, Panel, Popup

-

Collapsible, Collapsible set, Filterable

+

Accordion, Collapsible, Collapsible set

@@ -81,6 +83,7 @@

Lists and Tables

Listview, Collapsible Listview

+

Filterable

Table Reflow, Table Column Toggle

@@ -91,13 +94,17 @@
-

jQuery Mobile Demos version

+
jQuery Mobile Version Demos
+

Copyright jQuery Foundation

- -
+ + diff --git a/demos/intro/index.php b/demos/intro/index.php index fef3217765d..2e6b1a9693f 100644 --- a/demos/intro/index.php +++ b/demos/intro/index.php @@ -16,10 +16,10 @@
-

jQuery Mobile

-

Demos

+

jQuery Mobile

Menu Search +

Version Demos

@@ -118,13 +118,17 @@
-

jQuery Mobile Demos version

+
jQuery Mobile Version Demos
+

Copyright jQuery Foundation

- -
+ + diff --git a/demos/jqm-contents.php b/demos/jqm-contents.php index d5397f3a4b0..4a95f5625ea 100644 --- a/demos/jqm-contents.php +++ b/demos/jqm-contents.php @@ -1,70 +1,17 @@
  • Home
    • -
  • Introduction
    • -
  • Accordion
    • -
  • Button widget
    • -
  • -

    - - Checkboxradio widget click to expand contents - -

    - -
    • -
  • -

    - - Collapsible (set) widget click to expand contents - -

    - -
    • -
  • -

    - - Controlgroup widget click to expand contents - -

    - -
    • -
  • Datepicker
    • -
  • -

    - - Events click to expand contents - -

    -
  • +

    Events

    +
    • - -
  • -

    - - Forms click to expand contents - -

    -
  • +

    Forms

    +
    • - -
  • -

    - - Form Widgets click to expand contents - -

    -
  • +

    Form Widgets

    +
    - Open demo + Open demo
    @@ -156,18 +156,22 @@
    -

    jQuery Mobile Demos version

    +
    jQuery Mobile Version Demos
    +

    Copyright jQuery Foundation

    - -
    + +
    -
    +
    diff --git a/demos/navbar/index.php b/demos/navbar/index.php index b006be72bf0..a613f9b046f 100644 --- a/demos/navbar/index.php +++ b/demos/navbar/index.php @@ -25,15 +25,17 @@
    -

    jQuery Mobile

    -

    Demos

    +

    jQuery Mobile

    Menu Search +

    Version Demos

    -

    Navbar API

    +

    Navbar

    + + API Documentation

    jQuery Mobile has a navbar widget that is useful for providing buttons with optional icons in a bar. The navbar can support any number of buttons resorting to multiple rows when the number of buttons exceeds the maxbuttons option. Alternatively, if you set the morebutton option you will turn the final button in the row into a popup that contains the remaining buttons

    @@ -105,7 +107,7 @@

    Multi-row

    -

    If more than the set maxbutton items are added, the navbar will smart wrap the items +

    If more than the set maxbutton items are added, the navbar will smart wrap the items n-across up to the value of the maxbuttonoption and then fill the remaining rows to full width:

    @@ -129,8 +131,8 @@

    Show More Button

    -

    If more than the set maxbutton items are added and the morebutton - option is set to true, the navbar will add the extra items to a popup that +

    If more than the set maxbutton items are added and the morebutton + option is set to true, the navbar will add the extra items to a popup that resides on the last button in the row of buttons

    @@ -154,8 +156,8 @@

    Show More Button with icon

    -

    If more than the set maxbutton items are added and the morebutton - option is set to true, the navbar will add the extra items to a popup that +

    If more than the set maxbutton items are added and the morebutton + option is set to true, the navbar will add the extra items to a popup that resides on the last button in the row of buttons. An icon can be added by adding the data-morebuttonicon attribute and specifying an icon

    @@ -378,13 +380,17 @@
    -

    jQuery Mobile Demos version

    +
    jQuery Mobile Version Demos
    +

    Copyright jQuery Foundation

    - -
    + + diff --git a/demos/navigation-hash-processing/index.php b/demos/navigation-hash-processing/index.php index 6115ef37751..9979c47ac20 100644 --- a/demos/navigation-hash-processing/index.php +++ b/demos/navigation-hash-processing/index.php @@ -76,61 +76,65 @@ -
    - -
    -

    jQuery Mobile

    -

    Demos

    - Menu - Search -
    - -
    -

    Hash Processing

    -

    If you wish to perform processing on the hash values as a user clicks the links to the various internal pages in your application, you can do so by handling the events pagebeforechange and pagecontainerbeforetransition.

    -
    - Open Demo -
    -
    - - +
    + +
    +

    jQuery Mobile

    + Menu + Search +

    Version Demos

    +
    + +
    +

    Hash Processing

    +

    If you wish to perform processing on the hash values as a user clicks the links to the various internal pages in your application, you can do so by handling the events pagebeforechange and pagecontainerbeforetransition.

    +
    + Open Demo +
    +
    -
    -

    jQuery Mobile Demos version

    -

    Copyright jQuery Foundation

    -
    + - +
    +
    jQuery Mobile Version Demos
    + +

    Copyright jQuery Foundation

    +
    -
    -
    - Back To Demos -

    Demo Main Page

    -
    -
    -

    The following three buttons all take you to the same page. However, when you get there, you will notice that the title of the page is different depending on which button you have clicked.

    - My Area - My Friends - My Items -
    + + +
    +
    + Back To Demos +

    Demo Main Page

    +
    +
    +

    The following three buttons all take you to the same page. However, when you get there, you will notice that the title of the page is different depending on which button you have clicked.

    + My Area + My Friends + My Items
    +
    -
    - -
    -

    This is the second page in the demo. Notice that, as you navigate to this page from the main page, the title of this page changes depending on which button on the main page you clicked.

    -

    You can also navigate to this same page with different parameters using the links below:

    - My Area - My Friends - My Items -
    +
    + +
    +

    This is the second page in the demo. Notice that, as you navigate to this page from the main page, the title of this page changes depending on which button on the main page you clicked.

    +

    You can also navigate to this same page with different parameters using the links below:

    + My Area + My Friends + My Items
    +
    diff --git a/demos/navigation-linking-pages/index.php b/demos/navigation-linking-pages/index.php index a20be90231b..3487da415fc 100644 --- a/demos/navigation-linking-pages/index.php +++ b/demos/navigation-linking-pages/index.php @@ -16,10 +16,10 @@
    -

    jQuery Mobile

    -

    Demos

    +

    jQuery Mobile

    Menu Search +

    Version Demos

    @@ -116,13 +116,17 @@
    -

    jQuery Mobile Demos version

    +
    jQuery Mobile Version Demos
    +

    Copyright jQuery Foundation

    - -
    + + diff --git a/demos/navigation-php-redirect/index.php b/demos/navigation-php-redirect/index.php index 35a8cfc39e5..6e467ef30a5 100644 --- a/demos/navigation-php-redirect/index.php +++ b/demos/navigation-php-redirect/index.php @@ -45,10 +45,10 @@
    -

    jQuery Mobile

    -

    Demos

    +

    jQuery Mobile

    Menu Search +

    Version Demos

    @@ -68,13 +68,17 @@
    -

    jQuery Mobile Demos version

    +
    jQuery Mobile Version Demos
    +

    Copyright jQuery Foundation

    - -
    + + diff --git a/demos/navigation/index.php b/demos/navigation/index.php index 1a906b2811f..e0aea7a6083 100644 --- a/demos/navigation/index.php +++ b/demos/navigation/index.php @@ -17,18 +17,17 @@
    -

    jQuery Mobile

    -

    Demos

    +

    jQuery Mobile

    Menu Search +

    Version Demos

    Ajax Navigation

    -

    The $.mobile.navigate method and the navigate event form the foundation of jQuery Mobile's navigation infrastructure. As such, they can function outside the confines of jQuery Mobile as a clean and intuitive navigation/history API. -

    +

    The $.mobile.navigate method and the navigate event form the foundation of jQuery Mobile's navigation infrastructure. As such, they can function outside the confines of jQuery Mobile as a clean and intuitive navigation/history API.

    Introduction

    @@ -36,10 +35,9 @@

    One of jQuery Mobile's core features is the ability to load and view content from disparate pages into the initial document with support for standard navigation methods like anchors and the back button. To accomplish this the library has progressive support for hashchange and popstate coupled with internal history tracking which can be used à la carte.

    -

    An example use case would be something like Twitter's web client. The first step is to hijack link clicks on the page and use the URL that represents that UI state to track history with $.mobile.navigate. It's at this point that any additional information about the UI necessary for operation on return using the back button would be stored (see, foo property of the object argument to the navigate method).

    +

    An example use case would be something like Twitter's web client. The first step is to hijack link clicks on the page and use the URL that represents that UI state to track history with $.mobile.navigate. It's at this point that any additional information about the UI necessary for operation on return using the back button would be stored (see, foo property of the object argument to the navigate method).

    - 
    -      
+
    
 // Define a click binding for all anchors in the page
 $( "a" ).on( "click", function( event ) {
 
@@ -55,11 +53,12 @@
 	// Hypothetical content alteration based on the url. E.g, make
 	// an Ajax request for JSON data and render a template into the page.
 	alterContent( $(this).attr("href") );
-});
    
+});
+
    -

    Next, a navigate event binding helps in responding to backward and forward navigation via the browsers history API. Here the alterContent function can address the direction in which the browser is navigating as well as any additional information stored on the data object when $.mobile.navigate was invoked to store the corresponding history entry.

    +

    Next, a navigate event binding helps in responding to backward and forward navigation via the browsers history API. Here the alterContent function can address the direction in which the browser is navigating as well as any additional information stored on the data object when $.mobile.navigate was invoked to store the corresponding history entry.

    - 
    
+
    
 // Respond to back/forward navigation
 $( window ).on( "navigate", function( event, data ){
 	if ( data.state.foo ) {
@@ -72,15 +71,16 @@
 
 	// reset the content based on the url
 	alterContent( data.state.url );
-});
    
+});
+
    -

    Event Example API

    +

    Event Example

    jQuery Mobile provides the navigate event as a wrapper for both hashchange and popstate. That is, where a binding to both events would be required to support browsers with and without popstate only one binding to navigate is necessary. In this example, altering the hash will trigger the popstate or hashchange event depending on the browser, but only a single navigate binding is necessary. Make sure to use the back button after alterting the hash to see that the event is fired in both cases.

    -

    Note: when viewing the console output, some browsers (eg, Chrome) fire a popstate on the initial page load

    +

    Note: When viewing the console output, some browsers (e.g. Chrome) fire a popstate on the initial page load

    - 
    
+
    
 // Bind to the navigate event
 $( window ).on( "navigate", function() {
 	console.log( "navigated!" );
@@ -93,16 +93,17 @@
 });
 
    
 
-    Event Example
+		Event Example
+
+		
    See also the API documentation of the navigate event.
    
 
-		
    Method Example API
    
+		
    Method Example
    
 
-    
    jQuery Mobile provides the $.mobile.navigate method as a means to track history and receive additional information along with navigate events. In this example, when the method example link is clicked, the url will be changed twice. The first time will it will store additional aribitrary information along with the URL and hash stored by the method. The second time it will simply change the url and store the URL and hash. When the browser moves backward through history the navigate event is triggered as in the event example above but along with it comes information about the direction of history traversal, the url, the hash, and the arbitrary data stored with the first call to the navigate method.
    
+		
    jQuery Mobile provides the $.mobile.navigate method as a means to track history and receive additional information along with navigate events. In this example, when the method example link is clicked, the url will be changed twice. The first time will it will store additional aribitrary information along with the URL and hash stored by the method. The second time it will simply change the url and store the URL and hash. When the browser moves backward through history the navigate event is triggered as in the event example above but along with it comes information about the direction of history traversal, the url, the hash, and the arbitrary data stored with the first call to the navigate method.
    
 
-    
    Note: The arbitrary state properties must be chosen carefully to avoid  the url, hash, and direction properties. This is a shortcoming that will be addressed in future releases.
    
+		
    Note: The arbitrary state properties must be chosen carefully to avoid  the url, hash, and direction properties. This is a shortcoming that will be addressed in future releases.
    
 
-    
    -      
+
    
 // Bind to the click of the example link
 $( "#method-example" ).click(function( event ) {
 	// Append #bar
@@ -124,22 +125,27 @@
 	// Go back to pop the state for #bar and log it
 	window.history.back();
 });
-
-    
    
+
    
 
-    Method Example
+		Method Example
+
+		
    See also the API documentation of the $.mobile.navigate method.
    -

    jQuery Mobile Demos version

    +
    jQuery Mobile Version Demos
    +

    Copyright jQuery Foundation

    - -
    + + diff --git a/demos/old-faq-pages/controls-in-header-footer.php b/demos/old-faq-pages/controls-in-header-footer.php index f85a130716e..37acea378d0 100644 --- a/demos/old-faq-pages/controls-in-header-footer.php +++ b/demos/old-faq-pages/controls-in-header-footer.php @@ -16,10 +16,10 @@
    -

    jQuery Mobile

    -

    Demos

    +

    jQuery Mobile

    Menu Search +

    Version Demos

    @@ -39,13 +39,17 @@
    -

    jQuery Mobile Demos version

    +
    jQuery Mobile Version Demos
    +

    Copyright jQuery Foundation

    - -
    + + diff --git a/demos/old-faq-pages/disabling-a-button-does-not-work.php b/demos/old-faq-pages/disabling-a-button-does-not-work.php index 30744b585fe..58adfc9e1fc 100644 --- a/demos/old-faq-pages/disabling-a-button-does-not-work.php +++ b/demos/old-faq-pages/disabling-a-button-does-not-work.php @@ -16,10 +16,10 @@
    -

    jQuery Mobile

    -

    Demos

    +

    jQuery Mobile

    Menu Search +

    Version Demos

    @@ -39,13 +39,17 @@
    -

    jQuery Mobile Demos version

    +
    jQuery Mobile Version Demos
    +

    Copyright jQuery Foundation

    - -
    + + diff --git a/demos/old-faq-pages/dom-ready-not-working.php b/demos/old-faq-pages/dom-ready-not-working.php index 69f8ae0e45f..a0563f9b21a 100644 --- a/demos/old-faq-pages/dom-ready-not-working.php +++ b/demos/old-faq-pages/dom-ready-not-working.php @@ -16,10 +16,10 @@
    -

    jQuery Mobile

    -

    Demos

    +

    jQuery Mobile

    Menu Search +

    Version Demos

    @@ -54,13 +54,17 @@
    -

    jQuery Mobile Demos version

    +
    jQuery Mobile Version Demos
    +

    Copyright jQuery Foundation

    - -
    + + diff --git a/demos/old-faq-pages/how-can-i-stop-auto-enhancement-of-a-block-of-elements.php b/demos/old-faq-pages/how-can-i-stop-auto-enhancement-of-a-block-of-elements.php index 576f08736e3..6d2df6fb2b9 100644 --- a/demos/old-faq-pages/how-can-i-stop-auto-enhancement-of-a-block-of-elements.php +++ b/demos/old-faq-pages/how-can-i-stop-auto-enhancement-of-a-block-of-elements.php @@ -16,10 +16,10 @@
    -

    jQuery Mobile

    -

    Demos

    +

    jQuery Mobile

    Menu Search +

    Version Demos

    @@ -47,13 +47,17 @@
    -

    jQuery Mobile Demos version

    +
    jQuery Mobile Version Demos
    +

    Copyright jQuery Foundation

    - -
    + + diff --git a/demos/old-faq-pages/how-can-i-stop-auto-enhancement-of-elements.php b/demos/old-faq-pages/how-can-i-stop-auto-enhancement-of-elements.php index 9dd215516cf..977ff700c18 100644 --- a/demos/old-faq-pages/how-can-i-stop-auto-enhancement-of-elements.php +++ b/demos/old-faq-pages/how-can-i-stop-auto-enhancement-of-elements.php @@ -16,10 +16,10 @@
    -

    jQuery Mobile

    -

    Demos

    +

    jQuery Mobile

    Menu Search +

    Version Demos

    @@ -53,13 +53,17 @@
    -

    jQuery Mobile Demos version

    +
    jQuery Mobile Version Demos
    +

    Copyright jQuery Foundation

    - -
    + + diff --git a/demos/old-faq-pages/how-configure-phonegap-cordova.php b/demos/old-faq-pages/how-configure-phonegap-cordova.php index 7b70220c7ab..414a5167e2e 100644 --- a/demos/old-faq-pages/how-configure-phonegap-cordova.php +++ b/demos/old-faq-pages/how-configure-phonegap-cordova.php @@ -16,10 +16,10 @@
    -

    jQuery Mobile

    -

    Demos

    +

    jQuery Mobile

    Menu Search +

    Version Demos

    @@ -113,13 +113,17 @@
    -

    jQuery Mobile Demos version

    +
    jQuery Mobile Version Demos
    +

    Copyright jQuery Foundation

    - -
    + + diff --git a/demos/old-faq-pages/how-do-i-control-page-titles.php b/demos/old-faq-pages/how-do-i-control-page-titles.php index c300c41cd99..e6499ee3e58 100644 --- a/demos/old-faq-pages/how-do-i-control-page-titles.php +++ b/demos/old-faq-pages/how-do-i-control-page-titles.php @@ -16,10 +16,10 @@
    -

    jQuery Mobile

    -

    Demos

    +

    jQuery Mobile

    Menu Search +

    Version Demos

    @@ -49,13 +49,17 @@
    -

    jQuery Mobile Demos version

    +
    jQuery Mobile Version Demos
    +

    Copyright jQuery Foundation

    - -
    + + diff --git a/demos/old-faq-pages/how-do-i-load-a-page.php b/demos/old-faq-pages/how-do-i-load-a-page.php index abf549755d2..cda19f1799b 100644 --- a/demos/old-faq-pages/how-do-i-load-a-page.php +++ b/demos/old-faq-pages/how-do-i-load-a-page.php @@ -21,10 +21,10 @@
    -

    jQuery Mobile

    -

    Demos

    +

    jQuery Mobile

    Menu Search +

    Version Demos

    @@ -44,13 +44,17 @@
    -

    jQuery Mobile Demos version

    +
    jQuery Mobile Version Demos
    +

    Copyright jQuery Foundation

    - -
    + + diff --git a/demos/old-faq-pages/how-do-i-scroll-to-a-position.php b/demos/old-faq-pages/how-do-i-scroll-to-a-position.php index 80e5db8bd90..cbd6feebd4f 100644 --- a/demos/old-faq-pages/how-do-i-scroll-to-a-position.php +++ b/demos/old-faq-pages/how-do-i-scroll-to-a-position.php @@ -16,10 +16,10 @@
    -

    jQuery Mobile

    -

    Demos

    +

    jQuery Mobile

    Menu Search +

    Version Demos

    @@ -45,13 +45,17 @@
    -

    jQuery Mobile Demos version

    +
    jQuery Mobile Version Demos
    +

    Copyright jQuery Foundation

    - -
    + + diff --git a/demos/old-faq-pages/how-do-i-turn-off-url-hiding.php b/demos/old-faq-pages/how-do-i-turn-off-url-hiding.php index ec44e54cb45..cb5ba5b8737 100644 --- a/demos/old-faq-pages/how-do-i-turn-off-url-hiding.php +++ b/demos/old-faq-pages/how-do-i-turn-off-url-hiding.php @@ -21,10 +21,10 @@
    -

    jQuery Mobile

    -

    Demos

    +

    jQuery Mobile

    Menu Search +

    Version Demos

    @@ -44,13 +44,17 @@
    -

    jQuery Mobile Demos version

    +
    jQuery Mobile Version Demos
    +

    Copyright jQuery Foundation

    - -
    + + diff --git a/demos/old-faq-pages/how-do-i-use-touch-mouse-events.php b/demos/old-faq-pages/how-do-i-use-touch-mouse-events.php index a3ba7c65f2d..c265e7dcd22 100644 --- a/demos/old-faq-pages/how-do-i-use-touch-mouse-events.php +++ b/demos/old-faq-pages/how-do-i-use-touch-mouse-events.php @@ -16,10 +16,10 @@
    -

    jQuery Mobile

    -

    Demos

    +

    jQuery Mobile

    Menu Search +

    Version Demos

    @@ -40,13 +40,17 @@
    -

    jQuery Mobile Demos version

    +
    jQuery Mobile Version Demos
    +

    Copyright jQuery Foundation

    - -
    + + diff --git a/demos/old-faq-pages/how-does-theming-work.php b/demos/old-faq-pages/how-does-theming-work.php index b737179be88..a2e11158167 100644 --- a/demos/old-faq-pages/how-does-theming-work.php +++ b/demos/old-faq-pages/how-does-theming-work.php @@ -16,10 +16,10 @@
    -

    jQuery Mobile

    -

    Demos

    +

    jQuery Mobile

    Menu Search +

    Version Demos

    @@ -86,11 +86,11 @@

    Each swatch also includes default styles for interactive elements like list items and buttons. Each button has styles for normal, hover/focus and pressed states.

    - Button A - Button B - Button C - Button D - Button E + Button A + Button B + Button C + Button D + Button E

    By default, any button that's placed in a bar is automatically assigned a swatch letter that matches its parent bar or content box. This behavior makes it easy to ripple a theme change through a page by setting a theme swatch on a parent because you know the buttons will maintain the same relative visual weight across themes. Since form elements use the button styles, they will also adapt to their parent container.

    @@ -100,7 +100,7 @@

    Global "Active" state

    The jQuery Mobile framework uses a swatch called "active" (bright blue in the default theme) to consistently indicate the selected state, regardless of the individual swatch of the given widget. We apply this in navigation and form controls whenever there is a need to indicate what is currently selected. Because this theme swatch is designed for clear, consistent user feedback, it cannot be overridden via the markup; it is set once in the theme and applied by the framework whenever a selected or active state is needed. The styling for this state is in the theme stylesheet under the ui-button-active style rules.

    -
    +
    Active is used for the on state of these toggles: @@ -136,13 +136,17 @@
    -

    jQuery Mobile Demos version

    +
    jQuery Mobile Version Demos
    +

    Copyright jQuery Foundation

    - -
    + + diff --git a/demos/old-faq-pages/injected-content-is-not-enhanced.php b/demos/old-faq-pages/injected-content-is-not-enhanced.php index d7a3e5d2fec..ee8fdbca1e1 100644 --- a/demos/old-faq-pages/injected-content-is-not-enhanced.php +++ b/demos/old-faq-pages/injected-content-is-not-enhanced.php @@ -16,10 +16,10 @@
    -

    jQuery Mobile

    -

    Demos

    +

    jQuery Mobile

    Menu Search +

    Version Demos

    @@ -65,13 +65,17 @@
    -

    jQuery Mobile Demos version

    +
    jQuery Mobile Version Demos
    +

    Copyright jQuery Foundation

    - -
    + + diff --git a/demos/old-faq-pages/my-html-5-inputs-look-different-in-browsers.php b/demos/old-faq-pages/my-html-5-inputs-look-different-in-browsers.php index 4c6e3fda705..764082ebf34 100644 --- a/demos/old-faq-pages/my-html-5-inputs-look-different-in-browsers.php +++ b/demos/old-faq-pages/my-html-5-inputs-look-different-in-browsers.php @@ -16,10 +16,10 @@
    -

    jQuery Mobile

    -

    Demos

    +

    jQuery Mobile

    Menu Search +

    Version Demos

    @@ -39,13 +39,17 @@
    -

    jQuery Mobile Demos version

    +
    jQuery Mobile Version Demos
    +

    Copyright jQuery Foundation

    - -
    + + diff --git a/demos/old-faq-pages/my-range-search-input-type-is-being-changed.php b/demos/old-faq-pages/my-range-search-input-type-is-being-changed.php index 5f4b1864ff8..76710ca8734 100644 --- a/demos/old-faq-pages/my-range-search-input-type-is-being-changed.php +++ b/demos/old-faq-pages/my-range-search-input-type-is-being-changed.php @@ -16,10 +16,10 @@
    -

    jQuery Mobile

    -

    Demos

    +

    jQuery Mobile

    Menu Search +

    Version Demos

    @@ -39,13 +39,17 @@
    -

    jQuery Mobile Demos version

    +
    jQuery Mobile Version Demos
    +

    Copyright jQuery Foundation

    - -
    + + diff --git a/demos/old-faq-pages/pass-query-params-to-page.php b/demos/old-faq-pages/pass-query-params-to-page.php index 196b345fb6c..7590fcc6e43 100644 --- a/demos/old-faq-pages/pass-query-params-to-page.php +++ b/demos/old-faq-pages/pass-query-params-to-page.php @@ -16,10 +16,10 @@
    -

    jQuery Mobile

    -

    Demos

    +

    jQuery Mobile

    Menu Search +

    Version Demos

    @@ -48,13 +48,17 @@
    -

    jQuery Mobile Demos version

    +
    jQuery Mobile Version Demos
    +

    Copyright jQuery Foundation

    - -
    + + diff --git a/demos/old-faq-pages/pass-via-the-hash-to-page.php b/demos/old-faq-pages/pass-via-the-hash-to-page.php index d3dbddcfb1a..22b61377fe2 100644 --- a/demos/old-faq-pages/pass-via-the-hash-to-page.php +++ b/demos/old-faq-pages/pass-via-the-hash-to-page.php @@ -16,10 +16,10 @@
    -

    jQuery Mobile

    -

    Demos

    +

    jQuery Mobile

    Menu Search +

    Version Demos

    @@ -39,13 +39,17 @@
    -

    jQuery Mobile Demos version

    +
    jQuery Mobile Version Demos
    +

    Copyright jQuery Foundation

    - -
    + + diff --git a/demos/old-faq-pages/scripts-and-styles-not-loading.php b/demos/old-faq-pages/scripts-and-styles-not-loading.php index 441b489740f..0af899e56fa 100644 --- a/demos/old-faq-pages/scripts-and-styles-not-loading.php +++ b/demos/old-faq-pages/scripts-and-styles-not-loading.php @@ -16,10 +16,10 @@
    -

    jQuery Mobile

    -

    Demos

    +

    jQuery Mobile

    Menu Search +

    Version Demos

    @@ -47,13 +47,17 @@
    -

    jQuery Mobile Demos version

    +
    jQuery Mobile Version Demos
    +

    Copyright jQuery Foundation

    - -
    + + diff --git a/demos/old-faq-pages/sometimes-custom-select-shows-as-dialog-popup.php b/demos/old-faq-pages/sometimes-custom-select-shows-as-dialog-popup.php index cc7faf0c63a..89e502b91e7 100644 --- a/demos/old-faq-pages/sometimes-custom-select-shows-as-dialog-popup.php +++ b/demos/old-faq-pages/sometimes-custom-select-shows-as-dialog-popup.php @@ -16,10 +16,10 @@
    -

    jQuery Mobile

    -

    Demos

    +

    jQuery Mobile

    Menu Search +

    Version Demos

    @@ -39,13 +39,17 @@
    -

    jQuery Mobile Demos version

    +
    jQuery Mobile Version Demos
    +

    Copyright jQuery Foundation

    - -
    + + diff --git a/demos/old-faq-pages/the-application-cache-is-not-working.php b/demos/old-faq-pages/the-application-cache-is-not-working.php index cd3e7c5fe10..85e711dcdbd 100644 --- a/demos/old-faq-pages/the-application-cache-is-not-working.php +++ b/demos/old-faq-pages/the-application-cache-is-not-working.php @@ -16,10 +16,10 @@
    -

    jQuery Mobile

    -

    Demos

    +

    jQuery Mobile

    Menu Search +

    Version Demos

    @@ -51,13 +51,17 @@
    -

    jQuery Mobile Demos version

    +
    jQuery Mobile Version Demos
    +

    Copyright jQuery Foundation

    - -
    + + diff --git a/demos/old-faq-pages/triggering-create-on-injected-content-does-not-work.php b/demos/old-faq-pages/triggering-create-on-injected-content-does-not-work.php index fbd038c0260..5f00785572a 100644 --- a/demos/old-faq-pages/triggering-create-on-injected-content-does-not-work.php +++ b/demos/old-faq-pages/triggering-create-on-injected-content-does-not-work.php @@ -16,10 +16,10 @@
    -

    jQuery Mobile

    -

    Demos

    +

    jQuery Mobile

    Menu Search +

    Version Demos

    @@ -51,13 +51,17 @@
    -

    jQuery Mobile Demos version

    +
    jQuery Mobile Version Demos
    +

    Copyright jQuery Foundation

    - -
    + + diff --git a/demos/old-faq-pages/updating-the-value-of-enhanced-form-elements-does-not-work.php b/demos/old-faq-pages/updating-the-value-of-enhanced-form-elements-does-not-work.php index 67755a3a2fc..5b30f071c7c 100644 --- a/demos/old-faq-pages/updating-the-value-of-enhanced-form-elements-does-not-work.php +++ b/demos/old-faq-pages/updating-the-value-of-enhanced-form-elements-does-not-work.php @@ -16,10 +16,10 @@
    -

    jQuery Mobile

    -

    Demos

    +

    jQuery Mobile

    Menu Search +

    Version Demos

    @@ -66,13 +66,17 @@
    -

    jQuery Mobile Demos version

    +
    jQuery Mobile Version Demos
    +

    Copyright jQuery Foundation

    - -
    + + diff --git a/demos/old-faq-pages/why-is-only-the-first-page-loaded.php b/demos/old-faq-pages/why-is-only-the-first-page-loaded.php index f9ab0ca70b8..7df088ec62c 100644 --- a/demos/old-faq-pages/why-is-only-the-first-page-loaded.php +++ b/demos/old-faq-pages/why-is-only-the-first-page-loaded.php @@ -16,10 +16,10 @@
    -

    jQuery Mobile

    -

    Demos

    +

    jQuery Mobile

    Menu Search +

    Version Demos

    @@ -39,13 +39,17 @@
    -

    jQuery Mobile Demos version

    +
    jQuery Mobile Version Demos
    +

    Copyright jQuery Foundation

    - -
    + + diff --git a/demos/old-faq-pages/why-wont-my-css-styles-apply-correctly-to-a-widget.php b/demos/old-faq-pages/why-wont-my-css-styles-apply-correctly-to-a-widget.php index ad13f39dc45..8fd9c5fd736 100644 --- a/demos/old-faq-pages/why-wont-my-css-styles-apply-correctly-to-a-widget.php +++ b/demos/old-faq-pages/why-wont-my-css-styles-apply-correctly-to-a-widget.php @@ -16,10 +16,10 @@
    -

    jQuery Mobile

    -

    Demos

    +

    jQuery Mobile

    Menu Search +

    Version Demos

    @@ -58,13 +58,17 @@
    -

    jQuery Mobile Demos version

    +
    jQuery Mobile Version Demos
    +

    Copyright jQuery Foundation

    - -
    + + diff --git a/demos/page-events/alertevents-2.php b/demos/page-events/alertevents-2.php index 63cab47a130..ab4e2f97449 100644 --- a/demos/page-events/alertevents-2.php +++ b/demos/page-events/alertevents-2.php @@ -30,10 +30,10 @@
    -

    jQuery Mobile

    -

    Demos

    +

    jQuery Mobile

    Menu Search +

    Version Demos

    @@ -47,13 +47,17 @@
    -

    jQuery Mobile Demos version

    +
    jQuery Mobile Version Demos
    +

    Copyright jQuery Foundation

    - -
    + + diff --git a/demos/page-events/alertevents-3.php b/demos/page-events/alertevents-3.php index c607f1c1e49..fa022711e0b 100644 --- a/demos/page-events/alertevents-3.php +++ b/demos/page-events/alertevents-3.php @@ -30,10 +30,10 @@
    -

    jQuery Mobile

    -

    Demos

    +

    jQuery Mobile

    Menu Search +

    Version Demos

    @@ -47,13 +47,17 @@
    -

    jQuery Mobile Demos version

    +
    jQuery Mobile Version Demos
    +

    Copyright jQuery Foundation

    - -
    + + diff --git a/demos/page-events/alertevents.php b/demos/page-events/alertevents.php index 10499d3f3e4..8c055ff322b 100644 --- a/demos/page-events/alertevents.php +++ b/demos/page-events/alertevents.php @@ -1,11 +1,11 @@ - + Page Events - jQuery Mobile Demos - + @@ -30,14 +30,16 @@
    -

    jQuery Mobile

    -

    Demos

    +

    jQuery Mobile

    Menu Search +

    Version Demos

    + +

    navigate between pages and open and close panel and popup widgets to see which events fire and their data

    @@ -56,13 +58,17 @@
    -

    jQuery Mobile Demos version

    +
    jQuery Mobile Version Demos
    +

    Copyright jQuery Foundation

    - -
    + + diff --git a/demos/page-events/index.php b/demos/page-events/index.php index 3322a017321..77e38742027 100644 --- a/demos/page-events/index.php +++ b/demos/page-events/index.php @@ -16,10 +16,10 @@
    -

    jQuery Mobile

    -

    Demos

    +

    jQuery Mobile

    Menu Search +

    Version Demos

    @@ -41,13 +41,17 @@
    -

    jQuery Mobile Demos version

    +
    jQuery Mobile Version Demos
    +

    Copyright jQuery Foundation

    - -
    + + diff --git a/demos/page-events/logevents-2.php b/demos/page-events/logevents-2.php index ef95c4f92a8..74e3c0f6e9f 100644 --- a/demos/page-events/logevents-2.php +++ b/demos/page-events/logevents-2.php @@ -29,10 +29,10 @@
    -

    jQuery Mobile

    -

    Demos

    +

    jQuery Mobile

    Menu Search +

    Version Demos

    @@ -46,13 +46,17 @@
    -

    jQuery Mobile Demos version

    +
    jQuery Mobile Version Demos
    +

    Copyright jQuery Foundation

    - -
    + + diff --git a/demos/page-events/logevents-3.php b/demos/page-events/logevents-3.php index 65248c41d23..0e4d6faec7c 100644 --- a/demos/page-events/logevents-3.php +++ b/demos/page-events/logevents-3.php @@ -29,10 +29,10 @@
    -

    jQuery Mobile

    -

    Demos

    +

    jQuery Mobile

    Menu Search +

    Version Demos

    @@ -46,13 +46,17 @@
    -

    jQuery Mobile Demos version

    +
    jQuery Mobile Version Demos
    +

    Copyright jQuery Foundation

    - -
    + + diff --git a/demos/page-events/logevents.php b/demos/page-events/logevents.php index 2ddda894c4b..424f6e397eb 100644 --- a/demos/page-events/logevents.php +++ b/demos/page-events/logevents.php @@ -1,11 +1,11 @@ - + Page Events - jQuery Mobile Demos - + @@ -29,14 +29,16 @@
    -

    jQuery Mobile

    -

    Demos

    +

    jQuery Mobile

    Menu Search +

    Version Demos

    + +

    Navigate between pages and open and close panel and popup widgets to see which events fire and their data.

    @@ -55,13 +57,17 @@
    -

    jQuery Mobile Demos version

    +
    jQuery Mobile Version Demos
    +

    Copyright jQuery Foundation

    - -
    + + diff --git a/demos/pages-dialog/index.php b/demos/pages-dialog/index.php index b99dcf9778b..14c5fd1f7fd 100644 --- a/demos/pages-dialog/index.php +++ b/demos/pages-dialog/index.php @@ -21,10 +21,10 @@
    -

    jQuery Mobile

    -

    Demos

    +

    jQuery Mobile

    Menu Search +

    Version Demos

    @@ -109,13 +109,17 @@
    -

    jQuery Mobile Demos version

    +
    jQuery Mobile Version Demos
    +

    Copyright jQuery Foundation

    - -
    + + diff --git a/demos/pages-multi-page/index.html b/demos/pages-multi-page/index.html index d7efb34bc86..1464dd0df94 100644 --- a/demos/pages-multi-page/index.html +++ b/demos/pages-multi-page/index.html @@ -1,6 +1,5 @@ - @@ -12,7 +11,6 @@ - diff --git a/demos/pages-single-page/index.html b/demos/pages-single-page/index.html index 91751bb7f2d..c1edc25ef2e 100644 --- a/demos/pages-single-page/index.html +++ b/demos/pages-single-page/index.html @@ -1,6 +1,5 @@ - @@ -12,9 +11,7 @@ - -
    diff --git a/demos/pages/index.php b/demos/pages/index.php index 6a1e9c53808..95941b010ad 100644 --- a/demos/pages/index.php +++ b/demos/pages/index.php @@ -16,15 +16,17 @@
    -

    jQuery Mobile

    -

    Demos

    +

    jQuery Mobile

    Menu Search +

    Version Demos

    -

    Pages API

    +

    Pages

    + + API Documentation

    The page is the primary unit of interaction in jQuery Mobile and is used to group content into logical views that can be animated in and out of view with page transitions. A HTML document may start with a single "page" and the Ajax navigation system will load additional pages on demand into the DOM as users navigate around. Alternatively, a HTML document can be built with multiple "pages" inside it and the framework will transition between these local views with no need to request content from the server.

    @@ -120,7 +122,7 @@ </html> - View page template + View page template

    Multi-page template structure

    @@ -167,7 +169,7 @@ </body> - View multi-page template + View multi-page template

    PLEASE NOTE: Since we are using the hash to track navigation history for all the Ajax "pages", it's not currently possible to deep link to an anchor (index.html#foo) on a page in jQuery Mobile, because the framework will look for a "page" with an id of #foo instead of the native behavior of scrolling to the content with that id.

    @@ -230,13 +232,17 @@
    -

    jQuery Mobile Demos version

    +
    jQuery Mobile Version Demos
    +

    Copyright jQuery Foundation

    - -
    + + diff --git a/demos/panel-external/index.php b/demos/panel-external/index.php index 9c18f072a5c..87e0c275c80 100644 --- a/demos/panel-external/index.php +++ b/demos/panel-external/index.php @@ -1,6 +1,6 @@ - + External panels - jQuery Mobile Demos @@ -22,7 +22,7 @@

    External panels

    - Back + Back
    @@ -49,63 +49,64 @@
    -
    +
    -

    Left Panel: Reveal

    -

    This panel is positioned on the left with the reveal display mode. The panel markup is after the header, content and footer in the source order.

    -

    To close, click off the panel, swipe left or right, hit the Esc key, or use the button below:

    - Close panel +

    Left Panel: Reveal

    +

    This panel is positioned on the left with the reveal display mode. The panel markup is after the header, content and footer in the source order.

    +

    To close, click off the panel, swipe left or right, hit the Esc key, or use the button below:

    + Close panel -
    +
    - -
    + +
    -

    Left Panel: Push

    -

    This panel is positioned on the left with the push display mode. The panel markup is after the header, content and footer in the source order.

    -

    To close, click off the panel, swipe left or right, hit the Esc key, or use the button below:

    - Close panel +

    Left Panel: Push

    +

    This panel is positioned on the left with the push display mode. The panel markup is after the header, content and footer in the source order.

    +

    To close, click off the panel, swipe left or right, hit the Esc key, or use the button below:

    + Close panel -
    +
    - -
    + +
    -

    Left Panel: Overlay

    -

    This panel is positioned on the left with the overlay display mode. The panel markup is after the header, content and footer in the source order.

    -

    To close, click off the panel, swipe left or right, hit the Esc key, or use the button below:

    - Close panel +

    Left Panel: Overlay

    +

    This panel is positioned on the left with the overlay display mode. The panel markup is after the header, content and footer in the source order.

    +

    To close, click off the panel, swipe left or right, hit the Esc key, or use the button below:

    + Close panel -
    +
    - -
    + +
    -

    Right Panel: Reveal

    -

    This panel is positioned on the right with the reveal display mode. The panel markup is after the header, content and footer in the source order.

    -

    To close, click off the panel, swipe left or right, hit the Esc key, or use the button below:

    - Close panel +

    Right Panel: Reveal

    +

    This panel is positioned on the right with the reveal display mode. The panel markup is after the header, content and footer in the source order.

    +

    To close, click off the panel, swipe left or right, hit the Esc key, or use the button below:

    + Close panel -
    +
    - -
    + +
    -

    Right Panel: Push

    -

    This panel is positioned on the right with the push display mode. The panel markup is after the header, content and footer in the source order.

    -

    To close, click off the panel, swipe left or right, hit the Esc key, or use the button below:

    - Close panel +

    Right Panel: Push

    +

    This panel is positioned on the right with the push display mode. The panel markup is after the header, content and footer in the source order.

    +

    To close, click off the panel, swipe left or right, hit the Esc key, or use the button below:

    + Close panel -
    +
    - -
    + +
    -

    Right Panel: Overlay

    -

    This panel is positioned on the right with the overlay display mode. The panel markup is after the header, content and footer in the source order.

    -

    To close, click off the panel, swipe left or right, hit the Esc key, or use the button below:

    - Close panel +

    Right Panel: Overlay

    +

    This panel is positioned on the right with the overlay display mode. The panel markup is after the header, content and footer in the source order.

    +

    To close, click off the panel, swipe left or right, hit the Esc key, or use the button below:

    + Close panel + +
    -
    diff --git a/demos/panel-external/page-b.php b/demos/panel-external/page-b.php index 1d455c5bb4c..baeea94dc1c 100644 --- a/demos/panel-external/page-b.php +++ b/demos/panel-external/page-b.php @@ -1,6 +1,6 @@ - + External panels - jQuery Mobile Demos @@ -17,7 +17,7 @@

    External panels

    - Back + Back
    diff --git a/demos/panel-fixed/index.php b/demos/panel-fixed/index.php index 08db62fbd6f..ae69e1f897a 100644 --- a/demos/panel-fixed/index.php +++ b/demos/panel-fixed/index.php @@ -37,7 +37,7 @@

    - Back + Back

    @@ -139,7 +139,7 @@

    This is just a landing page.

    - Back + Back
    diff --git a/demos/panel-responsive/index.php b/demos/panel-responsive/index.php index 063c71c22a8..79852d96c35 100644 --- a/demos/panel-responsive/index.php +++ b/demos/panel-responsive/index.php @@ -35,7 +35,7 @@

    - Back + Back
    @@ -110,7 +110,7 @@

    This is just a landing page.

    - Back + Back
    diff --git a/demos/panel-styling/index.php b/demos/panel-styling/index.php index 4208a5ed104..7111aa4184f 100644 --- a/demos/panel-styling/index.php +++ b/demos/panel-styling/index.php @@ -109,23 +109,17 @@ -moz-column-gap: 2em; column-gap: 2em; } - /* Fix for issue with buttons and form elements - if CSS columns are used on a page with a panel. */ - .article a.ui-button { - -webkit-transform: translate3d(0,0,0); - } } -
    -

    jQuery Mobile

    -

    Demos

    +

    jQuery Mobile

    Menu Search +

    Version Demos

    @@ -144,7 +138,7 @@

    Click the "view source" button to see the CSS and markup of this demo and open the demo to see the result.

    - Open demo + Open demo
    @@ -153,19 +147,23 @@
    -

    jQuery Mobile Demos version

    +
    jQuery Mobile Version Demos
    +

    Copyright jQuery Foundation

    - -
    + +

    Bikes

    - Menu + Menu
    diff --git a/demos/panel-swipe-open/index.php b/demos/panel-swipe-open/index.php index ce0464b5eac..9b7e89103f6 100644 --- a/demos/panel-swipe-open/index.php +++ b/demos/panel-swipe-open/index.php @@ -51,10 +51,10 @@
    -

    jQuery Mobile

    -

    Demos

    +

    jQuery Mobile

    Menu Search +

    Version Demos

    @@ -65,7 +65,7 @@

    The demo page has two menus, one at each side. Both can be opened with swipe or with the buttons in the header.

    - Open demo + Open demo
    @@ -74,14 +74,18 @@
    -

    jQuery Mobile Demos version

    +
    jQuery Mobile Version Demos
    +

    Copyright jQuery Foundation

    - -
    + +
    @@ -97,21 +101,21 @@
    1. to strike or move with a sweeping motion
    - Back to demo intro + Back to demo intro

    Left reveal panel.

    - Close + Close

    Right push panel.

    - Close + Close
    diff --git a/demos/panel/index.php b/demos/panel/index.php index 215a81fe274..989f85ae566 100644 --- a/demos/panel/index.php +++ b/demos/panel/index.php @@ -21,22 +21,24 @@

    Default panel options

    This panel has all the default options: positioned on the left with the reveal display mode. The panel markup is before the header, content and footer in the source order.

    To close, click off the panel, swipe left or right, hit the Esc key, or use the button below:

    - Close panel + Close panel
    -

    jQuery Mobile

    -

    Demos

    +

    jQuery Mobile

    Menu Search +

    Version Demos

    -

    Panel API

    +

    Panel

    + + API Documentation

    Flexible by design, panels can be used for navigation, forms, inspectors and more.

    @@ -96,7 +98,7 @@

    To control a panel from a link, set the href to the ID of the panel you want to toggle (mypanel in the example above). This instructs the framework to bind the link to the panel. This link will toggle the visibility of the panel so tapping it will open the panel, and tapping it again will close it.

    - Default panel + Default panel

    Closing a panel

    @@ -180,17 +182,16 @@

    Included in the widget styles is a breakpoint preset for this behavior that kicks in at 55em (880px). This breakpoint is not applied by default to make it easier for you to write custom breakpoints that work best for your content and design. To apply the breakpoint preset, add the ui-responsive-panel class to the page or, in case you use external panels and/or fixed toolbars, to the page container (body). See an example of a responsive panel page.

    -
    -
      - -
    -
    -

    jQuery Mobile Demos version

    +
    jQuery Mobile Version Demos
    +

    Copyright jQuery Foundation

    @@ -204,7 +205,7 @@

    Left Panel: Reveal

    This panel is positioned on the left with the reveal display mode. The panel markup is after the header, content and footer in the source order.

    To close, click off the panel, swipe left or right, hit the Esc key, or use the button below:

    - Close panel + Close panel
    @@ -214,7 +215,7 @@

    Left Panel: Push

    This panel is positioned on the left with the push display mode. The panel markup is after the header, content and footer in the source order.

    To close, click off the panel, swipe left or right, hit the Esc key, or use the button below:

    - Close panel + Close panel
    @@ -226,7 +227,7 @@

    Right Panel: Reveal

    This panel is positioned on the right with the reveal display mode. The panel markup is after the header, content and footer in the source order.

    To close, click off the panel, swipe left or right, hit the Esc key, or use the button below:

    - Close panel + Close panel
    @@ -236,7 +237,7 @@

    Right Panel: Push

    This panel is positioned on the right with the push display mode. The panel markup is after the header, content and footer in the source order.

    To close, click off the panel, swipe left or right, hit the Esc key, or use the button below:

    - Close panel + Close panel
    @@ -246,7 +247,7 @@

    Right Panel: Overlay

    This panel is positioned on the right with the overlay display mode. The panel markup is after the header, content and footer in the source order.

    To close, click off the panel, swipe left or right, hit the Esc key, or use the button below:

    - Close panel + Close panel
    @@ -254,7 +255,7 @@

    Left Panel: Overlay

    This panel is positioned on the left with the overlay display mode. The panel markup is after the header, content and footer in the source order.

    To close, click off the panel, swipe left or right, hit the Esc key, or use the button below:

    - Close panel + Close panel
    diff --git a/demos/popup-alignment/index.php b/demos/popup-alignment/index.php index 801498807e0..312ad06cfaf 100644 --- a/demos/popup-alignment/index.php +++ b/demos/popup-alignment/index.php @@ -45,10 +45,9 @@
    -

    jQuery Mobile

    -

    Demos

    - Menu - Search +

    jQuery Mobile

    + Menu + Search
    @@ -72,13 +71,17 @@
    -

    jQuery Mobile Demos version

    +
    jQuery Mobile Version Demos
    +

    Copyright jQuery Foundation

    - -
    + + diff --git a/demos/popup-arrow-size/index.php b/demos/popup-arrow-size/index.php index ff9ba6d3ea8..548318b3ce4 100644 --- a/demos/popup-arrow-size/index.php +++ b/demos/popup-arrow-size/index.php @@ -159,10 +159,9 @@ function updateArrowSize() {
    -

    jQuery Mobile

    -

    Demos

    - Menu - Search +

    jQuery Mobile

    + Menu + Search
    @@ -199,13 +198,17 @@ function updateArrowSize() {
    -

    jQuery Mobile Demos version

    +
    jQuery Mobile Version Demos
    +

    Copyright jQuery Foundation

    - -
    + + diff --git a/demos/popup-dynamic/index.php b/demos/popup-dynamic/index.php index 3a31ab78bc0..29d0d1efdbb 100644 --- a/demos/popup-dynamic/index.php +++ b/demos/popup-dynamic/index.php @@ -83,10 +83,10 @@
    -

    jQuery Mobile

    -

    Demos

    - Menu - Search +

    jQuery Mobile

    + Menu + Search +

    Version Demos

    @@ -104,14 +104,18 @@
    -

    jQuery Mobile Demos version

    +
    jQuery Mobile Version Demos
    +

    Copyright jQuery Foundation

    - -
    + +
    diff --git a/demos/popup-iframe/index.php b/demos/popup-iframe/index.php index 876bd7d0dba..464a428b548 100644 --- a/demos/popup-iframe/index.php +++ b/demos/popup-iframe/index.php @@ -20,60 +20,60 @@ -
    +
    -
    -

    jQuery Mobile

    -

    Demos

    - Menu - Search -
    +
    +

    jQuery Mobile

    + Menu + Search +

    Version Demos

    +
    -
    +
    -

    iframes in popups

    +

    iframes in popups

    -

    You may need to embed an iframe into a popup to use a 3rd party widget. Here, we'll walk through a few real-world examples of working with iframes: videos and maps.

    +

    You may need to embed an iframe into a popup to use a 3rd party widget. Here, we'll walk through a few real-world examples of working with iframes: videos and maps.

    -

    Video example

    +

    Video example

    -

    Here is an example of a 3rd party video player embedded in a popup:

    +

    Here is an example of a 3rd party video player embedded in a popup:

    - -

    The markup is an iframe inside a popup container. The popup will have a 15 pixels padding because of class ui-content and a one pixel border because the framework will add class ui-body-a to the popup.

    +

    The markup is an iframe inside a popup container. The popup will have a 15 pixels padding because of class ui-content and a one pixel border because the framework will add class ui-body-a to the popup.

    -

    When using an iframe inside a popup it is important to initially set the width and height attributes to 0. This prevents the page to breaking on platforms like Android 2.3. Note that you have to set the attributes, because setting the width and height with CSS is not sufficient. You can leave the actual width and height in the markup for browsers that have JavaScript disabled and use attr() to set the zero values upon the pagecreate event.

    +

    When using an iframe inside a popup it is important to initially set the width and height attributes to 0. This prevents the page to breaking on platforms like Android 2.3. Note that you have to set the attributes, because setting the width and height with CSS is not sufficient. You can leave the actual width and height in the markup for browsers that have JavaScript disabled and use attr() to set the zero values upon the pagecreate event.

    -

    Next, bind to the popupbeforeposition event to set the desired size of the iframe when the popup is shown or when the window is resized (e.g. orientation change). For the iframe examples on this page a custom function scale() is used to scale down the iframe to fit smaller screens.

    +

    Next, bind to the popupbeforeposition event to set the desired size of the iframe when the popup is shown or when the window is resized (e.g. orientation change). For the iframe examples on this page a custom function scale() is used to scale down the iframe to fit smaller screens.

    -

    When the popup is closed the width and height should be set back to 0. You can do this by binding to the popupafterclose event.

    +

    When the popup is closed the width and height should be set back to 0. You can do this by binding to the popupafterclose event.

    -

    Note that the video will still be playing in the iframe when the popup is closed. If available you can use the 3rd party API to stop the video on the popupafterclose event. Another way is to create the iframe when the popup is opened and destroy it when the popup is closed, but this would drop support for browsers that have JavaScript disabled.

    +

    Note that the video will still be playing in the iframe when the popup is closed. If available you can use the 3rd party API to stop the video on the popupafterclose event. Another way is to create the iframe when the popup is opened and destroy it when the popup is closed, but this would drop support for browsers that have JavaScript disabled.

    -

    Map example

    +

    Map example

    -

    In the second example, an iframe is used to display Google Maps API. Using an iframe prevents issues with the controls of the map.

    +

    In the second example, an iframe is used to display Google Maps API. Using an iframe prevents issues with the controls of the map.

    -
    - Open Map +
    + Open Map -
    - Close - -
    -
    +
    + Close + +
    +
    -

    Expand the section below to view the source of the iframe.

    +

    Expand the section below to view the source of the iframe.

    -
    -

    map.html

    +
    +

    map.html

    
 <!DOCTYPE html>
 <html>
@@ -114,22 +114,26 @@ function initialize() {
 </body>
 </html>
    -
    +
    -

    Setting the size of the iframe is done exactly the same as for the video example, with one exception. You should also set the width and height of the div that contains the map to prevent the page to break on platforms like Android 2.3. In this example the ID of this div is #map_canvas.

    +

    Setting the size of the iframe is done exactly the same as for the video example, with one exception. You should also set the width and height of the div that contains the map to prevent the page to break on platforms like Android 2.3. In this example the ID of this div is #map_canvas.

    -

    jQuery Mobile Demos version

    +
    jQuery Mobile Version Demos
    +

    Copyright jQuery Foundation

    - -
    + + diff --git a/demos/popup-image-scaling/index.php b/demos/popup-image-scaling/index.php index 641226d2cdd..bce87ace808 100644 --- a/demos/popup-image-scaling/index.php +++ b/demos/popup-image-scaling/index.php @@ -17,10 +17,10 @@
    -

    jQuery Mobile

    -

    Demos

    - Menu - Search +

    jQuery Mobile

    + Menu + Search +

    Version Demos

    @@ -49,13 +49,17 @@
    -

    jQuery Mobile Demos version

    +
    jQuery Mobile Version Demos
    +

    Copyright jQuery Foundation

    - -
    + + diff --git a/demos/popup-outside-multipage/index.php b/demos/popup-outside-multipage/index.php index 1b215adfe1c..26c7b644dc4 100644 --- a/demos/popup-outside-multipage/index.php +++ b/demos/popup-outside-multipage/index.php @@ -33,10 +33,10 @@
    -

    jQuery Mobile

    -

    Demos

    - Menu - Search +

    jQuery Mobile

    + Menu + Search +

    Version Demos

    @@ -58,14 +58,18 @@
    -

    jQuery Mobile Demos version

    +
    jQuery Mobile Version Demos
    +

    Copyright jQuery Foundation

    - -
    + +
    Menu diff --git a/demos/popup/index.php b/demos/popup/index.php index 2a4d51977c3..8f134a2e967 100644 --- a/demos/popup/index.php +++ b/demos/popup/index.php @@ -41,15 +41,17 @@
    -

    jQuery Mobile

    -

    Demos

    - Menu - Search +

    jQuery Mobile

    + Menu + Search +

    Version Demos

    -

    Popup API

    +

    Popup

    + + API Documentation

    The popup widget can be used for various types of popups. From a small tooltip popup to a large photo lightbox.

    @@ -321,14 +323,18 @@
    -

    jQuery Mobile Demos version

    +
    jQuery Mobile Version Demos
    +

    Copyright jQuery Foundation

    - -
    + +

    Pre-rendered popup demo

    diff --git a/demos/rangeslider/index.php b/demos/rangeslider/index.php index 1f3e96fc243..f4a936a17cb 100644 --- a/demos/rangeslider/index.php +++ b/demos/rangeslider/index.php @@ -16,15 +16,17 @@
    -

    jQuery Mobile

    -

    Demos

    +

    jQuery Mobile

    Menu Search +

    Version Demos

    -

    Range slider API

    +

    Range slider

    + + API Documentation

    Range slider offer two handles to set a min and max value along a numeric continuum.

    @@ -155,13 +157,17 @@
    -

    jQuery Mobile Demos version

    +
    jQuery Mobile Version Demos
    +

    Copyright jQuery Foundation

    - -
    + + diff --git a/demos/rwd/index.php b/demos/rwd/index.php index 8edc84e1419..9eec9b4fc84 100644 --- a/demos/rwd/index.php +++ b/demos/rwd/index.php @@ -16,10 +16,10 @@
    -

    jQuery Mobile

    -

    Demos

    +

    jQuery Mobile

    Menu Search +

    Version Demos

    @@ -113,13 +113,17 @@
    -

    jQuery Mobile Demos version

    +
    jQuery Mobile Version Demos
    +

    Copyright jQuery Foundation

    - -
    + + diff --git a/demos/selectmenu-custom-filter/index.php b/demos/selectmenu-custom-filter/index.php index 6dcd9ff1f41..fbd8169e8a6 100644 --- a/demos/selectmenu-custom-filter/index.php +++ b/demos/selectmenu-custom-filter/index.php @@ -135,10 +135,10 @@ function pageIsSelectmenuDialog( page ) {
    -

    jQuery Mobile

    -

    Demos

    +

    jQuery Mobile

    Menu Search +

    Version Demos

    @@ -262,13 +262,17 @@ function pageIsSelectmenuDialog( page ) {
    -

    jQuery Mobile Demos version

    +
    jQuery Mobile Version Demos
    +

    Copyright jQuery Foundation

    - -
    + + diff --git a/demos/selectmenu-custom/index.php b/demos/selectmenu-custom/index.php index a015608424e..86869931557 100644 --- a/demos/selectmenu-custom/index.php +++ b/demos/selectmenu-custom/index.php @@ -16,10 +16,10 @@
    -

    jQuery Mobile

    -

    Demos

    +

    jQuery Mobile

    Menu Search +

    Version Demos

    @@ -329,7 +329,7 @@
    -
    +
    Horizontal controlgroup: @@ -381,13 +381,17 @@
    -

    jQuery Mobile Demos version

    +
    jQuery Mobile Version Demos
    +

    Copyright jQuery Foundation

    - -
    + + diff --git a/demos/selectmenu/index.php b/demos/selectmenu/index.php index 301046cf7b7..1223b3cbe1e 100644 --- a/demos/selectmenu/index.php +++ b/demos/selectmenu/index.php @@ -16,15 +16,17 @@
    -

    jQuery Mobile

    -

    Demos

    +

    jQuery Mobile

    Menu Search +

    Version Demos

    -

    Select menu API

    +

    Select menu

    + + API Documentation

    The select menu is based on a native select element, which is hidden from view and replaced with a custom-styled select button. Tapping it opens the native menu. There is also a custom select menu widget, which also replaces the native dropdown.

    @@ -192,7 +194,7 @@
    -
    +
    Horizontal controlgroup: @@ -249,13 +251,17 @@
    -

    jQuery Mobile Demos version

    +
    jQuery Mobile Version Demos
    +

    Copyright jQuery Foundation

    - -
    + + diff --git a/demos/slider-flipswitch/index.php b/demos/slider-flipswitch/index.php index 6934db296ba..5ac5a6d91ca 100644 --- a/demos/slider-flipswitch/index.php +++ b/demos/slider-flipswitch/index.php @@ -16,10 +16,10 @@
    -

    jQuery Mobile

    -

    Demos

    +

    jQuery Mobile

    Menu Search +

    Version Demos

    @@ -121,13 +121,17 @@
    -

    jQuery Mobile Demos version

    +
    jQuery Mobile Version Demos
    +

    Copyright jQuery Foundation

    - -
    + + diff --git a/demos/slider-tooltip/index.php b/demos/slider-tooltip/index.php index 8ca032c2334..54e6be3733e 100644 --- a/demos/slider-tooltip/index.php +++ b/demos/slider-tooltip/index.php @@ -15,10 +15,10 @@
    -

    jQuery Mobile

    -

    Demos

    +

    jQuery Mobile

    Menu Search +

    Version Demos

    @@ -43,13 +43,17 @@
    -

    jQuery Mobile Demos version

    +
    jQuery Mobile Version Demos
    +

    Copyright jQuery Foundation

    - -
    + + diff --git a/demos/slider/index.php b/demos/slider/index.php index 08d479405cc..7ae6c4096d8 100644 --- a/demos/slider/index.php +++ b/demos/slider/index.php @@ -33,15 +33,17 @@
    -

    jQuery Mobile

    -

    Demos

    +

    jQuery Mobile

    Menu Search +

    Version Demos

    -

    Slider API

    +

    Slider

    + + API Documentation

    Sliders are used to enter numeric values along a continuum and can also be dual handle range sliders.

    @@ -155,13 +157,17 @@
    -

    jQuery Mobile Demos version

    +
    jQuery Mobile Version Demos
    +

    Copyright jQuery Foundation

    - -
    + + diff --git a/demos/swipe-list/index.php b/demos/swipe-list/index.php index 3061c7b7a22..43102b0f3ce 100644 --- a/demos/swipe-list/index.php +++ b/demos/swipe-list/index.php @@ -134,10 +134,10 @@ function confirmAndDelete( listitem, transition ) {
    -

    jQuery Mobile

    -

    Demos

    +

    jQuery Mobile

    Menu Search +

    Version Demos

    @@ -159,16 +159,16 @@ function confirmAndDelete( listitem, transition ) {

    Copyright jQuery Foundation

    - -
    + +

    Inbox

    - Back - Refresh + Back + Refresh
    diff --git a/demos/swipe-page/buenosaires.html b/demos/swipe-page/buenosaires.html index 6fb762af21b..d3ba712b00b 100644 --- a/demos/swipe-page/buenosaires.html +++ b/demos/swipe-page/buenosaires.html @@ -17,7 +17,7 @@
    @@ -25,7 +25,7 @@

    Buenos Aires

    - Close + Close

    At 140 meters (16 lanes), Avenida 9 de Julio in Buenos Aires is the world’s widest avenue. Its name honors Argentina’s birthdate. (July 9, 1816). The avenue runs roughly one kilometer to the west of the Río de la Plata waterfront, from the Retiro district in the north to Constitución station in the south. source: inautonews.com

    @@ -33,13 +33,13 @@

    Buenos Aires

    -
    -
    +
    Controlgroup: - + - Three + Three
    @@ -280,7 +280,7 @@
    - Active button + Active button

    Form inside static list:

    diff --git a/demos/theme-default/index.php b/demos/theme-default/index.php index 4343225859a..52db9f49354 100644 --- a/demos/theme-default/index.php +++ b/demos/theme-default/index.php @@ -52,9 +52,11 @@
    -

    Default theme API

    - Back - Button +

    Default theme

    + + API Documentation + Back + Button
    • Menu item 1
      • @@ -68,7 +70,7 @@
      -
      +
      Theme: @@ -77,7 +79,7 @@
      -
      +
      Navbars: @@ -86,7 +88,7 @@
      -
      +
      Shadow:
      Off: set the widget option shadow to false (data-shadow="false")       @@ -109,8 +111,8 @@

      I am a div with classes ui-bar, ui-bar-a and ui-corner-all. I am a link

      - We - + We +
        @@ -191,11 +193,11 @@
    • -
    +
    Controlgroup: - + - Three + Three
    @@ -213,7 +215,7 @@
    - Active button + Active button

    Form inside static list:

    diff --git a/demos/toolbar-external/index2.php b/demos/toolbar-external/index2.php index 1c981734147..2d171963183 100644 --- a/demos/toolbar-external/index2.php +++ b/demos/toolbar-external/index2.php @@ -19,7 +19,7 @@
    - Back + Back

    External header

    diff --git a/demos/toolbar-fixed-external/index.php b/demos/toolbar-fixed-external/index.php index ef383bd9938..12f6e4f00f0 100644 --- a/demos/toolbar-fixed-external/index.php +++ b/demos/toolbar-fixed-external/index.php @@ -19,7 +19,7 @@
    - Back + Back

    External fixed header

    diff --git a/demos/toolbar-fixed-forms/index.php b/demos/toolbar-fixed-forms/index.php index 56c289d3eef..fcc12fcf6c0 100644 --- a/demos/toolbar-fixed-forms/index.php +++ b/demos/toolbar-fixed-forms/index.php @@ -34,7 +34,7 @@
    - Back + Back

    2,146 Songs

    @@ -111,7 +111,7 @@

    Purchase Album?

    Your download will begin immediately on your mobile device when you purchase.

    - Buy: $10.99 + Buy: $10.99 Cancel
    diff --git a/demos/toolbar-fixed-fullscreen/index.php b/demos/toolbar-fixed-fullscreen/index.php index f706b35e877..8ffcd9bc3d6 100644 --- a/demos/toolbar-fixed-fullscreen/index.php +++ b/demos/toolbar-fixed-fullscreen/index.php @@ -17,7 +17,7 @@
    - Back + Back

    Fullscreen fixed header

    diff --git a/demos/toolbar-fixed-persistent-optimized/index.php b/demos/toolbar-fixed-persistent-optimized/index.php index 74b24c86b28..620df3caddb 100644 --- a/demos/toolbar-fixed-persistent-optimized/index.php +++ b/demos/toolbar-fixed-persistent-optimized/index.php @@ -21,7 +21,7 @@
    - Back + Back

    Fixed external header

    diff --git a/demos/toolbar-fixed-persistent-optimized/page-b.php b/demos/toolbar-fixed-persistent-optimized/page-b.php index 0ceea02b5f0..14e627c2e25 100644 --- a/demos/toolbar-fixed-persistent-optimized/page-b.php +++ b/demos/toolbar-fixed-persistent-optimized/page-b.php @@ -21,7 +21,7 @@
    - Back + Back

    Fixed external header

    diff --git a/demos/toolbar-fixed-persistent/index.php b/demos/toolbar-fixed-persistent/index.php index f035f3bd4cd..77afdb8e816 100644 --- a/demos/toolbar-fixed-persistent/index.php +++ b/demos/toolbar-fixed-persistent/index.php @@ -37,7 +37,7 @@
    - Back + Back

    Info

    diff --git a/demos/toolbar-fixed-persistent/page-b.php b/demos/toolbar-fixed-persistent/page-b.php index 3a18eef493c..e24d9cd1158 100644 --- a/demos/toolbar-fixed-persistent/page-b.php +++ b/demos/toolbar-fixed-persistent/page-b.php @@ -37,7 +37,7 @@
    - Back + Back

    Friends

    diff --git a/demos/toolbar-fixed-persistent/page-c.php b/demos/toolbar-fixed-persistent/page-c.php index 3354ba198fb..7749c412785 100644 --- a/demos/toolbar-fixed-persistent/page-c.php +++ b/demos/toolbar-fixed-persistent/page-c.php @@ -37,7 +37,7 @@
    - Back + Back

    Albums

    @@ -118,7 +118,7 @@

    Purchase Album?

    Your download will begin immediately on your mobile device when you purchase.

    - Buy: $10.99 + Buy: $10.99 Cancel
    diff --git a/demos/toolbar-fixed-persistent/page-d.php b/demos/toolbar-fixed-persistent/page-d.php index b0e4a19a8e6..8609b00b5e8 100644 --- a/demos/toolbar-fixed-persistent/page-d.php +++ b/demos/toolbar-fixed-persistent/page-d.php @@ -37,7 +37,7 @@
    - Back + Back

    Emails

    diff --git a/demos/toolbar-fixed/index.php b/demos/toolbar-fixed/index.php index 4159fc0376b..48641941502 100644 --- a/demos/toolbar-fixed/index.php +++ b/demos/toolbar-fixed/index.php @@ -16,7 +16,7 @@
    - Back + Back

    Fixed header

    diff --git a/demos/toolbar/index.php b/demos/toolbar/index.php index 4cf4b676caf..531675eac66 100644 --- a/demos/toolbar/index.php +++ b/demos/toolbar/index.php @@ -31,15 +31,17 @@
    -

    jQuery Mobile

    -

    Demos

    +

    jQuery Mobile

    Menu Search +

    Version Demos

    -

    Toolbar API

    +

    Toolbar

    + + API Documentation

    The toolbar widget is used to enhance headers and footers.

    @@ -171,7 +173,7 @@
    -
    +
    Add Up Down @@ -203,13 +205,17 @@
    -

    jQuery Mobile Demos version

    +
    jQuery Mobile Version Demos
    +

    Copyright jQuery Foundation

    - -
    + + diff --git a/demos/transitions/index.php b/demos/transitions/index.php index ce126ead6db..b32124e3c43 100644 --- a/demos/transitions/index.php +++ b/demos/transitions/index.php @@ -24,10 +24,10 @@
    -

    jQuery Mobile

    -

    Demos

    +

    jQuery Mobile

    Menu Search +

    Version Demos

    @@ -146,13 +146,17 @@
    -

    jQuery Mobile Demos version

    +
    jQuery Mobile Version Demos
    +

    Copyright jQuery Foundation

    - -
    + +