mirror of
https://github.com/Doodle3D/doodle3d-connect.git
synced 2024-12-24 17:43:48 +01:00
Added jQuery and jQuery mobile
Needed for offline development
This commit is contained in:
peteruithoven
parent
7512b680b6
commit
f247f1b3dc
4
js/libs/jquery-1.11.0.min.js
vendored
Normal file
4
js/libs/jquery-1.11.0.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
2
js/libs/jquery-1.8.3.min.js
vendored
2
js/libs/jquery-1.8.3.min.js
vendored
File diff suppressed because one or more lines are too long
732
js/libs/jquery.mobile/demos/_assets/css/jqm-demos.css
Normal file
732
js/libs/jquery.mobile/demos/_assets/css/jqm-demos.css
Normal file
@ -0,0 +1,732 @@
|
||||
/* JQM Demos custom CSS */
|
||||
|
||||
/* Header */
|
||||
.jqm-demos .jqm-header {
|
||||
background: #fff;
|
||||
border-top: 4px solid #3eb249;
|
||||
border-bottom-color: #eee;
|
||||
}
|
||||
.jqm-demos .jqm-header h2 {
|
||||
padding: .4em 0 .1em;
|
||||
margin: 0 3em;
|
||||
}
|
||||
.jqm-demos .jqm-header h2 a {
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
min-height: 40px;
|
||||
}
|
||||
.jqm-demos .jqm-header h2 img {
|
||||
display: block;
|
||||
width: 140px;
|
||||
height: auto;
|
||||
}
|
||||
.jqm-demos .jqm-header h2 > img {
|
||||
display: inline-block;
|
||||
}
|
||||
.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-btn {
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
background: none;
|
||||
border: 0;
|
||||
top: 50%;
|
||||
margin-top: -1em;
|
||||
-webkit-border-radius: .3125em;
|
||||
border-radius: .3125em;
|
||||
opacity: .4;
|
||||
filter: Alpha(Opacity=40);
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.jqm-demos .jqm-footer.ui-footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.jqm-demos .jqm-footer {
|
||||
border-top: 1px solid #3eb249;
|
||||
}
|
||||
.jqm-demos .jqm-footer p {
|
||||
font-size: .8em;
|
||||
color: #999;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-weight: 300;
|
||||
margin: 0 1.25em 1.25em;
|
||||
}
|
||||
.jqm-demos .jqm-footer p:first-child {
|
||||
font-size: 1em;
|
||||
color: #666;
|
||||
font-weight: 400;
|
||||
margin: 1em 1em .75em;
|
||||
}
|
||||
|
||||
/* 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 {
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-weight: 300;
|
||||
}
|
||||
.jqm-demos .jqm-content > h1 {
|
||||
font-size: 2.4em;
|
||||
margin: 0 0 .625em;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.jqm-demos .jqm-content > h3 {
|
||||
color: #3eb249;
|
||||
background-color: transparent;
|
||||
font-size: 1.4em;
|
||||
margin: 0 0 1em;
|
||||
}
|
||||
.jqm-demos .jqm-content > p {
|
||||
font-size: 1.2em;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.jqm-demos .jqm-content > ul:not(.jqm-list) li {
|
||||
font-size: 1.2em;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.jqm-demos .jqm-content > p {
|
||||
margin: 0 0 1.25em;
|
||||
}
|
||||
.jqm-demos .jqm-content > ul,
|
||||
.jqm-demos .jqm-content > ol {
|
||||
padding-left: 1.3em;
|
||||
}
|
||||
.jqm-demos .jqm-content > .ui-listview {
|
||||
padding-left: 0;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.jqm-demos .jqm-content strong {
|
||||
font-weight: 700;
|
||||
}
|
||||
.jqm-demos .jqm-content > p strong {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* Homepage */
|
||||
.jqm-home > .jqm-content > img {
|
||||
width: 400px;
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 2.5em 0;
|
||||
}
|
||||
.jqm-home .ui-grid-a {
|
||||
margin: 2.5em -.5em -.5em;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.jqm-block-content p {
|
||||
font-size: 1.1em;
|
||||
font-weight: 300;
|
||||
line-height: 1.4;
|
||||
margin: .7em 0;
|
||||
}
|
||||
.jqm-block-content p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.jqm-block-content a:link {
|
||||
font-weight: 300;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* Code */
|
||||
.jqm-content pre,
|
||||
.jqm-content 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;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
.jqm-content pre > code {
|
||||
padding: 0;
|
||||
background: none;
|
||||
font-size: .9em;
|
||||
}
|
||||
|
||||
/* Lists */
|
||||
.jqm-demos .jqm-search .jqm-list {
|
||||
margin: 0 -1em 1em;
|
||||
}
|
||||
.jqm-demos .jqm-list .ui-btn,
|
||||
.jqm-demos .jqm-list .ui-btn:visited,
|
||||
.jqm-demos .jqm-list .ui-li-divider {
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-weight: 300;
|
||||
text-shadow: none !important;
|
||||
}
|
||||
.jqm-demos .jqm-list .ui-btn:hover,
|
||||
.jqm-demos .jqm-list .ui-btn:active {
|
||||
color: #3388cc;
|
||||
}
|
||||
.jqm-demos .jqm-list .ui-btn.ui-btn-active {
|
||||
color: #fff;
|
||||
}
|
||||
.jqm-demos .jqm-list .ui-li-divider {
|
||||
color: #3eb249;
|
||||
}
|
||||
|
||||
/* Navmenu */
|
||||
.jqm-navmenu-panel .ui-listview > li .ui-collapsible-heading {
|
||||
margin: 0;
|
||||
}
|
||||
.jqm-navmenu-panel .ui-collapsible.ui-li-static {
|
||||
padding: 0;
|
||||
border: none !important;
|
||||
}
|
||||
.jqm-navmenu-panel .ui-collapsible + li > .ui-btn,
|
||||
.jqm-navmenu-panel .ui-collapsible + .ui-collapsible > .ui-collapsible-heading > .ui-btn,
|
||||
.jqm-navmenu-panel .ui-panel-inner > .ui-listview > li.ui-first-child .ui-btn {
|
||||
border-top: none !important;
|
||||
}
|
||||
.jqm-navmenu-panel .ui-listview .ui-listview .ui-btn {
|
||||
padding-left: 1.5em;
|
||||
color: #999;
|
||||
}
|
||||
.jqm-navmenu-panel .ui-listview .ui-listview .ui-btn.ui-btn-active {
|
||||
color: #fff;
|
||||
}
|
||||
.jqm-navmenu-panel .ui-btn:after {
|
||||
opacity: .4;
|
||||
filter: Alpha(Opacity=40);
|
||||
}
|
||||
.jqm-demos .jqm-navmenu-panel.jqm-panel-page-nav {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 178px;
|
||||
left: 12px;
|
||||
}
|
||||
.jqm-demos .jqm-navmenu-panel.jqm-panel-page-nav ul li:first-child a{
|
||||
border-top: none;
|
||||
}
|
||||
/* Search */
|
||||
.jqm-search-panel .ui-panel-inner {
|
||||
padding-top: 0;
|
||||
}
|
||||
.jqm-search-panel .ui-input-search {
|
||||
margin: 1em 0;
|
||||
}
|
||||
.jqm-search-panel .ui-input-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-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;
|
||||
}
|
||||
.ui-btn-active .jqm-search-results-keywords {
|
||||
color: #fff;
|
||||
}
|
||||
.jqm-search-results-highlight {
|
||||
color: #3388cc;
|
||||
font-weight: 400;
|
||||
}
|
||||
.ui-btn-active .jqm-search-results-highlight {
|
||||
color: #fff;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
/* 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-demos .jqm-content .jqm-deeplink:after {
|
||||
content: "";
|
||||
display: block;
|
||||
float: right;
|
||||
margin: .1em 0 0 .5em;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
opacity: .4;
|
||||
filter: Alpha(Opacity=40);
|
||||
}
|
||||
|
||||
/* 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-demos .jqm-content .jqm-view-source-link.ui-btn-active:link {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@media (min-width: 60em) {
|
||||
.jqm-demos .jqm-header h2 {
|
||||
padding: 1em 0 .7em;
|
||||
margin: 0 1em 0 3%;
|
||||
text-align: left;
|
||||
}
|
||||
.jqm-demos .jqm-header h2 img {
|
||||
width: 275px;
|
||||
height: 78px;
|
||||
}
|
||||
.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-demos .jqm-navmenu-panel {
|
||||
visibility: visible;
|
||||
position: relative;
|
||||
left: 0;
|
||||
float: left;
|
||||
width: 25%;
|
||||
background: none;
|
||||
-webkit-transition: none !important;
|
||||
-moz-transition: none !important;
|
||||
transition: none !important;
|
||||
-webkit-transform: none !important;
|
||||
-moz-transform: none !important;
|
||||
transform: none !important;
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
.jqm-demos.jqm-panel-page .jqm-navmenu-panel {
|
||||
display: none;
|
||||
}
|
||||
html .jqm-demos.jqm-panel-page .jqm-navmenu-panel.jqm-panel-page-nav {
|
||||
display: block;
|
||||
}
|
||||
.jqm-demos .jqm-navmenu-panel .ui-panel-inner {
|
||||
margin-top: 3em;
|
||||
margin-bottom: 3em;
|
||||
}
|
||||
.jqm-demos .jqm-content {
|
||||
width: 67%;
|
||||
padding-top: 2em;
|
||||
padding-left: 5%;
|
||||
padding-right: 3%;
|
||||
float: right;
|
||||
}
|
||||
.jqm-demos .jqm-content.jqm-fullwidth {
|
||||
width: auto;
|
||||
padding-left: 15%;
|
||||
padding-right: 15%;
|
||||
float: none;
|
||||
}
|
||||
.jqm-navmenu-panel .ui-listview .ui-btn {
|
||||
padding-left: 12.5%;
|
||||
}
|
||||
.jqm-navmenu-panel .ui-listview .ui-listview .ui-btn {
|
||||
padding-left: 15%;
|
||||
}
|
||||
.jqm-navmenu-panel .ui-collapsible,
|
||||
.jqm-navmenu-panel .ui-collapsible-content,
|
||||
.jqm-navmenu-panel .ui-btn {
|
||||
background: none !important;
|
||||
border-color: #ddd !important;
|
||||
}
|
||||
.jqm-navmenu-panel .ui-btn.ui-btn-active {
|
||||
color: #3388cc !important;
|
||||
}
|
||||
.jqm-navmenu-panel .ui-btn::after {
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 500ms ease;
|
||||
-moz-transition: opacity 500ms ease;
|
||||
transition: opacity 500ms ease;
|
||||
}
|
||||
.jqm-navmenu-panel .ui-btn:hover::after {
|
||||
opacity: .4;
|
||||
}
|
||||
.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 */
|
||||
}
|
||||
.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);
|
||||
}
|
||||
.ui-panel-dismiss-open.ui-panel-dismiss-position-right {
|
||||
left: -17em;
|
||||
right: 17em;
|
||||
}
|
||||
}
|
||||
@media (min-width: 35em) {
|
||||
.jqm-block-content {
|
||||
min-height: 18em;
|
||||
}
|
||||
}
|
||||
|
||||
/* 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-btn {
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-weight: 400;
|
||||
}
|
||||
.jqm-view-source .ui-collapsible-heading .ui-btn-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 */
|
||||
.jqm-view-source .ui-btn.ui-btn-c,
|
||||
.jqm-view-source .ui-btn.ui-btn-c:visited,
|
||||
.jqm-view-source .ui-btn.ui-btn-c:hover,
|
||||
.jqm-view-source .ui-btn.ui-btn-c:active,
|
||||
.jqm-view-source .ui-btn.ui-btn-c.ui-btn-active {
|
||||
background: #005aff;
|
||||
border-color: #0033cc;
|
||||
color: #fff;
|
||||
text-shadow: 0 1px 0 #0033cc;
|
||||
}
|
||||
/* Button D - PHP */
|
||||
.jqm-view-source .ui-btn.ui-btn-d,
|
||||
.jqm-view-source .ui-btn.ui-btn-d:visited,
|
||||
.jqm-view-source .ui-btn.ui-btn-d:hover,
|
||||
.jqm-view-source .ui-btn.ui-btn-d:active,
|
||||
.jqm-view-source .ui-btn.ui-btn-d.ui-btn-active {
|
||||
background: #ed1c24;
|
||||
border-color: #ff0000;
|
||||
color: #fff;
|
||||
text-shadow: 0 1px 0 #ff0000;
|
||||
}
|
||||
/* Button E - JS */
|
||||
.jqm-view-source .ui-btn.ui-btn-e,
|
||||
.jqm-view-source .ui-btn.ui-btn-e:visited,
|
||||
.jqm-view-source .ui-btn.ui-btn-e:hover,
|
||||
.jqm-view-source .ui-btn.ui-btn-e:active,
|
||||
.jqm-view-source .ui-btn.ui-btn-e.ui-btn-active {
|
||||
background: #3EB249;
|
||||
border-color: #108040;
|
||||
color: #fff;
|
||||
text-shadow: 0 1px 0 #108040;
|
||||
}
|
||||
/* Button F - CSS */
|
||||
.jqm-view-source .ui-btn.ui-btn-f,
|
||||
.jqm-view-source .ui-btn.ui-btn-f:visited,
|
||||
.jqm-view-source .ui-btn.ui-btn-f:hover,
|
||||
.jqm-view-source .ui-btn.ui-btn-f:active,
|
||||
.jqm-view-source .ui-btn.ui-btn-f.ui-btn-active {
|
||||
background: #ec008c;
|
||||
border-color: #cc0099;
|
||||
color: #fff;
|
||||
text-shadow: 0 1px 0 #cc0099;
|
||||
}
|
||||
|
||||
/**
|
||||
* SyntaxHighlighter
|
||||
* http://alexgorbatchev.com/SyntaxHighlighter
|
||||
*
|
||||
* SyntaxHighlighter is donationware. If you are using it, please donate.
|
||||
* http://alexgorbatchev.com/SyntaxHighlighter/donate.html
|
||||
*
|
||||
* @version
|
||||
* 3.0.83 (July 02 2010)
|
||||
*
|
||||
* @copyright
|
||||
* Copyright (C) 2004-2010 Alex Gorbatchev.
|
||||
*
|
||||
* @license
|
||||
* Dual licensed under the MIT and GPL licenses.
|
||||
*/
|
||||
.syntaxhighlighter a,
|
||||
.syntaxhighlighter div,
|
||||
.syntaxhighlighter code,
|
||||
.syntaxhighlighter table,
|
||||
.syntaxhighlighter table td,
|
||||
.syntaxhighlighter table tr,
|
||||
.syntaxhighlighter table tbody,
|
||||
.syntaxhighlighter table thead,
|
||||
.syntaxhighlighter table caption,
|
||||
.syntaxhighlighter textarea {
|
||||
background: none;
|
||||
border: 0;
|
||||
bottom: auto;
|
||||
float: none;
|
||||
left: auto;
|
||||
height: auto;
|
||||
line-height: 18px;
|
||||
margin: 0;
|
||||
outline: 0;
|
||||
overflow: visible;
|
||||
padding: 0;
|
||||
position: static;
|
||||
right: auto;
|
||||
text-align: left;
|
||||
top: auto;
|
||||
vertical-align: baseline;
|
||||
width: auto;
|
||||
box-sizing: content-box;
|
||||
font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
min-height: inherit;
|
||||
min-height: auto;
|
||||
}
|
||||
.syntaxhighlighter {
|
||||
width: auto;
|
||||
margin: 0;
|
||||
padding: 1em 0;
|
||||
position: relative;
|
||||
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;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
background: white;
|
||||
padding-left: 1em;
|
||||
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;
|
||||
}
|
||||
BIN
js/libs/jquery.mobile/demos/_assets/img/album-af.jpg
Normal file
BIN
js/libs/jquery.mobile/demos/_assets/img/album-af.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
BIN
js/libs/jquery.mobile/demos/_assets/img/album-ag.jpg
Normal file
BIN
js/libs/jquery.mobile/demos/_assets/img/album-ag.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.8 KiB |
BIN
js/libs/jquery.mobile/demos/_assets/img/album-bb.jpg
Normal file
BIN
js/libs/jquery.mobile/demos/_assets/img/album-bb.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
BIN
js/libs/jquery.mobile/demos/_assets/img/album-bk.jpg
Normal file
BIN
js/libs/jquery.mobile/demos/_assets/img/album-bk.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.5 KiB |
BIN
js/libs/jquery.mobile/demos/_assets/img/album-hc.jpg
Normal file
BIN
js/libs/jquery.mobile/demos/_assets/img/album-hc.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
js/libs/jquery.mobile/demos/_assets/img/album-k.jpg
Normal file
BIN
js/libs/jquery.mobile/demos/_assets/img/album-k.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
BIN
js/libs/jquery.mobile/demos/_assets/img/album-mg.jpg
Normal file
BIN
js/libs/jquery.mobile/demos/_assets/img/album-mg.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.8 KiB |
BIN
js/libs/jquery.mobile/demos/_assets/img/album-ok.jpg
Normal file
BIN
js/libs/jquery.mobile/demos/_assets/img/album-ok.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
js/libs/jquery.mobile/demos/_assets/img/album-p.jpg
Normal file
BIN
js/libs/jquery.mobile/demos/_assets/img/album-p.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.1 KiB |
BIN
js/libs/jquery.mobile/demos/_assets/img/album-rh.jpg
Normal file
BIN
js/libs/jquery.mobile/demos/_assets/img/album-rh.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.1 KiB |
BIN
js/libs/jquery.mobile/demos/_assets/img/album-ws.jpg
Normal file
BIN
js/libs/jquery.mobile/demos/_assets/img/album-ws.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.4 KiB |
BIN
js/libs/jquery.mobile/demos/_assets/img/album-xx.jpg
Normal file
BIN
js/libs/jquery.mobile/demos/_assets/img/album-xx.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
BIN
js/libs/jquery.mobile/demos/_assets/img/apple.png
Normal file
BIN
js/libs/jquery.mobile/demos/_assets/img/apple.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
BIN
js/libs/jquery.mobile/demos/_assets/img/bg-pattern.png
Normal file
BIN
js/libs/jquery.mobile/demos/_assets/img/bg-pattern.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 948 B |
BIN
js/libs/jquery.mobile/demos/_assets/img/bike.jpg
Normal file
BIN
js/libs/jquery.mobile/demos/_assets/img/bike.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 144 KiB |
BIN
js/libs/jquery.mobile/demos/_assets/img/blackberry_10.png
Normal file
BIN
js/libs/jquery.mobile/demos/_assets/img/blackberry_10.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 134 KiB |
BIN
js/libs/jquery.mobile/demos/_assets/img/bmw-thumb.jpg
Normal file
BIN
js/libs/jquery.mobile/demos/_assets/img/bmw-thumb.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
BIN
js/libs/jquery.mobile/demos/_assets/img/bmw.jpg
Normal file
BIN
js/libs/jquery.mobile/demos/_assets/img/bmw.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 524 KiB |
BIN
js/libs/jquery.mobile/demos/_assets/img/buenosaires.jpg
Normal file
BIN
js/libs/jquery.mobile/demos/_assets/img/buenosaires.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 279 KiB |
BIN
js/libs/jquery.mobile/demos/_assets/img/capetown.jpg
Normal file
BIN
js/libs/jquery.mobile/demos/_assets/img/capetown.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 261 KiB |
BIN
js/libs/jquery.mobile/demos/_assets/img/de.png
Normal file
BIN
js/libs/jquery.mobile/demos/_assets/img/de.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 545 B |
BIN
js/libs/jquery.mobile/demos/_assets/img/devices.png
Normal file
BIN
js/libs/jquery.mobile/demos/_assets/img/devices.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 196 KiB |
BIN
js/libs/jquery.mobile/demos/_assets/img/fi.png
Normal file
BIN
js/libs/jquery.mobile/demos/_assets/img/fi.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 489 B |
BIN
js/libs/jquery.mobile/demos/_assets/img/firefox-logo.png
Normal file
BIN
js/libs/jquery.mobile/demos/_assets/img/firefox-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 87 KiB |
BIN
js/libs/jquery.mobile/demos/_assets/img/firefox_os.png
Normal file
BIN
js/libs/jquery.mobile/demos/_assets/img/firefox_os.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
BIN
js/libs/jquery.mobile/demos/_assets/img/galaxy_express.png
Normal file
BIN
js/libs/jquery.mobile/demos/_assets/img/galaxy_express.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 109 KiB |
BIN
js/libs/jquery.mobile/demos/_assets/img/gb.png
Normal file
BIN
js/libs/jquery.mobile/demos/_assets/img/gb.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 599 B |
BIN
js/libs/jquery.mobile/demos/_assets/img/gf.png
Normal file
BIN
js/libs/jquery.mobile/demos/_assets/img/gf.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 545 B |
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
@ -0,0 +1,13 @@
|
||||
Created by Joseph Wain (see http://penandthink.com) at and probably downloaded from http://glyphish.com
|
||||
|
||||
This work is licensed under the Creative Commons Attribution 3.0 United States License. To view a copy of this license, visit http://creativecommons.org/licenses/by/3.0/us/ or send a letter to Creative Commons, 171 Second Street, Suite 300, San Francisco, California, 94105, USA.
|
||||
|
||||
You are free to share it and to remix it remix under the following conditions:
|
||||
|
||||
* You must attribute the work in the manner specified by the author (SEE BELOW).
|
||||
* For any reuse or distribution, you must make clear to others the license terms of this work.
|
||||
* The above conditions can be waived if you get permission from the copyright holder (send me an email!).
|
||||
|
||||
ATTRIBUTION -- a note reading "icons by Joseph Wain / glyphish.com" or similar, plus a link back to glyphish.com from your app's website, is the preferred form of attribution. Also acceptable would be, like, a link from within your iPhone application, or from the iTunes store page, but those aren't as useful to other people. If none of these work for you, please contact hello@glyphish.com and we can work something out.
|
||||
|
||||
USE WITHOUT ATTRIBUTION -- If attribution is not possible, workable or desirable for your application, contact hello@glyphish.com for commercial non-attributed licensing terms.
|
||||
BIN
js/libs/jquery.mobile/demos/_assets/img/jquery-logo.png
Normal file
BIN
js/libs/jquery.mobile/demos/_assets/img/jquery-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
js/libs/jquery.mobile/demos/_assets/img/landrover-thumb.jpg
Normal file
BIN
js/libs/jquery.mobile/demos/_assets/img/landrover-thumb.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
BIN
js/libs/jquery.mobile/demos/_assets/img/landrover.jpg
Normal file
BIN
js/libs/jquery.mobile/demos/_assets/img/landrover.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 221 KiB |
BIN
js/libs/jquery.mobile/demos/_assets/img/lumia_800.png
Normal file
BIN
js/libs/jquery.mobile/demos/_assets/img/lumia_800.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
BIN
js/libs/jquery.mobile/demos/_assets/img/newyork.jpg
Normal file
BIN
js/libs/jquery.mobile/demos/_assets/img/newyork.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 234 KiB |
BIN
js/libs/jquery.mobile/demos/_assets/img/nexus_7.png
Normal file
BIN
js/libs/jquery.mobile/demos/_assets/img/nexus_7.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
BIN
js/libs/jquery.mobile/demos/_assets/img/paris.jpg
Normal file
BIN
js/libs/jquery.mobile/demos/_assets/img/paris.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 195 KiB |
BIN
js/libs/jquery.mobile/demos/_assets/img/phone_galaxy3.png
Normal file
BIN
js/libs/jquery.mobile/demos/_assets/img/phone_galaxy3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
BIN
js/libs/jquery.mobile/demos/_assets/img/phone_iphone5.png
Normal file
BIN
js/libs/jquery.mobile/demos/_assets/img/phone_iphone5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
BIN
js/libs/jquery.mobile/demos/_assets/img/phone_lumia920.png
Normal file
BIN
js/libs/jquery.mobile/demos/_assets/img/phone_lumia920.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 53 KiB |
BIN
js/libs/jquery.mobile/demos/_assets/img/phone_onex.png
Normal file
BIN
js/libs/jquery.mobile/demos/_assets/img/phone_onex.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
BIN
js/libs/jquery.mobile/demos/_assets/img/photo-landscape.jpg
Normal file
BIN
js/libs/jquery.mobile/demos/_assets/img/photo-landscape.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 608 KiB |
BIN
js/libs/jquery.mobile/demos/_assets/img/photo-portrait.jpg
Normal file
BIN
js/libs/jquery.mobile/demos/_assets/img/photo-portrait.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 952 KiB |
BIN
js/libs/jquery.mobile/demos/_assets/img/photo-run.jpeg
Normal file
BIN
js/libs/jquery.mobile/demos/_assets/img/photo-run.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 118 KiB |
BIN
js/libs/jquery.mobile/demos/_assets/img/seoul.jpg
Normal file
BIN
js/libs/jquery.mobile/demos/_assets/img/seoul.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 336 KiB |
BIN
js/libs/jquery.mobile/demos/_assets/img/sydney.jpg
Normal file
BIN
js/libs/jquery.mobile/demos/_assets/img/sydney.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 107 KiB |
BIN
js/libs/jquery.mobile/demos/_assets/img/tesla-thumb.jpg
Normal file
BIN
js/libs/jquery.mobile/demos/_assets/img/tesla-thumb.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
BIN
js/libs/jquery.mobile/demos/_assets/img/tesla.jpg
Normal file
BIN
js/libs/jquery.mobile/demos/_assets/img/tesla.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 297 KiB |
BIN
js/libs/jquery.mobile/demos/_assets/img/tizen.png
Normal file
BIN
js/libs/jquery.mobile/demos/_assets/img/tizen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
BIN
js/libs/jquery.mobile/demos/_assets/img/us.png
Normal file
BIN
js/libs/jquery.mobile/demos/_assets/img/us.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 609 B |
169
js/libs/jquery.mobile/demos/_assets/js/h2widget.js
Normal file
169
js/libs/jquery.mobile/demos/_assets/js/h2widget.js
Normal file
@ -0,0 +1,169 @@
|
||||
(function( $, undefined ) {
|
||||
//special click handling to make widget work remove after nav changes in 1.4
|
||||
var href,
|
||||
ele = "";
|
||||
$( document ).on( "click", "a", function( e ) {
|
||||
href = $( this ).attr( "href" );
|
||||
var hash = $.mobile.path.parseUrl( href );
|
||||
if( typeof href !== "undefined" && hash !== "" && href !== href.replace( hash,"" ) && hash.search( "/" ) !== -1 ){
|
||||
//remove the hash from the link to allow normal loading of the page.
|
||||
var newHref = href.replace( hash,"" );
|
||||
$( this ).attr( "href", newHref );
|
||||
}
|
||||
ele = $( this );
|
||||
});
|
||||
$( document ).on( "pagebeforechange", function( e, f ){
|
||||
f.originalHref = href;
|
||||
});
|
||||
$( document ).on("pagebeforechange", function( e,f ){
|
||||
var hash = $.mobile.path.parseUrl(f.toPage).hash,
|
||||
hashEl, hashElInPage;
|
||||
|
||||
try {
|
||||
hashEl = $( hash );
|
||||
} catch( e ) {
|
||||
hashEl = $();
|
||||
}
|
||||
|
||||
try {
|
||||
hashElInPage = $( ".ui-page-active " + hash );
|
||||
} catch( e ) {
|
||||
hashElInPage = $();
|
||||
}
|
||||
|
||||
if( typeof hash !== "undefined" &&
|
||||
hash.search( "/" ) === -1 &&
|
||||
hash !== "" &&
|
||||
hashEl.length > 0 &&
|
||||
!hashEl.hasClass( "ui-page" ) &&
|
||||
!hashEl.hasClass( "ui-popup" ) &&
|
||||
hashEl.data('role') !== "page" &&
|
||||
!hashElInPage.hasClass( "ui-panel" ) &&
|
||||
!hashElInPage.hasClass( "ui-popup" ) ) {
|
||||
//scroll to the id
|
||||
var pos = hashEl.offset().top;
|
||||
$.mobile.silentScroll( pos );
|
||||
$.mobile.navigate( hash, '', true );
|
||||
} else if( typeof f.toPage !== "object" &&
|
||||
hash !== "" &&
|
||||
$.mobile.path.parseUrl( href ).hash !== "" &&
|
||||
!hashEl.hasClass( "ui-page" ) && hashEl.attr('data-role') !== "page" &&
|
||||
!hashElInPage.hasClass( "ui-panel" ) &&
|
||||
!hashElInPage.hasClass( "ui-popup" ) ) {
|
||||
$( ele ).attr( "href", href );
|
||||
$.mobile.document.one( "pagechange", function() {
|
||||
if( typeof hash !== "undefined" &&
|
||||
hash.search( "/" ) === -1 &&
|
||||
hash !== "" &&
|
||||
hashEl.length > 0 &&
|
||||
hashElInPage.length > 0 &&
|
||||
!hashEl.hasClass( "ui-page" ) &&
|
||||
hashEl.data('role') !== "page" &&
|
||||
!hashElInPage.hasClass( "ui-panel" ) &&
|
||||
!hashElInPage.hasClass( "ui-popup" ) ) {
|
||||
hash = $.mobile.path.parseUrl( href ).hash;
|
||||
var pos = hashElInPage.offset().top;
|
||||
$.mobile.silentScroll( pos );
|
||||
}
|
||||
} );
|
||||
}
|
||||
});
|
||||
$( document ).on( "mobileinit", function(){
|
||||
hash = window.location.hash;
|
||||
$.mobile.document.one( "pageshow", function(){
|
||||
var hashEl, hashElInPage;
|
||||
|
||||
try {
|
||||
hashEl = $( hash );
|
||||
} catch( e ) {
|
||||
hashEl = $();
|
||||
}
|
||||
|
||||
try {
|
||||
hashElInPage = $( ".ui-page-active " + hash );
|
||||
} catch( e ) {
|
||||
hashElInPage = $();
|
||||
}
|
||||
|
||||
if( hash !== "" &&
|
||||
hashEl.length > 0 &&
|
||||
hashElInPage.length > 0 &&
|
||||
hashEl.attr('data-role') !== "page" &&
|
||||
!hashEl.hasClass( "ui-page" ) &&
|
||||
!hashElInPage.hasClass( "ui-panel" ) &&
|
||||
!hashElInPage.hasClass( "ui-popup" ) &&
|
||||
!hashEl.is( "body" ) ){
|
||||
var pos = hashElInPage.offset().top;
|
||||
setTimeout( function(){
|
||||
$.mobile.silentScroll( pos );
|
||||
}, 100 );
|
||||
}
|
||||
});
|
||||
});
|
||||
//h2 widget
|
||||
$( document ).on( "mobileinit", function(){
|
||||
$.widget( "mobile.h2linker", {
|
||||
options:{
|
||||
initSelector: ":jqmData(quicklinks='true')"
|
||||
},
|
||||
|
||||
_create:function(){
|
||||
var self = this,
|
||||
bodyid = "ui-page-top",
|
||||
panel = "<div data-role='panel' class='jqm-nav-panel jqm-quicklink-panel' data-position='right' data-display='overlay' data-theme='a'><ul data-role='listview' data-inset='false' data-theme='a' data-divider-theme='a' data-icon='false' class='jqm-list'><li data-role='list-divider'>Quick Links</li></ul></div>",
|
||||
first = true,
|
||||
h2dictionary = new Object();
|
||||
if(typeof $("body").attr("id") === "undefined"){
|
||||
$("body").attr("id",bodyid);
|
||||
} else {
|
||||
bodyid = $("body").attr("id");
|
||||
}
|
||||
this.element.find("div.jqm-content>h2").each(function(){
|
||||
var id, text = $(this).text();
|
||||
|
||||
if(typeof $(this).attr("id") === "undefined"){
|
||||
id = text.replace(/[^\.a-z0-9:_-]+/gi,"");
|
||||
$(this).attr( "id", id );
|
||||
} else {
|
||||
id = $(this).attr("id");
|
||||
}
|
||||
|
||||
h2dictionary[id] = text;
|
||||
if(!first){
|
||||
$(this).before( "<a href='#" + bodyid + "' class='jqm-deeplink ui-icon-carat-u ui-alt-icon'>Top</a>");
|
||||
} else {
|
||||
$(this).before("<a href='#' data-ajax='false' class='jqm-deeplink jqm-open-quicklink-panel ui-icon-carat-l ui-alt-icon'>Quick Links</a>");
|
||||
}
|
||||
first = false;
|
||||
});
|
||||
this._on(".jqm-open-quicklink-panel", {
|
||||
"click": function(){
|
||||
$(".ui-page-active .jqm-quicklink-panel").panel("open");
|
||||
return false;
|
||||
}
|
||||
});
|
||||
this._on( document, {
|
||||
"pagebeforechange": function(){
|
||||
this.element.find(".jqm-quicklink-panel").panel("close");
|
||||
this.element.find(".jqm-quicklink-panel .ui-btn-active").removeClass("ui-btn-active");
|
||||
}
|
||||
});
|
||||
if( $(h2dictionary).length > 0 ){
|
||||
this.element.prepend(panel)
|
||||
this.element.find(".jqm-quicklink-panel").panel().find("ul").listview();
|
||||
}
|
||||
$.each(h2dictionary,function(id,text){
|
||||
self.element.find(".jqm-quicklink-panel ul").append("<li><a href='#"+id+"'>"+text+"</a></li>");
|
||||
});
|
||||
self.element.find(".jqm-quicklink-panel ul").listview("refresh");
|
||||
|
||||
}
|
||||
});
|
||||
});
|
||||
$( document ).bind( "pagecreate create", function( e ) {
|
||||
var initselector = $.mobile.h2linker.prototype.options.initSelector;
|
||||
if($(e.target).data("quicklinks")){
|
||||
$(e.target).h2linker();
|
||||
}
|
||||
});
|
||||
})( jQuery );
|
||||
9
js/libs/jquery.mobile/demos/_assets/js/index.html
Normal file
9
js/libs/jquery.mobile/demos/_assets/js/index.html
Normal file
@ -0,0 +1,9 @@
|
||||
<?php
|
||||
$type = 'text/javascript';
|
||||
$files = array(
|
||||
'jqm-demos.js',
|
||||
'view-source.js',
|
||||
'h2widget.js'
|
||||
);
|
||||
|
||||
require_once('../../../combine.html');
|
||||
1027
js/libs/jquery.mobile/demos/_assets/js/index.js
Normal file
1027
js/libs/jquery.mobile/demos/_assets/js/index.js
Normal file
File diff suppressed because one or more lines are too long
311
js/libs/jquery.mobile/demos/_assets/js/jqm-demos.js
Normal file
311
js/libs/jquery.mobile/demos/_assets/js/jqm-demos.js
Normal file
@ -0,0 +1,311 @@
|
||||
// Turn off Ajax for local file browsing
|
||||
if ( location.protocol.substr(0,4) === 'file' ||
|
||||
location.protocol.substr(0,11) === '*-extension' ||
|
||||
location.protocol.substr(0,6) === 'widget' ) {
|
||||
|
||||
// Start with links with only the trailing slash and that aren't external links
|
||||
var fixLinks = function() {
|
||||
$( "a[href$='/'], a[href='.'], a[href='..']" ).not( "[rel='external']" ).each( function() {
|
||||
if( !$( this ).attr( "href" ).match("http") ){
|
||||
this.href = $( this ).attr( "href" ).replace( /\/$/, "" ) + "/index.html";
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// Fix the links for the initial page
|
||||
$( fixLinks );
|
||||
|
||||
// Fix the links for subsequent ajax page loads
|
||||
$( document ).on( "pagecreate", fixLinks );
|
||||
|
||||
// Check to see if ajax can be used. This does a quick ajax request and blocks the page until its done
|
||||
$.ajax({
|
||||
url: '.',
|
||||
async: false,
|
||||
isLocal: true
|
||||
}).error(function() {
|
||||
// Ajax doesn't work so turn it off
|
||||
$( document ).on( "mobileinit", function() {
|
||||
$.mobile.ajaxEnabled = false;
|
||||
|
||||
var message = $( '<div>' , {
|
||||
'class': "jqm-content",
|
||||
style: "border:none; padding: 10px 15px; overflow: auto;",
|
||||
'data-ajax-warning': true
|
||||
});
|
||||
|
||||
message
|
||||
.append( "<h3>Note: Navigation may not work if viewed locally</h3>" )
|
||||
.append( "<p>The Ajax-based navigation used throughout the jQuery Mobile docs may need to be viewed on a web server to work in certain browsers. If you see an error message when you click a link, please try a different browser.</p>" );
|
||||
|
||||
$( document ).on( "pagecreate", function( event ) {
|
||||
$( event.target ).append( message );
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
$( 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",
|
||||
words = version.split( "-" ),
|
||||
ver = words[0],
|
||||
str = words[1] || "",
|
||||
text = ver;
|
||||
|
||||
// Insert jqm version in header
|
||||
if ( str.indexOf( "rc" ) == -1 ) {
|
||||
str = str.charAt( 0 ).toUpperCase() + str.slice( 1 );
|
||||
} else {
|
||||
str = str.toUpperCase().replace( ".", "" );
|
||||
}
|
||||
|
||||
if ( $.mobile.version && str ) {
|
||||
text += " " + str;
|
||||
}
|
||||
|
||||
$( ".jqm-version" ).html( text );
|
||||
|
||||
// Global navmenu panel
|
||||
$( ".jqm-navmenu-panel ul" ).listview();
|
||||
|
||||
$( document ).on( "panelopen", ".jqm-search-panel", function() {
|
||||
$( this ).find( "input" ).focus();
|
||||
})
|
||||
|
||||
$( ".jqm-navmenu-link" ).on( "click", function() {
|
||||
page.find( ".jqm-navmenu-panel:not(.jqm-panel-page-nav)" ).panel( "open" );
|
||||
});
|
||||
|
||||
// Turn off autocomplete / correct for demos search
|
||||
$( this ).find( ".jqm-search input" ).attr( "autocomplete", "off" ).attr( "autocorrect", "off" );
|
||||
|
||||
// Global search
|
||||
$( ".jqm-search-link" ).on( "click", function() {
|
||||
page.find( ".jqm-search-panel" ).panel( "open" );
|
||||
});
|
||||
|
||||
// Initalize search panel list and filter also remove collapsibles
|
||||
$( this ).find( ".jqm-search ul.jqm-list" ).html( searchContents ).listview({
|
||||
inset: false,
|
||||
theme: null,
|
||||
dividerTheme: null,
|
||||
icon: false,
|
||||
autodividers: true,
|
||||
autodividersSelector: function ( li ) {
|
||||
return "";
|
||||
},
|
||||
arrowKeyNav: true,
|
||||
enterToNav: true,
|
||||
highlight: true,
|
||||
submitTo: searchUrl
|
||||
}).filterable();
|
||||
|
||||
// Initalize search page list and remove collapsibles
|
||||
$( this ).find( ".jqm-search-results-wrap ul.jqm-list" ).html( searchContents ).listview({
|
||||
inset: true,
|
||||
theme: null,
|
||||
dividerTheme: null,
|
||||
icon: false,
|
||||
arrowKeyNav: true,
|
||||
enterToNav: true,
|
||||
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") ) {
|
||||
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" );
|
||||
}, 0 );
|
||||
}
|
||||
});
|
||||
|
||||
// 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() {
|
||||
var text = $( this ).attr( "data-filtertext" );
|
||||
|
||||
$( this )
|
||||
.find( "a" )
|
||||
.append( "<span class='jqm-search-results-keywords ui-li-desc'>" + text + "</span>" );
|
||||
});
|
||||
});
|
||||
|
||||
// Functions for highlighting text used for keywords highlight in search
|
||||
jQuery.fn.highlight = function( pat ) {
|
||||
function innerHighlight( node, pat ) {
|
||||
var skip = 0;
|
||||
if ( node.nodeType == 3 ) {
|
||||
var pos = node.data.toUpperCase().indexOf( pat );
|
||||
if ( pos >= 0 ) {
|
||||
var spannode = document.createElement( "span" );
|
||||
spannode.className = "jqm-search-results-highlight";
|
||||
var middlebit = node.splitText( pos );
|
||||
var endbit = middlebit.splitText( pat.length );
|
||||
var middleclone = middlebit.cloneNode( true );
|
||||
spannode.appendChild( middleclone );
|
||||
middlebit.parentNode.replaceChild( spannode, middlebit );
|
||||
skip = 1;
|
||||
}
|
||||
} else if ( node.nodeType == 1 && node.childNodes && !/(script|style)/i.test( node.tagName ) ) {
|
||||
for ( var i = 0; i < node.childNodes.length; ++i ) {
|
||||
i += innerHighlight( node.childNodes[i], pat );
|
||||
}
|
||||
}
|
||||
return skip;
|
||||
}
|
||||
return this.length && pat && pat.length ? this.each(function() {
|
||||
innerHighlight( this, pat.toUpperCase() );
|
||||
}) : this;
|
||||
};
|
||||
|
||||
// Function to remove highlights in text
|
||||
jQuery.fn.removeHighlight = function() {
|
||||
return this.find( "span.jqm-search-results-highlight" ).each(function() {
|
||||
this.parentNode.firstChild.nodeName;
|
||||
with ( this.parentNode ) {
|
||||
replaceChild( this.firstChild, this );
|
||||
normalize();
|
||||
}
|
||||
}).end();
|
||||
};
|
||||
|
||||
// Extension to listview to add keyboard navigation
|
||||
$( document ).on( "mobileinit", function() {
|
||||
(function( $, undefined ) {
|
||||
|
||||
$.widget( "mobile.listview", $.mobile.listview, {
|
||||
options: {
|
||||
arrowKeyNav: false,
|
||||
enterToNav: false,
|
||||
highlight: false,
|
||||
submitTo: false
|
||||
},
|
||||
_create: function() {
|
||||
this._super();
|
||||
|
||||
if ( this.options.arrowKeyNav ) {
|
||||
this._on( document, { "pageshow": "arrowKeyNav" });
|
||||
}
|
||||
|
||||
if ( this.options.enterToNav ) {
|
||||
this._on( document, { "pageshow": "enterToNav" });
|
||||
}
|
||||
|
||||
},
|
||||
submitTo: function() {
|
||||
var url,
|
||||
form = this.element.parent().find( "form" );
|
||||
|
||||
form.attr( "method", "get" )
|
||||
.attr( "action", this.options.submitTo );
|
||||
|
||||
url = this.options.submitTo + "?search=" + this.element.parent().find( "input" ).val();
|
||||
|
||||
window.location = url;
|
||||
},
|
||||
enterToNav: function() {
|
||||
var form = this.element.parent().find( "form" );
|
||||
|
||||
form.append( "<button type='submit' data-icon='carat-r' data-inline='true' class='ui-hidden-accessible' data-iconpos='notext'>Submit</button>" )
|
||||
.parent()
|
||||
.trigger( "create" );
|
||||
|
||||
this.element.parent().find( "form" ).children( ".ui-btn" ).addClass( "ui-hidden-accessible" );
|
||||
|
||||
this._on( form, {
|
||||
"submit": "submitHandler"
|
||||
});
|
||||
},
|
||||
enhanced: false,
|
||||
arrowKeyNav: function() {
|
||||
var input = this.element.prev("form").find( "input" );
|
||||
|
||||
if ( !this.enhanced ) {
|
||||
this._on( input, {
|
||||
"keyup": "handleKeyUp"
|
||||
});
|
||||
|
||||
this.enhanced = true;
|
||||
}
|
||||
},
|
||||
handleKeyUp: function( e ) {
|
||||
var search,
|
||||
input = this.element.prev("form").find( "input" );
|
||||
|
||||
if ( e.which === $.ui.keyCode.DOWN ) {
|
||||
if ( this.element.find( "li.ui-btn-active" ).length === 0 ) {
|
||||
this.element.find( "li:first" ).toggleClass( "ui-btn-active" ).find("a").toggleClass( "ui-btn-active" );
|
||||
} else {
|
||||
this.element.find( "li.ui-btn-active a" ).toggleClass( "ui-btn-active");
|
||||
this.element.find( "li.ui-btn-active" ).toggleClass( "ui-btn-active" ).next().toggleClass( "ui-btn-active" ).find("a").toggleClass( "ui-btn-active" );
|
||||
}
|
||||
|
||||
this.highlightDown();
|
||||
} else if ( e.which === $.ui.keyCode.UP ) {
|
||||
if ( this.element.find( "li.ui-btn-active" ).length !== 0 ) {
|
||||
this.element.find( "li.ui-btn-active a" ).toggleClass( "ui-btn-active");
|
||||
this.element.find( "li.ui-btn-active" ).toggleClass( "ui-btn-active" ).prev().toggleClass( "ui-btn-active" ).find("a").toggleClass( "ui-btn-active" );
|
||||
} else {
|
||||
this.element.find( "li:last" ).toggleClass( "ui-btn-active" ).find("a").toggleClass( "ui-btn-active" );
|
||||
}
|
||||
this.highlightUp();
|
||||
} else if ( typeof e.which !== "undefined" ) {
|
||||
this.element.find( "li.ui-btn-active" ).removeClass( "ui-btn-active" );
|
||||
|
||||
if ( this.options.highlight ) {
|
||||
search = input.val();
|
||||
|
||||
this.element.find( "li" ).each(function() {
|
||||
$( this ).removeHighlight();
|
||||
$( this ).highlight( search );
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
submitHandler: function() {
|
||||
if ( this.element.find( "li.ui-btn-active" ).length !== 0 ) {
|
||||
var href = this.element.find( "li.ui-btn-active a" ).attr( "href" );
|
||||
|
||||
$( ":mobile-pagecontainer" ).pagecontainer( "change", href );
|
||||
return false;
|
||||
}
|
||||
|
||||
if ( this.options.submitTo ) {
|
||||
this.submitTo();
|
||||
}
|
||||
},
|
||||
highlightDown: function() {
|
||||
if ( this.element.find( "li.ui-btn-active" ).hasClass( "ui-screen-hidden" ) ) {
|
||||
this.element.find( "li.ui-btn-active" ).find("a").toggleClass( "ui-btn-active" );
|
||||
this.element.find( "li.ui-btn-active" ).toggleClass( "ui-btn-active" ).next().toggleClass( "ui-btn-active" ).find("a").toggleClass( "ui-btn-active" );
|
||||
this.highlightDown();
|
||||
}
|
||||
return;
|
||||
},
|
||||
highlightUp: function() {
|
||||
if ( this.element.find( "li.ui-btn-active" ).hasClass( "ui-screen-hidden" ) ) {
|
||||
this.element.find( "li.ui-btn-active" ).find("a").toggleClass( "ui-btn-active" );
|
||||
this.element.find( "li.ui-btn-active" ).toggleClass( "ui-btn-active" ).prev().toggleClass( "ui-btn-active" ).find("a").toggleClass( "ui-btn-active" );
|
||||
this.highlightUp();
|
||||
}
|
||||
return;
|
||||
}
|
||||
});
|
||||
})( jQuery );
|
||||
|
||||
});
|
||||
545
js/libs/jquery.mobile/demos/_assets/js/view-source.js
Normal file
545
js/libs/jquery.mobile/demos/_assets/js/view-source.js
Normal file
File diff suppressed because one or more lines are too long
616
js/libs/jquery.mobile/demos/_search/index.html
Normal file
616
js/libs/jquery.mobile/demos/_search/index.html
Normal file
@ -0,0 +1,616 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>jQuery Mobile Demos</title>
|
||||
<link rel="stylesheet" href="../css/themes/default/jquery.mobile-1.4.2.min.css">
|
||||
<link rel="stylesheet" href="../_assets/css/jqm-demos.css">
|
||||
<link rel="shortcut icon" href="../_assets/favicon.ico">
|
||||
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
|
||||
<script src="../js/jquery.js"></script>
|
||||
<script src="../_assets/js/index.js"></script>
|
||||
<script src="../js/jquery.mobile-1.4.2.min.js"></script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div data-role="page" class="jqm-demos jqm-demos-index jqm-demos-search-results">
|
||||
|
||||
<div data-role="header" class="jqm-header">
|
||||
<h2><a href="../" title="jQuery Mobile Demos home"><img src="../_assets/img/jquery-logo.png" alt="jQuery Mobile"></a></h2>
|
||||
<p><span class="jqm-version"></span> Demos</p>
|
||||
<a href="#" class="jqm-navmenu-link ui-btn ui-btn-icon-notext ui-corner-all ui-icon-bars ui-nodisc-icon ui-alt-icon ui-btn-left">Menu</a>
|
||||
<a href="#" class="jqm-search-link ui-btn ui-btn-icon-notext ui-corner-all ui-icon-search ui-nodisc-icon ui-alt-icon ui-btn-right">Search</a>
|
||||
</div><!-- /header -->
|
||||
|
||||
<div role="main" class="ui-content jqm-content">
|
||||
|
||||
<h1>Search Results</h1>
|
||||
|
||||
<div class="jqm-search-results-wrap">
|
||||
<ul class="jqm-list jqm-search-results-list">
|
||||
<li data-filtertext="demos homepage" data-icon="home"><a href=".././">Home</a></li>
|
||||
<li data-filtertext="introduction overview getting started"><a href="../intro/" data-ajax="false">Introduction</a></li>
|
||||
<li data-filtertext="buttons button markup buttonmarkup method anchor link button element"><a href="../button-markup/" data-ajax="false">Buttons</a></li>
|
||||
<li data-filtertext="form button widget input button submit reset"><a href="../button/" data-ajax="false">Button widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Checkboxradio widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="form checkboxradio widget checkbox input checkboxes controlgroups"><a href="../checkboxradio-checkbox/" data-ajax="false">Checkboxes</a></li>
|
||||
<li data-filtertext="form checkboxradio widget radio input radio buttons controlgroups"><a href="../checkboxradio-radio/" data-ajax="false">Radio buttons</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Collapsible (set) widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="collapsibles content formatting"><a href="../collapsible/" data-ajax="false">Collapsible</a></li>
|
||||
<li data-filtertext="dynamic collapsible set accordion append expand"><a href="../collapsible-dynamic/" data-ajax="false">Dynamic collapsibles</a></li>
|
||||
<li data-filtertext="accordions collapsible set widget content formatting grouped collapsibles"><a href="../collapsibleset/" data-ajax="false">Collapsible set</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Controlgroup widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="controlgroups selectmenu checkboxradio input grouped buttons horizontal vertical"><a href="../controlgroup/" data-ajax="false">Controlgroup</a></li>
|
||||
<li data-filtertext="dynamic controlgroup dynamically add buttons"><a href="../controlgroup-dynamic/" data-ajax="false">Dynamic controlgroups</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="form datepicker widget date input"><a href="../datepicker/" data-ajax="false">Datepicker</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Events</h3>
|
||||
<ul>
|
||||
<li data-filtertext="swipe to delete list items listviews swipe events"><a href="../swipe-list/" data-ajax="false">Swipe list items</a></li>
|
||||
<li data-filtertext="swipe to navigate swipe page navigation swipe events"><a href="../swipe-page/" data-ajax="false">Swipe page navigation</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="filterable filter elements sorting searching listview table"><a href="../filterable/" data-ajax="false">Filterable widget</a></li>
|
||||
<li data-filtertext="form flipswitch widget flip toggle switch binary select checkbox input"><a href="../flipswitch/" data-ajax="false">Flipswitch widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Forms</h3>
|
||||
<ul>
|
||||
<li data-filtertext="forms text checkbox radio range button submit reset inputs selects textarea slider flipswitch label form elements"><a href="../forms/" data-ajax="false">Forms</a></li>
|
||||
<li data-filtertext="form hide labels hidden accessible ui-hidden-accessible forms"><a href="../forms-label-hidden-accessible/" data-ajax="false">Hide labels</a></li>
|
||||
<li data-filtertext="form field containers fieldcontain ui-field-contain forms"><a href="../forms-field-contain/" data-ajax="false">Field containers</a></li>
|
||||
<li data-filtertext="forms disabled form elements"><a href="../forms-disabled/" data-ajax="false">Forms disabled</a></li>
|
||||
<li data-filtertext="forms gallery examples overview forms text checkbox radio range button submit reset inputs selects textarea slider flipswitch label form elements"><a href="../forms-gallery/" data-ajax="false">Forms gallery</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Grids</h3>
|
||||
<ul>
|
||||
<li data-filtertext="grids columns blocks content formatting rwd responsive css framework"><a href="../grids/" data-ajax="false">Grids</a></li>
|
||||
<li data-filtertext="buttons in grids css framework"><a href="../grids-buttons/" data-ajax="false">Buttons in grids</a></li>
|
||||
<li data-filtertext="custom responsive grids rwd css framework"><a href="../grids-custom-responsive/" data-ajax="false">Custom responsive grids</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="blocks content formatting sections heading"><a href="../body-bar-classes/" data-ajax="false">Grouping and dividing content</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Icons</h3>
|
||||
<ul>
|
||||
<li data-filtertext="button icons svg disc alt custom icon position"><a href="../icons/" data-ajax="false">Icons</a></li>
|
||||
<li data-filtertext=""><a href="../icons-grunticon/" data-ajax="false">Grunticon loader</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Listview widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="listview widget thumbnails icons nested split button collapsible ul ol"><a href="../listview/" data-ajax="false">Listview</a></li>
|
||||
<li data-filtertext="autocomplete filterable reveal listview filtertextbeforefilter placeholder"><a href="../listview-autocomplete/" data-ajax="false">Listview autocomplete</a></li>
|
||||
<li data-filtertext="autocomplete filterable reveal listview remote data filtertextbeforefilter placeholder"><a href="../listview-autocomplete-remote/" data-ajax="false">Listview autocomplete remote data</a></li>
|
||||
<li data-filtertext="autodividers anchor jump scroll linkbars listview lists ul ol"><a href="../listview-autodividers-linkbar/" data-ajax="false">Listview autodividers linkbar</a></li>
|
||||
<li data-filtertext="listview autodividers selector autodividersselector lists ul ol"><a href="../listview-autodividers-selector/" data-ajax="false">Listview autodividers selector</a></li>
|
||||
<li data-filtertext="listview nested list items"><a href="../listview-nested-lists/" data-ajax="false">Listview Nested Listviews</a></li>
|
||||
<li data-filtertext="listview collapsible list items flat"><a href="../listview-collapsible-item-flat/" data-ajax="false">Listview collapsible list items (flat)</a></li>
|
||||
<li data-filtertext="listview collapsible list indented"><a href="../listview-collapsible-item-indented/" data-ajax="false">Listview collapsible list items (indented)</a></li>
|
||||
<li data-filtertext="grid listview responsive grids responsive listviews lists ul"><a href="../listview-grid/" data-ajax="false">Listview responsive grid</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="loader widget page loading navigation overlay spinner"><a href="../loader/" data-ajax="false">Loader widget</a></li>
|
||||
<li data-filtertext="navbar widget navmenu toolbars header footer"><a href="../navbar/" data-ajax="false">Navbar widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Navigation</h3>
|
||||
<ul>
|
||||
<li data-filtertext="ajax navigation navigate widget history event method"><a href="../navigation/" data-ajax="false">Navigation</a></li>
|
||||
<li data-filtertext="linking pages page links navigation ajax prefetch cache"><a href="../navigation-linking-pages/" data-ajax="false">Linking pages</a></li>
|
||||
<li data-filtertext="php redirect server redirection server-side navigation"><a href="../navigation-php-redirect/" data-ajax="false">PHP redirect demo</a></li>
|
||||
<li data-filtertext="navigation redirection hash query"><a href="../navigation-hash-processing/" data-ajax="false">Hash processing demo</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Pages</h3>
|
||||
<ul>
|
||||
<li data-filtertext="pages page widget ajax navigation"><a href="../pages/" data-ajax="false">Pages</a></li>
|
||||
<li data-filtertext="single page"><a href="../pages-single-page/" data-ajax="false">Single page</a></li>
|
||||
<li data-filtertext="multipage multi-page page"><a href="../pages-multi-page/" data-ajax="false">Multi-page template</a></li>
|
||||
<li data-filtertext="dialog page widget modal popup"><a href="../pages-dialog/" data-ajax="false">Dialog page</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Panel widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="panel widget sliding panels reveal push overlay responsive"><a href="../panel/" data-ajax="false">Panel</a></li>
|
||||
<li data-filtertext=""><a href="../panel-external/" data-ajax="false">External panels</a></li>
|
||||
<li data-filtertext="panel "><a href="../panel-fixed/" data-ajax="false">Fixed panels</a></li>
|
||||
<li data-filtertext="panel slide panels sliding panels shadow rwd responsive breakpoint"><a href="../panel-responsive/" data-ajax="false">Panels responsive</a></li>
|
||||
<li data-filtertext="panel custom style custom panel width reveal shadow listview panel styling page background wrapper"><a href="../panel-styling/" data-ajax="false">Custom panel style</a></li>
|
||||
<li data-filtertext="panel open on swipe"><a href="../panel-swipe-open/" data-ajax="false">Panel open on swipe</a></li>
|
||||
<li data-filtertext="panels outside page internal external toolbars"><a href="../panel-external-internal/" data-ajax="false">Panel external and internal</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Popup widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="popup widget popups dialog modal transition tooltip lightbox form overlay screen flip pop fade transition"><a href="../popup/" data-ajax="false">Popup</a></li>
|
||||
<li data-filtertext="popup alignment position"><a href="../popup-alignment/" data-ajax="false">Popup alignment</a></li>
|
||||
<li data-filtertext="popup arrow size popups popover"><a href="../popup-arrow-size/" data-ajax="false">Popup arrow size</a></li>
|
||||
<li data-filtertext="dynamic popups popup images lightbox"><a href="../popup-dynamic/" data-ajax="false">Dynamic popups</a></li>
|
||||
<li data-filtertext="popups with iframes scaling"><a href="../popup-iframe/" data-ajax="false">Popups with iframes</a></li>
|
||||
<li data-filtertext="popup image scaling"><a href="../popup-image-scaling/" data-ajax="false">Popup image scaling</a></li>
|
||||
<li data-filtertext="external popup outside multi-page"><a href="../popup-outside-multipage" data-ajax="false">Popup outside multi-page</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="form rangeslider widget dual sliders dual handle sliders range input"><a href="../rangeslider/" data-ajax="false">Rangeslider widget</a></li>
|
||||
<li data-filtertext="responsive web design rwd adaptive progressive enhancement PE accessible mobile breakpoints media query media queries"><a href="../rwd/" data-ajax="false">Responsive Web Design</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Selectmenu widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="form selectmenu widget select input custom select menu selects"><a href="../selectmenu/" data-ajax="false">Selectmenu</a></li>
|
||||
<li data-filtertext="form custom select menu selectmenu widget custom menu option optgroup multiple selects"><a href="../selectmenu-custom/" data-ajax="false">Custom select menu</a></li>
|
||||
<li data-filtertext="filterable select filter popup dialog"><a href="../selectmenu-custom-filter/" data-ajax="false">Custom select menu with filter</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Slider widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="form slider widget range input single sliders"><a href="../slider/" data-ajax="false">Slider</a></li>
|
||||
<li data-filtertext="form slider widget flipswitch slider binary select flip toggle switch"><a href="../slider-flipswitch/" data-ajax="false">Slider flip toggle switch</a></li>
|
||||
<li data-filtertext="form slider tooltip handle value input range sliders"><a href="../slider-tooltip/" data-ajax="false">Slider tooltip</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Table widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="table widget reflow column toggle th td responsive tables rwd hide show tabular"><a href="../table-column-toggle/" data-ajax="false">Table Column Toggle</a></li>
|
||||
<li data-filtertext="table column toggle phone comparison demo"><a href="../table-column-toggle-example/" data-ajax="false">Table Column Toggle demo</a></li>
|
||||
<li data-filtertext="responsive tables table column toggle heading groups rwd breakpoint"><a href="../table-column-toggle-heading-groups/" data-ajax="false">Table Column Toggle heading groups</a></li>
|
||||
<li data-filtertext="responsive tables table column toggle hide rwd breakpoint customization options"><a href="../table-column-toggle-options/" data-ajax="false">Table Column Toggle options</a></li>
|
||||
<li data-filtertext="table reflow th td responsive rwd columns tabular"><a href="../table-reflow/" data-ajax="false">Table Reflow</a></li>
|
||||
<li data-filtertext="responsive tables table reflow heading groups rwd breakpoint"><a href="../table-reflow-heading-groups/" data-ajax="false">Table Reflow heading groups</a></li>
|
||||
<li data-filtertext="responsive tables table reflow stripes strokes table style"><a href="../table-reflow-stripes-strokes/" data-ajax="false">Table Reflow stripes and strokes</a></li>
|
||||
<li data-filtertext="responsive tables table reflow stack custom styles"><a href="../table-reflow-styling/" data-ajax="false">Table Reflow custom styles</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="ui tabs widget"><a href="../tabs/" data-ajax="false">Tabs widget</a></li>
|
||||
<li data-filtertext="form textinput widget text input textarea number date time tel email file color password"><a href="../textinput/" data-ajax="false">Textinput widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Theming</h3>
|
||||
<ul>
|
||||
<li data-filtertext="default theme swatches theming style css"><a href="../theme-default/" data-ajax="false">Default theme</a></li>
|
||||
<li data-filtertext="classic theme old theme swatches theming style css"><a href="../theme-classic/" data-ajax="false">Classic theme</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Toolbar widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="toolbar widget header footer toolbars fixed fullscreen external sections"><a href="../toolbar/" data-ajax="false">Toolbar</a></li>
|
||||
<li data-filtertext="dynamic toolbars dynamically add toolbar header footer"><a href="../toolbar-dynamic/" data-ajax="false">Dynamic toolbars</a></li>
|
||||
<li data-filtertext="external toolbars header footer"><a href="../toolbar-external/" data-ajax="false">External toolbars</a></li>
|
||||
<li data-filtertext="fixed toolbars header footer"><a href="../toolbar-fixed/" data-ajax="false">Fixed toolbars</a></li>
|
||||
<li data-filtertext="fixed fullscreen toolbars header footer"><a href="../toolbar-fixed-fullscreen/" data-ajax="false">Fullscreen toolbars</a></li>
|
||||
<li data-filtertext="external fixed toolbars header footer"><a href="../toolbar-fixed-external/" data-ajax="false">Fixed external toolbars</a></li>
|
||||
<li data-filtertext="external persistent toolbars header footer navbar navmenu"><a href="../toolbar-fixed-persistent/" data-ajax="false">Persistent toolbars</a></li>
|
||||
<li data-filtertext="external ajax optimized toolbars persistent toolbars header footer navbar"><a href="../toolbar-fixed-persistent-optimized/" data-ajax="false">Ajax optimized toolbars</a></li>
|
||||
<li data-filtertext="form in toolbars header footer"><a href="../toolbar-fixed-forms/" data-ajax="false">Form in toolbar</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="page transitions animated pages popup navigation flip slide fade pop"><a href="../transitions/" data-ajax="false">Transitions</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>3rd party API demos</h3>
|
||||
<ul>
|
||||
<li data-filtertext="backbone requirejs navigation router"><a href="../backbone-requirejs/" data-ajax="false">Backbone RequireJS</a></li>
|
||||
<li data-filtertext="google maps geolocation demo"><a href="../map-geolocation/" data-ajax="false">Google Maps geolocation</a></li>
|
||||
<li data-filtertext="google maps hybrid"><a href="../map-list-toggle/" data-ajax="false">Google Maps list toggle</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div><!-- /content -->
|
||||
<div data-role="panel" class="jqm-navmenu-panel" data-position="left" data-display="overlay" data-theme="a">
|
||||
<ul class="jqm-list ui-alt-icon ui-nodisc-icon">
|
||||
<li data-filtertext="demos homepage" data-icon="home"><a href=".././">Home</a></li>
|
||||
<li data-filtertext="introduction overview getting started"><a href="../intro/" data-ajax="false">Introduction</a></li>
|
||||
<li data-filtertext="buttons button markup buttonmarkup method anchor link button element"><a href="../button-markup/" data-ajax="false">Buttons</a></li>
|
||||
<li data-filtertext="form button widget input button submit reset"><a href="../button/" data-ajax="false">Button widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Checkboxradio widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="form checkboxradio widget checkbox input checkboxes controlgroups"><a href="../checkboxradio-checkbox/" data-ajax="false">Checkboxes</a></li>
|
||||
<li data-filtertext="form checkboxradio widget radio input radio buttons controlgroups"><a href="../checkboxradio-radio/" data-ajax="false">Radio buttons</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Collapsible (set) widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="collapsibles content formatting"><a href="../collapsible/" data-ajax="false">Collapsible</a></li>
|
||||
<li data-filtertext="dynamic collapsible set accordion append expand"><a href="../collapsible-dynamic/" data-ajax="false">Dynamic collapsibles</a></li>
|
||||
<li data-filtertext="accordions collapsible set widget content formatting grouped collapsibles"><a href="../collapsibleset/" data-ajax="false">Collapsible set</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Controlgroup widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="controlgroups selectmenu checkboxradio input grouped buttons horizontal vertical"><a href="../controlgroup/" data-ajax="false">Controlgroup</a></li>
|
||||
<li data-filtertext="dynamic controlgroup dynamically add buttons"><a href="../controlgroup-dynamic/" data-ajax="false">Dynamic controlgroups</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="form datepicker widget date input"><a href="../datepicker/" data-ajax="false">Datepicker</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Events</h3>
|
||||
<ul>
|
||||
<li data-filtertext="swipe to delete list items listviews swipe events"><a href="../swipe-list/" data-ajax="false">Swipe list items</a></li>
|
||||
<li data-filtertext="swipe to navigate swipe page navigation swipe events"><a href="../swipe-page/" data-ajax="false">Swipe page navigation</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="filterable filter elements sorting searching listview table"><a href="../filterable/" data-ajax="false">Filterable widget</a></li>
|
||||
<li data-filtertext="form flipswitch widget flip toggle switch binary select checkbox input"><a href="../flipswitch/" data-ajax="false">Flipswitch widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Forms</h3>
|
||||
<ul>
|
||||
<li data-filtertext="forms text checkbox radio range button submit reset inputs selects textarea slider flipswitch label form elements"><a href="../forms/" data-ajax="false">Forms</a></li>
|
||||
<li data-filtertext="form hide labels hidden accessible ui-hidden-accessible forms"><a href="../forms-label-hidden-accessible/" data-ajax="false">Hide labels</a></li>
|
||||
<li data-filtertext="form field containers fieldcontain ui-field-contain forms"><a href="../forms-field-contain/" data-ajax="false">Field containers</a></li>
|
||||
<li data-filtertext="forms disabled form elements"><a href="../forms-disabled/" data-ajax="false">Forms disabled</a></li>
|
||||
<li data-filtertext="forms gallery examples overview forms text checkbox radio range button submit reset inputs selects textarea slider flipswitch label form elements"><a href="../forms-gallery/" data-ajax="false">Forms gallery</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Grids</h3>
|
||||
<ul>
|
||||
<li data-filtertext="grids columns blocks content formatting rwd responsive css framework"><a href="../grids/" data-ajax="false">Grids</a></li>
|
||||
<li data-filtertext="buttons in grids css framework"><a href="../grids-buttons/" data-ajax="false">Buttons in grids</a></li>
|
||||
<li data-filtertext="custom responsive grids rwd css framework"><a href="../grids-custom-responsive/" data-ajax="false">Custom responsive grids</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="blocks content formatting sections heading"><a href="../body-bar-classes/" data-ajax="false">Grouping and dividing content</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Icons</h3>
|
||||
<ul>
|
||||
<li data-filtertext="button icons svg disc alt custom icon position"><a href="../icons/" data-ajax="false">Icons</a></li>
|
||||
<li data-filtertext=""><a href="../icons-grunticon/" data-ajax="false">Grunticon loader</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Listview widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="listview widget thumbnails icons nested split button collapsible ul ol"><a href="../listview/" data-ajax="false">Listview</a></li>
|
||||
<li data-filtertext="autocomplete filterable reveal listview filtertextbeforefilter placeholder"><a href="../listview-autocomplete/" data-ajax="false">Listview autocomplete</a></li>
|
||||
<li data-filtertext="autocomplete filterable reveal listview remote data filtertextbeforefilter placeholder"><a href="../listview-autocomplete-remote/" data-ajax="false">Listview autocomplete remote data</a></li>
|
||||
<li data-filtertext="autodividers anchor jump scroll linkbars listview lists ul ol"><a href="../listview-autodividers-linkbar/" data-ajax="false">Listview autodividers linkbar</a></li>
|
||||
<li data-filtertext="listview autodividers selector autodividersselector lists ul ol"><a href="../listview-autodividers-selector/" data-ajax="false">Listview autodividers selector</a></li>
|
||||
<li data-filtertext="listview nested list items"><a href="../listview-nested-lists/" data-ajax="false">Listview Nested Listviews</a></li>
|
||||
<li data-filtertext="listview collapsible list items flat"><a href="../listview-collapsible-item-flat/" data-ajax="false">Listview collapsible list items (flat)</a></li>
|
||||
<li data-filtertext="listview collapsible list indented"><a href="../listview-collapsible-item-indented/" data-ajax="false">Listview collapsible list items (indented)</a></li>
|
||||
<li data-filtertext="grid listview responsive grids responsive listviews lists ul"><a href="../listview-grid/" data-ajax="false">Listview responsive grid</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="loader widget page loading navigation overlay spinner"><a href="../loader/" data-ajax="false">Loader widget</a></li>
|
||||
<li data-filtertext="navbar widget navmenu toolbars header footer"><a href="../navbar/" data-ajax="false">Navbar widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Navigation</h3>
|
||||
<ul>
|
||||
<li data-filtertext="ajax navigation navigate widget history event method"><a href="../navigation/" data-ajax="false">Navigation</a></li>
|
||||
<li data-filtertext="linking pages page links navigation ajax prefetch cache"><a href="../navigation-linking-pages/" data-ajax="false">Linking pages</a></li>
|
||||
<li data-filtertext="php redirect server redirection server-side navigation"><a href="../navigation-php-redirect/" data-ajax="false">PHP redirect demo</a></li>
|
||||
<li data-filtertext="navigation redirection hash query"><a href="../navigation-hash-processing/" data-ajax="false">Hash processing demo</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Pages</h3>
|
||||
<ul>
|
||||
<li data-filtertext="pages page widget ajax navigation"><a href="../pages/" data-ajax="false">Pages</a></li>
|
||||
<li data-filtertext="single page"><a href="../pages-single-page/" data-ajax="false">Single page</a></li>
|
||||
<li data-filtertext="multipage multi-page page"><a href="../pages-multi-page/" data-ajax="false">Multi-page template</a></li>
|
||||
<li data-filtertext="dialog page widget modal popup"><a href="../pages-dialog/" data-ajax="false">Dialog page</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Panel widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="panel widget sliding panels reveal push overlay responsive"><a href="../panel/" data-ajax="false">Panel</a></li>
|
||||
<li data-filtertext=""><a href="../panel-external/" data-ajax="false">External panels</a></li>
|
||||
<li data-filtertext="panel "><a href="../panel-fixed/" data-ajax="false">Fixed panels</a></li>
|
||||
<li data-filtertext="panel slide panels sliding panels shadow rwd responsive breakpoint"><a href="../panel-responsive/" data-ajax="false">Panels responsive</a></li>
|
||||
<li data-filtertext="panel custom style custom panel width reveal shadow listview panel styling page background wrapper"><a href="../panel-styling/" data-ajax="false">Custom panel style</a></li>
|
||||
<li data-filtertext="panel open on swipe"><a href="../panel-swipe-open/" data-ajax="false">Panel open on swipe</a></li>
|
||||
<li data-filtertext="panels outside page internal external toolbars"><a href="../panel-external-internal/" data-ajax="false">Panel external and internal</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Popup widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="popup widget popups dialog modal transition tooltip lightbox form overlay screen flip pop fade transition"><a href="../popup/" data-ajax="false">Popup</a></li>
|
||||
<li data-filtertext="popup alignment position"><a href="../popup-alignment/" data-ajax="false">Popup alignment</a></li>
|
||||
<li data-filtertext="popup arrow size popups popover"><a href="../popup-arrow-size/" data-ajax="false">Popup arrow size</a></li>
|
||||
<li data-filtertext="dynamic popups popup images lightbox"><a href="../popup-dynamic/" data-ajax="false">Dynamic popups</a></li>
|
||||
<li data-filtertext="popups with iframes scaling"><a href="../popup-iframe/" data-ajax="false">Popups with iframes</a></li>
|
||||
<li data-filtertext="popup image scaling"><a href="../popup-image-scaling/" data-ajax="false">Popup image scaling</a></li>
|
||||
<li data-filtertext="external popup outside multi-page"><a href="../popup-outside-multipage" data-ajax="false">Popup outside multi-page</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="form rangeslider widget dual sliders dual handle sliders range input"><a href="../rangeslider/" data-ajax="false">Rangeslider widget</a></li>
|
||||
<li data-filtertext="responsive web design rwd adaptive progressive enhancement PE accessible mobile breakpoints media query media queries"><a href="../rwd/" data-ajax="false">Responsive Web Design</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Selectmenu widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="form selectmenu widget select input custom select menu selects"><a href="../selectmenu/" data-ajax="false">Selectmenu</a></li>
|
||||
<li data-filtertext="form custom select menu selectmenu widget custom menu option optgroup multiple selects"><a href="../selectmenu-custom/" data-ajax="false">Custom select menu</a></li>
|
||||
<li data-filtertext="filterable select filter popup dialog"><a href="../selectmenu-custom-filter/" data-ajax="false">Custom select menu with filter</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Slider widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="form slider widget range input single sliders"><a href="../slider/" data-ajax="false">Slider</a></li>
|
||||
<li data-filtertext="form slider widget flipswitch slider binary select flip toggle switch"><a href="../slider-flipswitch/" data-ajax="false">Slider flip toggle switch</a></li>
|
||||
<li data-filtertext="form slider tooltip handle value input range sliders"><a href="../slider-tooltip/" data-ajax="false">Slider tooltip</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Table widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="table widget reflow column toggle th td responsive tables rwd hide show tabular"><a href="../table-column-toggle/" data-ajax="false">Table Column Toggle</a></li>
|
||||
<li data-filtertext="table column toggle phone comparison demo"><a href="../table-column-toggle-example/" data-ajax="false">Table Column Toggle demo</a></li>
|
||||
<li data-filtertext="responsive tables table column toggle heading groups rwd breakpoint"><a href="../table-column-toggle-heading-groups/" data-ajax="false">Table Column Toggle heading groups</a></li>
|
||||
<li data-filtertext="responsive tables table column toggle hide rwd breakpoint customization options"><a href="../table-column-toggle-options/" data-ajax="false">Table Column Toggle options</a></li>
|
||||
<li data-filtertext="table reflow th td responsive rwd columns tabular"><a href="../table-reflow/" data-ajax="false">Table Reflow</a></li>
|
||||
<li data-filtertext="responsive tables table reflow heading groups rwd breakpoint"><a href="../table-reflow-heading-groups/" data-ajax="false">Table Reflow heading groups</a></li>
|
||||
<li data-filtertext="responsive tables table reflow stripes strokes table style"><a href="../table-reflow-stripes-strokes/" data-ajax="false">Table Reflow stripes and strokes</a></li>
|
||||
<li data-filtertext="responsive tables table reflow stack custom styles"><a href="../table-reflow-styling/" data-ajax="false">Table Reflow custom styles</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="ui tabs widget"><a href="../tabs/" data-ajax="false">Tabs widget</a></li>
|
||||
<li data-filtertext="form textinput widget text input textarea number date time tel email file color password"><a href="../textinput/" data-ajax="false">Textinput widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Theming</h3>
|
||||
<ul>
|
||||
<li data-filtertext="default theme swatches theming style css"><a href="../theme-default/" data-ajax="false">Default theme</a></li>
|
||||
<li data-filtertext="classic theme old theme swatches theming style css"><a href="../theme-classic/" data-ajax="false">Classic theme</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Toolbar widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="toolbar widget header footer toolbars fixed fullscreen external sections"><a href="../toolbar/" data-ajax="false">Toolbar</a></li>
|
||||
<li data-filtertext="dynamic toolbars dynamically add toolbar header footer"><a href="../toolbar-dynamic/" data-ajax="false">Dynamic toolbars</a></li>
|
||||
<li data-filtertext="external toolbars header footer"><a href="../toolbar-external/" data-ajax="false">External toolbars</a></li>
|
||||
<li data-filtertext="fixed toolbars header footer"><a href="../toolbar-fixed/" data-ajax="false">Fixed toolbars</a></li>
|
||||
<li data-filtertext="fixed fullscreen toolbars header footer"><a href="../toolbar-fixed-fullscreen/" data-ajax="false">Fullscreen toolbars</a></li>
|
||||
<li data-filtertext="external fixed toolbars header footer"><a href="../toolbar-fixed-external/" data-ajax="false">Fixed external toolbars</a></li>
|
||||
<li data-filtertext="external persistent toolbars header footer navbar navmenu"><a href="../toolbar-fixed-persistent/" data-ajax="false">Persistent toolbars</a></li>
|
||||
<li data-filtertext="external ajax optimized toolbars persistent toolbars header footer navbar"><a href="../toolbar-fixed-persistent-optimized/" data-ajax="false">Ajax optimized toolbars</a></li>
|
||||
<li data-filtertext="form in toolbars header footer"><a href="../toolbar-fixed-forms/" data-ajax="false">Form in toolbar</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="page transitions animated pages popup navigation flip slide fade pop"><a href="../transitions/" data-ajax="false">Transitions</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>3rd party API demos</h3>
|
||||
<ul>
|
||||
<li data-filtertext="backbone requirejs navigation router"><a href="../backbone-requirejs/" data-ajax="false">Backbone RequireJS</a></li>
|
||||
<li data-filtertext="google maps geolocation demo"><a href="../map-geolocation/" data-ajax="false">Google Maps geolocation</a></li>
|
||||
<li data-filtertext="google maps hybrid"><a href="../map-list-toggle/" data-ajax="false">Google Maps list toggle</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
</ul>
|
||||
</div><!-- /panel -->
|
||||
|
||||
|
||||
<div data-role="footer" data-position="fixed" data-tap-toggle="false" class="jqm-footer">
|
||||
<p>jQuery Mobile Demos version <span class="jqm-version"></span></p>
|
||||
<p>Copyright 2014 The jQuery Foundation</p>
|
||||
</div><!-- /footer -->
|
||||
<!-- TODO: This should become an external panel so we can add input to markup (unique ID) -->
|
||||
<div data-role="panel" class="jqm-search-panel" data-position="right" data-display="overlay" data-theme="a">
|
||||
<div class="jqm-search">
|
||||
<ul class="jqm-list" data-filter-placeholder="Search demos..." data-filter-reveal="true">
|
||||
<li data-filtertext="demos homepage" data-icon="home"><a href=".././">Home</a></li>
|
||||
<li data-filtertext="introduction overview getting started"><a href="../intro/" data-ajax="false">Introduction</a></li>
|
||||
<li data-filtertext="buttons button markup buttonmarkup method anchor link button element"><a href="../button-markup/" data-ajax="false">Buttons</a></li>
|
||||
<li data-filtertext="form button widget input button submit reset"><a href="../button/" data-ajax="false">Button widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Checkboxradio widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="form checkboxradio widget checkbox input checkboxes controlgroups"><a href="../checkboxradio-checkbox/" data-ajax="false">Checkboxes</a></li>
|
||||
<li data-filtertext="form checkboxradio widget radio input radio buttons controlgroups"><a href="../checkboxradio-radio/" data-ajax="false">Radio buttons</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Collapsible (set) widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="collapsibles content formatting"><a href="../collapsible/" data-ajax="false">Collapsible</a></li>
|
||||
<li data-filtertext="dynamic collapsible set accordion append expand"><a href="../collapsible-dynamic/" data-ajax="false">Dynamic collapsibles</a></li>
|
||||
<li data-filtertext="accordions collapsible set widget content formatting grouped collapsibles"><a href="../collapsibleset/" data-ajax="false">Collapsible set</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Controlgroup widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="controlgroups selectmenu checkboxradio input grouped buttons horizontal vertical"><a href="../controlgroup/" data-ajax="false">Controlgroup</a></li>
|
||||
<li data-filtertext="dynamic controlgroup dynamically add buttons"><a href="../controlgroup-dynamic/" data-ajax="false">Dynamic controlgroups</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="form datepicker widget date input"><a href="../datepicker/" data-ajax="false">Datepicker</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Events</h3>
|
||||
<ul>
|
||||
<li data-filtertext="swipe to delete list items listviews swipe events"><a href="../swipe-list/" data-ajax="false">Swipe list items</a></li>
|
||||
<li data-filtertext="swipe to navigate swipe page navigation swipe events"><a href="../swipe-page/" data-ajax="false">Swipe page navigation</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="filterable filter elements sorting searching listview table"><a href="../filterable/" data-ajax="false">Filterable widget</a></li>
|
||||
<li data-filtertext="form flipswitch widget flip toggle switch binary select checkbox input"><a href="../flipswitch/" data-ajax="false">Flipswitch widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Forms</h3>
|
||||
<ul>
|
||||
<li data-filtertext="forms text checkbox radio range button submit reset inputs selects textarea slider flipswitch label form elements"><a href="../forms/" data-ajax="false">Forms</a></li>
|
||||
<li data-filtertext="form hide labels hidden accessible ui-hidden-accessible forms"><a href="../forms-label-hidden-accessible/" data-ajax="false">Hide labels</a></li>
|
||||
<li data-filtertext="form field containers fieldcontain ui-field-contain forms"><a href="../forms-field-contain/" data-ajax="false">Field containers</a></li>
|
||||
<li data-filtertext="forms disabled form elements"><a href="../forms-disabled/" data-ajax="false">Forms disabled</a></li>
|
||||
<li data-filtertext="forms gallery examples overview forms text checkbox radio range button submit reset inputs selects textarea slider flipswitch label form elements"><a href="../forms-gallery/" data-ajax="false">Forms gallery</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Grids</h3>
|
||||
<ul>
|
||||
<li data-filtertext="grids columns blocks content formatting rwd responsive css framework"><a href="../grids/" data-ajax="false">Grids</a></li>
|
||||
<li data-filtertext="buttons in grids css framework"><a href="../grids-buttons/" data-ajax="false">Buttons in grids</a></li>
|
||||
<li data-filtertext="custom responsive grids rwd css framework"><a href="../grids-custom-responsive/" data-ajax="false">Custom responsive grids</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="blocks content formatting sections heading"><a href="../body-bar-classes/" data-ajax="false">Grouping and dividing content</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Icons</h3>
|
||||
<ul>
|
||||
<li data-filtertext="button icons svg disc alt custom icon position"><a href="../icons/" data-ajax="false">Icons</a></li>
|
||||
<li data-filtertext=""><a href="../icons-grunticon/" data-ajax="false">Grunticon loader</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Listview widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="listview widget thumbnails icons nested split button collapsible ul ol"><a href="../listview/" data-ajax="false">Listview</a></li>
|
||||
<li data-filtertext="autocomplete filterable reveal listview filtertextbeforefilter placeholder"><a href="../listview-autocomplete/" data-ajax="false">Listview autocomplete</a></li>
|
||||
<li data-filtertext="autocomplete filterable reveal listview remote data filtertextbeforefilter placeholder"><a href="../listview-autocomplete-remote/" data-ajax="false">Listview autocomplete remote data</a></li>
|
||||
<li data-filtertext="autodividers anchor jump scroll linkbars listview lists ul ol"><a href="../listview-autodividers-linkbar/" data-ajax="false">Listview autodividers linkbar</a></li>
|
||||
<li data-filtertext="listview autodividers selector autodividersselector lists ul ol"><a href="../listview-autodividers-selector/" data-ajax="false">Listview autodividers selector</a></li>
|
||||
<li data-filtertext="listview nested list items"><a href="../listview-nested-lists/" data-ajax="false">Listview Nested Listviews</a></li>
|
||||
<li data-filtertext="listview collapsible list items flat"><a href="../listview-collapsible-item-flat/" data-ajax="false">Listview collapsible list items (flat)</a></li>
|
||||
<li data-filtertext="listview collapsible list indented"><a href="../listview-collapsible-item-indented/" data-ajax="false">Listview collapsible list items (indented)</a></li>
|
||||
<li data-filtertext="grid listview responsive grids responsive listviews lists ul"><a href="../listview-grid/" data-ajax="false">Listview responsive grid</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="loader widget page loading navigation overlay spinner"><a href="../loader/" data-ajax="false">Loader widget</a></li>
|
||||
<li data-filtertext="navbar widget navmenu toolbars header footer"><a href="../navbar/" data-ajax="false">Navbar widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Navigation</h3>
|
||||
<ul>
|
||||
<li data-filtertext="ajax navigation navigate widget history event method"><a href="../navigation/" data-ajax="false">Navigation</a></li>
|
||||
<li data-filtertext="linking pages page links navigation ajax prefetch cache"><a href="../navigation-linking-pages/" data-ajax="false">Linking pages</a></li>
|
||||
<li data-filtertext="php redirect server redirection server-side navigation"><a href="../navigation-php-redirect/" data-ajax="false">PHP redirect demo</a></li>
|
||||
<li data-filtertext="navigation redirection hash query"><a href="../navigation-hash-processing/" data-ajax="false">Hash processing demo</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Pages</h3>
|
||||
<ul>
|
||||
<li data-filtertext="pages page widget ajax navigation"><a href="../pages/" data-ajax="false">Pages</a></li>
|
||||
<li data-filtertext="single page"><a href="../pages-single-page/" data-ajax="false">Single page</a></li>
|
||||
<li data-filtertext="multipage multi-page page"><a href="../pages-multi-page/" data-ajax="false">Multi-page template</a></li>
|
||||
<li data-filtertext="dialog page widget modal popup"><a href="../pages-dialog/" data-ajax="false">Dialog page</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Panel widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="panel widget sliding panels reveal push overlay responsive"><a href="../panel/" data-ajax="false">Panel</a></li>
|
||||
<li data-filtertext=""><a href="../panel-external/" data-ajax="false">External panels</a></li>
|
||||
<li data-filtertext="panel "><a href="../panel-fixed/" data-ajax="false">Fixed panels</a></li>
|
||||
<li data-filtertext="panel slide panels sliding panels shadow rwd responsive breakpoint"><a href="../panel-responsive/" data-ajax="false">Panels responsive</a></li>
|
||||
<li data-filtertext="panel custom style custom panel width reveal shadow listview panel styling page background wrapper"><a href="../panel-styling/" data-ajax="false">Custom panel style</a></li>
|
||||
<li data-filtertext="panel open on swipe"><a href="../panel-swipe-open/" data-ajax="false">Panel open on swipe</a></li>
|
||||
<li data-filtertext="panels outside page internal external toolbars"><a href="../panel-external-internal/" data-ajax="false">Panel external and internal</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Popup widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="popup widget popups dialog modal transition tooltip lightbox form overlay screen flip pop fade transition"><a href="../popup/" data-ajax="false">Popup</a></li>
|
||||
<li data-filtertext="popup alignment position"><a href="../popup-alignment/" data-ajax="false">Popup alignment</a></li>
|
||||
<li data-filtertext="popup arrow size popups popover"><a href="../popup-arrow-size/" data-ajax="false">Popup arrow size</a></li>
|
||||
<li data-filtertext="dynamic popups popup images lightbox"><a href="../popup-dynamic/" data-ajax="false">Dynamic popups</a></li>
|
||||
<li data-filtertext="popups with iframes scaling"><a href="../popup-iframe/" data-ajax="false">Popups with iframes</a></li>
|
||||
<li data-filtertext="popup image scaling"><a href="../popup-image-scaling/" data-ajax="false">Popup image scaling</a></li>
|
||||
<li data-filtertext="external popup outside multi-page"><a href="../popup-outside-multipage" data-ajax="false">Popup outside multi-page</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="form rangeslider widget dual sliders dual handle sliders range input"><a href="../rangeslider/" data-ajax="false">Rangeslider widget</a></li>
|
||||
<li data-filtertext="responsive web design rwd adaptive progressive enhancement PE accessible mobile breakpoints media query media queries"><a href="../rwd/" data-ajax="false">Responsive Web Design</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Selectmenu widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="form selectmenu widget select input custom select menu selects"><a href="../selectmenu/" data-ajax="false">Selectmenu</a></li>
|
||||
<li data-filtertext="form custom select menu selectmenu widget custom menu option optgroup multiple selects"><a href="../selectmenu-custom/" data-ajax="false">Custom select menu</a></li>
|
||||
<li data-filtertext="filterable select filter popup dialog"><a href="../selectmenu-custom-filter/" data-ajax="false">Custom select menu with filter</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Slider widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="form slider widget range input single sliders"><a href="../slider/" data-ajax="false">Slider</a></li>
|
||||
<li data-filtertext="form slider widget flipswitch slider binary select flip toggle switch"><a href="../slider-flipswitch/" data-ajax="false">Slider flip toggle switch</a></li>
|
||||
<li data-filtertext="form slider tooltip handle value input range sliders"><a href="../slider-tooltip/" data-ajax="false">Slider tooltip</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Table widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="table widget reflow column toggle th td responsive tables rwd hide show tabular"><a href="../table-column-toggle/" data-ajax="false">Table Column Toggle</a></li>
|
||||
<li data-filtertext="table column toggle phone comparison demo"><a href="../table-column-toggle-example/" data-ajax="false">Table Column Toggle demo</a></li>
|
||||
<li data-filtertext="responsive tables table column toggle heading groups rwd breakpoint"><a href="../table-column-toggle-heading-groups/" data-ajax="false">Table Column Toggle heading groups</a></li>
|
||||
<li data-filtertext="responsive tables table column toggle hide rwd breakpoint customization options"><a href="../table-column-toggle-options/" data-ajax="false">Table Column Toggle options</a></li>
|
||||
<li data-filtertext="table reflow th td responsive rwd columns tabular"><a href="../table-reflow/" data-ajax="false">Table Reflow</a></li>
|
||||
<li data-filtertext="responsive tables table reflow heading groups rwd breakpoint"><a href="../table-reflow-heading-groups/" data-ajax="false">Table Reflow heading groups</a></li>
|
||||
<li data-filtertext="responsive tables table reflow stripes strokes table style"><a href="../table-reflow-stripes-strokes/" data-ajax="false">Table Reflow stripes and strokes</a></li>
|
||||
<li data-filtertext="responsive tables table reflow stack custom styles"><a href="../table-reflow-styling/" data-ajax="false">Table Reflow custom styles</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="ui tabs widget"><a href="../tabs/" data-ajax="false">Tabs widget</a></li>
|
||||
<li data-filtertext="form textinput widget text input textarea number date time tel email file color password"><a href="../textinput/" data-ajax="false">Textinput widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Theming</h3>
|
||||
<ul>
|
||||
<li data-filtertext="default theme swatches theming style css"><a href="../theme-default/" data-ajax="false">Default theme</a></li>
|
||||
<li data-filtertext="classic theme old theme swatches theming style css"><a href="../theme-classic/" data-ajax="false">Classic theme</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Toolbar widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="toolbar widget header footer toolbars fixed fullscreen external sections"><a href="../toolbar/" data-ajax="false">Toolbar</a></li>
|
||||
<li data-filtertext="dynamic toolbars dynamically add toolbar header footer"><a href="../toolbar-dynamic/" data-ajax="false">Dynamic toolbars</a></li>
|
||||
<li data-filtertext="external toolbars header footer"><a href="../toolbar-external/" data-ajax="false">External toolbars</a></li>
|
||||
<li data-filtertext="fixed toolbars header footer"><a href="../toolbar-fixed/" data-ajax="false">Fixed toolbars</a></li>
|
||||
<li data-filtertext="fixed fullscreen toolbars header footer"><a href="../toolbar-fixed-fullscreen/" data-ajax="false">Fullscreen toolbars</a></li>
|
||||
<li data-filtertext="external fixed toolbars header footer"><a href="../toolbar-fixed-external/" data-ajax="false">Fixed external toolbars</a></li>
|
||||
<li data-filtertext="external persistent toolbars header footer navbar navmenu"><a href="../toolbar-fixed-persistent/" data-ajax="false">Persistent toolbars</a></li>
|
||||
<li data-filtertext="external ajax optimized toolbars persistent toolbars header footer navbar"><a href="../toolbar-fixed-persistent-optimized/" data-ajax="false">Ajax optimized toolbars</a></li>
|
||||
<li data-filtertext="form in toolbars header footer"><a href="../toolbar-fixed-forms/" data-ajax="false">Form in toolbar</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="page transitions animated pages popup navigation flip slide fade pop"><a href="../transitions/" data-ajax="false">Transitions</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>3rd party API demos</h3>
|
||||
<ul>
|
||||
<li data-filtertext="backbone requirejs navigation router"><a href="../backbone-requirejs/" data-ajax="false">Backbone RequireJS</a></li>
|
||||
<li data-filtertext="google maps geolocation demo"><a href="../map-geolocation/" data-ajax="false">Google Maps geolocation</a></li>
|
||||
<li data-filtertext="google maps hybrid"><a href="../map-list-toggle/" data-ajax="false">Google Maps list toggle</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- /panel -->
|
||||
|
||||
|
||||
</div><!-- /page -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,83 @@
|
||||
<!doctype html>
|
||||
<html class="no-js ui-mobile-rendering" lang="en">
|
||||
<head>
|
||||
<title>Backbone.js, Require.js, and jQuery Mobile</title>
|
||||
<meta name="description" content="">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="../css/themes/default/jquery.mobile-1.4.2.min.css">
|
||||
<script src="//rawgithub.com/jrburke/requirejs/2.1.8/require.js"></script>
|
||||
|
||||
<script src="js/main.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="categories" data-role="page" data-title="Categories">
|
||||
|
||||
<div data-role="header">
|
||||
<h1>Categories</h1>
|
||||
</div><!-- /header -->
|
||||
|
||||
<div role="main" class="ui-content">
|
||||
<h2>Select a Category Below:</h2>
|
||||
<ul data-role="listview" data-inset="true">
|
||||
<li><a href="#category?animals" class="animals">Animals</a></li>
|
||||
<li><a href="#category?colors" class="colors">Colors</a></li>
|
||||
<li><a href="#category?vehicles" class="vehicles">Vehicles</a></li>
|
||||
</ul>
|
||||
</div><!-- /content -->
|
||||
|
||||
</div>
|
||||
|
||||
<div id="animals" data-role="page" data-title="Animals">
|
||||
|
||||
<div data-role="header">
|
||||
<h1>Animals</h1>
|
||||
</div><!-- /header -->
|
||||
|
||||
<div role="main" class="ui-content">
|
||||
<ul data-role="listview" data-inset="true">
|
||||
</ul>
|
||||
</div><!-- /content -->
|
||||
</div>
|
||||
|
||||
<div id="colors" data-role="page" data-title="Colors">
|
||||
|
||||
<div data-role="header">
|
||||
<h1>Colors</h1>
|
||||
</div><!-- /header -->
|
||||
|
||||
<div role="main" class="ui-content">
|
||||
<ul data-role="listview" data-inset="true">
|
||||
</ul>
|
||||
</div><!-- /content -->
|
||||
|
||||
</div>
|
||||
|
||||
<div id="vehicles" data-role="page" data-title="Vehicles">
|
||||
|
||||
<div data-role="header">
|
||||
<h1>Vehicles</h1>
|
||||
</div><!-- /header -->
|
||||
|
||||
<div role="main" class="ui-content">
|
||||
<ul data-role="listview" data-inset="true">
|
||||
</ul>
|
||||
</div><!-- /content -->
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Underscore Template that is used to display all of the Category Models -->
|
||||
<script id="categoryItems" type="text/template">
|
||||
|
||||
<% _.each( collection.toJSON(), function( category, id ) { %>
|
||||
|
||||
<li class="ui-li-static">
|
||||
<%= category.type %>
|
||||
</li>
|
||||
|
||||
<% }); %>
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
541
js/libs/jquery.mobile/demos/backbone-requirejs/index.html
Normal file
541
js/libs/jquery.mobile/demos/backbone-requirejs/index.html
Normal file
@ -0,0 +1,541 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>jQuery Mobile - Backbone.js and Require.js Apps</title>
|
||||
<link rel="shortcut icon" href="../favicon.ico">
|
||||
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
|
||||
<link rel="stylesheet" href="../css/themes/default/jquery.mobile-1.4.2.min.css">
|
||||
<link rel="stylesheet" href="../_assets/css/jqm-demos.css">
|
||||
<script src="../js/jquery.js"></script>
|
||||
<script src="../_assets/js/index.js"></script>
|
||||
<script src="../js/jquery.mobile-1.4.2.min.js"></script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div data-role="page" class="jqm-demos" data-quicklinks="true">
|
||||
|
||||
<div data-role="header" class="jqm-header">
|
||||
<h2><a href="../" title="jQuery Mobile Demos home"><img src="../_assets/img/jquery-logo.png" alt="jQuery Mobile"></a></h2>
|
||||
<p><span class="jqm-version"></span> Demos</p>
|
||||
<a href="#" class="jqm-navmenu-link ui-btn ui-btn-icon-notext ui-corner-all ui-icon-bars ui-nodisc-icon ui-alt-icon ui-btn-left">Menu</a>
|
||||
<a href="#" class="jqm-search-link ui-btn ui-btn-icon-notext ui-corner-all ui-icon-search ui-nodisc-icon ui-alt-icon ui-btn-right">Search</a>
|
||||
</div><!-- /header -->
|
||||
|
||||
<div role="main" class="ui-content jqm-content">
|
||||
|
||||
<h1>jQuery Mobile, Backbone.js and Require.js</h1>
|
||||
<p>jQuery Mobile provides an <strong>HTML5-based user interface for all popular mobile device platforms</strong>, but it does not influence how you organize and structure your app's JavaScript. Many jQuery Mobile users turn to a variety of other popular third-party libraries, including MV* frameworks and dependency management tools, to help structure their code.
|
||||
</p>
|
||||
|
||||
<h2>Backbone and Require.js</h2>
|
||||
<p><strong>Backbone.js</strong> and <strong>Require.js</strong> are two of the most popular third-party libraries that are used with jQuery Mobile to provide a rich JavaScript tech stack for developers.
|
||||
</p>
|
||||
<p><strong>Backbone.js</strong> is a great client-side MV* JavaScript framework that provides structure to JavaScript applications by providing View, Model, Collection, Router, and Event class objects.
|
||||
</p>
|
||||
<p><strong>Require.js</strong> serves a few different purposes than Backbone.js. Require.js is an AMD (Asynchronous Module Definition) script loader that asynchronously loads your JavaScript to improve page load performance, while also helping with script dependency managagement and allowing you to organize your JavaScript into self contained modules (files).
|
||||
</p>
|
||||
<p>Although there is a high amount of developer interest with using jQuery Mobile, Backbone.js, and Require.js together, there is a high barrier of entry. Many users are confused about how to use the Backbone.js Router class object with the jQuery Mobile routing system.</p>
|
||||
|
||||
<a href="backbone-require.html" rel="external" class="ui-btn ui-btn-inline ui-corner-all ui-shadow ui-btn-icon-right ui-icon-carat-r">View example page</a>
|
||||
|
||||
<h2>jQuery Mobile configuration</h2>
|
||||
|
||||
<p>The technique used in this <a href="backbone-require.html" rel="external">example page</a> is by no means the only technique available, but it is one of the most elegant. The Backbone.js router is used exclusively to handle all hashchange events, and the jQuery Mobile <code>$.mobile.changePage()</code> method is used to programmatically change the page.</p>
|
||||
|
||||
<p>Below are two internal jQuery Mobile properties that are turned off to allow this to happen:</p>
|
||||
|
||||
<ul>
|
||||
<li><code>$.mobile.linkBindingEnabled</code>
|
||||
<ul>
|
||||
<li>jQuery Mobile will automatically bind the clicks on anchor tags in your document. Setting this option to false will prevent all anchor click handling including the addition of active button state and alternate link blurring. This should only be used when attempting to delegate the click management to another library or custom code.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><code>$.mobile.hashListeningEnabled</code>
|
||||
<ul>
|
||||
<li>jQuery Mobile will automatically listen and handle changes to the location.hash. Disabling this will prevent jQuery Mobile from handling hash changes, which allows you to handle them yourself or use simple deep-links within a document that scroll to a particular id.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</p>
|
||||
|
||||
<h2>Example page code</h2>
|
||||
<p>To illustrate how the above internal jQuery Mobile properties are turned off, let's examine our example page code.</p>
|
||||
|
||||
<p>Inside of the <em>head</em> section of our <strong>index.html</strong> page, we first include the Require.js JavaScript library and set the <strong>data-main</strong> attribute of our script tag to the JavaScript file that we want Require.js to include on the page first (this file will contain all of our Require.js configurations). In this example, we are telling Require.js to look inside of the js folder and then load <strong>mobile.js</strong>.
|
||||
</p>
|
||||
|
||||
<code>
|
||||
<head>
|
||||
<script src="js/libs/require.js" data-main="js/mobile"></script>
|
||||
</head>
|
||||
</code>
|
||||
<p>If we look inside of <strong>mobile.js</strong>, we will find that the <code>$.mobile.linkBindingEnabled</code> and <code>$.mobile.hashListeningEnabled</code> jQuery Mobile attributes are set to false.
|
||||
</p>
|
||||
<pre>
|
||||
<code>
|
||||
// Sets the require.js configuration for your application.
|
||||
require.config( {
|
||||
|
||||
// 3rd party script alias names
|
||||
paths: {
|
||||
|
||||
// Core Libraries
|
||||
"jquery": "../../../js/jquery",
|
||||
"jquerymobile": "libs/jquerymobile",
|
||||
"underscore": "libs/lodash",
|
||||
"backbone": "libs/backbone"
|
||||
|
||||
},
|
||||
|
||||
// Sets the configuration for your third party scripts that are not AMD compatible
|
||||
shim: {
|
||||
|
||||
"backbone": {
|
||||
"deps": [ "underscore", "jquery" ],
|
||||
"exports": "Backbone" //attaches "Backbone" to the window object
|
||||
}
|
||||
|
||||
} // end Shim Configuration
|
||||
|
||||
} );
|
||||
|
||||
// Includes File Dependencies
|
||||
require([ "jquery","backbone","routers/mobileRouter","jquerymobile" ], function( $, Backbone, Mobile ) {
|
||||
|
||||
// Prevents all anchor click handling
|
||||
$.mobile.linkBindingEnabled = false;
|
||||
|
||||
// Disabling this will prevent jQuery Mobile from handling hash changes
|
||||
$.mobile.hashListeningEnabled = false;
|
||||
|
||||
// Instantiates a new Backbone.js Mobile Router
|
||||
this.router = new Mobile();
|
||||
|
||||
} );
|
||||
</code>
|
||||
</pre>
|
||||
<p>Next, inside of the Backbone.js Router class object, we can respond to haschange events and manually call the jQuery Mobile <code>changePage()</code> method. Below is a small snippet of <strong>mobileRouter.js</strong>.</p>
|
||||
<pre>
|
||||
<code>
|
||||
// Backbone.js Routes
|
||||
routes: {
|
||||
|
||||
// When there is no hash bang on the url, the home method is called
|
||||
"": "home",
|
||||
|
||||
// When #category? is on the url, the category method is called
|
||||
"category?:type": "category"
|
||||
|
||||
},
|
||||
|
||||
// Home method
|
||||
home: function() {
|
||||
|
||||
// Programatically changes to the categories page
|
||||
$.mobile.changePage( "#categories" , { reverse: false, changeHash: false } );
|
||||
|
||||
}
|
||||
</code>
|
||||
</pre>
|
||||
|
||||
<p>The <a href="backbone-require.html" rel="external">example page</a> illustrates how to render a jQuery Mobile ListView that is populated with dynamic JSON data asynchronously. Feel free to take a deeper look into the source code to see how Require.js and Backbone.js are used.</p>
|
||||
|
||||
</div><!-- /content -->
|
||||
<div data-role="panel" class="jqm-navmenu-panel" data-position="left" data-display="overlay" data-theme="a">
|
||||
<ul class="jqm-list ui-alt-icon ui-nodisc-icon">
|
||||
<li data-filtertext="demos homepage" data-icon="home"><a href=".././">Home</a></li>
|
||||
<li data-filtertext="introduction overview getting started"><a href="../intro/" data-ajax="false">Introduction</a></li>
|
||||
<li data-filtertext="buttons button markup buttonmarkup method anchor link button element"><a href="../button-markup/" data-ajax="false">Buttons</a></li>
|
||||
<li data-filtertext="form button widget input button submit reset"><a href="../button/" data-ajax="false">Button widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Checkboxradio widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="form checkboxradio widget checkbox input checkboxes controlgroups"><a href="../checkboxradio-checkbox/" data-ajax="false">Checkboxes</a></li>
|
||||
<li data-filtertext="form checkboxradio widget radio input radio buttons controlgroups"><a href="../checkboxradio-radio/" data-ajax="false">Radio buttons</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Collapsible (set) widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="collapsibles content formatting"><a href="../collapsible/" data-ajax="false">Collapsible</a></li>
|
||||
<li data-filtertext="dynamic collapsible set accordion append expand"><a href="../collapsible-dynamic/" data-ajax="false">Dynamic collapsibles</a></li>
|
||||
<li data-filtertext="accordions collapsible set widget content formatting grouped collapsibles"><a href="../collapsibleset/" data-ajax="false">Collapsible set</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Controlgroup widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="controlgroups selectmenu checkboxradio input grouped buttons horizontal vertical"><a href="../controlgroup/" data-ajax="false">Controlgroup</a></li>
|
||||
<li data-filtertext="dynamic controlgroup dynamically add buttons"><a href="../controlgroup-dynamic/" data-ajax="false">Dynamic controlgroups</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="form datepicker widget date input"><a href="../datepicker/" data-ajax="false">Datepicker</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Events</h3>
|
||||
<ul>
|
||||
<li data-filtertext="swipe to delete list items listviews swipe events"><a href="../swipe-list/" data-ajax="false">Swipe list items</a></li>
|
||||
<li data-filtertext="swipe to navigate swipe page navigation swipe events"><a href="../swipe-page/" data-ajax="false">Swipe page navigation</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="filterable filter elements sorting searching listview table"><a href="../filterable/" data-ajax="false">Filterable widget</a></li>
|
||||
<li data-filtertext="form flipswitch widget flip toggle switch binary select checkbox input"><a href="../flipswitch/" data-ajax="false">Flipswitch widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Forms</h3>
|
||||
<ul>
|
||||
<li data-filtertext="forms text checkbox radio range button submit reset inputs selects textarea slider flipswitch label form elements"><a href="../forms/" data-ajax="false">Forms</a></li>
|
||||
<li data-filtertext="form hide labels hidden accessible ui-hidden-accessible forms"><a href="../forms-label-hidden-accessible/" data-ajax="false">Hide labels</a></li>
|
||||
<li data-filtertext="form field containers fieldcontain ui-field-contain forms"><a href="../forms-field-contain/" data-ajax="false">Field containers</a></li>
|
||||
<li data-filtertext="forms disabled form elements"><a href="../forms-disabled/" data-ajax="false">Forms disabled</a></li>
|
||||
<li data-filtertext="forms gallery examples overview forms text checkbox radio range button submit reset inputs selects textarea slider flipswitch label form elements"><a href="../forms-gallery/" data-ajax="false">Forms gallery</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Grids</h3>
|
||||
<ul>
|
||||
<li data-filtertext="grids columns blocks content formatting rwd responsive css framework"><a href="../grids/" data-ajax="false">Grids</a></li>
|
||||
<li data-filtertext="buttons in grids css framework"><a href="../grids-buttons/" data-ajax="false">Buttons in grids</a></li>
|
||||
<li data-filtertext="custom responsive grids rwd css framework"><a href="../grids-custom-responsive/" data-ajax="false">Custom responsive grids</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="blocks content formatting sections heading"><a href="../body-bar-classes/" data-ajax="false">Grouping and dividing content</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Icons</h3>
|
||||
<ul>
|
||||
<li data-filtertext="button icons svg disc alt custom icon position"><a href="../icons/" data-ajax="false">Icons</a></li>
|
||||
<li data-filtertext=""><a href="../icons-grunticon/" data-ajax="false">Grunticon loader</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Listview widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="listview widget thumbnails icons nested split button collapsible ul ol"><a href="../listview/" data-ajax="false">Listview</a></li>
|
||||
<li data-filtertext="autocomplete filterable reveal listview filtertextbeforefilter placeholder"><a href="../listview-autocomplete/" data-ajax="false">Listview autocomplete</a></li>
|
||||
<li data-filtertext="autocomplete filterable reveal listview remote data filtertextbeforefilter placeholder"><a href="../listview-autocomplete-remote/" data-ajax="false">Listview autocomplete remote data</a></li>
|
||||
<li data-filtertext="autodividers anchor jump scroll linkbars listview lists ul ol"><a href="../listview-autodividers-linkbar/" data-ajax="false">Listview autodividers linkbar</a></li>
|
||||
<li data-filtertext="listview autodividers selector autodividersselector lists ul ol"><a href="../listview-autodividers-selector/" data-ajax="false">Listview autodividers selector</a></li>
|
||||
<li data-filtertext="listview nested list items"><a href="../listview-nested-lists/" data-ajax="false">Listview Nested Listviews</a></li>
|
||||
<li data-filtertext="listview collapsible list items flat"><a href="../listview-collapsible-item-flat/" data-ajax="false">Listview collapsible list items (flat)</a></li>
|
||||
<li data-filtertext="listview collapsible list indented"><a href="../listview-collapsible-item-indented/" data-ajax="false">Listview collapsible list items (indented)</a></li>
|
||||
<li data-filtertext="grid listview responsive grids responsive listviews lists ul"><a href="../listview-grid/" data-ajax="false">Listview responsive grid</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="loader widget page loading navigation overlay spinner"><a href="../loader/" data-ajax="false">Loader widget</a></li>
|
||||
<li data-filtertext="navbar widget navmenu toolbars header footer"><a href="../navbar/" data-ajax="false">Navbar widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Navigation</h3>
|
||||
<ul>
|
||||
<li data-filtertext="ajax navigation navigate widget history event method"><a href="../navigation/" data-ajax="false">Navigation</a></li>
|
||||
<li data-filtertext="linking pages page links navigation ajax prefetch cache"><a href="../navigation-linking-pages/" data-ajax="false">Linking pages</a></li>
|
||||
<li data-filtertext="php redirect server redirection server-side navigation"><a href="../navigation-php-redirect/" data-ajax="false">PHP redirect demo</a></li>
|
||||
<li data-filtertext="navigation redirection hash query"><a href="../navigation-hash-processing/" data-ajax="false">Hash processing demo</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Pages</h3>
|
||||
<ul>
|
||||
<li data-filtertext="pages page widget ajax navigation"><a href="../pages/" data-ajax="false">Pages</a></li>
|
||||
<li data-filtertext="single page"><a href="../pages-single-page/" data-ajax="false">Single page</a></li>
|
||||
<li data-filtertext="multipage multi-page page"><a href="../pages-multi-page/" data-ajax="false">Multi-page template</a></li>
|
||||
<li data-filtertext="dialog page widget modal popup"><a href="../pages-dialog/" data-ajax="false">Dialog page</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Panel widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="panel widget sliding panels reveal push overlay responsive"><a href="../panel/" data-ajax="false">Panel</a></li>
|
||||
<li data-filtertext=""><a href="../panel-external/" data-ajax="false">External panels</a></li>
|
||||
<li data-filtertext="panel "><a href="../panel-fixed/" data-ajax="false">Fixed panels</a></li>
|
||||
<li data-filtertext="panel slide panels sliding panels shadow rwd responsive breakpoint"><a href="../panel-responsive/" data-ajax="false">Panels responsive</a></li>
|
||||
<li data-filtertext="panel custom style custom panel width reveal shadow listview panel styling page background wrapper"><a href="../panel-styling/" data-ajax="false">Custom panel style</a></li>
|
||||
<li data-filtertext="panel open on swipe"><a href="../panel-swipe-open/" data-ajax="false">Panel open on swipe</a></li>
|
||||
<li data-filtertext="panels outside page internal external toolbars"><a href="../panel-external-internal/" data-ajax="false">Panel external and internal</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Popup widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="popup widget popups dialog modal transition tooltip lightbox form overlay screen flip pop fade transition"><a href="../popup/" data-ajax="false">Popup</a></li>
|
||||
<li data-filtertext="popup alignment position"><a href="../popup-alignment/" data-ajax="false">Popup alignment</a></li>
|
||||
<li data-filtertext="popup arrow size popups popover"><a href="../popup-arrow-size/" data-ajax="false">Popup arrow size</a></li>
|
||||
<li data-filtertext="dynamic popups popup images lightbox"><a href="../popup-dynamic/" data-ajax="false">Dynamic popups</a></li>
|
||||
<li data-filtertext="popups with iframes scaling"><a href="../popup-iframe/" data-ajax="false">Popups with iframes</a></li>
|
||||
<li data-filtertext="popup image scaling"><a href="../popup-image-scaling/" data-ajax="false">Popup image scaling</a></li>
|
||||
<li data-filtertext="external popup outside multi-page"><a href="../popup-outside-multipage" data-ajax="false">Popup outside multi-page</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="form rangeslider widget dual sliders dual handle sliders range input"><a href="../rangeslider/" data-ajax="false">Rangeslider widget</a></li>
|
||||
<li data-filtertext="responsive web design rwd adaptive progressive enhancement PE accessible mobile breakpoints media query media queries"><a href="../rwd/" data-ajax="false">Responsive Web Design</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Selectmenu widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="form selectmenu widget select input custom select menu selects"><a href="../selectmenu/" data-ajax="false">Selectmenu</a></li>
|
||||
<li data-filtertext="form custom select menu selectmenu widget custom menu option optgroup multiple selects"><a href="../selectmenu-custom/" data-ajax="false">Custom select menu</a></li>
|
||||
<li data-filtertext="filterable select filter popup dialog"><a href="../selectmenu-custom-filter/" data-ajax="false">Custom select menu with filter</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Slider widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="form slider widget range input single sliders"><a href="../slider/" data-ajax="false">Slider</a></li>
|
||||
<li data-filtertext="form slider widget flipswitch slider binary select flip toggle switch"><a href="../slider-flipswitch/" data-ajax="false">Slider flip toggle switch</a></li>
|
||||
<li data-filtertext="form slider tooltip handle value input range sliders"><a href="../slider-tooltip/" data-ajax="false">Slider tooltip</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Table widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="table widget reflow column toggle th td responsive tables rwd hide show tabular"><a href="../table-column-toggle/" data-ajax="false">Table Column Toggle</a></li>
|
||||
<li data-filtertext="table column toggle phone comparison demo"><a href="../table-column-toggle-example/" data-ajax="false">Table Column Toggle demo</a></li>
|
||||
<li data-filtertext="responsive tables table column toggle heading groups rwd breakpoint"><a href="../table-column-toggle-heading-groups/" data-ajax="false">Table Column Toggle heading groups</a></li>
|
||||
<li data-filtertext="responsive tables table column toggle hide rwd breakpoint customization options"><a href="../table-column-toggle-options/" data-ajax="false">Table Column Toggle options</a></li>
|
||||
<li data-filtertext="table reflow th td responsive rwd columns tabular"><a href="../table-reflow/" data-ajax="false">Table Reflow</a></li>
|
||||
<li data-filtertext="responsive tables table reflow heading groups rwd breakpoint"><a href="../table-reflow-heading-groups/" data-ajax="false">Table Reflow heading groups</a></li>
|
||||
<li data-filtertext="responsive tables table reflow stripes strokes table style"><a href="../table-reflow-stripes-strokes/" data-ajax="false">Table Reflow stripes and strokes</a></li>
|
||||
<li data-filtertext="responsive tables table reflow stack custom styles"><a href="../table-reflow-styling/" data-ajax="false">Table Reflow custom styles</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="ui tabs widget"><a href="../tabs/" data-ajax="false">Tabs widget</a></li>
|
||||
<li data-filtertext="form textinput widget text input textarea number date time tel email file color password"><a href="../textinput/" data-ajax="false">Textinput widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Theming</h3>
|
||||
<ul>
|
||||
<li data-filtertext="default theme swatches theming style css"><a href="../theme-default/" data-ajax="false">Default theme</a></li>
|
||||
<li data-filtertext="classic theme old theme swatches theming style css"><a href="../theme-classic/" data-ajax="false">Classic theme</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Toolbar widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="toolbar widget header footer toolbars fixed fullscreen external sections"><a href="../toolbar/" data-ajax="false">Toolbar</a></li>
|
||||
<li data-filtertext="dynamic toolbars dynamically add toolbar header footer"><a href="../toolbar-dynamic/" data-ajax="false">Dynamic toolbars</a></li>
|
||||
<li data-filtertext="external toolbars header footer"><a href="../toolbar-external/" data-ajax="false">External toolbars</a></li>
|
||||
<li data-filtertext="fixed toolbars header footer"><a href="../toolbar-fixed/" data-ajax="false">Fixed toolbars</a></li>
|
||||
<li data-filtertext="fixed fullscreen toolbars header footer"><a href="../toolbar-fixed-fullscreen/" data-ajax="false">Fullscreen toolbars</a></li>
|
||||
<li data-filtertext="external fixed toolbars header footer"><a href="../toolbar-fixed-external/" data-ajax="false">Fixed external toolbars</a></li>
|
||||
<li data-filtertext="external persistent toolbars header footer navbar navmenu"><a href="../toolbar-fixed-persistent/" data-ajax="false">Persistent toolbars</a></li>
|
||||
<li data-filtertext="external ajax optimized toolbars persistent toolbars header footer navbar"><a href="../toolbar-fixed-persistent-optimized/" data-ajax="false">Ajax optimized toolbars</a></li>
|
||||
<li data-filtertext="form in toolbars header footer"><a href="../toolbar-fixed-forms/" data-ajax="false">Form in toolbar</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="page transitions animated pages popup navigation flip slide fade pop"><a href="../transitions/" data-ajax="false">Transitions</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>3rd party API demos</h3>
|
||||
<ul>
|
||||
<li data-filtertext="backbone requirejs navigation router"><a href="../backbone-requirejs/" data-ajax="false">Backbone RequireJS</a></li>
|
||||
<li data-filtertext="google maps geolocation demo"><a href="../map-geolocation/" data-ajax="false">Google Maps geolocation</a></li>
|
||||
<li data-filtertext="google maps hybrid"><a href="../map-list-toggle/" data-ajax="false">Google Maps list toggle</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
</ul>
|
||||
</div><!-- /panel -->
|
||||
|
||||
|
||||
<div data-role="footer" data-position="fixed" data-tap-toggle="false" class="jqm-footer">
|
||||
<p>jQuery Mobile Demos version <span class="jqm-version"></span></p>
|
||||
<p>Copyright 2014 The jQuery Foundation</p>
|
||||
</div><!-- /footer -->
|
||||
<!-- TODO: This should become an external panel so we can add input to markup (unique ID) -->
|
||||
<div data-role="panel" class="jqm-search-panel" data-position="right" data-display="overlay" data-theme="a">
|
||||
<div class="jqm-search">
|
||||
<ul class="jqm-list" data-filter-placeholder="Search demos..." data-filter-reveal="true">
|
||||
<li data-filtertext="demos homepage" data-icon="home"><a href=".././">Home</a></li>
|
||||
<li data-filtertext="introduction overview getting started"><a href="../intro/" data-ajax="false">Introduction</a></li>
|
||||
<li data-filtertext="buttons button markup buttonmarkup method anchor link button element"><a href="../button-markup/" data-ajax="false">Buttons</a></li>
|
||||
<li data-filtertext="form button widget input button submit reset"><a href="../button/" data-ajax="false">Button widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Checkboxradio widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="form checkboxradio widget checkbox input checkboxes controlgroups"><a href="../checkboxradio-checkbox/" data-ajax="false">Checkboxes</a></li>
|
||||
<li data-filtertext="form checkboxradio widget radio input radio buttons controlgroups"><a href="../checkboxradio-radio/" data-ajax="false">Radio buttons</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Collapsible (set) widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="collapsibles content formatting"><a href="../collapsible/" data-ajax="false">Collapsible</a></li>
|
||||
<li data-filtertext="dynamic collapsible set accordion append expand"><a href="../collapsible-dynamic/" data-ajax="false">Dynamic collapsibles</a></li>
|
||||
<li data-filtertext="accordions collapsible set widget content formatting grouped collapsibles"><a href="../collapsibleset/" data-ajax="false">Collapsible set</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Controlgroup widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="controlgroups selectmenu checkboxradio input grouped buttons horizontal vertical"><a href="../controlgroup/" data-ajax="false">Controlgroup</a></li>
|
||||
<li data-filtertext="dynamic controlgroup dynamically add buttons"><a href="../controlgroup-dynamic/" data-ajax="false">Dynamic controlgroups</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="form datepicker widget date input"><a href="../datepicker/" data-ajax="false">Datepicker</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Events</h3>
|
||||
<ul>
|
||||
<li data-filtertext="swipe to delete list items listviews swipe events"><a href="../swipe-list/" data-ajax="false">Swipe list items</a></li>
|
||||
<li data-filtertext="swipe to navigate swipe page navigation swipe events"><a href="../swipe-page/" data-ajax="false">Swipe page navigation</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="filterable filter elements sorting searching listview table"><a href="../filterable/" data-ajax="false">Filterable widget</a></li>
|
||||
<li data-filtertext="form flipswitch widget flip toggle switch binary select checkbox input"><a href="../flipswitch/" data-ajax="false">Flipswitch widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Forms</h3>
|
||||
<ul>
|
||||
<li data-filtertext="forms text checkbox radio range button submit reset inputs selects textarea slider flipswitch label form elements"><a href="../forms/" data-ajax="false">Forms</a></li>
|
||||
<li data-filtertext="form hide labels hidden accessible ui-hidden-accessible forms"><a href="../forms-label-hidden-accessible/" data-ajax="false">Hide labels</a></li>
|
||||
<li data-filtertext="form field containers fieldcontain ui-field-contain forms"><a href="../forms-field-contain/" data-ajax="false">Field containers</a></li>
|
||||
<li data-filtertext="forms disabled form elements"><a href="../forms-disabled/" data-ajax="false">Forms disabled</a></li>
|
||||
<li data-filtertext="forms gallery examples overview forms text checkbox radio range button submit reset inputs selects textarea slider flipswitch label form elements"><a href="../forms-gallery/" data-ajax="false">Forms gallery</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Grids</h3>
|
||||
<ul>
|
||||
<li data-filtertext="grids columns blocks content formatting rwd responsive css framework"><a href="../grids/" data-ajax="false">Grids</a></li>
|
||||
<li data-filtertext="buttons in grids css framework"><a href="../grids-buttons/" data-ajax="false">Buttons in grids</a></li>
|
||||
<li data-filtertext="custom responsive grids rwd css framework"><a href="../grids-custom-responsive/" data-ajax="false">Custom responsive grids</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="blocks content formatting sections heading"><a href="../body-bar-classes/" data-ajax="false">Grouping and dividing content</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Icons</h3>
|
||||
<ul>
|
||||
<li data-filtertext="button icons svg disc alt custom icon position"><a href="../icons/" data-ajax="false">Icons</a></li>
|
||||
<li data-filtertext=""><a href="../icons-grunticon/" data-ajax="false">Grunticon loader</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Listview widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="listview widget thumbnails icons nested split button collapsible ul ol"><a href="../listview/" data-ajax="false">Listview</a></li>
|
||||
<li data-filtertext="autocomplete filterable reveal listview filtertextbeforefilter placeholder"><a href="../listview-autocomplete/" data-ajax="false">Listview autocomplete</a></li>
|
||||
<li data-filtertext="autocomplete filterable reveal listview remote data filtertextbeforefilter placeholder"><a href="../listview-autocomplete-remote/" data-ajax="false">Listview autocomplete remote data</a></li>
|
||||
<li data-filtertext="autodividers anchor jump scroll linkbars listview lists ul ol"><a href="../listview-autodividers-linkbar/" data-ajax="false">Listview autodividers linkbar</a></li>
|
||||
<li data-filtertext="listview autodividers selector autodividersselector lists ul ol"><a href="../listview-autodividers-selector/" data-ajax="false">Listview autodividers selector</a></li>
|
||||
<li data-filtertext="listview nested list items"><a href="../listview-nested-lists/" data-ajax="false">Listview Nested Listviews</a></li>
|
||||
<li data-filtertext="listview collapsible list items flat"><a href="../listview-collapsible-item-flat/" data-ajax="false">Listview collapsible list items (flat)</a></li>
|
||||
<li data-filtertext="listview collapsible list indented"><a href="../listview-collapsible-item-indented/" data-ajax="false">Listview collapsible list items (indented)</a></li>
|
||||
<li data-filtertext="grid listview responsive grids responsive listviews lists ul"><a href="../listview-grid/" data-ajax="false">Listview responsive grid</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="loader widget page loading navigation overlay spinner"><a href="../loader/" data-ajax="false">Loader widget</a></li>
|
||||
<li data-filtertext="navbar widget navmenu toolbars header footer"><a href="../navbar/" data-ajax="false">Navbar widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Navigation</h3>
|
||||
<ul>
|
||||
<li data-filtertext="ajax navigation navigate widget history event method"><a href="../navigation/" data-ajax="false">Navigation</a></li>
|
||||
<li data-filtertext="linking pages page links navigation ajax prefetch cache"><a href="../navigation-linking-pages/" data-ajax="false">Linking pages</a></li>
|
||||
<li data-filtertext="php redirect server redirection server-side navigation"><a href="../navigation-php-redirect/" data-ajax="false">PHP redirect demo</a></li>
|
||||
<li data-filtertext="navigation redirection hash query"><a href="../navigation-hash-processing/" data-ajax="false">Hash processing demo</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Pages</h3>
|
||||
<ul>
|
||||
<li data-filtertext="pages page widget ajax navigation"><a href="../pages/" data-ajax="false">Pages</a></li>
|
||||
<li data-filtertext="single page"><a href="../pages-single-page/" data-ajax="false">Single page</a></li>
|
||||
<li data-filtertext="multipage multi-page page"><a href="../pages-multi-page/" data-ajax="false">Multi-page template</a></li>
|
||||
<li data-filtertext="dialog page widget modal popup"><a href="../pages-dialog/" data-ajax="false">Dialog page</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Panel widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="panel widget sliding panels reveal push overlay responsive"><a href="../panel/" data-ajax="false">Panel</a></li>
|
||||
<li data-filtertext=""><a href="../panel-external/" data-ajax="false">External panels</a></li>
|
||||
<li data-filtertext="panel "><a href="../panel-fixed/" data-ajax="false">Fixed panels</a></li>
|
||||
<li data-filtertext="panel slide panels sliding panels shadow rwd responsive breakpoint"><a href="../panel-responsive/" data-ajax="false">Panels responsive</a></li>
|
||||
<li data-filtertext="panel custom style custom panel width reveal shadow listview panel styling page background wrapper"><a href="../panel-styling/" data-ajax="false">Custom panel style</a></li>
|
||||
<li data-filtertext="panel open on swipe"><a href="../panel-swipe-open/" data-ajax="false">Panel open on swipe</a></li>
|
||||
<li data-filtertext="panels outside page internal external toolbars"><a href="../panel-external-internal/" data-ajax="false">Panel external and internal</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Popup widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="popup widget popups dialog modal transition tooltip lightbox form overlay screen flip pop fade transition"><a href="../popup/" data-ajax="false">Popup</a></li>
|
||||
<li data-filtertext="popup alignment position"><a href="../popup-alignment/" data-ajax="false">Popup alignment</a></li>
|
||||
<li data-filtertext="popup arrow size popups popover"><a href="../popup-arrow-size/" data-ajax="false">Popup arrow size</a></li>
|
||||
<li data-filtertext="dynamic popups popup images lightbox"><a href="../popup-dynamic/" data-ajax="false">Dynamic popups</a></li>
|
||||
<li data-filtertext="popups with iframes scaling"><a href="../popup-iframe/" data-ajax="false">Popups with iframes</a></li>
|
||||
<li data-filtertext="popup image scaling"><a href="../popup-image-scaling/" data-ajax="false">Popup image scaling</a></li>
|
||||
<li data-filtertext="external popup outside multi-page"><a href="../popup-outside-multipage" data-ajax="false">Popup outside multi-page</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="form rangeslider widget dual sliders dual handle sliders range input"><a href="../rangeslider/" data-ajax="false">Rangeslider widget</a></li>
|
||||
<li data-filtertext="responsive web design rwd adaptive progressive enhancement PE accessible mobile breakpoints media query media queries"><a href="../rwd/" data-ajax="false">Responsive Web Design</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Selectmenu widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="form selectmenu widget select input custom select menu selects"><a href="../selectmenu/" data-ajax="false">Selectmenu</a></li>
|
||||
<li data-filtertext="form custom select menu selectmenu widget custom menu option optgroup multiple selects"><a href="../selectmenu-custom/" data-ajax="false">Custom select menu</a></li>
|
||||
<li data-filtertext="filterable select filter popup dialog"><a href="../selectmenu-custom-filter/" data-ajax="false">Custom select menu with filter</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Slider widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="form slider widget range input single sliders"><a href="../slider/" data-ajax="false">Slider</a></li>
|
||||
<li data-filtertext="form slider widget flipswitch slider binary select flip toggle switch"><a href="../slider-flipswitch/" data-ajax="false">Slider flip toggle switch</a></li>
|
||||
<li data-filtertext="form slider tooltip handle value input range sliders"><a href="../slider-tooltip/" data-ajax="false">Slider tooltip</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Table widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="table widget reflow column toggle th td responsive tables rwd hide show tabular"><a href="../table-column-toggle/" data-ajax="false">Table Column Toggle</a></li>
|
||||
<li data-filtertext="table column toggle phone comparison demo"><a href="../table-column-toggle-example/" data-ajax="false">Table Column Toggle demo</a></li>
|
||||
<li data-filtertext="responsive tables table column toggle heading groups rwd breakpoint"><a href="../table-column-toggle-heading-groups/" data-ajax="false">Table Column Toggle heading groups</a></li>
|
||||
<li data-filtertext="responsive tables table column toggle hide rwd breakpoint customization options"><a href="../table-column-toggle-options/" data-ajax="false">Table Column Toggle options</a></li>
|
||||
<li data-filtertext="table reflow th td responsive rwd columns tabular"><a href="../table-reflow/" data-ajax="false">Table Reflow</a></li>
|
||||
<li data-filtertext="responsive tables table reflow heading groups rwd breakpoint"><a href="../table-reflow-heading-groups/" data-ajax="false">Table Reflow heading groups</a></li>
|
||||
<li data-filtertext="responsive tables table reflow stripes strokes table style"><a href="../table-reflow-stripes-strokes/" data-ajax="false">Table Reflow stripes and strokes</a></li>
|
||||
<li data-filtertext="responsive tables table reflow stack custom styles"><a href="../table-reflow-styling/" data-ajax="false">Table Reflow custom styles</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="ui tabs widget"><a href="../tabs/" data-ajax="false">Tabs widget</a></li>
|
||||
<li data-filtertext="form textinput widget text input textarea number date time tel email file color password"><a href="../textinput/" data-ajax="false">Textinput widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Theming</h3>
|
||||
<ul>
|
||||
<li data-filtertext="default theme swatches theming style css"><a href="../theme-default/" data-ajax="false">Default theme</a></li>
|
||||
<li data-filtertext="classic theme old theme swatches theming style css"><a href="../theme-classic/" data-ajax="false">Classic theme</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Toolbar widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="toolbar widget header footer toolbars fixed fullscreen external sections"><a href="../toolbar/" data-ajax="false">Toolbar</a></li>
|
||||
<li data-filtertext="dynamic toolbars dynamically add toolbar header footer"><a href="../toolbar-dynamic/" data-ajax="false">Dynamic toolbars</a></li>
|
||||
<li data-filtertext="external toolbars header footer"><a href="../toolbar-external/" data-ajax="false">External toolbars</a></li>
|
||||
<li data-filtertext="fixed toolbars header footer"><a href="../toolbar-fixed/" data-ajax="false">Fixed toolbars</a></li>
|
||||
<li data-filtertext="fixed fullscreen toolbars header footer"><a href="../toolbar-fixed-fullscreen/" data-ajax="false">Fullscreen toolbars</a></li>
|
||||
<li data-filtertext="external fixed toolbars header footer"><a href="../toolbar-fixed-external/" data-ajax="false">Fixed external toolbars</a></li>
|
||||
<li data-filtertext="external persistent toolbars header footer navbar navmenu"><a href="../toolbar-fixed-persistent/" data-ajax="false">Persistent toolbars</a></li>
|
||||
<li data-filtertext="external ajax optimized toolbars persistent toolbars header footer navbar"><a href="../toolbar-fixed-persistent-optimized/" data-ajax="false">Ajax optimized toolbars</a></li>
|
||||
<li data-filtertext="form in toolbars header footer"><a href="../toolbar-fixed-forms/" data-ajax="false">Form in toolbar</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="page transitions animated pages popup navigation flip slide fade pop"><a href="../transitions/" data-ajax="false">Transitions</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>3rd party API demos</h3>
|
||||
<ul>
|
||||
<li data-filtertext="backbone requirejs navigation router"><a href="../backbone-requirejs/" data-ajax="false">Backbone RequireJS</a></li>
|
||||
<li data-filtertext="google maps geolocation demo"><a href="../map-geolocation/" data-ajax="false">Google Maps geolocation</a></li>
|
||||
<li data-filtertext="google maps hybrid"><a href="../map-list-toggle/" data-ajax="false">Google Maps list toggle</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- /panel -->
|
||||
|
||||
|
||||
</div><!-- /page -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
160
js/libs/jquery.mobile/demos/backbone-requirejs/index.php
Normal file
160
js/libs/jquery.mobile/demos/backbone-requirejs/index.php
Normal file
@ -0,0 +1,160 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>jQuery Mobile - Backbone.js and Require.js Apps</title>
|
||||
<link rel="shortcut icon" href="../favicon.ico">
|
||||
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
|
||||
<link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css">
|
||||
<link rel="stylesheet" href="../_assets/css/jqm-demos.css">
|
||||
<script src="../../external/jquery/jquery.js"></script>
|
||||
<script src="../_assets/js/"></script>
|
||||
<script src="../../js/"></script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div data-role="page" class="jqm-demos" data-quicklinks="true">
|
||||
|
||||
<div data-role="header" class="jqm-header">
|
||||
<h2><a href="../" title="jQuery Mobile Demos home"><img src="../_assets/img/jquery-logo.png" alt="jQuery Mobile"></a></h2>
|
||||
<p><span class="jqm-version"></span> Demos</p>
|
||||
<a href="#" class="jqm-navmenu-link ui-btn ui-btn-icon-notext ui-corner-all ui-icon-bars ui-nodisc-icon ui-alt-icon ui-btn-left">Menu</a>
|
||||
<a href="#" class="jqm-search-link ui-btn ui-btn-icon-notext ui-corner-all ui-icon-search ui-nodisc-icon ui-alt-icon ui-btn-right">Search</a>
|
||||
</div><!-- /header -->
|
||||
|
||||
<div role="main" class="ui-content jqm-content">
|
||||
|
||||
<h1>jQuery Mobile, Backbone.js and Require.js</h1>
|
||||
<p>jQuery Mobile provides an <strong>HTML5-based user interface for all popular mobile device platforms</strong>, but it does not influence how you organize and structure your app's JavaScript. Many jQuery Mobile users turn to a variety of other popular third-party libraries, including MV* frameworks and dependency management tools, to help structure their code.
|
||||
</p>
|
||||
|
||||
<h2>Backbone and Require.js</h2>
|
||||
<p><strong>Backbone.js</strong> and <strong>Require.js</strong> are two of the most popular third-party libraries that are used with jQuery Mobile to provide a rich JavaScript tech stack for developers.
|
||||
</p>
|
||||
<p><strong>Backbone.js</strong> is a great client-side MV* JavaScript framework that provides structure to JavaScript applications by providing View, Model, Collection, Router, and Event class objects.
|
||||
</p>
|
||||
<p><strong>Require.js</strong> serves a few different purposes than Backbone.js. Require.js is an AMD (Asynchronous Module Definition) script loader that asynchronously loads your JavaScript to improve page load performance, while also helping with script dependency managagement and allowing you to organize your JavaScript into self contained modules (files).
|
||||
</p>
|
||||
<p>Although there is a high amount of developer interest with using jQuery Mobile, Backbone.js, and Require.js together, there is a high barrier of entry. Many users are confused about how to use the Backbone.js Router class object with the jQuery Mobile routing system.</p>
|
||||
|
||||
<a href="backbone-require.html" rel="external" class="ui-btn ui-btn-inline ui-corner-all ui-shadow ui-btn-icon-right ui-icon-carat-r">View example page</a>
|
||||
|
||||
<h2>jQuery Mobile configuration</h2>
|
||||
|
||||
<p>The technique used in this <a href="backbone-require.html" rel="external">example page</a> is by no means the only technique available, but it is one of the most elegant. The Backbone.js router is used exclusively to handle all hashchange events, and the jQuery Mobile <code>$.mobile.changePage()</code> method is used to programmatically change the page.</p>
|
||||
|
||||
<p>Below are two internal jQuery Mobile properties that are turned off to allow this to happen:</p>
|
||||
|
||||
<ul>
|
||||
<li><code>$.mobile.linkBindingEnabled</code>
|
||||
<ul>
|
||||
<li>jQuery Mobile will automatically bind the clicks on anchor tags in your document. Setting this option to false will prevent all anchor click handling including the addition of active button state and alternate link blurring. This should only be used when attempting to delegate the click management to another library or custom code.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><code>$.mobile.hashListeningEnabled</code>
|
||||
<ul>
|
||||
<li>jQuery Mobile will automatically listen and handle changes to the location.hash. Disabling this will prevent jQuery Mobile from handling hash changes, which allows you to handle them yourself or use simple deep-links within a document that scroll to a particular id.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</p>
|
||||
|
||||
<h2>Example page code</h2>
|
||||
<p>To illustrate how the above internal jQuery Mobile properties are turned off, let's examine our example page code.</p>
|
||||
|
||||
<p>Inside of the <em>head</em> section of our <strong>index.html</strong> page, we first include the Require.js JavaScript library and set the <strong>data-main</strong> attribute of our script tag to the JavaScript file that we want Require.js to include on the page first (this file will contain all of our Require.js configurations). In this example, we are telling Require.js to look inside of the js folder and then load <strong>mobile.js</strong>.
|
||||
</p>
|
||||
|
||||
<code>
|
||||
<head>
|
||||
<script src="js/libs/require.js" data-main="js/mobile"></script>
|
||||
</head>
|
||||
</code>
|
||||
<p>If we look inside of <strong>mobile.js</strong>, we will find that the <code>$.mobile.linkBindingEnabled</code> and <code>$.mobile.hashListeningEnabled</code> jQuery Mobile attributes are set to false.
|
||||
</p>
|
||||
<pre>
|
||||
<code>
|
||||
// Sets the require.js configuration for your application.
|
||||
require.config( {
|
||||
|
||||
// 3rd party script alias names
|
||||
paths: {
|
||||
|
||||
// Core Libraries
|
||||
"jquery": "../../../js/jquery",
|
||||
"jquerymobile": "libs/jquerymobile",
|
||||
"underscore": "libs/lodash",
|
||||
"backbone": "libs/backbone"
|
||||
|
||||
},
|
||||
|
||||
// Sets the configuration for your third party scripts that are not AMD compatible
|
||||
shim: {
|
||||
|
||||
"backbone": {
|
||||
"deps": [ "underscore", "jquery" ],
|
||||
"exports": "Backbone" //attaches "Backbone" to the window object
|
||||
}
|
||||
|
||||
} // end Shim Configuration
|
||||
|
||||
} );
|
||||
|
||||
// Includes File Dependencies
|
||||
require([ "jquery","backbone","routers/mobileRouter","jquerymobile" ], function( $, Backbone, Mobile ) {
|
||||
|
||||
// Prevents all anchor click handling
|
||||
$.mobile.linkBindingEnabled = false;
|
||||
|
||||
// Disabling this will prevent jQuery Mobile from handling hash changes
|
||||
$.mobile.hashListeningEnabled = false;
|
||||
|
||||
// Instantiates a new Backbone.js Mobile Router
|
||||
this.router = new Mobile();
|
||||
|
||||
} );
|
||||
</code>
|
||||
</pre>
|
||||
<p>Next, inside of the Backbone.js Router class object, we can respond to haschange events and manually call the jQuery Mobile <code>changePage()</code> method. Below is a small snippet of <strong>mobileRouter.js</strong>.</p>
|
||||
<pre>
|
||||
<code>
|
||||
// Backbone.js Routes
|
||||
routes: {
|
||||
|
||||
// When there is no hash bang on the url, the home method is called
|
||||
"": "home",
|
||||
|
||||
// When #category? is on the url, the category method is called
|
||||
"category?:type": "category"
|
||||
|
||||
},
|
||||
|
||||
// Home method
|
||||
home: function() {
|
||||
|
||||
// Programatically changes to the categories page
|
||||
$.mobile.changePage( "#categories" , { reverse: false, changeHash: false } );
|
||||
|
||||
}
|
||||
</code>
|
||||
</pre>
|
||||
|
||||
<p>The <a href="backbone-require.html" rel="external">example page</a> illustrates how to render a jQuery Mobile ListView that is populated with dynamic JSON data asynchronously. Feel free to take a deeper look into the source code to see how Require.js and Backbone.js are used.</p>
|
||||
|
||||
</div><!-- /content -->
|
||||
|
||||
<?php include( '../jqm-navmenu.php' ); ?>
|
||||
|
||||
<div data-role="footer" data-position="fixed" data-tap-toggle="false" class="jqm-footer">
|
||||
<p>jQuery Mobile Demos version <span class="jqm-version"></span></p>
|
||||
<p>Copyright 2014 The jQuery Foundation</p>
|
||||
</div><!-- /footer -->
|
||||
|
||||
<?php include( '../jqm-search.php' ); ?>
|
||||
|
||||
</div><!-- /page -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,101 @@
|
||||
// Category Collection
|
||||
// ===================
|
||||
|
||||
// Includes file dependencies
|
||||
define([
|
||||
"jquery",
|
||||
"backbone",
|
||||
"../models/CategoryModel" ], function( $, Backbone, CategoryModel ) {
|
||||
|
||||
// Extends Backbone.Router
|
||||
var Collection = Backbone.Collection.extend( {
|
||||
|
||||
// The Collection constructor
|
||||
initialize: function( models, options ) {
|
||||
|
||||
// Sets the type instance property (ie. animals)
|
||||
this.type = options.type;
|
||||
|
||||
},
|
||||
|
||||
// Sets the Collection model property to be a Category Model
|
||||
model: CategoryModel,
|
||||
|
||||
// Sample JSON data that in a real app will most likely come from a REST web service
|
||||
jsonArray: [
|
||||
|
||||
{ "category": "animals", "type": "Pets" },
|
||||
|
||||
{ "category": "animals", "type": "Farm Animals" },
|
||||
|
||||
{ "category": "animals", "type": "Wild Animals" },
|
||||
|
||||
{ "category": "colors", "type": "Blue" },
|
||||
|
||||
{ "category": "colors", "type": "Green" },
|
||||
|
||||
{ "category": "colors", "type": "Orange" },
|
||||
|
||||
{ "category": "colors", "type": "Purple" },
|
||||
|
||||
{ "category": "colors", "type": "Red" },
|
||||
|
||||
{ "category": "colors", "type": "Yellow" },
|
||||
|
||||
{ "category": "colors", "type": "Violet" },
|
||||
|
||||
{ "category": "vehicles", "type": "Cars" },
|
||||
|
||||
{ "category": "vehicles", "type": "Planes" },
|
||||
|
||||
{ "category": "vehicles", "type": "Construction" }
|
||||
|
||||
],
|
||||
|
||||
// Overriding the Backbone.sync method (the Backbone.fetch method calls the sync method when trying to fetch data)
|
||||
sync: function( method, model, options ) {
|
||||
|
||||
// Local Variables
|
||||
// ===============
|
||||
|
||||
// Instantiates an empty array
|
||||
var categories = [],
|
||||
|
||||
// Stores the this context in the self variable
|
||||
self = this,
|
||||
|
||||
// Creates a jQuery Deferred Object
|
||||
deferred = $.Deferred();
|
||||
|
||||
// Uses a setTimeout to mimic a real world application that retrieves data asynchronously
|
||||
setTimeout( function() {
|
||||
|
||||
// Filters the above sample JSON data to return an array of only the correct category type
|
||||
categories = _.filter( self.jsonArray, function( row ) {
|
||||
|
||||
return row.category === self.type;
|
||||
|
||||
} );
|
||||
|
||||
// Calls the options.success method and passes an array of objects (Internally saves these objects as models to the current collection)
|
||||
options.success( categories );
|
||||
|
||||
// Triggers the custom `added` method (which the Category View listens for)
|
||||
self.trigger( "added" );
|
||||
|
||||
// Resolves the deferred object (this triggers the changePage method inside of the Category Router)
|
||||
deferred.resolve();
|
||||
|
||||
}, 1000);
|
||||
|
||||
// Returns the deferred object
|
||||
return deferred;
|
||||
|
||||
}
|
||||
|
||||
} );
|
||||
|
||||
// Returns the Model class
|
||||
return Collection;
|
||||
|
||||
} );
|
||||
55
js/libs/jquery.mobile/demos/backbone-requirejs/js/main.js
Normal file
55
js/libs/jquery.mobile/demos/backbone-requirejs/js/main.js
Normal file
@ -0,0 +1,55 @@
|
||||
// Sets the require.js configuration for your application.
|
||||
require.config( {
|
||||
|
||||
baseUrl: "../js",
|
||||
|
||||
// 3rd party script alias names
|
||||
paths: {
|
||||
|
||||
// Core Libraries
|
||||
"jquery": "jquery",
|
||||
"jquerymobile": "jquery.mobile-1.4.2",
|
||||
"underscore": "//rawgithub.com/lodash/lodash/2.4.1/dist/lodash",
|
||||
"backbone": "//rawgithub.com/jashkenas/backbone/0.9.2/backbone",
|
||||
|
||||
"backbone-requirejs-demos": "../backbone-requirejs/js"
|
||||
},
|
||||
|
||||
// Sets the configuration for your third party scripts that are not AMD compatible
|
||||
shim: {
|
||||
|
||||
"backbone": {
|
||||
"deps": [ "underscore", "jquery" ],
|
||||
"exports": "Backbone"
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
// Includes File Dependencies
|
||||
require([
|
||||
"jquery",
|
||||
"backbone",
|
||||
"backbone-requirejs-demos/routers/mobileRouter"
|
||||
], function ( $, Backbone, Mobile ) {
|
||||
|
||||
$( document ).on( "mobileinit",
|
||||
|
||||
// Set up the "mobileinit" handler before requiring jQuery Mobile's module
|
||||
function () {
|
||||
|
||||
// Prevents all anchor click handling including the addition of active button state and alternate link bluring.
|
||||
$.mobile.linkBindingEnabled = false;
|
||||
|
||||
// Disabling this will prevent jQuery Mobile from handling hash changes
|
||||
$.mobile.hashListeningEnabled = false;
|
||||
}
|
||||
)
|
||||
|
||||
require( [ "jquerymobile" ], function () {
|
||||
|
||||
// Instantiates a new Backbone.js Mobile Router
|
||||
this.router = new Mobile();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,18 @@
|
||||
// Category Model
|
||||
// ==============
|
||||
|
||||
// Includes file dependencies
|
||||
define([
|
||||
"jquery",
|
||||
"backbone"
|
||||
], function( $, Backbone ) {
|
||||
|
||||
// The Model constructor
|
||||
var Model = Backbone.Model.extend( {
|
||||
|
||||
} );
|
||||
|
||||
// Returns the Model class
|
||||
return Model;
|
||||
|
||||
} );
|
||||
@ -0,0 +1,89 @@
|
||||
// Mobile Router
|
||||
// =============
|
||||
|
||||
// Includes file dependencies
|
||||
define([
|
||||
"jquery",
|
||||
"backbone",
|
||||
"../models/CategoryModel",
|
||||
"../collections/CategoriesCollection",
|
||||
"../views/CategoryView"
|
||||
], function( $, Backbone, CategoryModel, CategoriesCollection, CategoryView ) {
|
||||
|
||||
// Extends Backbone.Router
|
||||
var CategoryRouter = Backbone.Router.extend( {
|
||||
|
||||
// The Router constructor
|
||||
initialize: function() {
|
||||
|
||||
// Instantiates a new Animal Category View
|
||||
this.animalsView = new CategoryView( { el: "#animals", collection: new CategoriesCollection( [] , { type: "animals" } ) } );
|
||||
|
||||
// Instantiates a new Colors Category View
|
||||
this.colorsView = new CategoryView( { el: "#colors", collection: new CategoriesCollection( [] , { type: "colors" } ) } );
|
||||
|
||||
// Instantiates a new Vehicles Category View
|
||||
this.vehiclesView = new CategoryView( { el: "#vehicles", collection: new CategoriesCollection( [] , { type: "vehicles" } ) } );
|
||||
|
||||
// Tells Backbone to start watching for hashchange events
|
||||
Backbone.history.start();
|
||||
|
||||
},
|
||||
|
||||
// Backbone.js Routes
|
||||
routes: {
|
||||
|
||||
// When there is no hash bang on the url, the home method is called
|
||||
"": "home",
|
||||
|
||||
// When #category? is on the url, the category method is called
|
||||
"category?:type": "category"
|
||||
|
||||
},
|
||||
|
||||
// Home method
|
||||
home: function() {
|
||||
|
||||
// Programatically changes to the categories page
|
||||
$.mobile.changePage( "#categories" , { reverse: false, changeHash: false } );
|
||||
|
||||
},
|
||||
|
||||
// Category method that passes in the type that is appended to the url hash
|
||||
category: function(type) {
|
||||
|
||||
// Stores the current Category View inside of the currentView variable
|
||||
var currentView = this[ type + "View" ];
|
||||
|
||||
// If there are no collections in the current Category View
|
||||
if(!currentView.collection.length) {
|
||||
|
||||
// Show's the jQuery Mobile loading icon
|
||||
$.mobile.loading( "show" );
|
||||
|
||||
// Fetches the Collection of Category Models for the current Category View
|
||||
currentView.collection.fetch().done( function() {
|
||||
|
||||
// Programatically changes to the current categories page
|
||||
$.mobile.changePage( "#" + type, { reverse: false, changeHash: false } );
|
||||
|
||||
} );
|
||||
|
||||
}
|
||||
|
||||
// If there already collections in the current Category View
|
||||
else {
|
||||
|
||||
// Programatically changes to the current categories page
|
||||
$.mobile.changePage( "#" + type, { reverse: false, changeHash: false } );
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
} );
|
||||
|
||||
// Returns the Router class
|
||||
return CategoryRouter;
|
||||
|
||||
} );
|
||||
@ -0,0 +1,41 @@
|
||||
// Category View
|
||||
// =============
|
||||
|
||||
// Includes file dependencies
|
||||
define([
|
||||
"jquery",
|
||||
"backbone",
|
||||
"../models/CategoryModel"
|
||||
], function( $, Backbone, CategoryModel ) {
|
||||
|
||||
// Extends Backbone.View
|
||||
var CategoryView = Backbone.View.extend( {
|
||||
|
||||
// The View Constructor
|
||||
initialize: function() {
|
||||
|
||||
// The render method is called when Category Models are added to the Collection
|
||||
this.collection.on( "added", this.render, this );
|
||||
|
||||
},
|
||||
|
||||
// Renders all of the Category models on the UI
|
||||
render: function() {
|
||||
|
||||
// Sets the view's template property
|
||||
this.template = _.template( $( "script#categoryItems" ).html(), { "collection": this.collection } );
|
||||
|
||||
// Renders the view's template inside of the current listview element
|
||||
this.$el.find("ul").html(this.template);
|
||||
|
||||
// Maintains chainability
|
||||
return this;
|
||||
|
||||
}
|
||||
|
||||
} );
|
||||
|
||||
// Returns the View class
|
||||
return CategoryView;
|
||||
|
||||
} );
|
||||
492
js/libs/jquery.mobile/demos/body-bar-classes/index.html
Normal file
492
js/libs/jquery.mobile/demos/body-bar-classes/index.html
Normal file
@ -0,0 +1,492 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Grouping and dividing content - jQuery Mobile Demos</title>
|
||||
<link rel="shortcut icon" href="../favicon.ico">
|
||||
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
|
||||
<link rel="stylesheet" href="../css/themes/default/jquery.mobile-1.4.2.min.css">
|
||||
<link rel="stylesheet" href="../_assets/css/jqm-demos.css">
|
||||
<script src="../js/jquery.js"></script>
|
||||
<script src="../_assets/js/index.js"></script>
|
||||
<script src="../js/jquery.mobile-1.4.2.min.js"></script>
|
||||
<style id="combined-heading-and-section">
|
||||
.custom-corners .ui-bar {
|
||||
-webkit-border-top-left-radius: inherit;
|
||||
border-top-left-radius: inherit;
|
||||
-webkit-border-top-right-radius: inherit;
|
||||
border-top-right-radius: inherit;
|
||||
}
|
||||
.custom-corners .ui-body {
|
||||
border-top-width: 0;
|
||||
-webkit-border-bottom-left-radius: inherit;
|
||||
border-bottom-left-radius: inherit;
|
||||
-webkit-border-bottom-right-radius: inherit;
|
||||
border-bottom-right-radius: inherit;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div data-role="page" class="jqm-demos" data-quicklinks="true">
|
||||
|
||||
<div data-role="header" class="jqm-header">
|
||||
<h2><a href="../" title="jQuery Mobile Demos home"><img src="../_assets/img/jquery-logo.png" alt="jQuery Mobile"></a></h2>
|
||||
<p><span class="jqm-version"></span> Demos</p>
|
||||
<a href="#" class="jqm-navmenu-link ui-btn ui-btn-icon-notext ui-corner-all ui-icon-bars ui-nodisc-icon ui-alt-icon ui-btn-left">Menu</a>
|
||||
<a href="#" class="jqm-search-link ui-btn ui-btn-icon-notext ui-corner-all ui-icon-search ui-nodisc-icon ui-alt-icon ui-btn-right">Search</a>
|
||||
</div><!-- /header -->
|
||||
|
||||
<div role="main" class="ui-content jqm-content">
|
||||
|
||||
<h1>Grouping and dividing content</h1>
|
||||
|
||||
<p>jQuery Mobile provides classes <code>ui-bar</code> and <code>ui-body</code> for subdividing and for visually grouping content.</p>
|
||||
<p>Add class <code>ui-bar</code> to create a full-width heading or a separator between sections of content. Additionally, classes <code>ui-bar-[a-z]</code> add the appropriate swatch from your theme.</p>
|
||||
<p>Add class <code>ui-body</code> to visual group and/or emphasize a section of content. Additionally, classes <code>ui-body-[a-z]</code> add the appropriate swatch from your theme.</p>
|
||||
|
||||
<h2>Heading and accompanying section</h2>
|
||||
|
||||
<div data-demo-html="true">
|
||||
<h3 class="ui-bar ui-bar-a">Heading</h3>
|
||||
<div class="ui-body">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse accumsan blandit fermentum. Pellentesque cursus mauris purus, auctor commodo mi ullamcorper nec. Donec semper mattis eros, nec condimentum ante sollicitudin quis. Etiam orci sem, porttitor ut tellus nec, blandit posuere urna. Proin a arcu non lacus pretium faucibus. Aliquam sed est porttitor, ullamcorper urna nec, vehicula lorem. Cras porttitor est lorem, non venenatis diam convallis congue.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Heading with rounded corners and accompanying section</h2>
|
||||
|
||||
<div data-demo-html="true">
|
||||
<h3 class="ui-bar ui-bar-a ui-corner-all">Heading</h3>
|
||||
<div class="ui-body">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse accumsan blandit fermentum. Pellentesque cursus mauris purus, auctor commodo mi ullamcorper nec. Donec semper mattis eros, nec condimentum ante sollicitudin quis. Etiam orci sem, porttitor ut tellus nec, blandit posuere urna. Proin a arcu non lacus pretium faucibus. Aliquam sed est porttitor, ullamcorper urna nec, vehicula lorem. Cras porttitor est lorem, non venenatis diam convallis congue.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Heading with rounded corners accompanying themed section with rounded corners</h2>
|
||||
|
||||
<div data-demo-html="true">
|
||||
<h3 class="ui-bar ui-bar-a ui-corner-all">Heading</h3>
|
||||
<div class="ui-body ui-body-a ui-corner-all">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse accumsan blandit fermentum. Pellentesque cursus mauris purus, auctor commodo mi ullamcorper nec. Donec semper mattis eros, nec condimentum ante sollicitudin quis. Etiam orci sem, porttitor ut tellus nec, blandit posuere urna. Proin a arcu non lacus pretium faucibus. Aliquam sed est porttitor, ullamcorper urna nec, vehicula lorem. Cras porttitor est lorem, non venenatis diam convallis congue.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Combined heading and accompanying themed section with rounded corners</h2>
|
||||
|
||||
<div data-demo-html="true">
|
||||
<div class="ui-body ui-body-a ui-corner-all">
|
||||
<h3>Heading</h3>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse accumsan blandit fermentum. Pellentesque cursus mauris purus, auctor commodo mi ullamcorper nec. Donec semper mattis eros, nec condimentum ante sollicitudin quis. Etiam orci sem, porttitor ut tellus nec, blandit posuere urna. Proin a arcu non lacus pretium faucibus. Aliquam sed est porttitor, ullamcorper urna nec, vehicula lorem. Cras porttitor est lorem, non venenatis diam convallis congue.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Heading attached to section - custom rounded corners</h2>
|
||||
|
||||
<div data-demo-html="true" data-demo-css="#combined-heading-and-section">
|
||||
<div class="ui-corner-all custom-corners">
|
||||
<div class="ui-bar ui-bar-a">
|
||||
<h3>Heading</h3>
|
||||
</div>
|
||||
<div class="ui-body ui-body-a">
|
||||
<p>Content</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div><!-- /content -->
|
||||
<div data-role="panel" class="jqm-navmenu-panel" data-position="left" data-display="overlay" data-theme="a">
|
||||
<ul class="jqm-list ui-alt-icon ui-nodisc-icon">
|
||||
<li data-filtertext="demos homepage" data-icon="home"><a href=".././">Home</a></li>
|
||||
<li data-filtertext="introduction overview getting started"><a href="../intro/" data-ajax="false">Introduction</a></li>
|
||||
<li data-filtertext="buttons button markup buttonmarkup method anchor link button element"><a href="../button-markup/" data-ajax="false">Buttons</a></li>
|
||||
<li data-filtertext="form button widget input button submit reset"><a href="../button/" data-ajax="false">Button widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Checkboxradio widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="form checkboxradio widget checkbox input checkboxes controlgroups"><a href="../checkboxradio-checkbox/" data-ajax="false">Checkboxes</a></li>
|
||||
<li data-filtertext="form checkboxradio widget radio input radio buttons controlgroups"><a href="../checkboxradio-radio/" data-ajax="false">Radio buttons</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Collapsible (set) widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="collapsibles content formatting"><a href="../collapsible/" data-ajax="false">Collapsible</a></li>
|
||||
<li data-filtertext="dynamic collapsible set accordion append expand"><a href="../collapsible-dynamic/" data-ajax="false">Dynamic collapsibles</a></li>
|
||||
<li data-filtertext="accordions collapsible set widget content formatting grouped collapsibles"><a href="../collapsibleset/" data-ajax="false">Collapsible set</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Controlgroup widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="controlgroups selectmenu checkboxradio input grouped buttons horizontal vertical"><a href="../controlgroup/" data-ajax="false">Controlgroup</a></li>
|
||||
<li data-filtertext="dynamic controlgroup dynamically add buttons"><a href="../controlgroup-dynamic/" data-ajax="false">Dynamic controlgroups</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="form datepicker widget date input"><a href="../datepicker/" data-ajax="false">Datepicker</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Events</h3>
|
||||
<ul>
|
||||
<li data-filtertext="swipe to delete list items listviews swipe events"><a href="../swipe-list/" data-ajax="false">Swipe list items</a></li>
|
||||
<li data-filtertext="swipe to navigate swipe page navigation swipe events"><a href="../swipe-page/" data-ajax="false">Swipe page navigation</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="filterable filter elements sorting searching listview table"><a href="../filterable/" data-ajax="false">Filterable widget</a></li>
|
||||
<li data-filtertext="form flipswitch widget flip toggle switch binary select checkbox input"><a href="../flipswitch/" data-ajax="false">Flipswitch widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Forms</h3>
|
||||
<ul>
|
||||
<li data-filtertext="forms text checkbox radio range button submit reset inputs selects textarea slider flipswitch label form elements"><a href="../forms/" data-ajax="false">Forms</a></li>
|
||||
<li data-filtertext="form hide labels hidden accessible ui-hidden-accessible forms"><a href="../forms-label-hidden-accessible/" data-ajax="false">Hide labels</a></li>
|
||||
<li data-filtertext="form field containers fieldcontain ui-field-contain forms"><a href="../forms-field-contain/" data-ajax="false">Field containers</a></li>
|
||||
<li data-filtertext="forms disabled form elements"><a href="../forms-disabled/" data-ajax="false">Forms disabled</a></li>
|
||||
<li data-filtertext="forms gallery examples overview forms text checkbox radio range button submit reset inputs selects textarea slider flipswitch label form elements"><a href="../forms-gallery/" data-ajax="false">Forms gallery</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Grids</h3>
|
||||
<ul>
|
||||
<li data-filtertext="grids columns blocks content formatting rwd responsive css framework"><a href="../grids/" data-ajax="false">Grids</a></li>
|
||||
<li data-filtertext="buttons in grids css framework"><a href="../grids-buttons/" data-ajax="false">Buttons in grids</a></li>
|
||||
<li data-filtertext="custom responsive grids rwd css framework"><a href="../grids-custom-responsive/" data-ajax="false">Custom responsive grids</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="blocks content formatting sections heading"><a href="../body-bar-classes/" data-ajax="false">Grouping and dividing content</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Icons</h3>
|
||||
<ul>
|
||||
<li data-filtertext="button icons svg disc alt custom icon position"><a href="../icons/" data-ajax="false">Icons</a></li>
|
||||
<li data-filtertext=""><a href="../icons-grunticon/" data-ajax="false">Grunticon loader</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Listview widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="listview widget thumbnails icons nested split button collapsible ul ol"><a href="../listview/" data-ajax="false">Listview</a></li>
|
||||
<li data-filtertext="autocomplete filterable reveal listview filtertextbeforefilter placeholder"><a href="../listview-autocomplete/" data-ajax="false">Listview autocomplete</a></li>
|
||||
<li data-filtertext="autocomplete filterable reveal listview remote data filtertextbeforefilter placeholder"><a href="../listview-autocomplete-remote/" data-ajax="false">Listview autocomplete remote data</a></li>
|
||||
<li data-filtertext="autodividers anchor jump scroll linkbars listview lists ul ol"><a href="../listview-autodividers-linkbar/" data-ajax="false">Listview autodividers linkbar</a></li>
|
||||
<li data-filtertext="listview autodividers selector autodividersselector lists ul ol"><a href="../listview-autodividers-selector/" data-ajax="false">Listview autodividers selector</a></li>
|
||||
<li data-filtertext="listview nested list items"><a href="../listview-nested-lists/" data-ajax="false">Listview Nested Listviews</a></li>
|
||||
<li data-filtertext="listview collapsible list items flat"><a href="../listview-collapsible-item-flat/" data-ajax="false">Listview collapsible list items (flat)</a></li>
|
||||
<li data-filtertext="listview collapsible list indented"><a href="../listview-collapsible-item-indented/" data-ajax="false">Listview collapsible list items (indented)</a></li>
|
||||
<li data-filtertext="grid listview responsive grids responsive listviews lists ul"><a href="../listview-grid/" data-ajax="false">Listview responsive grid</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="loader widget page loading navigation overlay spinner"><a href="../loader/" data-ajax="false">Loader widget</a></li>
|
||||
<li data-filtertext="navbar widget navmenu toolbars header footer"><a href="../navbar/" data-ajax="false">Navbar widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Navigation</h3>
|
||||
<ul>
|
||||
<li data-filtertext="ajax navigation navigate widget history event method"><a href="../navigation/" data-ajax="false">Navigation</a></li>
|
||||
<li data-filtertext="linking pages page links navigation ajax prefetch cache"><a href="../navigation-linking-pages/" data-ajax="false">Linking pages</a></li>
|
||||
<li data-filtertext="php redirect server redirection server-side navigation"><a href="../navigation-php-redirect/" data-ajax="false">PHP redirect demo</a></li>
|
||||
<li data-filtertext="navigation redirection hash query"><a href="../navigation-hash-processing/" data-ajax="false">Hash processing demo</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Pages</h3>
|
||||
<ul>
|
||||
<li data-filtertext="pages page widget ajax navigation"><a href="../pages/" data-ajax="false">Pages</a></li>
|
||||
<li data-filtertext="single page"><a href="../pages-single-page/" data-ajax="false">Single page</a></li>
|
||||
<li data-filtertext="multipage multi-page page"><a href="../pages-multi-page/" data-ajax="false">Multi-page template</a></li>
|
||||
<li data-filtertext="dialog page widget modal popup"><a href="../pages-dialog/" data-ajax="false">Dialog page</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Panel widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="panel widget sliding panels reveal push overlay responsive"><a href="../panel/" data-ajax="false">Panel</a></li>
|
||||
<li data-filtertext=""><a href="../panel-external/" data-ajax="false">External panels</a></li>
|
||||
<li data-filtertext="panel "><a href="../panel-fixed/" data-ajax="false">Fixed panels</a></li>
|
||||
<li data-filtertext="panel slide panels sliding panels shadow rwd responsive breakpoint"><a href="../panel-responsive/" data-ajax="false">Panels responsive</a></li>
|
||||
<li data-filtertext="panel custom style custom panel width reveal shadow listview panel styling page background wrapper"><a href="../panel-styling/" data-ajax="false">Custom panel style</a></li>
|
||||
<li data-filtertext="panel open on swipe"><a href="../panel-swipe-open/" data-ajax="false">Panel open on swipe</a></li>
|
||||
<li data-filtertext="panels outside page internal external toolbars"><a href="../panel-external-internal/" data-ajax="false">Panel external and internal</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Popup widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="popup widget popups dialog modal transition tooltip lightbox form overlay screen flip pop fade transition"><a href="../popup/" data-ajax="false">Popup</a></li>
|
||||
<li data-filtertext="popup alignment position"><a href="../popup-alignment/" data-ajax="false">Popup alignment</a></li>
|
||||
<li data-filtertext="popup arrow size popups popover"><a href="../popup-arrow-size/" data-ajax="false">Popup arrow size</a></li>
|
||||
<li data-filtertext="dynamic popups popup images lightbox"><a href="../popup-dynamic/" data-ajax="false">Dynamic popups</a></li>
|
||||
<li data-filtertext="popups with iframes scaling"><a href="../popup-iframe/" data-ajax="false">Popups with iframes</a></li>
|
||||
<li data-filtertext="popup image scaling"><a href="../popup-image-scaling/" data-ajax="false">Popup image scaling</a></li>
|
||||
<li data-filtertext="external popup outside multi-page"><a href="../popup-outside-multipage" data-ajax="false">Popup outside multi-page</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="form rangeslider widget dual sliders dual handle sliders range input"><a href="../rangeslider/" data-ajax="false">Rangeslider widget</a></li>
|
||||
<li data-filtertext="responsive web design rwd adaptive progressive enhancement PE accessible mobile breakpoints media query media queries"><a href="../rwd/" data-ajax="false">Responsive Web Design</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Selectmenu widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="form selectmenu widget select input custom select menu selects"><a href="../selectmenu/" data-ajax="false">Selectmenu</a></li>
|
||||
<li data-filtertext="form custom select menu selectmenu widget custom menu option optgroup multiple selects"><a href="../selectmenu-custom/" data-ajax="false">Custom select menu</a></li>
|
||||
<li data-filtertext="filterable select filter popup dialog"><a href="../selectmenu-custom-filter/" data-ajax="false">Custom select menu with filter</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Slider widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="form slider widget range input single sliders"><a href="../slider/" data-ajax="false">Slider</a></li>
|
||||
<li data-filtertext="form slider widget flipswitch slider binary select flip toggle switch"><a href="../slider-flipswitch/" data-ajax="false">Slider flip toggle switch</a></li>
|
||||
<li data-filtertext="form slider tooltip handle value input range sliders"><a href="../slider-tooltip/" data-ajax="false">Slider tooltip</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Table widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="table widget reflow column toggle th td responsive tables rwd hide show tabular"><a href="../table-column-toggle/" data-ajax="false">Table Column Toggle</a></li>
|
||||
<li data-filtertext="table column toggle phone comparison demo"><a href="../table-column-toggle-example/" data-ajax="false">Table Column Toggle demo</a></li>
|
||||
<li data-filtertext="responsive tables table column toggle heading groups rwd breakpoint"><a href="../table-column-toggle-heading-groups/" data-ajax="false">Table Column Toggle heading groups</a></li>
|
||||
<li data-filtertext="responsive tables table column toggle hide rwd breakpoint customization options"><a href="../table-column-toggle-options/" data-ajax="false">Table Column Toggle options</a></li>
|
||||
<li data-filtertext="table reflow th td responsive rwd columns tabular"><a href="../table-reflow/" data-ajax="false">Table Reflow</a></li>
|
||||
<li data-filtertext="responsive tables table reflow heading groups rwd breakpoint"><a href="../table-reflow-heading-groups/" data-ajax="false">Table Reflow heading groups</a></li>
|
||||
<li data-filtertext="responsive tables table reflow stripes strokes table style"><a href="../table-reflow-stripes-strokes/" data-ajax="false">Table Reflow stripes and strokes</a></li>
|
||||
<li data-filtertext="responsive tables table reflow stack custom styles"><a href="../table-reflow-styling/" data-ajax="false">Table Reflow custom styles</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="ui tabs widget"><a href="../tabs/" data-ajax="false">Tabs widget</a></li>
|
||||
<li data-filtertext="form textinput widget text input textarea number date time tel email file color password"><a href="../textinput/" data-ajax="false">Textinput widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Theming</h3>
|
||||
<ul>
|
||||
<li data-filtertext="default theme swatches theming style css"><a href="../theme-default/" data-ajax="false">Default theme</a></li>
|
||||
<li data-filtertext="classic theme old theme swatches theming style css"><a href="../theme-classic/" data-ajax="false">Classic theme</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Toolbar widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="toolbar widget header footer toolbars fixed fullscreen external sections"><a href="../toolbar/" data-ajax="false">Toolbar</a></li>
|
||||
<li data-filtertext="dynamic toolbars dynamically add toolbar header footer"><a href="../toolbar-dynamic/" data-ajax="false">Dynamic toolbars</a></li>
|
||||
<li data-filtertext="external toolbars header footer"><a href="../toolbar-external/" data-ajax="false">External toolbars</a></li>
|
||||
<li data-filtertext="fixed toolbars header footer"><a href="../toolbar-fixed/" data-ajax="false">Fixed toolbars</a></li>
|
||||
<li data-filtertext="fixed fullscreen toolbars header footer"><a href="../toolbar-fixed-fullscreen/" data-ajax="false">Fullscreen toolbars</a></li>
|
||||
<li data-filtertext="external fixed toolbars header footer"><a href="../toolbar-fixed-external/" data-ajax="false">Fixed external toolbars</a></li>
|
||||
<li data-filtertext="external persistent toolbars header footer navbar navmenu"><a href="../toolbar-fixed-persistent/" data-ajax="false">Persistent toolbars</a></li>
|
||||
<li data-filtertext="external ajax optimized toolbars persistent toolbars header footer navbar"><a href="../toolbar-fixed-persistent-optimized/" data-ajax="false">Ajax optimized toolbars</a></li>
|
||||
<li data-filtertext="form in toolbars header footer"><a href="../toolbar-fixed-forms/" data-ajax="false">Form in toolbar</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="page transitions animated pages popup navigation flip slide fade pop"><a href="../transitions/" data-ajax="false">Transitions</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>3rd party API demos</h3>
|
||||
<ul>
|
||||
<li data-filtertext="backbone requirejs navigation router"><a href="../backbone-requirejs/" data-ajax="false">Backbone RequireJS</a></li>
|
||||
<li data-filtertext="google maps geolocation demo"><a href="../map-geolocation/" data-ajax="false">Google Maps geolocation</a></li>
|
||||
<li data-filtertext="google maps hybrid"><a href="../map-list-toggle/" data-ajax="false">Google Maps list toggle</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
</ul>
|
||||
</div><!-- /panel -->
|
||||
|
||||
|
||||
<div data-role="footer" data-position="fixed" data-tap-toggle="false" class="jqm-footer">
|
||||
<p>jQuery Mobile Demos version <span class="jqm-version"></span></p>
|
||||
<p>Copyright 2014 The jQuery Foundation</p>
|
||||
</div><!-- /footer -->
|
||||
<!-- TODO: This should become an external panel so we can add input to markup (unique ID) -->
|
||||
<div data-role="panel" class="jqm-search-panel" data-position="right" data-display="overlay" data-theme="a">
|
||||
<div class="jqm-search">
|
||||
<ul class="jqm-list" data-filter-placeholder="Search demos..." data-filter-reveal="true">
|
||||
<li data-filtertext="demos homepage" data-icon="home"><a href=".././">Home</a></li>
|
||||
<li data-filtertext="introduction overview getting started"><a href="../intro/" data-ajax="false">Introduction</a></li>
|
||||
<li data-filtertext="buttons button markup buttonmarkup method anchor link button element"><a href="../button-markup/" data-ajax="false">Buttons</a></li>
|
||||
<li data-filtertext="form button widget input button submit reset"><a href="../button/" data-ajax="false">Button widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Checkboxradio widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="form checkboxradio widget checkbox input checkboxes controlgroups"><a href="../checkboxradio-checkbox/" data-ajax="false">Checkboxes</a></li>
|
||||
<li data-filtertext="form checkboxradio widget radio input radio buttons controlgroups"><a href="../checkboxradio-radio/" data-ajax="false">Radio buttons</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Collapsible (set) widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="collapsibles content formatting"><a href="../collapsible/" data-ajax="false">Collapsible</a></li>
|
||||
<li data-filtertext="dynamic collapsible set accordion append expand"><a href="../collapsible-dynamic/" data-ajax="false">Dynamic collapsibles</a></li>
|
||||
<li data-filtertext="accordions collapsible set widget content formatting grouped collapsibles"><a href="../collapsibleset/" data-ajax="false">Collapsible set</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Controlgroup widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="controlgroups selectmenu checkboxradio input grouped buttons horizontal vertical"><a href="../controlgroup/" data-ajax="false">Controlgroup</a></li>
|
||||
<li data-filtertext="dynamic controlgroup dynamically add buttons"><a href="../controlgroup-dynamic/" data-ajax="false">Dynamic controlgroups</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="form datepicker widget date input"><a href="../datepicker/" data-ajax="false">Datepicker</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Events</h3>
|
||||
<ul>
|
||||
<li data-filtertext="swipe to delete list items listviews swipe events"><a href="../swipe-list/" data-ajax="false">Swipe list items</a></li>
|
||||
<li data-filtertext="swipe to navigate swipe page navigation swipe events"><a href="../swipe-page/" data-ajax="false">Swipe page navigation</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="filterable filter elements sorting searching listview table"><a href="../filterable/" data-ajax="false">Filterable widget</a></li>
|
||||
<li data-filtertext="form flipswitch widget flip toggle switch binary select checkbox input"><a href="../flipswitch/" data-ajax="false">Flipswitch widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Forms</h3>
|
||||
<ul>
|
||||
<li data-filtertext="forms text checkbox radio range button submit reset inputs selects textarea slider flipswitch label form elements"><a href="../forms/" data-ajax="false">Forms</a></li>
|
||||
<li data-filtertext="form hide labels hidden accessible ui-hidden-accessible forms"><a href="../forms-label-hidden-accessible/" data-ajax="false">Hide labels</a></li>
|
||||
<li data-filtertext="form field containers fieldcontain ui-field-contain forms"><a href="../forms-field-contain/" data-ajax="false">Field containers</a></li>
|
||||
<li data-filtertext="forms disabled form elements"><a href="../forms-disabled/" data-ajax="false">Forms disabled</a></li>
|
||||
<li data-filtertext="forms gallery examples overview forms text checkbox radio range button submit reset inputs selects textarea slider flipswitch label form elements"><a href="../forms-gallery/" data-ajax="false">Forms gallery</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Grids</h3>
|
||||
<ul>
|
||||
<li data-filtertext="grids columns blocks content formatting rwd responsive css framework"><a href="../grids/" data-ajax="false">Grids</a></li>
|
||||
<li data-filtertext="buttons in grids css framework"><a href="../grids-buttons/" data-ajax="false">Buttons in grids</a></li>
|
||||
<li data-filtertext="custom responsive grids rwd css framework"><a href="../grids-custom-responsive/" data-ajax="false">Custom responsive grids</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="blocks content formatting sections heading"><a href="../body-bar-classes/" data-ajax="false">Grouping and dividing content</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Icons</h3>
|
||||
<ul>
|
||||
<li data-filtertext="button icons svg disc alt custom icon position"><a href="../icons/" data-ajax="false">Icons</a></li>
|
||||
<li data-filtertext=""><a href="../icons-grunticon/" data-ajax="false">Grunticon loader</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Listview widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="listview widget thumbnails icons nested split button collapsible ul ol"><a href="../listview/" data-ajax="false">Listview</a></li>
|
||||
<li data-filtertext="autocomplete filterable reveal listview filtertextbeforefilter placeholder"><a href="../listview-autocomplete/" data-ajax="false">Listview autocomplete</a></li>
|
||||
<li data-filtertext="autocomplete filterable reveal listview remote data filtertextbeforefilter placeholder"><a href="../listview-autocomplete-remote/" data-ajax="false">Listview autocomplete remote data</a></li>
|
||||
<li data-filtertext="autodividers anchor jump scroll linkbars listview lists ul ol"><a href="../listview-autodividers-linkbar/" data-ajax="false">Listview autodividers linkbar</a></li>
|
||||
<li data-filtertext="listview autodividers selector autodividersselector lists ul ol"><a href="../listview-autodividers-selector/" data-ajax="false">Listview autodividers selector</a></li>
|
||||
<li data-filtertext="listview nested list items"><a href="../listview-nested-lists/" data-ajax="false">Listview Nested Listviews</a></li>
|
||||
<li data-filtertext="listview collapsible list items flat"><a href="../listview-collapsible-item-flat/" data-ajax="false">Listview collapsible list items (flat)</a></li>
|
||||
<li data-filtertext="listview collapsible list indented"><a href="../listview-collapsible-item-indented/" data-ajax="false">Listview collapsible list items (indented)</a></li>
|
||||
<li data-filtertext="grid listview responsive grids responsive listviews lists ul"><a href="../listview-grid/" data-ajax="false">Listview responsive grid</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="loader widget page loading navigation overlay spinner"><a href="../loader/" data-ajax="false">Loader widget</a></li>
|
||||
<li data-filtertext="navbar widget navmenu toolbars header footer"><a href="../navbar/" data-ajax="false">Navbar widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Navigation</h3>
|
||||
<ul>
|
||||
<li data-filtertext="ajax navigation navigate widget history event method"><a href="../navigation/" data-ajax="false">Navigation</a></li>
|
||||
<li data-filtertext="linking pages page links navigation ajax prefetch cache"><a href="../navigation-linking-pages/" data-ajax="false">Linking pages</a></li>
|
||||
<li data-filtertext="php redirect server redirection server-side navigation"><a href="../navigation-php-redirect/" data-ajax="false">PHP redirect demo</a></li>
|
||||
<li data-filtertext="navigation redirection hash query"><a href="../navigation-hash-processing/" data-ajax="false">Hash processing demo</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Pages</h3>
|
||||
<ul>
|
||||
<li data-filtertext="pages page widget ajax navigation"><a href="../pages/" data-ajax="false">Pages</a></li>
|
||||
<li data-filtertext="single page"><a href="../pages-single-page/" data-ajax="false">Single page</a></li>
|
||||
<li data-filtertext="multipage multi-page page"><a href="../pages-multi-page/" data-ajax="false">Multi-page template</a></li>
|
||||
<li data-filtertext="dialog page widget modal popup"><a href="../pages-dialog/" data-ajax="false">Dialog page</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Panel widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="panel widget sliding panels reveal push overlay responsive"><a href="../panel/" data-ajax="false">Panel</a></li>
|
||||
<li data-filtertext=""><a href="../panel-external/" data-ajax="false">External panels</a></li>
|
||||
<li data-filtertext="panel "><a href="../panel-fixed/" data-ajax="false">Fixed panels</a></li>
|
||||
<li data-filtertext="panel slide panels sliding panels shadow rwd responsive breakpoint"><a href="../panel-responsive/" data-ajax="false">Panels responsive</a></li>
|
||||
<li data-filtertext="panel custom style custom panel width reveal shadow listview panel styling page background wrapper"><a href="../panel-styling/" data-ajax="false">Custom panel style</a></li>
|
||||
<li data-filtertext="panel open on swipe"><a href="../panel-swipe-open/" data-ajax="false">Panel open on swipe</a></li>
|
||||
<li data-filtertext="panels outside page internal external toolbars"><a href="../panel-external-internal/" data-ajax="false">Panel external and internal</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Popup widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="popup widget popups dialog modal transition tooltip lightbox form overlay screen flip pop fade transition"><a href="../popup/" data-ajax="false">Popup</a></li>
|
||||
<li data-filtertext="popup alignment position"><a href="../popup-alignment/" data-ajax="false">Popup alignment</a></li>
|
||||
<li data-filtertext="popup arrow size popups popover"><a href="../popup-arrow-size/" data-ajax="false">Popup arrow size</a></li>
|
||||
<li data-filtertext="dynamic popups popup images lightbox"><a href="../popup-dynamic/" data-ajax="false">Dynamic popups</a></li>
|
||||
<li data-filtertext="popups with iframes scaling"><a href="../popup-iframe/" data-ajax="false">Popups with iframes</a></li>
|
||||
<li data-filtertext="popup image scaling"><a href="../popup-image-scaling/" data-ajax="false">Popup image scaling</a></li>
|
||||
<li data-filtertext="external popup outside multi-page"><a href="../popup-outside-multipage" data-ajax="false">Popup outside multi-page</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="form rangeslider widget dual sliders dual handle sliders range input"><a href="../rangeslider/" data-ajax="false">Rangeslider widget</a></li>
|
||||
<li data-filtertext="responsive web design rwd adaptive progressive enhancement PE accessible mobile breakpoints media query media queries"><a href="../rwd/" data-ajax="false">Responsive Web Design</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Selectmenu widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="form selectmenu widget select input custom select menu selects"><a href="../selectmenu/" data-ajax="false">Selectmenu</a></li>
|
||||
<li data-filtertext="form custom select menu selectmenu widget custom menu option optgroup multiple selects"><a href="../selectmenu-custom/" data-ajax="false">Custom select menu</a></li>
|
||||
<li data-filtertext="filterable select filter popup dialog"><a href="../selectmenu-custom-filter/" data-ajax="false">Custom select menu with filter</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Slider widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="form slider widget range input single sliders"><a href="../slider/" data-ajax="false">Slider</a></li>
|
||||
<li data-filtertext="form slider widget flipswitch slider binary select flip toggle switch"><a href="../slider-flipswitch/" data-ajax="false">Slider flip toggle switch</a></li>
|
||||
<li data-filtertext="form slider tooltip handle value input range sliders"><a href="../slider-tooltip/" data-ajax="false">Slider tooltip</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Table widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="table widget reflow column toggle th td responsive tables rwd hide show tabular"><a href="../table-column-toggle/" data-ajax="false">Table Column Toggle</a></li>
|
||||
<li data-filtertext="table column toggle phone comparison demo"><a href="../table-column-toggle-example/" data-ajax="false">Table Column Toggle demo</a></li>
|
||||
<li data-filtertext="responsive tables table column toggle heading groups rwd breakpoint"><a href="../table-column-toggle-heading-groups/" data-ajax="false">Table Column Toggle heading groups</a></li>
|
||||
<li data-filtertext="responsive tables table column toggle hide rwd breakpoint customization options"><a href="../table-column-toggle-options/" data-ajax="false">Table Column Toggle options</a></li>
|
||||
<li data-filtertext="table reflow th td responsive rwd columns tabular"><a href="../table-reflow/" data-ajax="false">Table Reflow</a></li>
|
||||
<li data-filtertext="responsive tables table reflow heading groups rwd breakpoint"><a href="../table-reflow-heading-groups/" data-ajax="false">Table Reflow heading groups</a></li>
|
||||
<li data-filtertext="responsive tables table reflow stripes strokes table style"><a href="../table-reflow-stripes-strokes/" data-ajax="false">Table Reflow stripes and strokes</a></li>
|
||||
<li data-filtertext="responsive tables table reflow stack custom styles"><a href="../table-reflow-styling/" data-ajax="false">Table Reflow custom styles</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="ui tabs widget"><a href="../tabs/" data-ajax="false">Tabs widget</a></li>
|
||||
<li data-filtertext="form textinput widget text input textarea number date time tel email file color password"><a href="../textinput/" data-ajax="false">Textinput widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Theming</h3>
|
||||
<ul>
|
||||
<li data-filtertext="default theme swatches theming style css"><a href="../theme-default/" data-ajax="false">Default theme</a></li>
|
||||
<li data-filtertext="classic theme old theme swatches theming style css"><a href="../theme-classic/" data-ajax="false">Classic theme</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Toolbar widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="toolbar widget header footer toolbars fixed fullscreen external sections"><a href="../toolbar/" data-ajax="false">Toolbar</a></li>
|
||||
<li data-filtertext="dynamic toolbars dynamically add toolbar header footer"><a href="../toolbar-dynamic/" data-ajax="false">Dynamic toolbars</a></li>
|
||||
<li data-filtertext="external toolbars header footer"><a href="../toolbar-external/" data-ajax="false">External toolbars</a></li>
|
||||
<li data-filtertext="fixed toolbars header footer"><a href="../toolbar-fixed/" data-ajax="false">Fixed toolbars</a></li>
|
||||
<li data-filtertext="fixed fullscreen toolbars header footer"><a href="../toolbar-fixed-fullscreen/" data-ajax="false">Fullscreen toolbars</a></li>
|
||||
<li data-filtertext="external fixed toolbars header footer"><a href="../toolbar-fixed-external/" data-ajax="false">Fixed external toolbars</a></li>
|
||||
<li data-filtertext="external persistent toolbars header footer navbar navmenu"><a href="../toolbar-fixed-persistent/" data-ajax="false">Persistent toolbars</a></li>
|
||||
<li data-filtertext="external ajax optimized toolbars persistent toolbars header footer navbar"><a href="../toolbar-fixed-persistent-optimized/" data-ajax="false">Ajax optimized toolbars</a></li>
|
||||
<li data-filtertext="form in toolbars header footer"><a href="../toolbar-fixed-forms/" data-ajax="false">Form in toolbar</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="page transitions animated pages popup navigation flip slide fade pop"><a href="../transitions/" data-ajax="false">Transitions</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>3rd party API demos</h3>
|
||||
<ul>
|
||||
<li data-filtertext="backbone requirejs navigation router"><a href="../backbone-requirejs/" data-ajax="false">Backbone RequireJS</a></li>
|
||||
<li data-filtertext="google maps geolocation demo"><a href="../map-geolocation/" data-ajax="false">Google Maps geolocation</a></li>
|
||||
<li data-filtertext="google maps hybrid"><a href="../map-list-toggle/" data-ajax="false">Google Maps list toggle</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- /panel -->
|
||||
|
||||
|
||||
</div><!-- /page -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
540
js/libs/jquery.mobile/demos/button-markup/index.html
Normal file
540
js/libs/jquery.mobile/demos/button-markup/index.html
Normal file
@ -0,0 +1,540 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Button markup - jQuery Mobile Demos</title>
|
||||
<link rel="shortcut icon" href="../favicon.ico">
|
||||
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
|
||||
<link rel="stylesheet" href="../css/themes/default/jquery.mobile-1.4.2.min.css">
|
||||
<link rel="stylesheet" href="../_assets/css/jqm-demos.css">
|
||||
<script src="../js/jquery.js"></script>
|
||||
<script src="../_assets/js/index.js"></script>
|
||||
<script src="../js/jquery.mobile-1.4.2.min.js"></script>
|
||||
<style>
|
||||
#custom-border-radius .ui-btn-icon-notext.ui-corner-all {
|
||||
-webkit-border-radius: .3125em;
|
||||
border-radius: .3125em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div data-role="page" class="jqm-demos" data-quicklinks="true">
|
||||
|
||||
<div data-role="header" class="jqm-header">
|
||||
<h2><a href="../" title="jQuery Mobile Demos home"><img src="../_assets/img/jquery-logo.png" alt="jQuery Mobile"></a></h2>
|
||||
<p><span class="jqm-version"></span> Demos</p>
|
||||
<a href="#" class="jqm-navmenu-link ui-btn ui-btn-icon-notext ui-corner-all ui-icon-bars ui-nodisc-icon ui-alt-icon ui-btn-left">Menu</a>
|
||||
<a href="#" class="jqm-search-link ui-btn ui-btn-icon-notext ui-corner-all ui-icon-search ui-nodisc-icon ui-alt-icon ui-btn-right">Search</a>
|
||||
</div><!-- /header -->
|
||||
|
||||
<div role="main" class="ui-content jqm-content">
|
||||
|
||||
<h1>Button markup</h1>
|
||||
|
||||
<p>Add classes to style <code>a</code> and <code>button</code> elements. <code>input</code> buttons are enhanced by the button widget. See <a href="../button/" data-ajax="false">this page</a> for examples.</p>
|
||||
|
||||
<p>Note that in 1.4 <code>data-</code> attributes will still work. The deprecated <code>buttonMarkup</code> method will add the applicable classes to <code>a</code> (with <code>data-role="button"</code>) and <code>button</code> elements. This method also adds the <code>role="button"</code> attribute to anchor elements.</p>
|
||||
|
||||
<h2>Basic markup</h2>
|
||||
|
||||
<div data-demo-html="true">
|
||||
<a href="#" class="ui-btn">Anchor</a>
|
||||
<button class="ui-btn">Button</button>
|
||||
</div><!--/demo-html -->
|
||||
|
||||
<h2>Corners</h2>
|
||||
|
||||
<div data-demo-html="true">
|
||||
<a href="#" class="ui-btn ui-corner-all">Anchor</a>
|
||||
<button class="ui-btn ui-corner-all">Button</button>
|
||||
</div><!--/demo-html -->
|
||||
|
||||
<p>Icon-only buttons are round by default. Here we show how you can set the same border-radius as other buttons.</p>
|
||||
|
||||
<div data-demo-html="true" data-demo-css="true">
|
||||
<a href="#" class="ui-btn ui-icon-delete ui-btn-icon-notext ui-corner-all">No text</a>
|
||||
<div id="custom-border-radius">
|
||||
<a href="#" class="ui-btn ui-icon-delete ui-btn-icon-notext ui-corner-all">No text</a>
|
||||
</div>
|
||||
</div><!--/demo-html -->
|
||||
|
||||
<h2>Shadow</h2>
|
||||
|
||||
<div data-demo-html="true">
|
||||
<a href="#" class="ui-btn ui-shadow">Anchor</a>
|
||||
<button class="ui-btn ui-shadow">Button</button>
|
||||
</div><!--/demo-html -->
|
||||
|
||||
<h2>Inline</h2>
|
||||
|
||||
<div data-demo-html="true">
|
||||
<a href="#" class="ui-btn ui-btn-inline">Anchor</a>
|
||||
<button class="ui-btn ui-btn-inline">Button</button>
|
||||
</div><!--/demo-html -->
|
||||
|
||||
<h2>Theme</h2>
|
||||
|
||||
<div data-demo-html="true">
|
||||
<a href="#" class="ui-btn">Anchor - Inherit</a>
|
||||
<a href="#" class="ui-btn ui-btn-a">Anchor - Theme swatch A</a>
|
||||
<a href="#" class="ui-btn ui-btn-b">Anchor - Theme swatch B</a>
|
||||
<button class="ui-btn">Button - Inherit</button>
|
||||
<button class="ui-btn ui-btn-a">Button - Theme swatch A</button>
|
||||
<button class="ui-btn ui-btn-b">Button - Theme swatch B</button>
|
||||
</div><!--/demo-html -->
|
||||
|
||||
<h2>Mini</h2>
|
||||
|
||||
<div data-demo-html="true">
|
||||
<a href="#" class="ui-btn ui-mini">Anchor</a>
|
||||
<button class="ui-btn ui-mini">Button</button>
|
||||
</div><!--/demo-html -->
|
||||
|
||||
<h2>Icons</h2>
|
||||
|
||||
<div data-demo-html="true">
|
||||
<a href="#" class="ui-btn ui-icon-delete ui-btn-icon-left">Anchor</a>
|
||||
<button class="ui-btn ui-icon-delete ui-btn-icon-left">Button</button>
|
||||
</div><!--/demo-html -->
|
||||
|
||||
<h2>Icon position</h2>
|
||||
|
||||
<div data-demo-html="true">
|
||||
<a href="#" class="ui-btn ui-icon-delete ui-btn-icon-left">Left</a>
|
||||
<a href="#" class="ui-btn ui-icon-delete ui-btn-icon-right">Right</a>
|
||||
<a href="#" class="ui-btn ui-icon-delete ui-btn-icon-top">Top</a>
|
||||
<a href="#" class="ui-btn ui-icon-delete ui-btn-icon-bottom">Bottom</a>
|
||||
<a href="#" class="ui-btn ui-icon-delete ui-btn-icon-notext">Icon only</a>
|
||||
</div><!--/demo-html -->
|
||||
|
||||
<p>Inline:</p>
|
||||
|
||||
<div data-demo-html="true">
|
||||
<a href="#" class="ui-btn ui-btn-inline ui-icon-delete ui-btn-icon-left">Left</a>
|
||||
<a href="#" class="ui-btn ui-btn-inline ui-icon-delete ui-btn-icon-right">Right</a>
|
||||
<a href="#" class="ui-btn ui-btn-inline ui-icon-delete ui-btn-icon-top">Top</a>
|
||||
<a href="#" class="ui-btn ui-btn-inline ui-icon-delete ui-btn-icon-bottom">Bottom</a>
|
||||
<a href="#" class="ui-btn ui-btn-inline ui-icon-delete ui-btn-icon-notext">Icon only</a>
|
||||
</div><!--/demo-html -->
|
||||
|
||||
<h2>Icon shadow</h2>
|
||||
<p>Note: This styling option is deprecated in jQuery Mobile 1.4.0 and will be removed in 1.5.0. Accordingly, we changed the default for framework-enhanced buttons to false.</p>
|
||||
|
||||
<div data-demo-html="true">
|
||||
<a href="#" class="ui-btn ui-icon-delete ui-btn-icon-left ui-shadow-icon">Anchor</a>
|
||||
<p>Theme B:</p>
|
||||
<button class="ui-btn ui-icon-delete ui-btn-icon-left ui-shadow-icon ui-btn-b">Button</button>
|
||||
</div><!--/demo-html -->
|
||||
|
||||
<h2>Disabled</h2>
|
||||
|
||||
<div data-demo-html="true">
|
||||
<a href="#" class="ui-btn ui-state-disabled">Disabled anchor via class</a>
|
||||
<button disabled>Button with disabled attribute</button>
|
||||
</div><!--/demo-html -->
|
||||
|
||||
<h2>Native button</h2>
|
||||
<!-- TODO: Remove this demo in 1.5 -->
|
||||
<p>In 1.4 <code>button</code> will still be auto-enhanced. This example shows how you can prevent this.</p>
|
||||
|
||||
<div data-demo-html="true">
|
||||
<button data-role="none">Button</button>
|
||||
</div><!--/demo-html -->
|
||||
|
||||
</div><!-- /content -->
|
||||
<div data-role="panel" class="jqm-navmenu-panel" data-position="left" data-display="overlay" data-theme="a">
|
||||
<ul class="jqm-list ui-alt-icon ui-nodisc-icon">
|
||||
<li data-filtertext="demos homepage" data-icon="home"><a href=".././">Home</a></li>
|
||||
<li data-filtertext="introduction overview getting started"><a href="../intro/" data-ajax="false">Introduction</a></li>
|
||||
<li data-filtertext="buttons button markup buttonmarkup method anchor link button element"><a href="../button-markup/" data-ajax="false">Buttons</a></li>
|
||||
<li data-filtertext="form button widget input button submit reset"><a href="../button/" data-ajax="false">Button widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Checkboxradio widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="form checkboxradio widget checkbox input checkboxes controlgroups"><a href="../checkboxradio-checkbox/" data-ajax="false">Checkboxes</a></li>
|
||||
<li data-filtertext="form checkboxradio widget radio input radio buttons controlgroups"><a href="../checkboxradio-radio/" data-ajax="false">Radio buttons</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Collapsible (set) widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="collapsibles content formatting"><a href="../collapsible/" data-ajax="false">Collapsible</a></li>
|
||||
<li data-filtertext="dynamic collapsible set accordion append expand"><a href="../collapsible-dynamic/" data-ajax="false">Dynamic collapsibles</a></li>
|
||||
<li data-filtertext="accordions collapsible set widget content formatting grouped collapsibles"><a href="../collapsibleset/" data-ajax="false">Collapsible set</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Controlgroup widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="controlgroups selectmenu checkboxradio input grouped buttons horizontal vertical"><a href="../controlgroup/" data-ajax="false">Controlgroup</a></li>
|
||||
<li data-filtertext="dynamic controlgroup dynamically add buttons"><a href="../controlgroup-dynamic/" data-ajax="false">Dynamic controlgroups</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="form datepicker widget date input"><a href="../datepicker/" data-ajax="false">Datepicker</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Events</h3>
|
||||
<ul>
|
||||
<li data-filtertext="swipe to delete list items listviews swipe events"><a href="../swipe-list/" data-ajax="false">Swipe list items</a></li>
|
||||
<li data-filtertext="swipe to navigate swipe page navigation swipe events"><a href="../swipe-page/" data-ajax="false">Swipe page navigation</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="filterable filter elements sorting searching listview table"><a href="../filterable/" data-ajax="false">Filterable widget</a></li>
|
||||
<li data-filtertext="form flipswitch widget flip toggle switch binary select checkbox input"><a href="../flipswitch/" data-ajax="false">Flipswitch widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Forms</h3>
|
||||
<ul>
|
||||
<li data-filtertext="forms text checkbox radio range button submit reset inputs selects textarea slider flipswitch label form elements"><a href="../forms/" data-ajax="false">Forms</a></li>
|
||||
<li data-filtertext="form hide labels hidden accessible ui-hidden-accessible forms"><a href="../forms-label-hidden-accessible/" data-ajax="false">Hide labels</a></li>
|
||||
<li data-filtertext="form field containers fieldcontain ui-field-contain forms"><a href="../forms-field-contain/" data-ajax="false">Field containers</a></li>
|
||||
<li data-filtertext="forms disabled form elements"><a href="../forms-disabled/" data-ajax="false">Forms disabled</a></li>
|
||||
<li data-filtertext="forms gallery examples overview forms text checkbox radio range button submit reset inputs selects textarea slider flipswitch label form elements"><a href="../forms-gallery/" data-ajax="false">Forms gallery</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Grids</h3>
|
||||
<ul>
|
||||
<li data-filtertext="grids columns blocks content formatting rwd responsive css framework"><a href="../grids/" data-ajax="false">Grids</a></li>
|
||||
<li data-filtertext="buttons in grids css framework"><a href="../grids-buttons/" data-ajax="false">Buttons in grids</a></li>
|
||||
<li data-filtertext="custom responsive grids rwd css framework"><a href="../grids-custom-responsive/" data-ajax="false">Custom responsive grids</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="blocks content formatting sections heading"><a href="../body-bar-classes/" data-ajax="false">Grouping and dividing content</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Icons</h3>
|
||||
<ul>
|
||||
<li data-filtertext="button icons svg disc alt custom icon position"><a href="../icons/" data-ajax="false">Icons</a></li>
|
||||
<li data-filtertext=""><a href="../icons-grunticon/" data-ajax="false">Grunticon loader</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Listview widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="listview widget thumbnails icons nested split button collapsible ul ol"><a href="../listview/" data-ajax="false">Listview</a></li>
|
||||
<li data-filtertext="autocomplete filterable reveal listview filtertextbeforefilter placeholder"><a href="../listview-autocomplete/" data-ajax="false">Listview autocomplete</a></li>
|
||||
<li data-filtertext="autocomplete filterable reveal listview remote data filtertextbeforefilter placeholder"><a href="../listview-autocomplete-remote/" data-ajax="false">Listview autocomplete remote data</a></li>
|
||||
<li data-filtertext="autodividers anchor jump scroll linkbars listview lists ul ol"><a href="../listview-autodividers-linkbar/" data-ajax="false">Listview autodividers linkbar</a></li>
|
||||
<li data-filtertext="listview autodividers selector autodividersselector lists ul ol"><a href="../listview-autodividers-selector/" data-ajax="false">Listview autodividers selector</a></li>
|
||||
<li data-filtertext="listview nested list items"><a href="../listview-nested-lists/" data-ajax="false">Listview Nested Listviews</a></li>
|
||||
<li data-filtertext="listview collapsible list items flat"><a href="../listview-collapsible-item-flat/" data-ajax="false">Listview collapsible list items (flat)</a></li>
|
||||
<li data-filtertext="listview collapsible list indented"><a href="../listview-collapsible-item-indented/" data-ajax="false">Listview collapsible list items (indented)</a></li>
|
||||
<li data-filtertext="grid listview responsive grids responsive listviews lists ul"><a href="../listview-grid/" data-ajax="false">Listview responsive grid</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="loader widget page loading navigation overlay spinner"><a href="../loader/" data-ajax="false">Loader widget</a></li>
|
||||
<li data-filtertext="navbar widget navmenu toolbars header footer"><a href="../navbar/" data-ajax="false">Navbar widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Navigation</h3>
|
||||
<ul>
|
||||
<li data-filtertext="ajax navigation navigate widget history event method"><a href="../navigation/" data-ajax="false">Navigation</a></li>
|
||||
<li data-filtertext="linking pages page links navigation ajax prefetch cache"><a href="../navigation-linking-pages/" data-ajax="false">Linking pages</a></li>
|
||||
<li data-filtertext="php redirect server redirection server-side navigation"><a href="../navigation-php-redirect/" data-ajax="false">PHP redirect demo</a></li>
|
||||
<li data-filtertext="navigation redirection hash query"><a href="../navigation-hash-processing/" data-ajax="false">Hash processing demo</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Pages</h3>
|
||||
<ul>
|
||||
<li data-filtertext="pages page widget ajax navigation"><a href="../pages/" data-ajax="false">Pages</a></li>
|
||||
<li data-filtertext="single page"><a href="../pages-single-page/" data-ajax="false">Single page</a></li>
|
||||
<li data-filtertext="multipage multi-page page"><a href="../pages-multi-page/" data-ajax="false">Multi-page template</a></li>
|
||||
<li data-filtertext="dialog page widget modal popup"><a href="../pages-dialog/" data-ajax="false">Dialog page</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Panel widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="panel widget sliding panels reveal push overlay responsive"><a href="../panel/" data-ajax="false">Panel</a></li>
|
||||
<li data-filtertext=""><a href="../panel-external/" data-ajax="false">External panels</a></li>
|
||||
<li data-filtertext="panel "><a href="../panel-fixed/" data-ajax="false">Fixed panels</a></li>
|
||||
<li data-filtertext="panel slide panels sliding panels shadow rwd responsive breakpoint"><a href="../panel-responsive/" data-ajax="false">Panels responsive</a></li>
|
||||
<li data-filtertext="panel custom style custom panel width reveal shadow listview panel styling page background wrapper"><a href="../panel-styling/" data-ajax="false">Custom panel style</a></li>
|
||||
<li data-filtertext="panel open on swipe"><a href="../panel-swipe-open/" data-ajax="false">Panel open on swipe</a></li>
|
||||
<li data-filtertext="panels outside page internal external toolbars"><a href="../panel-external-internal/" data-ajax="false">Panel external and internal</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Popup widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="popup widget popups dialog modal transition tooltip lightbox form overlay screen flip pop fade transition"><a href="../popup/" data-ajax="false">Popup</a></li>
|
||||
<li data-filtertext="popup alignment position"><a href="../popup-alignment/" data-ajax="false">Popup alignment</a></li>
|
||||
<li data-filtertext="popup arrow size popups popover"><a href="../popup-arrow-size/" data-ajax="false">Popup arrow size</a></li>
|
||||
<li data-filtertext="dynamic popups popup images lightbox"><a href="../popup-dynamic/" data-ajax="false">Dynamic popups</a></li>
|
||||
<li data-filtertext="popups with iframes scaling"><a href="../popup-iframe/" data-ajax="false">Popups with iframes</a></li>
|
||||
<li data-filtertext="popup image scaling"><a href="../popup-image-scaling/" data-ajax="false">Popup image scaling</a></li>
|
||||
<li data-filtertext="external popup outside multi-page"><a href="../popup-outside-multipage" data-ajax="false">Popup outside multi-page</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="form rangeslider widget dual sliders dual handle sliders range input"><a href="../rangeslider/" data-ajax="false">Rangeslider widget</a></li>
|
||||
<li data-filtertext="responsive web design rwd adaptive progressive enhancement PE accessible mobile breakpoints media query media queries"><a href="../rwd/" data-ajax="false">Responsive Web Design</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Selectmenu widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="form selectmenu widget select input custom select menu selects"><a href="../selectmenu/" data-ajax="false">Selectmenu</a></li>
|
||||
<li data-filtertext="form custom select menu selectmenu widget custom menu option optgroup multiple selects"><a href="../selectmenu-custom/" data-ajax="false">Custom select menu</a></li>
|
||||
<li data-filtertext="filterable select filter popup dialog"><a href="../selectmenu-custom-filter/" data-ajax="false">Custom select menu with filter</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Slider widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="form slider widget range input single sliders"><a href="../slider/" data-ajax="false">Slider</a></li>
|
||||
<li data-filtertext="form slider widget flipswitch slider binary select flip toggle switch"><a href="../slider-flipswitch/" data-ajax="false">Slider flip toggle switch</a></li>
|
||||
<li data-filtertext="form slider tooltip handle value input range sliders"><a href="../slider-tooltip/" data-ajax="false">Slider tooltip</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Table widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="table widget reflow column toggle th td responsive tables rwd hide show tabular"><a href="../table-column-toggle/" data-ajax="false">Table Column Toggle</a></li>
|
||||
<li data-filtertext="table column toggle phone comparison demo"><a href="../table-column-toggle-example/" data-ajax="false">Table Column Toggle demo</a></li>
|
||||
<li data-filtertext="responsive tables table column toggle heading groups rwd breakpoint"><a href="../table-column-toggle-heading-groups/" data-ajax="false">Table Column Toggle heading groups</a></li>
|
||||
<li data-filtertext="responsive tables table column toggle hide rwd breakpoint customization options"><a href="../table-column-toggle-options/" data-ajax="false">Table Column Toggle options</a></li>
|
||||
<li data-filtertext="table reflow th td responsive rwd columns tabular"><a href="../table-reflow/" data-ajax="false">Table Reflow</a></li>
|
||||
<li data-filtertext="responsive tables table reflow heading groups rwd breakpoint"><a href="../table-reflow-heading-groups/" data-ajax="false">Table Reflow heading groups</a></li>
|
||||
<li data-filtertext="responsive tables table reflow stripes strokes table style"><a href="../table-reflow-stripes-strokes/" data-ajax="false">Table Reflow stripes and strokes</a></li>
|
||||
<li data-filtertext="responsive tables table reflow stack custom styles"><a href="../table-reflow-styling/" data-ajax="false">Table Reflow custom styles</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="ui tabs widget"><a href="../tabs/" data-ajax="false">Tabs widget</a></li>
|
||||
<li data-filtertext="form textinput widget text input textarea number date time tel email file color password"><a href="../textinput/" data-ajax="false">Textinput widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Theming</h3>
|
||||
<ul>
|
||||
<li data-filtertext="default theme swatches theming style css"><a href="../theme-default/" data-ajax="false">Default theme</a></li>
|
||||
<li data-filtertext="classic theme old theme swatches theming style css"><a href="../theme-classic/" data-ajax="false">Classic theme</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Toolbar widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="toolbar widget header footer toolbars fixed fullscreen external sections"><a href="../toolbar/" data-ajax="false">Toolbar</a></li>
|
||||
<li data-filtertext="dynamic toolbars dynamically add toolbar header footer"><a href="../toolbar-dynamic/" data-ajax="false">Dynamic toolbars</a></li>
|
||||
<li data-filtertext="external toolbars header footer"><a href="../toolbar-external/" data-ajax="false">External toolbars</a></li>
|
||||
<li data-filtertext="fixed toolbars header footer"><a href="../toolbar-fixed/" data-ajax="false">Fixed toolbars</a></li>
|
||||
<li data-filtertext="fixed fullscreen toolbars header footer"><a href="../toolbar-fixed-fullscreen/" data-ajax="false">Fullscreen toolbars</a></li>
|
||||
<li data-filtertext="external fixed toolbars header footer"><a href="../toolbar-fixed-external/" data-ajax="false">Fixed external toolbars</a></li>
|
||||
<li data-filtertext="external persistent toolbars header footer navbar navmenu"><a href="../toolbar-fixed-persistent/" data-ajax="false">Persistent toolbars</a></li>
|
||||
<li data-filtertext="external ajax optimized toolbars persistent toolbars header footer navbar"><a href="../toolbar-fixed-persistent-optimized/" data-ajax="false">Ajax optimized toolbars</a></li>
|
||||
<li data-filtertext="form in toolbars header footer"><a href="../toolbar-fixed-forms/" data-ajax="false">Form in toolbar</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="page transitions animated pages popup navigation flip slide fade pop"><a href="../transitions/" data-ajax="false">Transitions</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>3rd party API demos</h3>
|
||||
<ul>
|
||||
<li data-filtertext="backbone requirejs navigation router"><a href="../backbone-requirejs/" data-ajax="false">Backbone RequireJS</a></li>
|
||||
<li data-filtertext="google maps geolocation demo"><a href="../map-geolocation/" data-ajax="false">Google Maps geolocation</a></li>
|
||||
<li data-filtertext="google maps hybrid"><a href="../map-list-toggle/" data-ajax="false">Google Maps list toggle</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
</ul>
|
||||
</div><!-- /panel -->
|
||||
|
||||
|
||||
<div data-role="footer" data-position="fixed" data-tap-toggle="false" class="jqm-footer">
|
||||
<p>jQuery Mobile Demos version <span class="jqm-version"></span></p>
|
||||
<p>Copyright 2014 The jQuery Foundation</p>
|
||||
</div><!-- /footer -->
|
||||
<!-- TODO: This should become an external panel so we can add input to markup (unique ID) -->
|
||||
<div data-role="panel" class="jqm-search-panel" data-position="right" data-display="overlay" data-theme="a">
|
||||
<div class="jqm-search">
|
||||
<ul class="jqm-list" data-filter-placeholder="Search demos..." data-filter-reveal="true">
|
||||
<li data-filtertext="demos homepage" data-icon="home"><a href=".././">Home</a></li>
|
||||
<li data-filtertext="introduction overview getting started"><a href="../intro/" data-ajax="false">Introduction</a></li>
|
||||
<li data-filtertext="buttons button markup buttonmarkup method anchor link button element"><a href="../button-markup/" data-ajax="false">Buttons</a></li>
|
||||
<li data-filtertext="form button widget input button submit reset"><a href="../button/" data-ajax="false">Button widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Checkboxradio widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="form checkboxradio widget checkbox input checkboxes controlgroups"><a href="../checkboxradio-checkbox/" data-ajax="false">Checkboxes</a></li>
|
||||
<li data-filtertext="form checkboxradio widget radio input radio buttons controlgroups"><a href="../checkboxradio-radio/" data-ajax="false">Radio buttons</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Collapsible (set) widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="collapsibles content formatting"><a href="../collapsible/" data-ajax="false">Collapsible</a></li>
|
||||
<li data-filtertext="dynamic collapsible set accordion append expand"><a href="../collapsible-dynamic/" data-ajax="false">Dynamic collapsibles</a></li>
|
||||
<li data-filtertext="accordions collapsible set widget content formatting grouped collapsibles"><a href="../collapsibleset/" data-ajax="false">Collapsible set</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Controlgroup widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="controlgroups selectmenu checkboxradio input grouped buttons horizontal vertical"><a href="../controlgroup/" data-ajax="false">Controlgroup</a></li>
|
||||
<li data-filtertext="dynamic controlgroup dynamically add buttons"><a href="../controlgroup-dynamic/" data-ajax="false">Dynamic controlgroups</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="form datepicker widget date input"><a href="../datepicker/" data-ajax="false">Datepicker</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Events</h3>
|
||||
<ul>
|
||||
<li data-filtertext="swipe to delete list items listviews swipe events"><a href="../swipe-list/" data-ajax="false">Swipe list items</a></li>
|
||||
<li data-filtertext="swipe to navigate swipe page navigation swipe events"><a href="../swipe-page/" data-ajax="false">Swipe page navigation</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="filterable filter elements sorting searching listview table"><a href="../filterable/" data-ajax="false">Filterable widget</a></li>
|
||||
<li data-filtertext="form flipswitch widget flip toggle switch binary select checkbox input"><a href="../flipswitch/" data-ajax="false">Flipswitch widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Forms</h3>
|
||||
<ul>
|
||||
<li data-filtertext="forms text checkbox radio range button submit reset inputs selects textarea slider flipswitch label form elements"><a href="../forms/" data-ajax="false">Forms</a></li>
|
||||
<li data-filtertext="form hide labels hidden accessible ui-hidden-accessible forms"><a href="../forms-label-hidden-accessible/" data-ajax="false">Hide labels</a></li>
|
||||
<li data-filtertext="form field containers fieldcontain ui-field-contain forms"><a href="../forms-field-contain/" data-ajax="false">Field containers</a></li>
|
||||
<li data-filtertext="forms disabled form elements"><a href="../forms-disabled/" data-ajax="false">Forms disabled</a></li>
|
||||
<li data-filtertext="forms gallery examples overview forms text checkbox radio range button submit reset inputs selects textarea slider flipswitch label form elements"><a href="../forms-gallery/" data-ajax="false">Forms gallery</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Grids</h3>
|
||||
<ul>
|
||||
<li data-filtertext="grids columns blocks content formatting rwd responsive css framework"><a href="../grids/" data-ajax="false">Grids</a></li>
|
||||
<li data-filtertext="buttons in grids css framework"><a href="../grids-buttons/" data-ajax="false">Buttons in grids</a></li>
|
||||
<li data-filtertext="custom responsive grids rwd css framework"><a href="../grids-custom-responsive/" data-ajax="false">Custom responsive grids</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="blocks content formatting sections heading"><a href="../body-bar-classes/" data-ajax="false">Grouping and dividing content</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Icons</h3>
|
||||
<ul>
|
||||
<li data-filtertext="button icons svg disc alt custom icon position"><a href="../icons/" data-ajax="false">Icons</a></li>
|
||||
<li data-filtertext=""><a href="../icons-grunticon/" data-ajax="false">Grunticon loader</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Listview widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="listview widget thumbnails icons nested split button collapsible ul ol"><a href="../listview/" data-ajax="false">Listview</a></li>
|
||||
<li data-filtertext="autocomplete filterable reveal listview filtertextbeforefilter placeholder"><a href="../listview-autocomplete/" data-ajax="false">Listview autocomplete</a></li>
|
||||
<li data-filtertext="autocomplete filterable reveal listview remote data filtertextbeforefilter placeholder"><a href="../listview-autocomplete-remote/" data-ajax="false">Listview autocomplete remote data</a></li>
|
||||
<li data-filtertext="autodividers anchor jump scroll linkbars listview lists ul ol"><a href="../listview-autodividers-linkbar/" data-ajax="false">Listview autodividers linkbar</a></li>
|
||||
<li data-filtertext="listview autodividers selector autodividersselector lists ul ol"><a href="../listview-autodividers-selector/" data-ajax="false">Listview autodividers selector</a></li>
|
||||
<li data-filtertext="listview nested list items"><a href="../listview-nested-lists/" data-ajax="false">Listview Nested Listviews</a></li>
|
||||
<li data-filtertext="listview collapsible list items flat"><a href="../listview-collapsible-item-flat/" data-ajax="false">Listview collapsible list items (flat)</a></li>
|
||||
<li data-filtertext="listview collapsible list indented"><a href="../listview-collapsible-item-indented/" data-ajax="false">Listview collapsible list items (indented)</a></li>
|
||||
<li data-filtertext="grid listview responsive grids responsive listviews lists ul"><a href="../listview-grid/" data-ajax="false">Listview responsive grid</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="loader widget page loading navigation overlay spinner"><a href="../loader/" data-ajax="false">Loader widget</a></li>
|
||||
<li data-filtertext="navbar widget navmenu toolbars header footer"><a href="../navbar/" data-ajax="false">Navbar widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Navigation</h3>
|
||||
<ul>
|
||||
<li data-filtertext="ajax navigation navigate widget history event method"><a href="../navigation/" data-ajax="false">Navigation</a></li>
|
||||
<li data-filtertext="linking pages page links navigation ajax prefetch cache"><a href="../navigation-linking-pages/" data-ajax="false">Linking pages</a></li>
|
||||
<li data-filtertext="php redirect server redirection server-side navigation"><a href="../navigation-php-redirect/" data-ajax="false">PHP redirect demo</a></li>
|
||||
<li data-filtertext="navigation redirection hash query"><a href="../navigation-hash-processing/" data-ajax="false">Hash processing demo</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Pages</h3>
|
||||
<ul>
|
||||
<li data-filtertext="pages page widget ajax navigation"><a href="../pages/" data-ajax="false">Pages</a></li>
|
||||
<li data-filtertext="single page"><a href="../pages-single-page/" data-ajax="false">Single page</a></li>
|
||||
<li data-filtertext="multipage multi-page page"><a href="../pages-multi-page/" data-ajax="false">Multi-page template</a></li>
|
||||
<li data-filtertext="dialog page widget modal popup"><a href="../pages-dialog/" data-ajax="false">Dialog page</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Panel widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="panel widget sliding panels reveal push overlay responsive"><a href="../panel/" data-ajax="false">Panel</a></li>
|
||||
<li data-filtertext=""><a href="../panel-external/" data-ajax="false">External panels</a></li>
|
||||
<li data-filtertext="panel "><a href="../panel-fixed/" data-ajax="false">Fixed panels</a></li>
|
||||
<li data-filtertext="panel slide panels sliding panels shadow rwd responsive breakpoint"><a href="../panel-responsive/" data-ajax="false">Panels responsive</a></li>
|
||||
<li data-filtertext="panel custom style custom panel width reveal shadow listview panel styling page background wrapper"><a href="../panel-styling/" data-ajax="false">Custom panel style</a></li>
|
||||
<li data-filtertext="panel open on swipe"><a href="../panel-swipe-open/" data-ajax="false">Panel open on swipe</a></li>
|
||||
<li data-filtertext="panels outside page internal external toolbars"><a href="../panel-external-internal/" data-ajax="false">Panel external and internal</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Popup widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="popup widget popups dialog modal transition tooltip lightbox form overlay screen flip pop fade transition"><a href="../popup/" data-ajax="false">Popup</a></li>
|
||||
<li data-filtertext="popup alignment position"><a href="../popup-alignment/" data-ajax="false">Popup alignment</a></li>
|
||||
<li data-filtertext="popup arrow size popups popover"><a href="../popup-arrow-size/" data-ajax="false">Popup arrow size</a></li>
|
||||
<li data-filtertext="dynamic popups popup images lightbox"><a href="../popup-dynamic/" data-ajax="false">Dynamic popups</a></li>
|
||||
<li data-filtertext="popups with iframes scaling"><a href="../popup-iframe/" data-ajax="false">Popups with iframes</a></li>
|
||||
<li data-filtertext="popup image scaling"><a href="../popup-image-scaling/" data-ajax="false">Popup image scaling</a></li>
|
||||
<li data-filtertext="external popup outside multi-page"><a href="../popup-outside-multipage" data-ajax="false">Popup outside multi-page</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="form rangeslider widget dual sliders dual handle sliders range input"><a href="../rangeslider/" data-ajax="false">Rangeslider widget</a></li>
|
||||
<li data-filtertext="responsive web design rwd adaptive progressive enhancement PE accessible mobile breakpoints media query media queries"><a href="../rwd/" data-ajax="false">Responsive Web Design</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Selectmenu widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="form selectmenu widget select input custom select menu selects"><a href="../selectmenu/" data-ajax="false">Selectmenu</a></li>
|
||||
<li data-filtertext="form custom select menu selectmenu widget custom menu option optgroup multiple selects"><a href="../selectmenu-custom/" data-ajax="false">Custom select menu</a></li>
|
||||
<li data-filtertext="filterable select filter popup dialog"><a href="../selectmenu-custom-filter/" data-ajax="false">Custom select menu with filter</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Slider widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="form slider widget range input single sliders"><a href="../slider/" data-ajax="false">Slider</a></li>
|
||||
<li data-filtertext="form slider widget flipswitch slider binary select flip toggle switch"><a href="../slider-flipswitch/" data-ajax="false">Slider flip toggle switch</a></li>
|
||||
<li data-filtertext="form slider tooltip handle value input range sliders"><a href="../slider-tooltip/" data-ajax="false">Slider tooltip</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Table widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="table widget reflow column toggle th td responsive tables rwd hide show tabular"><a href="../table-column-toggle/" data-ajax="false">Table Column Toggle</a></li>
|
||||
<li data-filtertext="table column toggle phone comparison demo"><a href="../table-column-toggle-example/" data-ajax="false">Table Column Toggle demo</a></li>
|
||||
<li data-filtertext="responsive tables table column toggle heading groups rwd breakpoint"><a href="../table-column-toggle-heading-groups/" data-ajax="false">Table Column Toggle heading groups</a></li>
|
||||
<li data-filtertext="responsive tables table column toggle hide rwd breakpoint customization options"><a href="../table-column-toggle-options/" data-ajax="false">Table Column Toggle options</a></li>
|
||||
<li data-filtertext="table reflow th td responsive rwd columns tabular"><a href="../table-reflow/" data-ajax="false">Table Reflow</a></li>
|
||||
<li data-filtertext="responsive tables table reflow heading groups rwd breakpoint"><a href="../table-reflow-heading-groups/" data-ajax="false">Table Reflow heading groups</a></li>
|
||||
<li data-filtertext="responsive tables table reflow stripes strokes table style"><a href="../table-reflow-stripes-strokes/" data-ajax="false">Table Reflow stripes and strokes</a></li>
|
||||
<li data-filtertext="responsive tables table reflow stack custom styles"><a href="../table-reflow-styling/" data-ajax="false">Table Reflow custom styles</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="ui tabs widget"><a href="../tabs/" data-ajax="false">Tabs widget</a></li>
|
||||
<li data-filtertext="form textinput widget text input textarea number date time tel email file color password"><a href="../textinput/" data-ajax="false">Textinput widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Theming</h3>
|
||||
<ul>
|
||||
<li data-filtertext="default theme swatches theming style css"><a href="../theme-default/" data-ajax="false">Default theme</a></li>
|
||||
<li data-filtertext="classic theme old theme swatches theming style css"><a href="../theme-classic/" data-ajax="false">Classic theme</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Toolbar widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="toolbar widget header footer toolbars fixed fullscreen external sections"><a href="../toolbar/" data-ajax="false">Toolbar</a></li>
|
||||
<li data-filtertext="dynamic toolbars dynamically add toolbar header footer"><a href="../toolbar-dynamic/" data-ajax="false">Dynamic toolbars</a></li>
|
||||
<li data-filtertext="external toolbars header footer"><a href="../toolbar-external/" data-ajax="false">External toolbars</a></li>
|
||||
<li data-filtertext="fixed toolbars header footer"><a href="../toolbar-fixed/" data-ajax="false">Fixed toolbars</a></li>
|
||||
<li data-filtertext="fixed fullscreen toolbars header footer"><a href="../toolbar-fixed-fullscreen/" data-ajax="false">Fullscreen toolbars</a></li>
|
||||
<li data-filtertext="external fixed toolbars header footer"><a href="../toolbar-fixed-external/" data-ajax="false">Fixed external toolbars</a></li>
|
||||
<li data-filtertext="external persistent toolbars header footer navbar navmenu"><a href="../toolbar-fixed-persistent/" data-ajax="false">Persistent toolbars</a></li>
|
||||
<li data-filtertext="external ajax optimized toolbars persistent toolbars header footer navbar"><a href="../toolbar-fixed-persistent-optimized/" data-ajax="false">Ajax optimized toolbars</a></li>
|
||||
<li data-filtertext="form in toolbars header footer"><a href="../toolbar-fixed-forms/" data-ajax="false">Form in toolbar</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="page transitions animated pages popup navigation flip slide fade pop"><a href="../transitions/" data-ajax="false">Transitions</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>3rd party API demos</h3>
|
||||
<ul>
|
||||
<li data-filtertext="backbone requirejs navigation router"><a href="../backbone-requirejs/" data-ajax="false">Backbone RequireJS</a></li>
|
||||
<li data-filtertext="google maps geolocation demo"><a href="../map-geolocation/" data-ajax="false">Google Maps geolocation</a></li>
|
||||
<li data-filtertext="google maps hybrid"><a href="../map-list-toggle/" data-ajax="false">Google Maps list toggle</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- /panel -->
|
||||
|
||||
|
||||
</div><!-- /page -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
612
js/libs/jquery.mobile/demos/button/index.html
Normal file
612
js/libs/jquery.mobile/demos/button/index.html
Normal file
@ -0,0 +1,612 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Input buttons - jQuery Mobile Demos</title>
|
||||
<link rel="shortcut icon" href="../favicon.ico">
|
||||
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
|
||||
<link rel="stylesheet" href="../css/themes/default/jquery.mobile-1.4.2.min.css">
|
||||
<link rel="stylesheet" href="../_assets/css/jqm-demos.css">
|
||||
<script src="../js/jquery.js"></script>
|
||||
<script src="../_assets/js/index.js"></script>
|
||||
<script src="../js/jquery.mobile-1.4.2.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div data-role="page" class="jqm-demos" data-quicklinks="true">
|
||||
|
||||
<div data-role="header" class="jqm-header">
|
||||
<h2><a href="../" title="jQuery Mobile Demos home"><img src="../_assets/img/jquery-logo.png" alt="jQuery Mobile"></a></h2>
|
||||
<p><span class="jqm-version"></span> Demos</p>
|
||||
<a href="#" class="jqm-navmenu-link ui-btn ui-btn-icon-notext ui-corner-all ui-icon-bars ui-nodisc-icon ui-alt-icon ui-btn-left">Menu</a>
|
||||
<a href="#" class="jqm-search-link ui-btn ui-btn-icon-notext ui-corner-all ui-icon-search ui-nodisc-icon ui-alt-icon ui-btn-right">Search</a>
|
||||
</div><!-- /header -->
|
||||
|
||||
<div role="main" class="ui-content jqm-content">
|
||||
|
||||
<h1>Input buttons</h1>
|
||||
|
||||
<p>Examples of how to style input buttons; <code>input</code> elements with <code>type="button"</code>, <code>type="submit"</code>, or <code>type="reset"</code>. See <a href="../button-markup/">button markup</a> for examples of <code>a</code> and <code>button</code> elements.</p>
|
||||
|
||||
<h2>Default</h2>
|
||||
|
||||
<div data-demo-html="true">
|
||||
<form>
|
||||
<input type="button" value="Button">
|
||||
<input type="submit" value="Submit">
|
||||
<input type="reset" value="Reset">
|
||||
</form>
|
||||
</div><!--/demo-html -->
|
||||
|
||||
<h2>Enhanced</h2>
|
||||
|
||||
<div data-demo-html="true">
|
||||
<form>
|
||||
<div class="ui-input-btn ui-btn ui-corner-all ui-shadow">
|
||||
Input value
|
||||
<input type="button" data-enhanced="true" value="Input value">
|
||||
</div>
|
||||
</form>
|
||||
</div><!--/demo-html -->
|
||||
|
||||
<h2>Corners</h2>
|
||||
|
||||
<div data-demo-html="true">
|
||||
<form>
|
||||
<input type="button" value="Has corners by default">
|
||||
<input type="button" data-corners="false" value="Unset corners">
|
||||
<div class="ui-input-btn ui-btn ui-corner-all">
|
||||
Enhanced
|
||||
<input type="button" data-enhanced="true" value="Enhanced">
|
||||
</div>
|
||||
</form>
|
||||
</div><!--/demo-html -->
|
||||
|
||||
<p>Icon-only buttons are round by default. Here we show how you can set the same border-radius as other buttons.</p>
|
||||
|
||||
<div data-demo-html="true" data-demo-css="true">
|
||||
<form>
|
||||
<input type="button" data-icon="delete" data-iconpos="notext" value="Icon only">
|
||||
<div id="custom-border-radius">
|
||||
<div class="ui-input-btn ui-btn ui-icon-delete ui-btn-icon-notext ui-corner-all">
|
||||
Enhanced - Icon only
|
||||
<input type="button" data-enhanced="true" value="Enhanced - Icon only">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div><!--/demo-html -->
|
||||
|
||||
<h2>Shadow</h2>
|
||||
|
||||
<div data-demo-html="true">
|
||||
<form>
|
||||
<input type="button" value="Has shadow by default">
|
||||
<input type="button" data-shadow="false" value="Unset shadow">
|
||||
<div class="ui-input-btn ui-btn ui-shadow">
|
||||
Enhanced
|
||||
<input type="button" data-enhanced="true" value="Enhanced">
|
||||
</div>
|
||||
</form>
|
||||
</div><!--/demo-html -->
|
||||
|
||||
<h2>Inline</h2>
|
||||
|
||||
<div data-demo-html="true">
|
||||
<form>
|
||||
<input type="button" data-inline="true" value="Input">
|
||||
<div class="ui-input-btn ui-btn ui-btn-inline">
|
||||
Enhanced
|
||||
<input type="button" data-enhanced="true" value="Enhanced">
|
||||
</div>
|
||||
</form>
|
||||
</div><!--/demo-html -->
|
||||
|
||||
<h2>Theme</h2>
|
||||
|
||||
<div data-demo-html="true">
|
||||
<form>
|
||||
<input type="button" value="Input - Inherit">
|
||||
<input type="button" data-theme="a" value="Input - Theme swatch A">
|
||||
<input type="button" data-theme="b" value="Input - Theme swatch B">
|
||||
<div class="ui-input-btn ui-btn">
|
||||
Enhanced - Inherit
|
||||
<input type="button" data-enhanced="true" value="Enhanced - Inherit">
|
||||
</div>
|
||||
<div class="ui-input-btn ui-btn ui-btn-a">
|
||||
Enhanced - Theme swatch A
|
||||
<input type="button" data-enhanced="true" value="Enhanced - Theme swatch A">
|
||||
</div>
|
||||
<div class="ui-input-btn ui-btn ui-btn-b">
|
||||
Enhanced - Theme swatch B
|
||||
<input type="button" data-enhanced="true" value="Enhanced - Theme swatch B">
|
||||
</div>
|
||||
</form>
|
||||
</div><!--/demo-html -->
|
||||
|
||||
<h2>Mini</h2>
|
||||
|
||||
<div data-demo-html="true">
|
||||
<form>
|
||||
<input type="button" data-mini="true" value="Input">
|
||||
<div class="ui-input-btn ui-btn ui-mini">
|
||||
Enhanced
|
||||
<input type="button" data-enhanced="true" value="Enhanced">
|
||||
</div>
|
||||
</form>
|
||||
</div><!--/demo-html -->
|
||||
|
||||
<h2>Icons</h2>
|
||||
|
||||
<div data-demo-html="true">
|
||||
<form>
|
||||
<input type="button" data-icon="delete" value="Input">
|
||||
<div class="ui-input-btn ui-btn ui-icon-delete ui-btn-icon-left">
|
||||
Enhanced
|
||||
<input type="button" data-enhanced="true" value="Enhanced">
|
||||
</div>
|
||||
</form>
|
||||
</div><!--/demo-html -->
|
||||
|
||||
<h2>Icon position</h2>
|
||||
|
||||
<div data-demo-html="true">
|
||||
<form>
|
||||
<input type="button" data-icon="delete" value="Left (default)">
|
||||
<input type="button" data-icon="delete" data-iconpos="right" value="Right">
|
||||
<input type="button" data-icon="delete" data-iconpos="top" value="Top">
|
||||
<input type="button" data-icon="delete" data-iconpos="bottom" value="Bottom">
|
||||
<input type="button" data-icon="delete" data-iconpos="notext" value="Icon only">
|
||||
<div class="ui-input-btn ui-btn ui-icon-delete ui-btn-icon-left">
|
||||
Enhanced - Left
|
||||
<input type="button" data-enhanced="true" value="Enhanced - Left">
|
||||
</div>
|
||||
<div class="ui-input-btn ui-btn ui-icon-delete ui-btn-icon-right">
|
||||
Enhanced - Right
|
||||
<input type="button" data-enhanced="true" value="Enhanced - Right">
|
||||
</div>
|
||||
<div class="ui-input-btn ui-btn ui-icon-delete ui-btn-icon-top">
|
||||
Enhanced - Top
|
||||
<input type="button" data-enhanced="true" value="Enhanced - Top">
|
||||
</div>
|
||||
<div class="ui-input-btn ui-btn ui-icon-delete ui-btn-icon-bottom">
|
||||
Enhanced - Bottom
|
||||
<input type="button" data-enhanced="true" value="Enhanced - Bottom">
|
||||
</div>
|
||||
<div class="ui-input-btn ui-btn ui-icon-delete ui-btn-icon-notext">
|
||||
Enhanced - Icon only
|
||||
<input type="button" data-enhanced="true" value="Enhanced - Icon only">
|
||||
</div>
|
||||
<form>
|
||||
</div><!--/demo-html -->
|
||||
|
||||
<h2>Icon shadow</h2>
|
||||
|
||||
<div data-demo-html="true">
|
||||
<form>
|
||||
<input type="button" data-theme="b" data-icon="delete" data-iconshadow="true" value="Input">
|
||||
<div class="ui-input-btn ui-btn ui-btn-b ui-icon-delete ui-btn-icon-left ui-shadow-icon">
|
||||
Enhanced
|
||||
<input type="button" data-enhanced="true" value="Enhanced">
|
||||
</div>
|
||||
</form>
|
||||
</div><!--/demo-html -->
|
||||
|
||||
<h2>Disabled</h2>
|
||||
|
||||
<div data-demo-html="true">
|
||||
<form>
|
||||
<input type="button" disabled value="Input button with disabled attribute">
|
||||
<div class="ui-input-btn ui-btn ui-state-disabled">
|
||||
Enhanced
|
||||
<input type="button" disabled data-enhanced="true" value="Enhanced">
|
||||
</div>
|
||||
</form>
|
||||
</div><!--/demo-html -->
|
||||
|
||||
<h2>Native inputs</h2>
|
||||
|
||||
<div data-demo-html="true">
|
||||
<form>
|
||||
<input type="button" data-role="none" value="Button">
|
||||
<input type="submit" data-role="none" value="Submit">
|
||||
<input type="reset" data-role="none" value="Reset">
|
||||
</form>
|
||||
</div><!--/demo-html -->
|
||||
|
||||
</div><!-- /content -->
|
||||
<div data-role="panel" class="jqm-navmenu-panel" data-position="left" data-display="overlay" data-theme="a">
|
||||
<ul class="jqm-list ui-alt-icon ui-nodisc-icon">
|
||||
<li data-filtertext="demos homepage" data-icon="home"><a href=".././">Home</a></li>
|
||||
<li data-filtertext="introduction overview getting started"><a href="../intro/" data-ajax="false">Introduction</a></li>
|
||||
<li data-filtertext="buttons button markup buttonmarkup method anchor link button element"><a href="../button-markup/" data-ajax="false">Buttons</a></li>
|
||||
<li data-filtertext="form button widget input button submit reset"><a href="../button/" data-ajax="false">Button widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Checkboxradio widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="form checkboxradio widget checkbox input checkboxes controlgroups"><a href="../checkboxradio-checkbox/" data-ajax="false">Checkboxes</a></li>
|
||||
<li data-filtertext="form checkboxradio widget radio input radio buttons controlgroups"><a href="../checkboxradio-radio/" data-ajax="false">Radio buttons</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Collapsible (set) widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="collapsibles content formatting"><a href="../collapsible/" data-ajax="false">Collapsible</a></li>
|
||||
<li data-filtertext="dynamic collapsible set accordion append expand"><a href="../collapsible-dynamic/" data-ajax="false">Dynamic collapsibles</a></li>
|
||||
<li data-filtertext="accordions collapsible set widget content formatting grouped collapsibles"><a href="../collapsibleset/" data-ajax="false">Collapsible set</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Controlgroup widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="controlgroups selectmenu checkboxradio input grouped buttons horizontal vertical"><a href="../controlgroup/" data-ajax="false">Controlgroup</a></li>
|
||||
<li data-filtertext="dynamic controlgroup dynamically add buttons"><a href="../controlgroup-dynamic/" data-ajax="false">Dynamic controlgroups</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="form datepicker widget date input"><a href="../datepicker/" data-ajax="false">Datepicker</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Events</h3>
|
||||
<ul>
|
||||
<li data-filtertext="swipe to delete list items listviews swipe events"><a href="../swipe-list/" data-ajax="false">Swipe list items</a></li>
|
||||
<li data-filtertext="swipe to navigate swipe page navigation swipe events"><a href="../swipe-page/" data-ajax="false">Swipe page navigation</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="filterable filter elements sorting searching listview table"><a href="../filterable/" data-ajax="false">Filterable widget</a></li>
|
||||
<li data-filtertext="form flipswitch widget flip toggle switch binary select checkbox input"><a href="../flipswitch/" data-ajax="false">Flipswitch widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Forms</h3>
|
||||
<ul>
|
||||
<li data-filtertext="forms text checkbox radio range button submit reset inputs selects textarea slider flipswitch label form elements"><a href="../forms/" data-ajax="false">Forms</a></li>
|
||||
<li data-filtertext="form hide labels hidden accessible ui-hidden-accessible forms"><a href="../forms-label-hidden-accessible/" data-ajax="false">Hide labels</a></li>
|
||||
<li data-filtertext="form field containers fieldcontain ui-field-contain forms"><a href="../forms-field-contain/" data-ajax="false">Field containers</a></li>
|
||||
<li data-filtertext="forms disabled form elements"><a href="../forms-disabled/" data-ajax="false">Forms disabled</a></li>
|
||||
<li data-filtertext="forms gallery examples overview forms text checkbox radio range button submit reset inputs selects textarea slider flipswitch label form elements"><a href="../forms-gallery/" data-ajax="false">Forms gallery</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Grids</h3>
|
||||
<ul>
|
||||
<li data-filtertext="grids columns blocks content formatting rwd responsive css framework"><a href="../grids/" data-ajax="false">Grids</a></li>
|
||||
<li data-filtertext="buttons in grids css framework"><a href="../grids-buttons/" data-ajax="false">Buttons in grids</a></li>
|
||||
<li data-filtertext="custom responsive grids rwd css framework"><a href="../grids-custom-responsive/" data-ajax="false">Custom responsive grids</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="blocks content formatting sections heading"><a href="../body-bar-classes/" data-ajax="false">Grouping and dividing content</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Icons</h3>
|
||||
<ul>
|
||||
<li data-filtertext="button icons svg disc alt custom icon position"><a href="../icons/" data-ajax="false">Icons</a></li>
|
||||
<li data-filtertext=""><a href="../icons-grunticon/" data-ajax="false">Grunticon loader</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Listview widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="listview widget thumbnails icons nested split button collapsible ul ol"><a href="../listview/" data-ajax="false">Listview</a></li>
|
||||
<li data-filtertext="autocomplete filterable reveal listview filtertextbeforefilter placeholder"><a href="../listview-autocomplete/" data-ajax="false">Listview autocomplete</a></li>
|
||||
<li data-filtertext="autocomplete filterable reveal listview remote data filtertextbeforefilter placeholder"><a href="../listview-autocomplete-remote/" data-ajax="false">Listview autocomplete remote data</a></li>
|
||||
<li data-filtertext="autodividers anchor jump scroll linkbars listview lists ul ol"><a href="../listview-autodividers-linkbar/" data-ajax="false">Listview autodividers linkbar</a></li>
|
||||
<li data-filtertext="listview autodividers selector autodividersselector lists ul ol"><a href="../listview-autodividers-selector/" data-ajax="false">Listview autodividers selector</a></li>
|
||||
<li data-filtertext="listview nested list items"><a href="../listview-nested-lists/" data-ajax="false">Listview Nested Listviews</a></li>
|
||||
<li data-filtertext="listview collapsible list items flat"><a href="../listview-collapsible-item-flat/" data-ajax="false">Listview collapsible list items (flat)</a></li>
|
||||
<li data-filtertext="listview collapsible list indented"><a href="../listview-collapsible-item-indented/" data-ajax="false">Listview collapsible list items (indented)</a></li>
|
||||
<li data-filtertext="grid listview responsive grids responsive listviews lists ul"><a href="../listview-grid/" data-ajax="false">Listview responsive grid</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="loader widget page loading navigation overlay spinner"><a href="../loader/" data-ajax="false">Loader widget</a></li>
|
||||
<li data-filtertext="navbar widget navmenu toolbars header footer"><a href="../navbar/" data-ajax="false">Navbar widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Navigation</h3>
|
||||
<ul>
|
||||
<li data-filtertext="ajax navigation navigate widget history event method"><a href="../navigation/" data-ajax="false">Navigation</a></li>
|
||||
<li data-filtertext="linking pages page links navigation ajax prefetch cache"><a href="../navigation-linking-pages/" data-ajax="false">Linking pages</a></li>
|
||||
<li data-filtertext="php redirect server redirection server-side navigation"><a href="../navigation-php-redirect/" data-ajax="false">PHP redirect demo</a></li>
|
||||
<li data-filtertext="navigation redirection hash query"><a href="../navigation-hash-processing/" data-ajax="false">Hash processing demo</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Pages</h3>
|
||||
<ul>
|
||||
<li data-filtertext="pages page widget ajax navigation"><a href="../pages/" data-ajax="false">Pages</a></li>
|
||||
<li data-filtertext="single page"><a href="../pages-single-page/" data-ajax="false">Single page</a></li>
|
||||
<li data-filtertext="multipage multi-page page"><a href="../pages-multi-page/" data-ajax="false">Multi-page template</a></li>
|
||||
<li data-filtertext="dialog page widget modal popup"><a href="../pages-dialog/" data-ajax="false">Dialog page</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Panel widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="panel widget sliding panels reveal push overlay responsive"><a href="../panel/" data-ajax="false">Panel</a></li>
|
||||
<li data-filtertext=""><a href="../panel-external/" data-ajax="false">External panels</a></li>
|
||||
<li data-filtertext="panel "><a href="../panel-fixed/" data-ajax="false">Fixed panels</a></li>
|
||||
<li data-filtertext="panel slide panels sliding panels shadow rwd responsive breakpoint"><a href="../panel-responsive/" data-ajax="false">Panels responsive</a></li>
|
||||
<li data-filtertext="panel custom style custom panel width reveal shadow listview panel styling page background wrapper"><a href="../panel-styling/" data-ajax="false">Custom panel style</a></li>
|
||||
<li data-filtertext="panel open on swipe"><a href="../panel-swipe-open/" data-ajax="false">Panel open on swipe</a></li>
|
||||
<li data-filtertext="panels outside page internal external toolbars"><a href="../panel-external-internal/" data-ajax="false">Panel external and internal</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Popup widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="popup widget popups dialog modal transition tooltip lightbox form overlay screen flip pop fade transition"><a href="../popup/" data-ajax="false">Popup</a></li>
|
||||
<li data-filtertext="popup alignment position"><a href="../popup-alignment/" data-ajax="false">Popup alignment</a></li>
|
||||
<li data-filtertext="popup arrow size popups popover"><a href="../popup-arrow-size/" data-ajax="false">Popup arrow size</a></li>
|
||||
<li data-filtertext="dynamic popups popup images lightbox"><a href="../popup-dynamic/" data-ajax="false">Dynamic popups</a></li>
|
||||
<li data-filtertext="popups with iframes scaling"><a href="../popup-iframe/" data-ajax="false">Popups with iframes</a></li>
|
||||
<li data-filtertext="popup image scaling"><a href="../popup-image-scaling/" data-ajax="false">Popup image scaling</a></li>
|
||||
<li data-filtertext="external popup outside multi-page"><a href="../popup-outside-multipage" data-ajax="false">Popup outside multi-page</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="form rangeslider widget dual sliders dual handle sliders range input"><a href="../rangeslider/" data-ajax="false">Rangeslider widget</a></li>
|
||||
<li data-filtertext="responsive web design rwd adaptive progressive enhancement PE accessible mobile breakpoints media query media queries"><a href="../rwd/" data-ajax="false">Responsive Web Design</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Selectmenu widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="form selectmenu widget select input custom select menu selects"><a href="../selectmenu/" data-ajax="false">Selectmenu</a></li>
|
||||
<li data-filtertext="form custom select menu selectmenu widget custom menu option optgroup multiple selects"><a href="../selectmenu-custom/" data-ajax="false">Custom select menu</a></li>
|
||||
<li data-filtertext="filterable select filter popup dialog"><a href="../selectmenu-custom-filter/" data-ajax="false">Custom select menu with filter</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Slider widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="form slider widget range input single sliders"><a href="../slider/" data-ajax="false">Slider</a></li>
|
||||
<li data-filtertext="form slider widget flipswitch slider binary select flip toggle switch"><a href="../slider-flipswitch/" data-ajax="false">Slider flip toggle switch</a></li>
|
||||
<li data-filtertext="form slider tooltip handle value input range sliders"><a href="../slider-tooltip/" data-ajax="false">Slider tooltip</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Table widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="table widget reflow column toggle th td responsive tables rwd hide show tabular"><a href="../table-column-toggle/" data-ajax="false">Table Column Toggle</a></li>
|
||||
<li data-filtertext="table column toggle phone comparison demo"><a href="../table-column-toggle-example/" data-ajax="false">Table Column Toggle demo</a></li>
|
||||
<li data-filtertext="responsive tables table column toggle heading groups rwd breakpoint"><a href="../table-column-toggle-heading-groups/" data-ajax="false">Table Column Toggle heading groups</a></li>
|
||||
<li data-filtertext="responsive tables table column toggle hide rwd breakpoint customization options"><a href="../table-column-toggle-options/" data-ajax="false">Table Column Toggle options</a></li>
|
||||
<li data-filtertext="table reflow th td responsive rwd columns tabular"><a href="../table-reflow/" data-ajax="false">Table Reflow</a></li>
|
||||
<li data-filtertext="responsive tables table reflow heading groups rwd breakpoint"><a href="../table-reflow-heading-groups/" data-ajax="false">Table Reflow heading groups</a></li>
|
||||
<li data-filtertext="responsive tables table reflow stripes strokes table style"><a href="../table-reflow-stripes-strokes/" data-ajax="false">Table Reflow stripes and strokes</a></li>
|
||||
<li data-filtertext="responsive tables table reflow stack custom styles"><a href="../table-reflow-styling/" data-ajax="false">Table Reflow custom styles</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="ui tabs widget"><a href="../tabs/" data-ajax="false">Tabs widget</a></li>
|
||||
<li data-filtertext="form textinput widget text input textarea number date time tel email file color password"><a href="../textinput/" data-ajax="false">Textinput widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Theming</h3>
|
||||
<ul>
|
||||
<li data-filtertext="default theme swatches theming style css"><a href="../theme-default/" data-ajax="false">Default theme</a></li>
|
||||
<li data-filtertext="classic theme old theme swatches theming style css"><a href="../theme-classic/" data-ajax="false">Classic theme</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Toolbar widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="toolbar widget header footer toolbars fixed fullscreen external sections"><a href="../toolbar/" data-ajax="false">Toolbar</a></li>
|
||||
<li data-filtertext="dynamic toolbars dynamically add toolbar header footer"><a href="../toolbar-dynamic/" data-ajax="false">Dynamic toolbars</a></li>
|
||||
<li data-filtertext="external toolbars header footer"><a href="../toolbar-external/" data-ajax="false">External toolbars</a></li>
|
||||
<li data-filtertext="fixed toolbars header footer"><a href="../toolbar-fixed/" data-ajax="false">Fixed toolbars</a></li>
|
||||
<li data-filtertext="fixed fullscreen toolbars header footer"><a href="../toolbar-fixed-fullscreen/" data-ajax="false">Fullscreen toolbars</a></li>
|
||||
<li data-filtertext="external fixed toolbars header footer"><a href="../toolbar-fixed-external/" data-ajax="false">Fixed external toolbars</a></li>
|
||||
<li data-filtertext="external persistent toolbars header footer navbar navmenu"><a href="../toolbar-fixed-persistent/" data-ajax="false">Persistent toolbars</a></li>
|
||||
<li data-filtertext="external ajax optimized toolbars persistent toolbars header footer navbar"><a href="../toolbar-fixed-persistent-optimized/" data-ajax="false">Ajax optimized toolbars</a></li>
|
||||
<li data-filtertext="form in toolbars header footer"><a href="../toolbar-fixed-forms/" data-ajax="false">Form in toolbar</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="page transitions animated pages popup navigation flip slide fade pop"><a href="../transitions/" data-ajax="false">Transitions</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>3rd party API demos</h3>
|
||||
<ul>
|
||||
<li data-filtertext="backbone requirejs navigation router"><a href="../backbone-requirejs/" data-ajax="false">Backbone RequireJS</a></li>
|
||||
<li data-filtertext="google maps geolocation demo"><a href="../map-geolocation/" data-ajax="false">Google Maps geolocation</a></li>
|
||||
<li data-filtertext="google maps hybrid"><a href="../map-list-toggle/" data-ajax="false">Google Maps list toggle</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
</ul>
|
||||
</div><!-- /panel -->
|
||||
|
||||
|
||||
<div data-role="footer" data-position="fixed" data-tap-toggle="false" class="jqm-footer">
|
||||
<p>jQuery Mobile Demos version <span class="jqm-version"></span></p>
|
||||
<p>Copyright 2014 The jQuery Foundation</p>
|
||||
</div><!-- /footer -->
|
||||
<!-- TODO: This should become an external panel so we can add input to markup (unique ID) -->
|
||||
<div data-role="panel" class="jqm-search-panel" data-position="right" data-display="overlay" data-theme="a">
|
||||
<div class="jqm-search">
|
||||
<ul class="jqm-list" data-filter-placeholder="Search demos..." data-filter-reveal="true">
|
||||
<li data-filtertext="demos homepage" data-icon="home"><a href=".././">Home</a></li>
|
||||
<li data-filtertext="introduction overview getting started"><a href="../intro/" data-ajax="false">Introduction</a></li>
|
||||
<li data-filtertext="buttons button markup buttonmarkup method anchor link button element"><a href="../button-markup/" data-ajax="false">Buttons</a></li>
|
||||
<li data-filtertext="form button widget input button submit reset"><a href="../button/" data-ajax="false">Button widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Checkboxradio widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="form checkboxradio widget checkbox input checkboxes controlgroups"><a href="../checkboxradio-checkbox/" data-ajax="false">Checkboxes</a></li>
|
||||
<li data-filtertext="form checkboxradio widget radio input radio buttons controlgroups"><a href="../checkboxradio-radio/" data-ajax="false">Radio buttons</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Collapsible (set) widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="collapsibles content formatting"><a href="../collapsible/" data-ajax="false">Collapsible</a></li>
|
||||
<li data-filtertext="dynamic collapsible set accordion append expand"><a href="../collapsible-dynamic/" data-ajax="false">Dynamic collapsibles</a></li>
|
||||
<li data-filtertext="accordions collapsible set widget content formatting grouped collapsibles"><a href="../collapsibleset/" data-ajax="false">Collapsible set</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Controlgroup widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="controlgroups selectmenu checkboxradio input grouped buttons horizontal vertical"><a href="../controlgroup/" data-ajax="false">Controlgroup</a></li>
|
||||
<li data-filtertext="dynamic controlgroup dynamically add buttons"><a href="../controlgroup-dynamic/" data-ajax="false">Dynamic controlgroups</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="form datepicker widget date input"><a href="../datepicker/" data-ajax="false">Datepicker</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Events</h3>
|
||||
<ul>
|
||||
<li data-filtertext="swipe to delete list items listviews swipe events"><a href="../swipe-list/" data-ajax="false">Swipe list items</a></li>
|
||||
<li data-filtertext="swipe to navigate swipe page navigation swipe events"><a href="../swipe-page/" data-ajax="false">Swipe page navigation</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="filterable filter elements sorting searching listview table"><a href="../filterable/" data-ajax="false">Filterable widget</a></li>
|
||||
<li data-filtertext="form flipswitch widget flip toggle switch binary select checkbox input"><a href="../flipswitch/" data-ajax="false">Flipswitch widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Forms</h3>
|
||||
<ul>
|
||||
<li data-filtertext="forms text checkbox radio range button submit reset inputs selects textarea slider flipswitch label form elements"><a href="../forms/" data-ajax="false">Forms</a></li>
|
||||
<li data-filtertext="form hide labels hidden accessible ui-hidden-accessible forms"><a href="../forms-label-hidden-accessible/" data-ajax="false">Hide labels</a></li>
|
||||
<li data-filtertext="form field containers fieldcontain ui-field-contain forms"><a href="../forms-field-contain/" data-ajax="false">Field containers</a></li>
|
||||
<li data-filtertext="forms disabled form elements"><a href="../forms-disabled/" data-ajax="false">Forms disabled</a></li>
|
||||
<li data-filtertext="forms gallery examples overview forms text checkbox radio range button submit reset inputs selects textarea slider flipswitch label form elements"><a href="../forms-gallery/" data-ajax="false">Forms gallery</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Grids</h3>
|
||||
<ul>
|
||||
<li data-filtertext="grids columns blocks content formatting rwd responsive css framework"><a href="../grids/" data-ajax="false">Grids</a></li>
|
||||
<li data-filtertext="buttons in grids css framework"><a href="../grids-buttons/" data-ajax="false">Buttons in grids</a></li>
|
||||
<li data-filtertext="custom responsive grids rwd css framework"><a href="../grids-custom-responsive/" data-ajax="false">Custom responsive grids</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="blocks content formatting sections heading"><a href="../body-bar-classes/" data-ajax="false">Grouping and dividing content</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Icons</h3>
|
||||
<ul>
|
||||
<li data-filtertext="button icons svg disc alt custom icon position"><a href="../icons/" data-ajax="false">Icons</a></li>
|
||||
<li data-filtertext=""><a href="../icons-grunticon/" data-ajax="false">Grunticon loader</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Listview widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="listview widget thumbnails icons nested split button collapsible ul ol"><a href="../listview/" data-ajax="false">Listview</a></li>
|
||||
<li data-filtertext="autocomplete filterable reveal listview filtertextbeforefilter placeholder"><a href="../listview-autocomplete/" data-ajax="false">Listview autocomplete</a></li>
|
||||
<li data-filtertext="autocomplete filterable reveal listview remote data filtertextbeforefilter placeholder"><a href="../listview-autocomplete-remote/" data-ajax="false">Listview autocomplete remote data</a></li>
|
||||
<li data-filtertext="autodividers anchor jump scroll linkbars listview lists ul ol"><a href="../listview-autodividers-linkbar/" data-ajax="false">Listview autodividers linkbar</a></li>
|
||||
<li data-filtertext="listview autodividers selector autodividersselector lists ul ol"><a href="../listview-autodividers-selector/" data-ajax="false">Listview autodividers selector</a></li>
|
||||
<li data-filtertext="listview nested list items"><a href="../listview-nested-lists/" data-ajax="false">Listview Nested Listviews</a></li>
|
||||
<li data-filtertext="listview collapsible list items flat"><a href="../listview-collapsible-item-flat/" data-ajax="false">Listview collapsible list items (flat)</a></li>
|
||||
<li data-filtertext="listview collapsible list indented"><a href="../listview-collapsible-item-indented/" data-ajax="false">Listview collapsible list items (indented)</a></li>
|
||||
<li data-filtertext="grid listview responsive grids responsive listviews lists ul"><a href="../listview-grid/" data-ajax="false">Listview responsive grid</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="loader widget page loading navigation overlay spinner"><a href="../loader/" data-ajax="false">Loader widget</a></li>
|
||||
<li data-filtertext="navbar widget navmenu toolbars header footer"><a href="../navbar/" data-ajax="false">Navbar widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Navigation</h3>
|
||||
<ul>
|
||||
<li data-filtertext="ajax navigation navigate widget history event method"><a href="../navigation/" data-ajax="false">Navigation</a></li>
|
||||
<li data-filtertext="linking pages page links navigation ajax prefetch cache"><a href="../navigation-linking-pages/" data-ajax="false">Linking pages</a></li>
|
||||
<li data-filtertext="php redirect server redirection server-side navigation"><a href="../navigation-php-redirect/" data-ajax="false">PHP redirect demo</a></li>
|
||||
<li data-filtertext="navigation redirection hash query"><a href="../navigation-hash-processing/" data-ajax="false">Hash processing demo</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Pages</h3>
|
||||
<ul>
|
||||
<li data-filtertext="pages page widget ajax navigation"><a href="../pages/" data-ajax="false">Pages</a></li>
|
||||
<li data-filtertext="single page"><a href="../pages-single-page/" data-ajax="false">Single page</a></li>
|
||||
<li data-filtertext="multipage multi-page page"><a href="../pages-multi-page/" data-ajax="false">Multi-page template</a></li>
|
||||
<li data-filtertext="dialog page widget modal popup"><a href="../pages-dialog/" data-ajax="false">Dialog page</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Panel widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="panel widget sliding panels reveal push overlay responsive"><a href="../panel/" data-ajax="false">Panel</a></li>
|
||||
<li data-filtertext=""><a href="../panel-external/" data-ajax="false">External panels</a></li>
|
||||
<li data-filtertext="panel "><a href="../panel-fixed/" data-ajax="false">Fixed panels</a></li>
|
||||
<li data-filtertext="panel slide panels sliding panels shadow rwd responsive breakpoint"><a href="../panel-responsive/" data-ajax="false">Panels responsive</a></li>
|
||||
<li data-filtertext="panel custom style custom panel width reveal shadow listview panel styling page background wrapper"><a href="../panel-styling/" data-ajax="false">Custom panel style</a></li>
|
||||
<li data-filtertext="panel open on swipe"><a href="../panel-swipe-open/" data-ajax="false">Panel open on swipe</a></li>
|
||||
<li data-filtertext="panels outside page internal external toolbars"><a href="../panel-external-internal/" data-ajax="false">Panel external and internal</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Popup widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="popup widget popups dialog modal transition tooltip lightbox form overlay screen flip pop fade transition"><a href="../popup/" data-ajax="false">Popup</a></li>
|
||||
<li data-filtertext="popup alignment position"><a href="../popup-alignment/" data-ajax="false">Popup alignment</a></li>
|
||||
<li data-filtertext="popup arrow size popups popover"><a href="../popup-arrow-size/" data-ajax="false">Popup arrow size</a></li>
|
||||
<li data-filtertext="dynamic popups popup images lightbox"><a href="../popup-dynamic/" data-ajax="false">Dynamic popups</a></li>
|
||||
<li data-filtertext="popups with iframes scaling"><a href="../popup-iframe/" data-ajax="false">Popups with iframes</a></li>
|
||||
<li data-filtertext="popup image scaling"><a href="../popup-image-scaling/" data-ajax="false">Popup image scaling</a></li>
|
||||
<li data-filtertext="external popup outside multi-page"><a href="../popup-outside-multipage" data-ajax="false">Popup outside multi-page</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="form rangeslider widget dual sliders dual handle sliders range input"><a href="../rangeslider/" data-ajax="false">Rangeslider widget</a></li>
|
||||
<li data-filtertext="responsive web design rwd adaptive progressive enhancement PE accessible mobile breakpoints media query media queries"><a href="../rwd/" data-ajax="false">Responsive Web Design</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Selectmenu widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="form selectmenu widget select input custom select menu selects"><a href="../selectmenu/" data-ajax="false">Selectmenu</a></li>
|
||||
<li data-filtertext="form custom select menu selectmenu widget custom menu option optgroup multiple selects"><a href="../selectmenu-custom/" data-ajax="false">Custom select menu</a></li>
|
||||
<li data-filtertext="filterable select filter popup dialog"><a href="../selectmenu-custom-filter/" data-ajax="false">Custom select menu with filter</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Slider widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="form slider widget range input single sliders"><a href="../slider/" data-ajax="false">Slider</a></li>
|
||||
<li data-filtertext="form slider widget flipswitch slider binary select flip toggle switch"><a href="../slider-flipswitch/" data-ajax="false">Slider flip toggle switch</a></li>
|
||||
<li data-filtertext="form slider tooltip handle value input range sliders"><a href="../slider-tooltip/" data-ajax="false">Slider tooltip</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Table widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="table widget reflow column toggle th td responsive tables rwd hide show tabular"><a href="../table-column-toggle/" data-ajax="false">Table Column Toggle</a></li>
|
||||
<li data-filtertext="table column toggle phone comparison demo"><a href="../table-column-toggle-example/" data-ajax="false">Table Column Toggle demo</a></li>
|
||||
<li data-filtertext="responsive tables table column toggle heading groups rwd breakpoint"><a href="../table-column-toggle-heading-groups/" data-ajax="false">Table Column Toggle heading groups</a></li>
|
||||
<li data-filtertext="responsive tables table column toggle hide rwd breakpoint customization options"><a href="../table-column-toggle-options/" data-ajax="false">Table Column Toggle options</a></li>
|
||||
<li data-filtertext="table reflow th td responsive rwd columns tabular"><a href="../table-reflow/" data-ajax="false">Table Reflow</a></li>
|
||||
<li data-filtertext="responsive tables table reflow heading groups rwd breakpoint"><a href="../table-reflow-heading-groups/" data-ajax="false">Table Reflow heading groups</a></li>
|
||||
<li data-filtertext="responsive tables table reflow stripes strokes table style"><a href="../table-reflow-stripes-strokes/" data-ajax="false">Table Reflow stripes and strokes</a></li>
|
||||
<li data-filtertext="responsive tables table reflow stack custom styles"><a href="../table-reflow-styling/" data-ajax="false">Table Reflow custom styles</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="ui tabs widget"><a href="../tabs/" data-ajax="false">Tabs widget</a></li>
|
||||
<li data-filtertext="form textinput widget text input textarea number date time tel email file color password"><a href="../textinput/" data-ajax="false">Textinput widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Theming</h3>
|
||||
<ul>
|
||||
<li data-filtertext="default theme swatches theming style css"><a href="../theme-default/" data-ajax="false">Default theme</a></li>
|
||||
<li data-filtertext="classic theme old theme swatches theming style css"><a href="../theme-classic/" data-ajax="false">Classic theme</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Toolbar widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="toolbar widget header footer toolbars fixed fullscreen external sections"><a href="../toolbar/" data-ajax="false">Toolbar</a></li>
|
||||
<li data-filtertext="dynamic toolbars dynamically add toolbar header footer"><a href="../toolbar-dynamic/" data-ajax="false">Dynamic toolbars</a></li>
|
||||
<li data-filtertext="external toolbars header footer"><a href="../toolbar-external/" data-ajax="false">External toolbars</a></li>
|
||||
<li data-filtertext="fixed toolbars header footer"><a href="../toolbar-fixed/" data-ajax="false">Fixed toolbars</a></li>
|
||||
<li data-filtertext="fixed fullscreen toolbars header footer"><a href="../toolbar-fixed-fullscreen/" data-ajax="false">Fullscreen toolbars</a></li>
|
||||
<li data-filtertext="external fixed toolbars header footer"><a href="../toolbar-fixed-external/" data-ajax="false">Fixed external toolbars</a></li>
|
||||
<li data-filtertext="external persistent toolbars header footer navbar navmenu"><a href="../toolbar-fixed-persistent/" data-ajax="false">Persistent toolbars</a></li>
|
||||
<li data-filtertext="external ajax optimized toolbars persistent toolbars header footer navbar"><a href="../toolbar-fixed-persistent-optimized/" data-ajax="false">Ajax optimized toolbars</a></li>
|
||||
<li data-filtertext="form in toolbars header footer"><a href="../toolbar-fixed-forms/" data-ajax="false">Form in toolbar</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="page transitions animated pages popup navigation flip slide fade pop"><a href="../transitions/" data-ajax="false">Transitions</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>3rd party API demos</h3>
|
||||
<ul>
|
||||
<li data-filtertext="backbone requirejs navigation router"><a href="../backbone-requirejs/" data-ajax="false">Backbone RequireJS</a></li>
|
||||
<li data-filtertext="google maps geolocation demo"><a href="../map-geolocation/" data-ajax="false">Google Maps geolocation</a></li>
|
||||
<li data-filtertext="google maps hybrid"><a href="../map-list-toggle/" data-ajax="false">Google Maps list toggle</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- /panel -->
|
||||
|
||||
|
||||
</div><!-- /page -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
538
js/libs/jquery.mobile/demos/checkboxradio-checkbox/index.html
Normal file
538
js/libs/jquery.mobile/demos/checkboxradio-checkbox/index.html
Normal file
@ -0,0 +1,538 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Checkbox - jQuery Mobile Demos</title>
|
||||
<link rel="shortcut icon" href="../favicon.ico">
|
||||
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
|
||||
<link rel="stylesheet" href="../css/themes/default/jquery.mobile-1.4.2.min.css">
|
||||
<link rel="stylesheet" href="../_assets/css/jqm-demos.css">
|
||||
<script src="../js/jquery.js"></script>
|
||||
<script src="../_assets/js/index.js"></script>
|
||||
<script src="../js/jquery.mobile-1.4.2.min.js"></script>
|
||||
</head>
|
||||
<div data-role="page" class="jqm-demos" data-quicklinks="true">
|
||||
|
||||
<div data-role="header" class="jqm-header">
|
||||
<h2><a href="../" title="jQuery Mobile Demos home"><img src="../_assets/img/jquery-logo.png" alt="jQuery Mobile"></a></h2>
|
||||
<p><span class="jqm-version"></span> Demos</p>
|
||||
<a href="#" class="jqm-navmenu-link ui-btn ui-btn-icon-notext ui-corner-all ui-icon-bars ui-nodisc-icon ui-alt-icon ui-btn-left">Menu</a>
|
||||
<a href="#" class="jqm-search-link ui-btn ui-btn-icon-notext ui-corner-all ui-icon-search ui-nodisc-icon ui-alt-icon ui-btn-right">Search</a>
|
||||
</div><!-- /header -->
|
||||
|
||||
<div role="main" class="ui-content jqm-content">
|
||||
|
||||
<h1>Checkbox</h1>
|
||||
|
||||
<p>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.</p>
|
||||
|
||||
<h2>Basic markup</h2>
|
||||
|
||||
<p>To create a single checkbox, add an <code>input</code> with a <code>type="checkbox"</code> attribute and a corresponding <code>label</code>. If the <code>input</code> isn't wrapped in its corresponding <code>label</code>, be sure to set the <code>for</code> attribute of the <code>label</code> to match the <code>id</code> of the <code>input</code> so they are semantically associated.</p>
|
||||
|
||||
<div data-demo-html="true">
|
||||
<form>
|
||||
<label>
|
||||
<input type="checkbox" name="checkbox-0 ">Check me
|
||||
</label>
|
||||
</form>
|
||||
</div><!--/demo-html -->
|
||||
|
||||
<h2>Mini size</h2>
|
||||
|
||||
<p>For a more compact version that is useful in toolbars and tight spaces, add the <code>data-mini="true"</code> attribute to the element to create a mini version. </p>
|
||||
|
||||
<div data-demo-html="true">
|
||||
<form>
|
||||
<input type="checkbox" name="checkbox-mini-0" id="checkbox-mini-0" data-mini="true">
|
||||
<label for="checkbox-mini-0">I agree</label>
|
||||
</form>
|
||||
</div><!--/demo-html -->
|
||||
|
||||
<h2>Vertical group</h2>
|
||||
|
||||
<p>Typically, there are multiple checkboxes listed under a question title. To visually integrate multiple checkboxes into a grouped button set, the framework will automatically remove all margins between buttons and round only the top and bottom corners of the set if there is a <code> data-role="controlgroup"</code> attribute on the <code>fieldset</code>.</p>
|
||||
|
||||
<div data-demo-html="true">
|
||||
<form>
|
||||
<fieldset data-role="controlgroup">
|
||||
<legend>Vertical:</legend>
|
||||
<input type="checkbox" name="checkbox-v-2a" id="checkbox-v-2a">
|
||||
<label for="checkbox-v-2a">One</label>
|
||||
<input type="checkbox" name="checkbox-v-2b" id="checkbox-v-2b">
|
||||
<label for="checkbox-v-2b">Two</label>
|
||||
<input type="checkbox" name="checkbox-v-2c" id="checkbox-v-2c">
|
||||
<label for="checkbox-v-2c">Three</label>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div><!--/demo-html -->
|
||||
|
||||
<h2>Horizontal group</h2>
|
||||
|
||||
<p>Checkboxes can also be used for grouped button sets where more than one button can be selected at once, such as the bold, italic and underline button group seen in word processors. To make a horizontal button set, add the <code> data-type="horizontal"</code> to the <code>fieldset</code>.</p>
|
||||
|
||||
<div data-demo-html="true">
|
||||
<form>
|
||||
<fieldset data-role="controlgroup" data-type="horizontal">
|
||||
<legend>Horizontal:</legend>
|
||||
<input type="checkbox" name="checkbox-h-2a" id="checkbox-h-2a">
|
||||
<label for="checkbox-h-2a">One</label>
|
||||
<input type="checkbox" name="checkbox-h-2b" id="checkbox-h-2b">
|
||||
<label for="checkbox-h-2b">Two</label>
|
||||
<input type="checkbox" name="checkbox-h-2c" id="checkbox-h-2c">
|
||||
<label for="checkbox-h-2c">Three</label>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div><!--/demo-html -->
|
||||
|
||||
<h2>Icon position</h2>
|
||||
|
||||
<p>To swap the position of the check icon from the default position on the left, add the <code>data-iconpos="right"</code> attribute to the fieldset to create a mini version. </p>
|
||||
|
||||
<div data-demo-html="true">
|
||||
<form>
|
||||
<fieldset data-role="controlgroup" data-iconpos="right">
|
||||
<legend>Icon right:</legend>
|
||||
<input type="checkbox" name="checkbox-h-6a" id="checkbox-h-6a">
|
||||
<label for="checkbox-h-6a">One</label>
|
||||
<input type="checkbox" name="checkbox-h-6b" id="checkbox-h-6b">
|
||||
<label for="checkbox-h-6b">Two</label>
|
||||
<input type="checkbox" name="checkbox-h-6c" id="checkbox-h-6c">
|
||||
<label for="checkbox-h-6c">Three</label>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div><!--/demo-html -->
|
||||
|
||||
<h2>Theme</h2>
|
||||
|
||||
<p>To set the theme, add the <code>data-theme</code> attribute on the <code>fieldset</code> to the individual checkbox inputs.</p>
|
||||
|
||||
<div data-demo-html="true">
|
||||
<form>
|
||||
<fieldset data-role="controlgroup">
|
||||
<legend>Swatch B:</legend>
|
||||
<input type="checkbox" name="checkbox-t-2a" id="checkbox-t-2a" data-theme="b">
|
||||
<label for="checkbox-t-2a">One</label>
|
||||
<input type="checkbox" name="checkbox-t-2b" id="checkbox-t-2b" data-theme="b">
|
||||
<label for="checkbox-t-2b">Two</label>
|
||||
<input type="checkbox" name="checkbox-t-2c" id="checkbox-t-2c" data-theme="b">
|
||||
<label for="checkbox-t-2c">Three</label>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div><!--/demo-html -->
|
||||
|
||||
<h2>Disabled</h2>
|
||||
|
||||
<div data-demo-html="true">
|
||||
<form>
|
||||
<input disabled type="checkbox" name="checkbox-t-2a" id="checkbox-t-2a" data-theme="a">
|
||||
<label for="checkbox-t-2a">One</label>
|
||||
</form>
|
||||
</div><!--/demo-html -->
|
||||
|
||||
<h2>Enhanced</h2>
|
||||
|
||||
<div data-demo-html="true">
|
||||
<div class="ui-checkbox">
|
||||
<label for="checkbox-enhanced" class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off">I agree</label>
|
||||
<input type="checkbox" name="checkbox-enhanced" id="checkbox-enhanced" data-enhanced="true">
|
||||
</div>
|
||||
</div><!--/demo-html -->
|
||||
|
||||
</div><!-- /content -->
|
||||
<div data-role="panel" class="jqm-navmenu-panel" data-position="left" data-display="overlay" data-theme="a">
|
||||
<ul class="jqm-list ui-alt-icon ui-nodisc-icon">
|
||||
<li data-filtertext="demos homepage" data-icon="home"><a href=".././">Home</a></li>
|
||||
<li data-filtertext="introduction overview getting started"><a href="../intro/" data-ajax="false">Introduction</a></li>
|
||||
<li data-filtertext="buttons button markup buttonmarkup method anchor link button element"><a href="../button-markup/" data-ajax="false">Buttons</a></li>
|
||||
<li data-filtertext="form button widget input button submit reset"><a href="../button/" data-ajax="false">Button widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Checkboxradio widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="form checkboxradio widget checkbox input checkboxes controlgroups"><a href="../checkboxradio-checkbox/" data-ajax="false">Checkboxes</a></li>
|
||||
<li data-filtertext="form checkboxradio widget radio input radio buttons controlgroups"><a href="../checkboxradio-radio/" data-ajax="false">Radio buttons</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Collapsible (set) widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="collapsibles content formatting"><a href="../collapsible/" data-ajax="false">Collapsible</a></li>
|
||||
<li data-filtertext="dynamic collapsible set accordion append expand"><a href="../collapsible-dynamic/" data-ajax="false">Dynamic collapsibles</a></li>
|
||||
<li data-filtertext="accordions collapsible set widget content formatting grouped collapsibles"><a href="../collapsibleset/" data-ajax="false">Collapsible set</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Controlgroup widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="controlgroups selectmenu checkboxradio input grouped buttons horizontal vertical"><a href="../controlgroup/" data-ajax="false">Controlgroup</a></li>
|
||||
<li data-filtertext="dynamic controlgroup dynamically add buttons"><a href="../controlgroup-dynamic/" data-ajax="false">Dynamic controlgroups</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="form datepicker widget date input"><a href="../datepicker/" data-ajax="false">Datepicker</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Events</h3>
|
||||
<ul>
|
||||
<li data-filtertext="swipe to delete list items listviews swipe events"><a href="../swipe-list/" data-ajax="false">Swipe list items</a></li>
|
||||
<li data-filtertext="swipe to navigate swipe page navigation swipe events"><a href="../swipe-page/" data-ajax="false">Swipe page navigation</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="filterable filter elements sorting searching listview table"><a href="../filterable/" data-ajax="false">Filterable widget</a></li>
|
||||
<li data-filtertext="form flipswitch widget flip toggle switch binary select checkbox input"><a href="../flipswitch/" data-ajax="false">Flipswitch widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Forms</h3>
|
||||
<ul>
|
||||
<li data-filtertext="forms text checkbox radio range button submit reset inputs selects textarea slider flipswitch label form elements"><a href="../forms/" data-ajax="false">Forms</a></li>
|
||||
<li data-filtertext="form hide labels hidden accessible ui-hidden-accessible forms"><a href="../forms-label-hidden-accessible/" data-ajax="false">Hide labels</a></li>
|
||||
<li data-filtertext="form field containers fieldcontain ui-field-contain forms"><a href="../forms-field-contain/" data-ajax="false">Field containers</a></li>
|
||||
<li data-filtertext="forms disabled form elements"><a href="../forms-disabled/" data-ajax="false">Forms disabled</a></li>
|
||||
<li data-filtertext="forms gallery examples overview forms text checkbox radio range button submit reset inputs selects textarea slider flipswitch label form elements"><a href="../forms-gallery/" data-ajax="false">Forms gallery</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Grids</h3>
|
||||
<ul>
|
||||
<li data-filtertext="grids columns blocks content formatting rwd responsive css framework"><a href="../grids/" data-ajax="false">Grids</a></li>
|
||||
<li data-filtertext="buttons in grids css framework"><a href="../grids-buttons/" data-ajax="false">Buttons in grids</a></li>
|
||||
<li data-filtertext="custom responsive grids rwd css framework"><a href="../grids-custom-responsive/" data-ajax="false">Custom responsive grids</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="blocks content formatting sections heading"><a href="../body-bar-classes/" data-ajax="false">Grouping and dividing content</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Icons</h3>
|
||||
<ul>
|
||||
<li data-filtertext="button icons svg disc alt custom icon position"><a href="../icons/" data-ajax="false">Icons</a></li>
|
||||
<li data-filtertext=""><a href="../icons-grunticon/" data-ajax="false">Grunticon loader</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Listview widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="listview widget thumbnails icons nested split button collapsible ul ol"><a href="../listview/" data-ajax="false">Listview</a></li>
|
||||
<li data-filtertext="autocomplete filterable reveal listview filtertextbeforefilter placeholder"><a href="../listview-autocomplete/" data-ajax="false">Listview autocomplete</a></li>
|
||||
<li data-filtertext="autocomplete filterable reveal listview remote data filtertextbeforefilter placeholder"><a href="../listview-autocomplete-remote/" data-ajax="false">Listview autocomplete remote data</a></li>
|
||||
<li data-filtertext="autodividers anchor jump scroll linkbars listview lists ul ol"><a href="../listview-autodividers-linkbar/" data-ajax="false">Listview autodividers linkbar</a></li>
|
||||
<li data-filtertext="listview autodividers selector autodividersselector lists ul ol"><a href="../listview-autodividers-selector/" data-ajax="false">Listview autodividers selector</a></li>
|
||||
<li data-filtertext="listview nested list items"><a href="../listview-nested-lists/" data-ajax="false">Listview Nested Listviews</a></li>
|
||||
<li data-filtertext="listview collapsible list items flat"><a href="../listview-collapsible-item-flat/" data-ajax="false">Listview collapsible list items (flat)</a></li>
|
||||
<li data-filtertext="listview collapsible list indented"><a href="../listview-collapsible-item-indented/" data-ajax="false">Listview collapsible list items (indented)</a></li>
|
||||
<li data-filtertext="grid listview responsive grids responsive listviews lists ul"><a href="../listview-grid/" data-ajax="false">Listview responsive grid</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="loader widget page loading navigation overlay spinner"><a href="../loader/" data-ajax="false">Loader widget</a></li>
|
||||
<li data-filtertext="navbar widget navmenu toolbars header footer"><a href="../navbar/" data-ajax="false">Navbar widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Navigation</h3>
|
||||
<ul>
|
||||
<li data-filtertext="ajax navigation navigate widget history event method"><a href="../navigation/" data-ajax="false">Navigation</a></li>
|
||||
<li data-filtertext="linking pages page links navigation ajax prefetch cache"><a href="../navigation-linking-pages/" data-ajax="false">Linking pages</a></li>
|
||||
<li data-filtertext="php redirect server redirection server-side navigation"><a href="../navigation-php-redirect/" data-ajax="false">PHP redirect demo</a></li>
|
||||
<li data-filtertext="navigation redirection hash query"><a href="../navigation-hash-processing/" data-ajax="false">Hash processing demo</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Pages</h3>
|
||||
<ul>
|
||||
<li data-filtertext="pages page widget ajax navigation"><a href="../pages/" data-ajax="false">Pages</a></li>
|
||||
<li data-filtertext="single page"><a href="../pages-single-page/" data-ajax="false">Single page</a></li>
|
||||
<li data-filtertext="multipage multi-page page"><a href="../pages-multi-page/" data-ajax="false">Multi-page template</a></li>
|
||||
<li data-filtertext="dialog page widget modal popup"><a href="../pages-dialog/" data-ajax="false">Dialog page</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Panel widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="panel widget sliding panels reveal push overlay responsive"><a href="../panel/" data-ajax="false">Panel</a></li>
|
||||
<li data-filtertext=""><a href="../panel-external/" data-ajax="false">External panels</a></li>
|
||||
<li data-filtertext="panel "><a href="../panel-fixed/" data-ajax="false">Fixed panels</a></li>
|
||||
<li data-filtertext="panel slide panels sliding panels shadow rwd responsive breakpoint"><a href="../panel-responsive/" data-ajax="false">Panels responsive</a></li>
|
||||
<li data-filtertext="panel custom style custom panel width reveal shadow listview panel styling page background wrapper"><a href="../panel-styling/" data-ajax="false">Custom panel style</a></li>
|
||||
<li data-filtertext="panel open on swipe"><a href="../panel-swipe-open/" data-ajax="false">Panel open on swipe</a></li>
|
||||
<li data-filtertext="panels outside page internal external toolbars"><a href="../panel-external-internal/" data-ajax="false">Panel external and internal</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Popup widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="popup widget popups dialog modal transition tooltip lightbox form overlay screen flip pop fade transition"><a href="../popup/" data-ajax="false">Popup</a></li>
|
||||
<li data-filtertext="popup alignment position"><a href="../popup-alignment/" data-ajax="false">Popup alignment</a></li>
|
||||
<li data-filtertext="popup arrow size popups popover"><a href="../popup-arrow-size/" data-ajax="false">Popup arrow size</a></li>
|
||||
<li data-filtertext="dynamic popups popup images lightbox"><a href="../popup-dynamic/" data-ajax="false">Dynamic popups</a></li>
|
||||
<li data-filtertext="popups with iframes scaling"><a href="../popup-iframe/" data-ajax="false">Popups with iframes</a></li>
|
||||
<li data-filtertext="popup image scaling"><a href="../popup-image-scaling/" data-ajax="false">Popup image scaling</a></li>
|
||||
<li data-filtertext="external popup outside multi-page"><a href="../popup-outside-multipage" data-ajax="false">Popup outside multi-page</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="form rangeslider widget dual sliders dual handle sliders range input"><a href="../rangeslider/" data-ajax="false">Rangeslider widget</a></li>
|
||||
<li data-filtertext="responsive web design rwd adaptive progressive enhancement PE accessible mobile breakpoints media query media queries"><a href="../rwd/" data-ajax="false">Responsive Web Design</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Selectmenu widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="form selectmenu widget select input custom select menu selects"><a href="../selectmenu/" data-ajax="false">Selectmenu</a></li>
|
||||
<li data-filtertext="form custom select menu selectmenu widget custom menu option optgroup multiple selects"><a href="../selectmenu-custom/" data-ajax="false">Custom select menu</a></li>
|
||||
<li data-filtertext="filterable select filter popup dialog"><a href="../selectmenu-custom-filter/" data-ajax="false">Custom select menu with filter</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Slider widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="form slider widget range input single sliders"><a href="../slider/" data-ajax="false">Slider</a></li>
|
||||
<li data-filtertext="form slider widget flipswitch slider binary select flip toggle switch"><a href="../slider-flipswitch/" data-ajax="false">Slider flip toggle switch</a></li>
|
||||
<li data-filtertext="form slider tooltip handle value input range sliders"><a href="../slider-tooltip/" data-ajax="false">Slider tooltip</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Table widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="table widget reflow column toggle th td responsive tables rwd hide show tabular"><a href="../table-column-toggle/" data-ajax="false">Table Column Toggle</a></li>
|
||||
<li data-filtertext="table column toggle phone comparison demo"><a href="../table-column-toggle-example/" data-ajax="false">Table Column Toggle demo</a></li>
|
||||
<li data-filtertext="responsive tables table column toggle heading groups rwd breakpoint"><a href="../table-column-toggle-heading-groups/" data-ajax="false">Table Column Toggle heading groups</a></li>
|
||||
<li data-filtertext="responsive tables table column toggle hide rwd breakpoint customization options"><a href="../table-column-toggle-options/" data-ajax="false">Table Column Toggle options</a></li>
|
||||
<li data-filtertext="table reflow th td responsive rwd columns tabular"><a href="../table-reflow/" data-ajax="false">Table Reflow</a></li>
|
||||
<li data-filtertext="responsive tables table reflow heading groups rwd breakpoint"><a href="../table-reflow-heading-groups/" data-ajax="false">Table Reflow heading groups</a></li>
|
||||
<li data-filtertext="responsive tables table reflow stripes strokes table style"><a href="../table-reflow-stripes-strokes/" data-ajax="false">Table Reflow stripes and strokes</a></li>
|
||||
<li data-filtertext="responsive tables table reflow stack custom styles"><a href="../table-reflow-styling/" data-ajax="false">Table Reflow custom styles</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="ui tabs widget"><a href="../tabs/" data-ajax="false">Tabs widget</a></li>
|
||||
<li data-filtertext="form textinput widget text input textarea number date time tel email file color password"><a href="../textinput/" data-ajax="false">Textinput widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Theming</h3>
|
||||
<ul>
|
||||
<li data-filtertext="default theme swatches theming style css"><a href="../theme-default/" data-ajax="false">Default theme</a></li>
|
||||
<li data-filtertext="classic theme old theme swatches theming style css"><a href="../theme-classic/" data-ajax="false">Classic theme</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Toolbar widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="toolbar widget header footer toolbars fixed fullscreen external sections"><a href="../toolbar/" data-ajax="false">Toolbar</a></li>
|
||||
<li data-filtertext="dynamic toolbars dynamically add toolbar header footer"><a href="../toolbar-dynamic/" data-ajax="false">Dynamic toolbars</a></li>
|
||||
<li data-filtertext="external toolbars header footer"><a href="../toolbar-external/" data-ajax="false">External toolbars</a></li>
|
||||
<li data-filtertext="fixed toolbars header footer"><a href="../toolbar-fixed/" data-ajax="false">Fixed toolbars</a></li>
|
||||
<li data-filtertext="fixed fullscreen toolbars header footer"><a href="../toolbar-fixed-fullscreen/" data-ajax="false">Fullscreen toolbars</a></li>
|
||||
<li data-filtertext="external fixed toolbars header footer"><a href="../toolbar-fixed-external/" data-ajax="false">Fixed external toolbars</a></li>
|
||||
<li data-filtertext="external persistent toolbars header footer navbar navmenu"><a href="../toolbar-fixed-persistent/" data-ajax="false">Persistent toolbars</a></li>
|
||||
<li data-filtertext="external ajax optimized toolbars persistent toolbars header footer navbar"><a href="../toolbar-fixed-persistent-optimized/" data-ajax="false">Ajax optimized toolbars</a></li>
|
||||
<li data-filtertext="form in toolbars header footer"><a href="../toolbar-fixed-forms/" data-ajax="false">Form in toolbar</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="page transitions animated pages popup navigation flip slide fade pop"><a href="../transitions/" data-ajax="false">Transitions</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>3rd party API demos</h3>
|
||||
<ul>
|
||||
<li data-filtertext="backbone requirejs navigation router"><a href="../backbone-requirejs/" data-ajax="false">Backbone RequireJS</a></li>
|
||||
<li data-filtertext="google maps geolocation demo"><a href="../map-geolocation/" data-ajax="false">Google Maps geolocation</a></li>
|
||||
<li data-filtertext="google maps hybrid"><a href="../map-list-toggle/" data-ajax="false">Google Maps list toggle</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
</ul>
|
||||
</div><!-- /panel -->
|
||||
|
||||
|
||||
<div data-role="footer" data-position="fixed" data-tap-toggle="false" class="jqm-footer">
|
||||
<p>jQuery Mobile Demos version <span class="jqm-version"></span></p>
|
||||
<p>Copyright 2014 The jQuery Foundation</p>
|
||||
</div><!-- /footer -->
|
||||
<!-- TODO: This should become an external panel so we can add input to markup (unique ID) -->
|
||||
<div data-role="panel" class="jqm-search-panel" data-position="right" data-display="overlay" data-theme="a">
|
||||
<div class="jqm-search">
|
||||
<ul class="jqm-list" data-filter-placeholder="Search demos..." data-filter-reveal="true">
|
||||
<li data-filtertext="demos homepage" data-icon="home"><a href=".././">Home</a></li>
|
||||
<li data-filtertext="introduction overview getting started"><a href="../intro/" data-ajax="false">Introduction</a></li>
|
||||
<li data-filtertext="buttons button markup buttonmarkup method anchor link button element"><a href="../button-markup/" data-ajax="false">Buttons</a></li>
|
||||
<li data-filtertext="form button widget input button submit reset"><a href="../button/" data-ajax="false">Button widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Checkboxradio widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="form checkboxradio widget checkbox input checkboxes controlgroups"><a href="../checkboxradio-checkbox/" data-ajax="false">Checkboxes</a></li>
|
||||
<li data-filtertext="form checkboxradio widget radio input radio buttons controlgroups"><a href="../checkboxradio-radio/" data-ajax="false">Radio buttons</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Collapsible (set) widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="collapsibles content formatting"><a href="../collapsible/" data-ajax="false">Collapsible</a></li>
|
||||
<li data-filtertext="dynamic collapsible set accordion append expand"><a href="../collapsible-dynamic/" data-ajax="false">Dynamic collapsibles</a></li>
|
||||
<li data-filtertext="accordions collapsible set widget content formatting grouped collapsibles"><a href="../collapsibleset/" data-ajax="false">Collapsible set</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Controlgroup widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="controlgroups selectmenu checkboxradio input grouped buttons horizontal vertical"><a href="../controlgroup/" data-ajax="false">Controlgroup</a></li>
|
||||
<li data-filtertext="dynamic controlgroup dynamically add buttons"><a href="../controlgroup-dynamic/" data-ajax="false">Dynamic controlgroups</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="form datepicker widget date input"><a href="../datepicker/" data-ajax="false">Datepicker</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Events</h3>
|
||||
<ul>
|
||||
<li data-filtertext="swipe to delete list items listviews swipe events"><a href="../swipe-list/" data-ajax="false">Swipe list items</a></li>
|
||||
<li data-filtertext="swipe to navigate swipe page navigation swipe events"><a href="../swipe-page/" data-ajax="false">Swipe page navigation</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="filterable filter elements sorting searching listview table"><a href="../filterable/" data-ajax="false">Filterable widget</a></li>
|
||||
<li data-filtertext="form flipswitch widget flip toggle switch binary select checkbox input"><a href="../flipswitch/" data-ajax="false">Flipswitch widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Forms</h3>
|
||||
<ul>
|
||||
<li data-filtertext="forms text checkbox radio range button submit reset inputs selects textarea slider flipswitch label form elements"><a href="../forms/" data-ajax="false">Forms</a></li>
|
||||
<li data-filtertext="form hide labels hidden accessible ui-hidden-accessible forms"><a href="../forms-label-hidden-accessible/" data-ajax="false">Hide labels</a></li>
|
||||
<li data-filtertext="form field containers fieldcontain ui-field-contain forms"><a href="../forms-field-contain/" data-ajax="false">Field containers</a></li>
|
||||
<li data-filtertext="forms disabled form elements"><a href="../forms-disabled/" data-ajax="false">Forms disabled</a></li>
|
||||
<li data-filtertext="forms gallery examples overview forms text checkbox radio range button submit reset inputs selects textarea slider flipswitch label form elements"><a href="../forms-gallery/" data-ajax="false">Forms gallery</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Grids</h3>
|
||||
<ul>
|
||||
<li data-filtertext="grids columns blocks content formatting rwd responsive css framework"><a href="../grids/" data-ajax="false">Grids</a></li>
|
||||
<li data-filtertext="buttons in grids css framework"><a href="../grids-buttons/" data-ajax="false">Buttons in grids</a></li>
|
||||
<li data-filtertext="custom responsive grids rwd css framework"><a href="../grids-custom-responsive/" data-ajax="false">Custom responsive grids</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="blocks content formatting sections heading"><a href="../body-bar-classes/" data-ajax="false">Grouping and dividing content</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Icons</h3>
|
||||
<ul>
|
||||
<li data-filtertext="button icons svg disc alt custom icon position"><a href="../icons/" data-ajax="false">Icons</a></li>
|
||||
<li data-filtertext=""><a href="../icons-grunticon/" data-ajax="false">Grunticon loader</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Listview widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="listview widget thumbnails icons nested split button collapsible ul ol"><a href="../listview/" data-ajax="false">Listview</a></li>
|
||||
<li data-filtertext="autocomplete filterable reveal listview filtertextbeforefilter placeholder"><a href="../listview-autocomplete/" data-ajax="false">Listview autocomplete</a></li>
|
||||
<li data-filtertext="autocomplete filterable reveal listview remote data filtertextbeforefilter placeholder"><a href="../listview-autocomplete-remote/" data-ajax="false">Listview autocomplete remote data</a></li>
|
||||
<li data-filtertext="autodividers anchor jump scroll linkbars listview lists ul ol"><a href="../listview-autodividers-linkbar/" data-ajax="false">Listview autodividers linkbar</a></li>
|
||||
<li data-filtertext="listview autodividers selector autodividersselector lists ul ol"><a href="../listview-autodividers-selector/" data-ajax="false">Listview autodividers selector</a></li>
|
||||
<li data-filtertext="listview nested list items"><a href="../listview-nested-lists/" data-ajax="false">Listview Nested Listviews</a></li>
|
||||
<li data-filtertext="listview collapsible list items flat"><a href="../listview-collapsible-item-flat/" data-ajax="false">Listview collapsible list items (flat)</a></li>
|
||||
<li data-filtertext="listview collapsible list indented"><a href="../listview-collapsible-item-indented/" data-ajax="false">Listview collapsible list items (indented)</a></li>
|
||||
<li data-filtertext="grid listview responsive grids responsive listviews lists ul"><a href="../listview-grid/" data-ajax="false">Listview responsive grid</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="loader widget page loading navigation overlay spinner"><a href="../loader/" data-ajax="false">Loader widget</a></li>
|
||||
<li data-filtertext="navbar widget navmenu toolbars header footer"><a href="../navbar/" data-ajax="false">Navbar widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Navigation</h3>
|
||||
<ul>
|
||||
<li data-filtertext="ajax navigation navigate widget history event method"><a href="../navigation/" data-ajax="false">Navigation</a></li>
|
||||
<li data-filtertext="linking pages page links navigation ajax prefetch cache"><a href="../navigation-linking-pages/" data-ajax="false">Linking pages</a></li>
|
||||
<li data-filtertext="php redirect server redirection server-side navigation"><a href="../navigation-php-redirect/" data-ajax="false">PHP redirect demo</a></li>
|
||||
<li data-filtertext="navigation redirection hash query"><a href="../navigation-hash-processing/" data-ajax="false">Hash processing demo</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Pages</h3>
|
||||
<ul>
|
||||
<li data-filtertext="pages page widget ajax navigation"><a href="../pages/" data-ajax="false">Pages</a></li>
|
||||
<li data-filtertext="single page"><a href="../pages-single-page/" data-ajax="false">Single page</a></li>
|
||||
<li data-filtertext="multipage multi-page page"><a href="../pages-multi-page/" data-ajax="false">Multi-page template</a></li>
|
||||
<li data-filtertext="dialog page widget modal popup"><a href="../pages-dialog/" data-ajax="false">Dialog page</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Panel widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="panel widget sliding panels reveal push overlay responsive"><a href="../panel/" data-ajax="false">Panel</a></li>
|
||||
<li data-filtertext=""><a href="../panel-external/" data-ajax="false">External panels</a></li>
|
||||
<li data-filtertext="panel "><a href="../panel-fixed/" data-ajax="false">Fixed panels</a></li>
|
||||
<li data-filtertext="panel slide panels sliding panels shadow rwd responsive breakpoint"><a href="../panel-responsive/" data-ajax="false">Panels responsive</a></li>
|
||||
<li data-filtertext="panel custom style custom panel width reveal shadow listview panel styling page background wrapper"><a href="../panel-styling/" data-ajax="false">Custom panel style</a></li>
|
||||
<li data-filtertext="panel open on swipe"><a href="../panel-swipe-open/" data-ajax="false">Panel open on swipe</a></li>
|
||||
<li data-filtertext="panels outside page internal external toolbars"><a href="../panel-external-internal/" data-ajax="false">Panel external and internal</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Popup widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="popup widget popups dialog modal transition tooltip lightbox form overlay screen flip pop fade transition"><a href="../popup/" data-ajax="false">Popup</a></li>
|
||||
<li data-filtertext="popup alignment position"><a href="../popup-alignment/" data-ajax="false">Popup alignment</a></li>
|
||||
<li data-filtertext="popup arrow size popups popover"><a href="../popup-arrow-size/" data-ajax="false">Popup arrow size</a></li>
|
||||
<li data-filtertext="dynamic popups popup images lightbox"><a href="../popup-dynamic/" data-ajax="false">Dynamic popups</a></li>
|
||||
<li data-filtertext="popups with iframes scaling"><a href="../popup-iframe/" data-ajax="false">Popups with iframes</a></li>
|
||||
<li data-filtertext="popup image scaling"><a href="../popup-image-scaling/" data-ajax="false">Popup image scaling</a></li>
|
||||
<li data-filtertext="external popup outside multi-page"><a href="../popup-outside-multipage" data-ajax="false">Popup outside multi-page</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="form rangeslider widget dual sliders dual handle sliders range input"><a href="../rangeslider/" data-ajax="false">Rangeslider widget</a></li>
|
||||
<li data-filtertext="responsive web design rwd adaptive progressive enhancement PE accessible mobile breakpoints media query media queries"><a href="../rwd/" data-ajax="false">Responsive Web Design</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Selectmenu widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="form selectmenu widget select input custom select menu selects"><a href="../selectmenu/" data-ajax="false">Selectmenu</a></li>
|
||||
<li data-filtertext="form custom select menu selectmenu widget custom menu option optgroup multiple selects"><a href="../selectmenu-custom/" data-ajax="false">Custom select menu</a></li>
|
||||
<li data-filtertext="filterable select filter popup dialog"><a href="../selectmenu-custom-filter/" data-ajax="false">Custom select menu with filter</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Slider widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="form slider widget range input single sliders"><a href="../slider/" data-ajax="false">Slider</a></li>
|
||||
<li data-filtertext="form slider widget flipswitch slider binary select flip toggle switch"><a href="../slider-flipswitch/" data-ajax="false">Slider flip toggle switch</a></li>
|
||||
<li data-filtertext="form slider tooltip handle value input range sliders"><a href="../slider-tooltip/" data-ajax="false">Slider tooltip</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Table widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="table widget reflow column toggle th td responsive tables rwd hide show tabular"><a href="../table-column-toggle/" data-ajax="false">Table Column Toggle</a></li>
|
||||
<li data-filtertext="table column toggle phone comparison demo"><a href="../table-column-toggle-example/" data-ajax="false">Table Column Toggle demo</a></li>
|
||||
<li data-filtertext="responsive tables table column toggle heading groups rwd breakpoint"><a href="../table-column-toggle-heading-groups/" data-ajax="false">Table Column Toggle heading groups</a></li>
|
||||
<li data-filtertext="responsive tables table column toggle hide rwd breakpoint customization options"><a href="../table-column-toggle-options/" data-ajax="false">Table Column Toggle options</a></li>
|
||||
<li data-filtertext="table reflow th td responsive rwd columns tabular"><a href="../table-reflow/" data-ajax="false">Table Reflow</a></li>
|
||||
<li data-filtertext="responsive tables table reflow heading groups rwd breakpoint"><a href="../table-reflow-heading-groups/" data-ajax="false">Table Reflow heading groups</a></li>
|
||||
<li data-filtertext="responsive tables table reflow stripes strokes table style"><a href="../table-reflow-stripes-strokes/" data-ajax="false">Table Reflow stripes and strokes</a></li>
|
||||
<li data-filtertext="responsive tables table reflow stack custom styles"><a href="../table-reflow-styling/" data-ajax="false">Table Reflow custom styles</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="ui tabs widget"><a href="../tabs/" data-ajax="false">Tabs widget</a></li>
|
||||
<li data-filtertext="form textinput widget text input textarea number date time tel email file color password"><a href="../textinput/" data-ajax="false">Textinput widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Theming</h3>
|
||||
<ul>
|
||||
<li data-filtertext="default theme swatches theming style css"><a href="../theme-default/" data-ajax="false">Default theme</a></li>
|
||||
<li data-filtertext="classic theme old theme swatches theming style css"><a href="../theme-classic/" data-ajax="false">Classic theme</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Toolbar widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="toolbar widget header footer toolbars fixed fullscreen external sections"><a href="../toolbar/" data-ajax="false">Toolbar</a></li>
|
||||
<li data-filtertext="dynamic toolbars dynamically add toolbar header footer"><a href="../toolbar-dynamic/" data-ajax="false">Dynamic toolbars</a></li>
|
||||
<li data-filtertext="external toolbars header footer"><a href="../toolbar-external/" data-ajax="false">External toolbars</a></li>
|
||||
<li data-filtertext="fixed toolbars header footer"><a href="../toolbar-fixed/" data-ajax="false">Fixed toolbars</a></li>
|
||||
<li data-filtertext="fixed fullscreen toolbars header footer"><a href="../toolbar-fixed-fullscreen/" data-ajax="false">Fullscreen toolbars</a></li>
|
||||
<li data-filtertext="external fixed toolbars header footer"><a href="../toolbar-fixed-external/" data-ajax="false">Fixed external toolbars</a></li>
|
||||
<li data-filtertext="external persistent toolbars header footer navbar navmenu"><a href="../toolbar-fixed-persistent/" data-ajax="false">Persistent toolbars</a></li>
|
||||
<li data-filtertext="external ajax optimized toolbars persistent toolbars header footer navbar"><a href="../toolbar-fixed-persistent-optimized/" data-ajax="false">Ajax optimized toolbars</a></li>
|
||||
<li data-filtertext="form in toolbars header footer"><a href="../toolbar-fixed-forms/" data-ajax="false">Form in toolbar</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="page transitions animated pages popup navigation flip slide fade pop"><a href="../transitions/" data-ajax="false">Transitions</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>3rd party API demos</h3>
|
||||
<ul>
|
||||
<li data-filtertext="backbone requirejs navigation router"><a href="../backbone-requirejs/" data-ajax="false">Backbone RequireJS</a></li>
|
||||
<li data-filtertext="google maps geolocation demo"><a href="../map-geolocation/" data-ajax="false">Google Maps geolocation</a></li>
|
||||
<li data-filtertext="google maps hybrid"><a href="../map-list-toggle/" data-ajax="false">Google Maps list toggle</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- /panel -->
|
||||
|
||||
|
||||
</div><!-- /page -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
551
js/libs/jquery.mobile/demos/checkboxradio-radio/index.html
Normal file
551
js/libs/jquery.mobile/demos/checkboxradio-radio/index.html
Normal file
@ -0,0 +1,551 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Radio buttons - jQuery Mobile Demos</title>
|
||||
<link rel="shortcut icon" href="../favicon.ico">
|
||||
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
|
||||
<link rel="stylesheet" href="../css/themes/default/jquery.mobile-1.4.2.min.css">
|
||||
<link rel="stylesheet" href="../_assets/css/jqm-demos.css">
|
||||
<script src="../js/jquery.js"></script>
|
||||
<script src="../_assets/js/index.js"></script>
|
||||
<script src="../js/jquery.mobile-1.4.2.min.js"></script>
|
||||
</head>
|
||||
<div data-role="page" class="jqm-demos" data-quicklinks="true">
|
||||
|
||||
<div data-role="header" class="jqm-header">
|
||||
<h2><a href="../" title="jQuery Mobile Demos home"><img src="../_assets/img/jquery-logo.png" alt="jQuery Mobile"></a></h2>
|
||||
<p><span class="jqm-version"></span> Demos</p>
|
||||
<a href="#" class="jqm-navmenu-link ui-btn ui-btn-icon-notext ui-corner-all ui-icon-bars ui-nodisc-icon ui-alt-icon ui-btn-left">Menu</a>
|
||||
<a href="#" class="jqm-search-link ui-btn ui-btn-icon-notext ui-corner-all ui-icon-search ui-nodisc-icon ui-alt-icon ui-btn-right">Search</a>
|
||||
</div><!-- /header -->
|
||||
|
||||
<div role="main" class="ui-content jqm-content">
|
||||
|
||||
<h1>Radio buttons</h1>
|
||||
|
||||
<p>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.</p>
|
||||
|
||||
<h2>Basic markup</h2>
|
||||
|
||||
<p>To create a set of radio buttons, add an <code>input</code> with a <code>type="radio"</code> attribute and a corresponding <code>label</code>. Set the <code>for</code> attribute of the <code>label</code> to match the <code>id</code> of the <code>input</code> so they are semantically associated.</p>
|
||||
|
||||
<div data-demo-html="true">
|
||||
<form>
|
||||
<label>
|
||||
<input type="radio" name="radio-choice-0" id="radio-choice-0a">One
|
||||
</label>
|
||||
|
||||
<label for="radio-choice-0b">Two</label>
|
||||
<input type="radio" name="radio-choice-0" id="radio-choice-0b" class="custom">
|
||||
</form>
|
||||
</div><!--/demo-html -->
|
||||
|
||||
<h2>Vertical group</h2>
|
||||
|
||||
<p>To visually integrate multiple radio buttons into a vertically grouped button set, the framework will automatically remove all margins between buttons and round only the top and bottom corners of the set if there is a <code> data-role="controlgroup"</code> attribute on the container.</p>
|
||||
|
||||
<div data-demo-html="true">
|
||||
<form>
|
||||
<fieldset data-role="controlgroup">
|
||||
<legend>Vertical:</legend>
|
||||
<input type="radio" name="radio-choice-v-2" id="radio-choice-v-2a" value="on" checked="checked">
|
||||
<label for="radio-choice-v-2a">One</label>
|
||||
<input type="radio" name="radio-choice-v-2" id="radio-choice-v-2b" value="off">
|
||||
<label for="radio-choice-v-2b">Two</label>
|
||||
<input type="radio" name="radio-choice-v-2" id="radio-choice-v-2c" value="other">
|
||||
<label for="radio-choice-v-2c">Three</label>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div><!--/demo-html -->
|
||||
|
||||
<h2>Horizontal group</h2>
|
||||
|
||||
<p>To make a horizontal button set, add the <code> data-type="horizontal"</code> to the <code>fieldset</code>.</p>
|
||||
|
||||
<div data-demo-html="true">
|
||||
<form>
|
||||
<fieldset data-role="controlgroup" data-type="horizontal">
|
||||
<legend>Horizontal:</legend>
|
||||
<input type="radio" name="radio-choice-h-2" id="radio-choice-h-2a" value="on" checked="checked">
|
||||
<label for="radio-choice-h-2a">One</label>
|
||||
<input type="radio" name="radio-choice-h-2" id="radio-choice-h-2b" value="off">
|
||||
<label for="radio-choice-h-2b">Two</label>
|
||||
<input type="radio" name="radio-choice-h-2" id="radio-choice-h-2c" value="other">
|
||||
<label for="radio-choice-h-2c">Three</label>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div><!--/demo-html -->
|
||||
|
||||
<h2>Mini size</h2>
|
||||
|
||||
<p>For a more compact version that is useful in toolbars and tight spaces, add the <code>data-mini="true"</code> attribute to the element to create a mini version. </p>
|
||||
|
||||
<div data-demo-html="true">
|
||||
<form>
|
||||
<fieldset data-role="controlgroup" data-mini="true">
|
||||
<legend>Vertical, icon right, mini sized:</legend>
|
||||
<input type="radio" name="radio-choice-v-6" id="radio-choice-v-6a" value="on" checked="checked">
|
||||
<label for="radio-choice-v-6a">One</label>
|
||||
<input type="radio" name="radio-choice-v-6" id="radio-choice-v-6b" value="off">
|
||||
<label for="radio-choice-v-6b">Two</label>
|
||||
<input type="radio" name="radio-choice-v-6" id="radio-choice-v-6c" value="other">
|
||||
<label for="radio-choice-v-6c">Three</label>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div><!--/demo-html -->
|
||||
|
||||
<h2>Icon position</h2>
|
||||
|
||||
<p>To swap the position of the radio icon from the default position on the left, add the <code>data-iconpos="right"</code> attribute to the controlgroup.</p>
|
||||
|
||||
<div data-demo-html="true">
|
||||
<form>
|
||||
<fieldset data-role="controlgroup" data-iconpos="right">
|
||||
<legend>Vertical, icon right:</legend>
|
||||
<input type="radio" name="radio-choice-w-6" id="radio-choice-w-6a" value="on" checked="checked">
|
||||
<label for="radio-choice-w-6a">One</label>
|
||||
<input type="radio" name="radio-choice-w-6" id="radio-choice-w-6b" value="off">
|
||||
<label for="radio-choice-w-6b">Two</label>
|
||||
<input type="radio" name="radio-choice-w-6" id="radio-choice-w-6c" value="other">
|
||||
<label for="radio-choice-w-6c">Three</label>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div><!--/demo-html -->
|
||||
|
||||
<h2>Theme</h2>
|
||||
|
||||
<p>To set the theme, add the <code>data-theme</code> attribute to the controlgroup or each of the individual checkbox inputs.</p>
|
||||
|
||||
<div data-demo-html="true">
|
||||
<form>
|
||||
<fieldset data-role="controlgroup" data-theme="b" data-type="horizontal">
|
||||
<legend>Horizontal:</legend>
|
||||
<input type="radio" name="radio-choice-t-6" id="radio-choice-t-6a" value="on" checked="checked">
|
||||
<label for="radio-choice-t-6a">One</label>
|
||||
<input type="radio" name="radio-choice-t-6" id="radio-choice-t-6b" value="off">
|
||||
<label for="radio-choice-t-6b">Two</label>
|
||||
<input type="radio" name="radio-choice-t-6" id="radio-choice-t-6c" value="other">
|
||||
<label for="radio-choice-t-6c">Three</label>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div><!--/demo-html -->
|
||||
|
||||
<h2>Disabled</h2>
|
||||
|
||||
<div data-demo-html="true">
|
||||
<form>
|
||||
<label>
|
||||
<input type="radio" name="radio-choice-7" id="radio-choice-7a" disabled="disabled">One
|
||||
</label>
|
||||
<label for="radio-choice-7b">Two</label>
|
||||
<input type="radio" name="radio-choice-7" id="radio-choice-7b" disabled="disabled">
|
||||
</form>
|
||||
</div><!--/demo-html -->
|
||||
|
||||
<h2>Enhanced</h2>
|
||||
|
||||
<div data-demo-html="true">
|
||||
<div class="ui-radio">
|
||||
<label for="radio-enhanced" class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-radio-off">I agree</label>
|
||||
<input type="radio" name="radio-enhanced" id="radio-enhanced" data-enhanced="true">
|
||||
</div>
|
||||
</div><!--/demo-html -->
|
||||
|
||||
</div><!-- /content -->
|
||||
<div data-role="panel" class="jqm-navmenu-panel" data-position="left" data-display="overlay" data-theme="a">
|
||||
<ul class="jqm-list ui-alt-icon ui-nodisc-icon">
|
||||
<li data-filtertext="demos homepage" data-icon="home"><a href=".././">Home</a></li>
|
||||
<li data-filtertext="introduction overview getting started"><a href="../intro/" data-ajax="false">Introduction</a></li>
|
||||
<li data-filtertext="buttons button markup buttonmarkup method anchor link button element"><a href="../button-markup/" data-ajax="false">Buttons</a></li>
|
||||
<li data-filtertext="form button widget input button submit reset"><a href="../button/" data-ajax="false">Button widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Checkboxradio widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="form checkboxradio widget checkbox input checkboxes controlgroups"><a href="../checkboxradio-checkbox/" data-ajax="false">Checkboxes</a></li>
|
||||
<li data-filtertext="form checkboxradio widget radio input radio buttons controlgroups"><a href="../checkboxradio-radio/" data-ajax="false">Radio buttons</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Collapsible (set) widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="collapsibles content formatting"><a href="../collapsible/" data-ajax="false">Collapsible</a></li>
|
||||
<li data-filtertext="dynamic collapsible set accordion append expand"><a href="../collapsible-dynamic/" data-ajax="false">Dynamic collapsibles</a></li>
|
||||
<li data-filtertext="accordions collapsible set widget content formatting grouped collapsibles"><a href="../collapsibleset/" data-ajax="false">Collapsible set</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Controlgroup widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="controlgroups selectmenu checkboxradio input grouped buttons horizontal vertical"><a href="../controlgroup/" data-ajax="false">Controlgroup</a></li>
|
||||
<li data-filtertext="dynamic controlgroup dynamically add buttons"><a href="../controlgroup-dynamic/" data-ajax="false">Dynamic controlgroups</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="form datepicker widget date input"><a href="../datepicker/" data-ajax="false">Datepicker</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Events</h3>
|
||||
<ul>
|
||||
<li data-filtertext="swipe to delete list items listviews swipe events"><a href="../swipe-list/" data-ajax="false">Swipe list items</a></li>
|
||||
<li data-filtertext="swipe to navigate swipe page navigation swipe events"><a href="../swipe-page/" data-ajax="false">Swipe page navigation</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="filterable filter elements sorting searching listview table"><a href="../filterable/" data-ajax="false">Filterable widget</a></li>
|
||||
<li data-filtertext="form flipswitch widget flip toggle switch binary select checkbox input"><a href="../flipswitch/" data-ajax="false">Flipswitch widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Forms</h3>
|
||||
<ul>
|
||||
<li data-filtertext="forms text checkbox radio range button submit reset inputs selects textarea slider flipswitch label form elements"><a href="../forms/" data-ajax="false">Forms</a></li>
|
||||
<li data-filtertext="form hide labels hidden accessible ui-hidden-accessible forms"><a href="../forms-label-hidden-accessible/" data-ajax="false">Hide labels</a></li>
|
||||
<li data-filtertext="form field containers fieldcontain ui-field-contain forms"><a href="../forms-field-contain/" data-ajax="false">Field containers</a></li>
|
||||
<li data-filtertext="forms disabled form elements"><a href="../forms-disabled/" data-ajax="false">Forms disabled</a></li>
|
||||
<li data-filtertext="forms gallery examples overview forms text checkbox radio range button submit reset inputs selects textarea slider flipswitch label form elements"><a href="../forms-gallery/" data-ajax="false">Forms gallery</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Grids</h3>
|
||||
<ul>
|
||||
<li data-filtertext="grids columns blocks content formatting rwd responsive css framework"><a href="../grids/" data-ajax="false">Grids</a></li>
|
||||
<li data-filtertext="buttons in grids css framework"><a href="../grids-buttons/" data-ajax="false">Buttons in grids</a></li>
|
||||
<li data-filtertext="custom responsive grids rwd css framework"><a href="../grids-custom-responsive/" data-ajax="false">Custom responsive grids</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="blocks content formatting sections heading"><a href="../body-bar-classes/" data-ajax="false">Grouping and dividing content</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Icons</h3>
|
||||
<ul>
|
||||
<li data-filtertext="button icons svg disc alt custom icon position"><a href="../icons/" data-ajax="false">Icons</a></li>
|
||||
<li data-filtertext=""><a href="../icons-grunticon/" data-ajax="false">Grunticon loader</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Listview widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="listview widget thumbnails icons nested split button collapsible ul ol"><a href="../listview/" data-ajax="false">Listview</a></li>
|
||||
<li data-filtertext="autocomplete filterable reveal listview filtertextbeforefilter placeholder"><a href="../listview-autocomplete/" data-ajax="false">Listview autocomplete</a></li>
|
||||
<li data-filtertext="autocomplete filterable reveal listview remote data filtertextbeforefilter placeholder"><a href="../listview-autocomplete-remote/" data-ajax="false">Listview autocomplete remote data</a></li>
|
||||
<li data-filtertext="autodividers anchor jump scroll linkbars listview lists ul ol"><a href="../listview-autodividers-linkbar/" data-ajax="false">Listview autodividers linkbar</a></li>
|
||||
<li data-filtertext="listview autodividers selector autodividersselector lists ul ol"><a href="../listview-autodividers-selector/" data-ajax="false">Listview autodividers selector</a></li>
|
||||
<li data-filtertext="listview nested list items"><a href="../listview-nested-lists/" data-ajax="false">Listview Nested Listviews</a></li>
|
||||
<li data-filtertext="listview collapsible list items flat"><a href="../listview-collapsible-item-flat/" data-ajax="false">Listview collapsible list items (flat)</a></li>
|
||||
<li data-filtertext="listview collapsible list indented"><a href="../listview-collapsible-item-indented/" data-ajax="false">Listview collapsible list items (indented)</a></li>
|
||||
<li data-filtertext="grid listview responsive grids responsive listviews lists ul"><a href="../listview-grid/" data-ajax="false">Listview responsive grid</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="loader widget page loading navigation overlay spinner"><a href="../loader/" data-ajax="false">Loader widget</a></li>
|
||||
<li data-filtertext="navbar widget navmenu toolbars header footer"><a href="../navbar/" data-ajax="false">Navbar widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Navigation</h3>
|
||||
<ul>
|
||||
<li data-filtertext="ajax navigation navigate widget history event method"><a href="../navigation/" data-ajax="false">Navigation</a></li>
|
||||
<li data-filtertext="linking pages page links navigation ajax prefetch cache"><a href="../navigation-linking-pages/" data-ajax="false">Linking pages</a></li>
|
||||
<li data-filtertext="php redirect server redirection server-side navigation"><a href="../navigation-php-redirect/" data-ajax="false">PHP redirect demo</a></li>
|
||||
<li data-filtertext="navigation redirection hash query"><a href="../navigation-hash-processing/" data-ajax="false">Hash processing demo</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Pages</h3>
|
||||
<ul>
|
||||
<li data-filtertext="pages page widget ajax navigation"><a href="../pages/" data-ajax="false">Pages</a></li>
|
||||
<li data-filtertext="single page"><a href="../pages-single-page/" data-ajax="false">Single page</a></li>
|
||||
<li data-filtertext="multipage multi-page page"><a href="../pages-multi-page/" data-ajax="false">Multi-page template</a></li>
|
||||
<li data-filtertext="dialog page widget modal popup"><a href="../pages-dialog/" data-ajax="false">Dialog page</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Panel widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="panel widget sliding panels reveal push overlay responsive"><a href="../panel/" data-ajax="false">Panel</a></li>
|
||||
<li data-filtertext=""><a href="../panel-external/" data-ajax="false">External panels</a></li>
|
||||
<li data-filtertext="panel "><a href="../panel-fixed/" data-ajax="false">Fixed panels</a></li>
|
||||
<li data-filtertext="panel slide panels sliding panels shadow rwd responsive breakpoint"><a href="../panel-responsive/" data-ajax="false">Panels responsive</a></li>
|
||||
<li data-filtertext="panel custom style custom panel width reveal shadow listview panel styling page background wrapper"><a href="../panel-styling/" data-ajax="false">Custom panel style</a></li>
|
||||
<li data-filtertext="panel open on swipe"><a href="../panel-swipe-open/" data-ajax="false">Panel open on swipe</a></li>
|
||||
<li data-filtertext="panels outside page internal external toolbars"><a href="../panel-external-internal/" data-ajax="false">Panel external and internal</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Popup widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="popup widget popups dialog modal transition tooltip lightbox form overlay screen flip pop fade transition"><a href="../popup/" data-ajax="false">Popup</a></li>
|
||||
<li data-filtertext="popup alignment position"><a href="../popup-alignment/" data-ajax="false">Popup alignment</a></li>
|
||||
<li data-filtertext="popup arrow size popups popover"><a href="../popup-arrow-size/" data-ajax="false">Popup arrow size</a></li>
|
||||
<li data-filtertext="dynamic popups popup images lightbox"><a href="../popup-dynamic/" data-ajax="false">Dynamic popups</a></li>
|
||||
<li data-filtertext="popups with iframes scaling"><a href="../popup-iframe/" data-ajax="false">Popups with iframes</a></li>
|
||||
<li data-filtertext="popup image scaling"><a href="../popup-image-scaling/" data-ajax="false">Popup image scaling</a></li>
|
||||
<li data-filtertext="external popup outside multi-page"><a href="../popup-outside-multipage" data-ajax="false">Popup outside multi-page</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="form rangeslider widget dual sliders dual handle sliders range input"><a href="../rangeslider/" data-ajax="false">Rangeslider widget</a></li>
|
||||
<li data-filtertext="responsive web design rwd adaptive progressive enhancement PE accessible mobile breakpoints media query media queries"><a href="../rwd/" data-ajax="false">Responsive Web Design</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Selectmenu widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="form selectmenu widget select input custom select menu selects"><a href="../selectmenu/" data-ajax="false">Selectmenu</a></li>
|
||||
<li data-filtertext="form custom select menu selectmenu widget custom menu option optgroup multiple selects"><a href="../selectmenu-custom/" data-ajax="false">Custom select menu</a></li>
|
||||
<li data-filtertext="filterable select filter popup dialog"><a href="../selectmenu-custom-filter/" data-ajax="false">Custom select menu with filter</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Slider widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="form slider widget range input single sliders"><a href="../slider/" data-ajax="false">Slider</a></li>
|
||||
<li data-filtertext="form slider widget flipswitch slider binary select flip toggle switch"><a href="../slider-flipswitch/" data-ajax="false">Slider flip toggle switch</a></li>
|
||||
<li data-filtertext="form slider tooltip handle value input range sliders"><a href="../slider-tooltip/" data-ajax="false">Slider tooltip</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Table widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="table widget reflow column toggle th td responsive tables rwd hide show tabular"><a href="../table-column-toggle/" data-ajax="false">Table Column Toggle</a></li>
|
||||
<li data-filtertext="table column toggle phone comparison demo"><a href="../table-column-toggle-example/" data-ajax="false">Table Column Toggle demo</a></li>
|
||||
<li data-filtertext="responsive tables table column toggle heading groups rwd breakpoint"><a href="../table-column-toggle-heading-groups/" data-ajax="false">Table Column Toggle heading groups</a></li>
|
||||
<li data-filtertext="responsive tables table column toggle hide rwd breakpoint customization options"><a href="../table-column-toggle-options/" data-ajax="false">Table Column Toggle options</a></li>
|
||||
<li data-filtertext="table reflow th td responsive rwd columns tabular"><a href="../table-reflow/" data-ajax="false">Table Reflow</a></li>
|
||||
<li data-filtertext="responsive tables table reflow heading groups rwd breakpoint"><a href="../table-reflow-heading-groups/" data-ajax="false">Table Reflow heading groups</a></li>
|
||||
<li data-filtertext="responsive tables table reflow stripes strokes table style"><a href="../table-reflow-stripes-strokes/" data-ajax="false">Table Reflow stripes and strokes</a></li>
|
||||
<li data-filtertext="responsive tables table reflow stack custom styles"><a href="../table-reflow-styling/" data-ajax="false">Table Reflow custom styles</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="ui tabs widget"><a href="../tabs/" data-ajax="false">Tabs widget</a></li>
|
||||
<li data-filtertext="form textinput widget text input textarea number date time tel email file color password"><a href="../textinput/" data-ajax="false">Textinput widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Theming</h3>
|
||||
<ul>
|
||||
<li data-filtertext="default theme swatches theming style css"><a href="../theme-default/" data-ajax="false">Default theme</a></li>
|
||||
<li data-filtertext="classic theme old theme swatches theming style css"><a href="../theme-classic/" data-ajax="false">Classic theme</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Toolbar widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="toolbar widget header footer toolbars fixed fullscreen external sections"><a href="../toolbar/" data-ajax="false">Toolbar</a></li>
|
||||
<li data-filtertext="dynamic toolbars dynamically add toolbar header footer"><a href="../toolbar-dynamic/" data-ajax="false">Dynamic toolbars</a></li>
|
||||
<li data-filtertext="external toolbars header footer"><a href="../toolbar-external/" data-ajax="false">External toolbars</a></li>
|
||||
<li data-filtertext="fixed toolbars header footer"><a href="../toolbar-fixed/" data-ajax="false">Fixed toolbars</a></li>
|
||||
<li data-filtertext="fixed fullscreen toolbars header footer"><a href="../toolbar-fixed-fullscreen/" data-ajax="false">Fullscreen toolbars</a></li>
|
||||
<li data-filtertext="external fixed toolbars header footer"><a href="../toolbar-fixed-external/" data-ajax="false">Fixed external toolbars</a></li>
|
||||
<li data-filtertext="external persistent toolbars header footer navbar navmenu"><a href="../toolbar-fixed-persistent/" data-ajax="false">Persistent toolbars</a></li>
|
||||
<li data-filtertext="external ajax optimized toolbars persistent toolbars header footer navbar"><a href="../toolbar-fixed-persistent-optimized/" data-ajax="false">Ajax optimized toolbars</a></li>
|
||||
<li data-filtertext="form in toolbars header footer"><a href="../toolbar-fixed-forms/" data-ajax="false">Form in toolbar</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="page transitions animated pages popup navigation flip slide fade pop"><a href="../transitions/" data-ajax="false">Transitions</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>3rd party API demos</h3>
|
||||
<ul>
|
||||
<li data-filtertext="backbone requirejs navigation router"><a href="../backbone-requirejs/" data-ajax="false">Backbone RequireJS</a></li>
|
||||
<li data-filtertext="google maps geolocation demo"><a href="../map-geolocation/" data-ajax="false">Google Maps geolocation</a></li>
|
||||
<li data-filtertext="google maps hybrid"><a href="../map-list-toggle/" data-ajax="false">Google Maps list toggle</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
</ul>
|
||||
</div><!-- /panel -->
|
||||
|
||||
|
||||
<div data-role="footer" data-position="fixed" data-tap-toggle="false" class="jqm-footer">
|
||||
<p>jQuery Mobile Demos version <span class="jqm-version"></span></p>
|
||||
<p>Copyright 2014 The jQuery Foundation</p>
|
||||
</div><!-- /footer -->
|
||||
<!-- TODO: This should become an external panel so we can add input to markup (unique ID) -->
|
||||
<div data-role="panel" class="jqm-search-panel" data-position="right" data-display="overlay" data-theme="a">
|
||||
<div class="jqm-search">
|
||||
<ul class="jqm-list" data-filter-placeholder="Search demos..." data-filter-reveal="true">
|
||||
<li data-filtertext="demos homepage" data-icon="home"><a href=".././">Home</a></li>
|
||||
<li data-filtertext="introduction overview getting started"><a href="../intro/" data-ajax="false">Introduction</a></li>
|
||||
<li data-filtertext="buttons button markup buttonmarkup method anchor link button element"><a href="../button-markup/" data-ajax="false">Buttons</a></li>
|
||||
<li data-filtertext="form button widget input button submit reset"><a href="../button/" data-ajax="false">Button widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Checkboxradio widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="form checkboxradio widget checkbox input checkboxes controlgroups"><a href="../checkboxradio-checkbox/" data-ajax="false">Checkboxes</a></li>
|
||||
<li data-filtertext="form checkboxradio widget radio input radio buttons controlgroups"><a href="../checkboxradio-radio/" data-ajax="false">Radio buttons</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Collapsible (set) widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="collapsibles content formatting"><a href="../collapsible/" data-ajax="false">Collapsible</a></li>
|
||||
<li data-filtertext="dynamic collapsible set accordion append expand"><a href="../collapsible-dynamic/" data-ajax="false">Dynamic collapsibles</a></li>
|
||||
<li data-filtertext="accordions collapsible set widget content formatting grouped collapsibles"><a href="../collapsibleset/" data-ajax="false">Collapsible set</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Controlgroup widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="controlgroups selectmenu checkboxradio input grouped buttons horizontal vertical"><a href="../controlgroup/" data-ajax="false">Controlgroup</a></li>
|
||||
<li data-filtertext="dynamic controlgroup dynamically add buttons"><a href="../controlgroup-dynamic/" data-ajax="false">Dynamic controlgroups</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="form datepicker widget date input"><a href="../datepicker/" data-ajax="false">Datepicker</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Events</h3>
|
||||
<ul>
|
||||
<li data-filtertext="swipe to delete list items listviews swipe events"><a href="../swipe-list/" data-ajax="false">Swipe list items</a></li>
|
||||
<li data-filtertext="swipe to navigate swipe page navigation swipe events"><a href="../swipe-page/" data-ajax="false">Swipe page navigation</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="filterable filter elements sorting searching listview table"><a href="../filterable/" data-ajax="false">Filterable widget</a></li>
|
||||
<li data-filtertext="form flipswitch widget flip toggle switch binary select checkbox input"><a href="../flipswitch/" data-ajax="false">Flipswitch widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Forms</h3>
|
||||
<ul>
|
||||
<li data-filtertext="forms text checkbox radio range button submit reset inputs selects textarea slider flipswitch label form elements"><a href="../forms/" data-ajax="false">Forms</a></li>
|
||||
<li data-filtertext="form hide labels hidden accessible ui-hidden-accessible forms"><a href="../forms-label-hidden-accessible/" data-ajax="false">Hide labels</a></li>
|
||||
<li data-filtertext="form field containers fieldcontain ui-field-contain forms"><a href="../forms-field-contain/" data-ajax="false">Field containers</a></li>
|
||||
<li data-filtertext="forms disabled form elements"><a href="../forms-disabled/" data-ajax="false">Forms disabled</a></li>
|
||||
<li data-filtertext="forms gallery examples overview forms text checkbox radio range button submit reset inputs selects textarea slider flipswitch label form elements"><a href="../forms-gallery/" data-ajax="false">Forms gallery</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Grids</h3>
|
||||
<ul>
|
||||
<li data-filtertext="grids columns blocks content formatting rwd responsive css framework"><a href="../grids/" data-ajax="false">Grids</a></li>
|
||||
<li data-filtertext="buttons in grids css framework"><a href="../grids-buttons/" data-ajax="false">Buttons in grids</a></li>
|
||||
<li data-filtertext="custom responsive grids rwd css framework"><a href="../grids-custom-responsive/" data-ajax="false">Custom responsive grids</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="blocks content formatting sections heading"><a href="../body-bar-classes/" data-ajax="false">Grouping and dividing content</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Icons</h3>
|
||||
<ul>
|
||||
<li data-filtertext="button icons svg disc alt custom icon position"><a href="../icons/" data-ajax="false">Icons</a></li>
|
||||
<li data-filtertext=""><a href="../icons-grunticon/" data-ajax="false">Grunticon loader</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Listview widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="listview widget thumbnails icons nested split button collapsible ul ol"><a href="../listview/" data-ajax="false">Listview</a></li>
|
||||
<li data-filtertext="autocomplete filterable reveal listview filtertextbeforefilter placeholder"><a href="../listview-autocomplete/" data-ajax="false">Listview autocomplete</a></li>
|
||||
<li data-filtertext="autocomplete filterable reveal listview remote data filtertextbeforefilter placeholder"><a href="../listview-autocomplete-remote/" data-ajax="false">Listview autocomplete remote data</a></li>
|
||||
<li data-filtertext="autodividers anchor jump scroll linkbars listview lists ul ol"><a href="../listview-autodividers-linkbar/" data-ajax="false">Listview autodividers linkbar</a></li>
|
||||
<li data-filtertext="listview autodividers selector autodividersselector lists ul ol"><a href="../listview-autodividers-selector/" data-ajax="false">Listview autodividers selector</a></li>
|
||||
<li data-filtertext="listview nested list items"><a href="../listview-nested-lists/" data-ajax="false">Listview Nested Listviews</a></li>
|
||||
<li data-filtertext="listview collapsible list items flat"><a href="../listview-collapsible-item-flat/" data-ajax="false">Listview collapsible list items (flat)</a></li>
|
||||
<li data-filtertext="listview collapsible list indented"><a href="../listview-collapsible-item-indented/" data-ajax="false">Listview collapsible list items (indented)</a></li>
|
||||
<li data-filtertext="grid listview responsive grids responsive listviews lists ul"><a href="../listview-grid/" data-ajax="false">Listview responsive grid</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="loader widget page loading navigation overlay spinner"><a href="../loader/" data-ajax="false">Loader widget</a></li>
|
||||
<li data-filtertext="navbar widget navmenu toolbars header footer"><a href="../navbar/" data-ajax="false">Navbar widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Navigation</h3>
|
||||
<ul>
|
||||
<li data-filtertext="ajax navigation navigate widget history event method"><a href="../navigation/" data-ajax="false">Navigation</a></li>
|
||||
<li data-filtertext="linking pages page links navigation ajax prefetch cache"><a href="../navigation-linking-pages/" data-ajax="false">Linking pages</a></li>
|
||||
<li data-filtertext="php redirect server redirection server-side navigation"><a href="../navigation-php-redirect/" data-ajax="false">PHP redirect demo</a></li>
|
||||
<li data-filtertext="navigation redirection hash query"><a href="../navigation-hash-processing/" data-ajax="false">Hash processing demo</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Pages</h3>
|
||||
<ul>
|
||||
<li data-filtertext="pages page widget ajax navigation"><a href="../pages/" data-ajax="false">Pages</a></li>
|
||||
<li data-filtertext="single page"><a href="../pages-single-page/" data-ajax="false">Single page</a></li>
|
||||
<li data-filtertext="multipage multi-page page"><a href="../pages-multi-page/" data-ajax="false">Multi-page template</a></li>
|
||||
<li data-filtertext="dialog page widget modal popup"><a href="../pages-dialog/" data-ajax="false">Dialog page</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Panel widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="panel widget sliding panels reveal push overlay responsive"><a href="../panel/" data-ajax="false">Panel</a></li>
|
||||
<li data-filtertext=""><a href="../panel-external/" data-ajax="false">External panels</a></li>
|
||||
<li data-filtertext="panel "><a href="../panel-fixed/" data-ajax="false">Fixed panels</a></li>
|
||||
<li data-filtertext="panel slide panels sliding panels shadow rwd responsive breakpoint"><a href="../panel-responsive/" data-ajax="false">Panels responsive</a></li>
|
||||
<li data-filtertext="panel custom style custom panel width reveal shadow listview panel styling page background wrapper"><a href="../panel-styling/" data-ajax="false">Custom panel style</a></li>
|
||||
<li data-filtertext="panel open on swipe"><a href="../panel-swipe-open/" data-ajax="false">Panel open on swipe</a></li>
|
||||
<li data-filtertext="panels outside page internal external toolbars"><a href="../panel-external-internal/" data-ajax="false">Panel external and internal</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Popup widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="popup widget popups dialog modal transition tooltip lightbox form overlay screen flip pop fade transition"><a href="../popup/" data-ajax="false">Popup</a></li>
|
||||
<li data-filtertext="popup alignment position"><a href="../popup-alignment/" data-ajax="false">Popup alignment</a></li>
|
||||
<li data-filtertext="popup arrow size popups popover"><a href="../popup-arrow-size/" data-ajax="false">Popup arrow size</a></li>
|
||||
<li data-filtertext="dynamic popups popup images lightbox"><a href="../popup-dynamic/" data-ajax="false">Dynamic popups</a></li>
|
||||
<li data-filtertext="popups with iframes scaling"><a href="../popup-iframe/" data-ajax="false">Popups with iframes</a></li>
|
||||
<li data-filtertext="popup image scaling"><a href="../popup-image-scaling/" data-ajax="false">Popup image scaling</a></li>
|
||||
<li data-filtertext="external popup outside multi-page"><a href="../popup-outside-multipage" data-ajax="false">Popup outside multi-page</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="form rangeslider widget dual sliders dual handle sliders range input"><a href="../rangeslider/" data-ajax="false">Rangeslider widget</a></li>
|
||||
<li data-filtertext="responsive web design rwd adaptive progressive enhancement PE accessible mobile breakpoints media query media queries"><a href="../rwd/" data-ajax="false">Responsive Web Design</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Selectmenu widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="form selectmenu widget select input custom select menu selects"><a href="../selectmenu/" data-ajax="false">Selectmenu</a></li>
|
||||
<li data-filtertext="form custom select menu selectmenu widget custom menu option optgroup multiple selects"><a href="../selectmenu-custom/" data-ajax="false">Custom select menu</a></li>
|
||||
<li data-filtertext="filterable select filter popup dialog"><a href="../selectmenu-custom-filter/" data-ajax="false">Custom select menu with filter</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Slider widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="form slider widget range input single sliders"><a href="../slider/" data-ajax="false">Slider</a></li>
|
||||
<li data-filtertext="form slider widget flipswitch slider binary select flip toggle switch"><a href="../slider-flipswitch/" data-ajax="false">Slider flip toggle switch</a></li>
|
||||
<li data-filtertext="form slider tooltip handle value input range sliders"><a href="../slider-tooltip/" data-ajax="false">Slider tooltip</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Table widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="table widget reflow column toggle th td responsive tables rwd hide show tabular"><a href="../table-column-toggle/" data-ajax="false">Table Column Toggle</a></li>
|
||||
<li data-filtertext="table column toggle phone comparison demo"><a href="../table-column-toggle-example/" data-ajax="false">Table Column Toggle demo</a></li>
|
||||
<li data-filtertext="responsive tables table column toggle heading groups rwd breakpoint"><a href="../table-column-toggle-heading-groups/" data-ajax="false">Table Column Toggle heading groups</a></li>
|
||||
<li data-filtertext="responsive tables table column toggle hide rwd breakpoint customization options"><a href="../table-column-toggle-options/" data-ajax="false">Table Column Toggle options</a></li>
|
||||
<li data-filtertext="table reflow th td responsive rwd columns tabular"><a href="../table-reflow/" data-ajax="false">Table Reflow</a></li>
|
||||
<li data-filtertext="responsive tables table reflow heading groups rwd breakpoint"><a href="../table-reflow-heading-groups/" data-ajax="false">Table Reflow heading groups</a></li>
|
||||
<li data-filtertext="responsive tables table reflow stripes strokes table style"><a href="../table-reflow-stripes-strokes/" data-ajax="false">Table Reflow stripes and strokes</a></li>
|
||||
<li data-filtertext="responsive tables table reflow stack custom styles"><a href="../table-reflow-styling/" data-ajax="false">Table Reflow custom styles</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="ui tabs widget"><a href="../tabs/" data-ajax="false">Tabs widget</a></li>
|
||||
<li data-filtertext="form textinput widget text input textarea number date time tel email file color password"><a href="../textinput/" data-ajax="false">Textinput widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Theming</h3>
|
||||
<ul>
|
||||
<li data-filtertext="default theme swatches theming style css"><a href="../theme-default/" data-ajax="false">Default theme</a></li>
|
||||
<li data-filtertext="classic theme old theme swatches theming style css"><a href="../theme-classic/" data-ajax="false">Classic theme</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Toolbar widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="toolbar widget header footer toolbars fixed fullscreen external sections"><a href="../toolbar/" data-ajax="false">Toolbar</a></li>
|
||||
<li data-filtertext="dynamic toolbars dynamically add toolbar header footer"><a href="../toolbar-dynamic/" data-ajax="false">Dynamic toolbars</a></li>
|
||||
<li data-filtertext="external toolbars header footer"><a href="../toolbar-external/" data-ajax="false">External toolbars</a></li>
|
||||
<li data-filtertext="fixed toolbars header footer"><a href="../toolbar-fixed/" data-ajax="false">Fixed toolbars</a></li>
|
||||
<li data-filtertext="fixed fullscreen toolbars header footer"><a href="../toolbar-fixed-fullscreen/" data-ajax="false">Fullscreen toolbars</a></li>
|
||||
<li data-filtertext="external fixed toolbars header footer"><a href="../toolbar-fixed-external/" data-ajax="false">Fixed external toolbars</a></li>
|
||||
<li data-filtertext="external persistent toolbars header footer navbar navmenu"><a href="../toolbar-fixed-persistent/" data-ajax="false">Persistent toolbars</a></li>
|
||||
<li data-filtertext="external ajax optimized toolbars persistent toolbars header footer navbar"><a href="../toolbar-fixed-persistent-optimized/" data-ajax="false">Ajax optimized toolbars</a></li>
|
||||
<li data-filtertext="form in toolbars header footer"><a href="../toolbar-fixed-forms/" data-ajax="false">Form in toolbar</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="page transitions animated pages popup navigation flip slide fade pop"><a href="../transitions/" data-ajax="false">Transitions</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>3rd party API demos</h3>
|
||||
<ul>
|
||||
<li data-filtertext="backbone requirejs navigation router"><a href="../backbone-requirejs/" data-ajax="false">Backbone RequireJS</a></li>
|
||||
<li data-filtertext="google maps geolocation demo"><a href="../map-geolocation/" data-ajax="false">Google Maps geolocation</a></li>
|
||||
<li data-filtertext="google maps hybrid"><a href="../map-list-toggle/" data-ajax="false">Google Maps list toggle</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- /panel -->
|
||||
|
||||
|
||||
</div><!-- /page -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
461
js/libs/jquery.mobile/demos/collapsible-dynamic/index.html
Normal file
461
js/libs/jquery.mobile/demos/collapsible-dynamic/index.html
Normal file
@ -0,0 +1,461 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Dynamic collapsible - jQuery Mobile Demos</title>
|
||||
<link rel="shortcut icon" href="../favicon.ico">
|
||||
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
|
||||
<link rel="stylesheet" href="../css/themes/default/jquery.mobile-1.4.2.min.css">
|
||||
<link rel="stylesheet" href="../_assets/css/jqm-demos.css">
|
||||
<script src="../js/jquery.js"></script>
|
||||
<script src="../_assets/js/index.js"></script>
|
||||
<script src="../js/jquery.mobile-1.4.2.min.js"></script>
|
||||
<script>
|
||||
$( document ).on( "pagecreate", function() {
|
||||
var nextId = 1;
|
||||
|
||||
$("#add").click(function() {
|
||||
nextId++;
|
||||
var content = "<div data-role='collapsible' id='set" + nextId + "'><h3>Section " + nextId + "</h3><p>I am the collapsible content in a set so this feels like an accordion. I am hidden by default because I have the 'collapsed' state; you need to expand the header to see me.</p></div>";
|
||||
|
||||
$( "#set" ).append( content ).collapsibleset( "refresh" );
|
||||
});
|
||||
|
||||
$( "#expand" ).click(function() {
|
||||
$("#set").children(":last").collapsible( "expand" );
|
||||
});
|
||||
|
||||
$( "#collapse" ).click(function() {
|
||||
$( "#set" ).children( ":last" ).collapsible( "collapse" );
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div data-role="page" class="jqm-demos">
|
||||
|
||||
<div data-role="header" class="jqm-header">
|
||||
<h2><a href="../" title="jQuery Mobile Demos home"><img src="../_assets/img/jquery-logo.png" alt="jQuery Mobile"></a></h2>
|
||||
<p><span class="jqm-version"></span> Demos</p>
|
||||
<a href="#" class="jqm-navmenu-link ui-btn ui-btn-icon-notext ui-corner-all ui-icon-bars ui-nodisc-icon ui-alt-icon ui-btn-left">Menu</a>
|
||||
<a href="#" class="jqm-search-link ui-btn ui-btn-icon-notext ui-corner-all ui-icon-search ui-nodisc-icon ui-alt-icon ui-btn-right">Search</a>
|
||||
</div><!-- /header -->
|
||||
|
||||
<div role="main" class="ui-content jqm-content">
|
||||
|
||||
<h1>Dynamic collapsible</h1>
|
||||
|
||||
<p>This demo shows how you can dynamically add a collapsible to a collapsible set (accordion). It also shows how you can use the <code>expand</code> and <code>collapse</code> events to dynamically open or close a collapsible.</p>
|
||||
|
||||
<div data-demo-html="true" data-demo-js="true">
|
||||
<button type="button" data-icon="gear" data-iconpos="right" data-mini="true" data-inline="true" id="add">Add</button>
|
||||
<button type="button" data-icon="plus" data-iconpos="right" data-mini="true" data-inline="true" id="expand">Expand last</button>
|
||||
<button type="button" data-icon="minus" data-iconpos="right" data-mini="true" data-inline="true" id="collapse">Collapse last</button>
|
||||
|
||||
<div data-role="collapsibleset" data-content-theme="a" data-iconpos="right" id="set">
|
||||
<div data-role="collapsible" id="set1" data-collapsed="true">
|
||||
<h3>Section 1</h3>
|
||||
<p>I'm the collapsible content.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div><!--/demo-html -->
|
||||
|
||||
</div><!-- /content -->
|
||||
<div data-role="panel" class="jqm-navmenu-panel" data-position="left" data-display="overlay" data-theme="a">
|
||||
<ul class="jqm-list ui-alt-icon ui-nodisc-icon">
|
||||
<li data-filtertext="demos homepage" data-icon="home"><a href=".././">Home</a></li>
|
||||
<li data-filtertext="introduction overview getting started"><a href="../intro/" data-ajax="false">Introduction</a></li>
|
||||
<li data-filtertext="buttons button markup buttonmarkup method anchor link button element"><a href="../button-markup/" data-ajax="false">Buttons</a></li>
|
||||
<li data-filtertext="form button widget input button submit reset"><a href="../button/" data-ajax="false">Button widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Checkboxradio widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="form checkboxradio widget checkbox input checkboxes controlgroups"><a href="../checkboxradio-checkbox/" data-ajax="false">Checkboxes</a></li>
|
||||
<li data-filtertext="form checkboxradio widget radio input radio buttons controlgroups"><a href="../checkboxradio-radio/" data-ajax="false">Radio buttons</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Collapsible (set) widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="collapsibles content formatting"><a href="../collapsible/" data-ajax="false">Collapsible</a></li>
|
||||
<li data-filtertext="dynamic collapsible set accordion append expand"><a href="../collapsible-dynamic/" data-ajax="false">Dynamic collapsibles</a></li>
|
||||
<li data-filtertext="accordions collapsible set widget content formatting grouped collapsibles"><a href="../collapsibleset/" data-ajax="false">Collapsible set</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Controlgroup widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="controlgroups selectmenu checkboxradio input grouped buttons horizontal vertical"><a href="../controlgroup/" data-ajax="false">Controlgroup</a></li>
|
||||
<li data-filtertext="dynamic controlgroup dynamically add buttons"><a href="../controlgroup-dynamic/" data-ajax="false">Dynamic controlgroups</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="form datepicker widget date input"><a href="../datepicker/" data-ajax="false">Datepicker</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Events</h3>
|
||||
<ul>
|
||||
<li data-filtertext="swipe to delete list items listviews swipe events"><a href="../swipe-list/" data-ajax="false">Swipe list items</a></li>
|
||||
<li data-filtertext="swipe to navigate swipe page navigation swipe events"><a href="../swipe-page/" data-ajax="false">Swipe page navigation</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="filterable filter elements sorting searching listview table"><a href="../filterable/" data-ajax="false">Filterable widget</a></li>
|
||||
<li data-filtertext="form flipswitch widget flip toggle switch binary select checkbox input"><a href="../flipswitch/" data-ajax="false">Flipswitch widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Forms</h3>
|
||||
<ul>
|
||||
<li data-filtertext="forms text checkbox radio range button submit reset inputs selects textarea slider flipswitch label form elements"><a href="../forms/" data-ajax="false">Forms</a></li>
|
||||
<li data-filtertext="form hide labels hidden accessible ui-hidden-accessible forms"><a href="../forms-label-hidden-accessible/" data-ajax="false">Hide labels</a></li>
|
||||
<li data-filtertext="form field containers fieldcontain ui-field-contain forms"><a href="../forms-field-contain/" data-ajax="false">Field containers</a></li>
|
||||
<li data-filtertext="forms disabled form elements"><a href="../forms-disabled/" data-ajax="false">Forms disabled</a></li>
|
||||
<li data-filtertext="forms gallery examples overview forms text checkbox radio range button submit reset inputs selects textarea slider flipswitch label form elements"><a href="../forms-gallery/" data-ajax="false">Forms gallery</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Grids</h3>
|
||||
<ul>
|
||||
<li data-filtertext="grids columns blocks content formatting rwd responsive css framework"><a href="../grids/" data-ajax="false">Grids</a></li>
|
||||
<li data-filtertext="buttons in grids css framework"><a href="../grids-buttons/" data-ajax="false">Buttons in grids</a></li>
|
||||
<li data-filtertext="custom responsive grids rwd css framework"><a href="../grids-custom-responsive/" data-ajax="false">Custom responsive grids</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="blocks content formatting sections heading"><a href="../body-bar-classes/" data-ajax="false">Grouping and dividing content</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Icons</h3>
|
||||
<ul>
|
||||
<li data-filtertext="button icons svg disc alt custom icon position"><a href="../icons/" data-ajax="false">Icons</a></li>
|
||||
<li data-filtertext=""><a href="../icons-grunticon/" data-ajax="false">Grunticon loader</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Listview widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="listview widget thumbnails icons nested split button collapsible ul ol"><a href="../listview/" data-ajax="false">Listview</a></li>
|
||||
<li data-filtertext="autocomplete filterable reveal listview filtertextbeforefilter placeholder"><a href="../listview-autocomplete/" data-ajax="false">Listview autocomplete</a></li>
|
||||
<li data-filtertext="autocomplete filterable reveal listview remote data filtertextbeforefilter placeholder"><a href="../listview-autocomplete-remote/" data-ajax="false">Listview autocomplete remote data</a></li>
|
||||
<li data-filtertext="autodividers anchor jump scroll linkbars listview lists ul ol"><a href="../listview-autodividers-linkbar/" data-ajax="false">Listview autodividers linkbar</a></li>
|
||||
<li data-filtertext="listview autodividers selector autodividersselector lists ul ol"><a href="../listview-autodividers-selector/" data-ajax="false">Listview autodividers selector</a></li>
|
||||
<li data-filtertext="listview nested list items"><a href="../listview-nested-lists/" data-ajax="false">Listview Nested Listviews</a></li>
|
||||
<li data-filtertext="listview collapsible list items flat"><a href="../listview-collapsible-item-flat/" data-ajax="false">Listview collapsible list items (flat)</a></li>
|
||||
<li data-filtertext="listview collapsible list indented"><a href="../listview-collapsible-item-indented/" data-ajax="false">Listview collapsible list items (indented)</a></li>
|
||||
<li data-filtertext="grid listview responsive grids responsive listviews lists ul"><a href="../listview-grid/" data-ajax="false">Listview responsive grid</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="loader widget page loading navigation overlay spinner"><a href="../loader/" data-ajax="false">Loader widget</a></li>
|
||||
<li data-filtertext="navbar widget navmenu toolbars header footer"><a href="../navbar/" data-ajax="false">Navbar widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Navigation</h3>
|
||||
<ul>
|
||||
<li data-filtertext="ajax navigation navigate widget history event method"><a href="../navigation/" data-ajax="false">Navigation</a></li>
|
||||
<li data-filtertext="linking pages page links navigation ajax prefetch cache"><a href="../navigation-linking-pages/" data-ajax="false">Linking pages</a></li>
|
||||
<li data-filtertext="php redirect server redirection server-side navigation"><a href="../navigation-php-redirect/" data-ajax="false">PHP redirect demo</a></li>
|
||||
<li data-filtertext="navigation redirection hash query"><a href="../navigation-hash-processing/" data-ajax="false">Hash processing demo</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Pages</h3>
|
||||
<ul>
|
||||
<li data-filtertext="pages page widget ajax navigation"><a href="../pages/" data-ajax="false">Pages</a></li>
|
||||
<li data-filtertext="single page"><a href="../pages-single-page/" data-ajax="false">Single page</a></li>
|
||||
<li data-filtertext="multipage multi-page page"><a href="../pages-multi-page/" data-ajax="false">Multi-page template</a></li>
|
||||
<li data-filtertext="dialog page widget modal popup"><a href="../pages-dialog/" data-ajax="false">Dialog page</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Panel widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="panel widget sliding panels reveal push overlay responsive"><a href="../panel/" data-ajax="false">Panel</a></li>
|
||||
<li data-filtertext=""><a href="../panel-external/" data-ajax="false">External panels</a></li>
|
||||
<li data-filtertext="panel "><a href="../panel-fixed/" data-ajax="false">Fixed panels</a></li>
|
||||
<li data-filtertext="panel slide panels sliding panels shadow rwd responsive breakpoint"><a href="../panel-responsive/" data-ajax="false">Panels responsive</a></li>
|
||||
<li data-filtertext="panel custom style custom panel width reveal shadow listview panel styling page background wrapper"><a href="../panel-styling/" data-ajax="false">Custom panel style</a></li>
|
||||
<li data-filtertext="panel open on swipe"><a href="../panel-swipe-open/" data-ajax="false">Panel open on swipe</a></li>
|
||||
<li data-filtertext="panels outside page internal external toolbars"><a href="../panel-external-internal/" data-ajax="false">Panel external and internal</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Popup widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="popup widget popups dialog modal transition tooltip lightbox form overlay screen flip pop fade transition"><a href="../popup/" data-ajax="false">Popup</a></li>
|
||||
<li data-filtertext="popup alignment position"><a href="../popup-alignment/" data-ajax="false">Popup alignment</a></li>
|
||||
<li data-filtertext="popup arrow size popups popover"><a href="../popup-arrow-size/" data-ajax="false">Popup arrow size</a></li>
|
||||
<li data-filtertext="dynamic popups popup images lightbox"><a href="../popup-dynamic/" data-ajax="false">Dynamic popups</a></li>
|
||||
<li data-filtertext="popups with iframes scaling"><a href="../popup-iframe/" data-ajax="false">Popups with iframes</a></li>
|
||||
<li data-filtertext="popup image scaling"><a href="../popup-image-scaling/" data-ajax="false">Popup image scaling</a></li>
|
||||
<li data-filtertext="external popup outside multi-page"><a href="../popup-outside-multipage" data-ajax="false">Popup outside multi-page</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="form rangeslider widget dual sliders dual handle sliders range input"><a href="../rangeslider/" data-ajax="false">Rangeslider widget</a></li>
|
||||
<li data-filtertext="responsive web design rwd adaptive progressive enhancement PE accessible mobile breakpoints media query media queries"><a href="../rwd/" data-ajax="false">Responsive Web Design</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Selectmenu widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="form selectmenu widget select input custom select menu selects"><a href="../selectmenu/" data-ajax="false">Selectmenu</a></li>
|
||||
<li data-filtertext="form custom select menu selectmenu widget custom menu option optgroup multiple selects"><a href="../selectmenu-custom/" data-ajax="false">Custom select menu</a></li>
|
||||
<li data-filtertext="filterable select filter popup dialog"><a href="../selectmenu-custom-filter/" data-ajax="false">Custom select menu with filter</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Slider widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="form slider widget range input single sliders"><a href="../slider/" data-ajax="false">Slider</a></li>
|
||||
<li data-filtertext="form slider widget flipswitch slider binary select flip toggle switch"><a href="../slider-flipswitch/" data-ajax="false">Slider flip toggle switch</a></li>
|
||||
<li data-filtertext="form slider tooltip handle value input range sliders"><a href="../slider-tooltip/" data-ajax="false">Slider tooltip</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Table widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="table widget reflow column toggle th td responsive tables rwd hide show tabular"><a href="../table-column-toggle/" data-ajax="false">Table Column Toggle</a></li>
|
||||
<li data-filtertext="table column toggle phone comparison demo"><a href="../table-column-toggle-example/" data-ajax="false">Table Column Toggle demo</a></li>
|
||||
<li data-filtertext="responsive tables table column toggle heading groups rwd breakpoint"><a href="../table-column-toggle-heading-groups/" data-ajax="false">Table Column Toggle heading groups</a></li>
|
||||
<li data-filtertext="responsive tables table column toggle hide rwd breakpoint customization options"><a href="../table-column-toggle-options/" data-ajax="false">Table Column Toggle options</a></li>
|
||||
<li data-filtertext="table reflow th td responsive rwd columns tabular"><a href="../table-reflow/" data-ajax="false">Table Reflow</a></li>
|
||||
<li data-filtertext="responsive tables table reflow heading groups rwd breakpoint"><a href="../table-reflow-heading-groups/" data-ajax="false">Table Reflow heading groups</a></li>
|
||||
<li data-filtertext="responsive tables table reflow stripes strokes table style"><a href="../table-reflow-stripes-strokes/" data-ajax="false">Table Reflow stripes and strokes</a></li>
|
||||
<li data-filtertext="responsive tables table reflow stack custom styles"><a href="../table-reflow-styling/" data-ajax="false">Table Reflow custom styles</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="ui tabs widget"><a href="../tabs/" data-ajax="false">Tabs widget</a></li>
|
||||
<li data-filtertext="form textinput widget text input textarea number date time tel email file color password"><a href="../textinput/" data-ajax="false">Textinput widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Theming</h3>
|
||||
<ul>
|
||||
<li data-filtertext="default theme swatches theming style css"><a href="../theme-default/" data-ajax="false">Default theme</a></li>
|
||||
<li data-filtertext="classic theme old theme swatches theming style css"><a href="../theme-classic/" data-ajax="false">Classic theme</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Toolbar widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="toolbar widget header footer toolbars fixed fullscreen external sections"><a href="../toolbar/" data-ajax="false">Toolbar</a></li>
|
||||
<li data-filtertext="dynamic toolbars dynamically add toolbar header footer"><a href="../toolbar-dynamic/" data-ajax="false">Dynamic toolbars</a></li>
|
||||
<li data-filtertext="external toolbars header footer"><a href="../toolbar-external/" data-ajax="false">External toolbars</a></li>
|
||||
<li data-filtertext="fixed toolbars header footer"><a href="../toolbar-fixed/" data-ajax="false">Fixed toolbars</a></li>
|
||||
<li data-filtertext="fixed fullscreen toolbars header footer"><a href="../toolbar-fixed-fullscreen/" data-ajax="false">Fullscreen toolbars</a></li>
|
||||
<li data-filtertext="external fixed toolbars header footer"><a href="../toolbar-fixed-external/" data-ajax="false">Fixed external toolbars</a></li>
|
||||
<li data-filtertext="external persistent toolbars header footer navbar navmenu"><a href="../toolbar-fixed-persistent/" data-ajax="false">Persistent toolbars</a></li>
|
||||
<li data-filtertext="external ajax optimized toolbars persistent toolbars header footer navbar"><a href="../toolbar-fixed-persistent-optimized/" data-ajax="false">Ajax optimized toolbars</a></li>
|
||||
<li data-filtertext="form in toolbars header footer"><a href="../toolbar-fixed-forms/" data-ajax="false">Form in toolbar</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="page transitions animated pages popup navigation flip slide fade pop"><a href="../transitions/" data-ajax="false">Transitions</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>3rd party API demos</h3>
|
||||
<ul>
|
||||
<li data-filtertext="backbone requirejs navigation router"><a href="../backbone-requirejs/" data-ajax="false">Backbone RequireJS</a></li>
|
||||
<li data-filtertext="google maps geolocation demo"><a href="../map-geolocation/" data-ajax="false">Google Maps geolocation</a></li>
|
||||
<li data-filtertext="google maps hybrid"><a href="../map-list-toggle/" data-ajax="false">Google Maps list toggle</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
</ul>
|
||||
</div><!-- /panel -->
|
||||
|
||||
|
||||
<div data-role="footer" data-position="fixed" data-tap-toggle="false" class="jqm-footer">
|
||||
<p>jQuery Mobile Demos version <span class="jqm-version"></span></p>
|
||||
<p>Copyright 2014 The jQuery Foundation</p>
|
||||
</div><!-- /footer -->
|
||||
<!-- TODO: This should become an external panel so we can add input to markup (unique ID) -->
|
||||
<div data-role="panel" class="jqm-search-panel" data-position="right" data-display="overlay" data-theme="a">
|
||||
<div class="jqm-search">
|
||||
<ul class="jqm-list" data-filter-placeholder="Search demos..." data-filter-reveal="true">
|
||||
<li data-filtertext="demos homepage" data-icon="home"><a href=".././">Home</a></li>
|
||||
<li data-filtertext="introduction overview getting started"><a href="../intro/" data-ajax="false">Introduction</a></li>
|
||||
<li data-filtertext="buttons button markup buttonmarkup method anchor link button element"><a href="../button-markup/" data-ajax="false">Buttons</a></li>
|
||||
<li data-filtertext="form button widget input button submit reset"><a href="../button/" data-ajax="false">Button widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Checkboxradio widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="form checkboxradio widget checkbox input checkboxes controlgroups"><a href="../checkboxradio-checkbox/" data-ajax="false">Checkboxes</a></li>
|
||||
<li data-filtertext="form checkboxradio widget radio input radio buttons controlgroups"><a href="../checkboxradio-radio/" data-ajax="false">Radio buttons</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Collapsible (set) widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="collapsibles content formatting"><a href="../collapsible/" data-ajax="false">Collapsible</a></li>
|
||||
<li data-filtertext="dynamic collapsible set accordion append expand"><a href="../collapsible-dynamic/" data-ajax="false">Dynamic collapsibles</a></li>
|
||||
<li data-filtertext="accordions collapsible set widget content formatting grouped collapsibles"><a href="../collapsibleset/" data-ajax="false">Collapsible set</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Controlgroup widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="controlgroups selectmenu checkboxradio input grouped buttons horizontal vertical"><a href="../controlgroup/" data-ajax="false">Controlgroup</a></li>
|
||||
<li data-filtertext="dynamic controlgroup dynamically add buttons"><a href="../controlgroup-dynamic/" data-ajax="false">Dynamic controlgroups</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="form datepicker widget date input"><a href="../datepicker/" data-ajax="false">Datepicker</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Events</h3>
|
||||
<ul>
|
||||
<li data-filtertext="swipe to delete list items listviews swipe events"><a href="../swipe-list/" data-ajax="false">Swipe list items</a></li>
|
||||
<li data-filtertext="swipe to navigate swipe page navigation swipe events"><a href="../swipe-page/" data-ajax="false">Swipe page navigation</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="filterable filter elements sorting searching listview table"><a href="../filterable/" data-ajax="false">Filterable widget</a></li>
|
||||
<li data-filtertext="form flipswitch widget flip toggle switch binary select checkbox input"><a href="../flipswitch/" data-ajax="false">Flipswitch widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Forms</h3>
|
||||
<ul>
|
||||
<li data-filtertext="forms text checkbox radio range button submit reset inputs selects textarea slider flipswitch label form elements"><a href="../forms/" data-ajax="false">Forms</a></li>
|
||||
<li data-filtertext="form hide labels hidden accessible ui-hidden-accessible forms"><a href="../forms-label-hidden-accessible/" data-ajax="false">Hide labels</a></li>
|
||||
<li data-filtertext="form field containers fieldcontain ui-field-contain forms"><a href="../forms-field-contain/" data-ajax="false">Field containers</a></li>
|
||||
<li data-filtertext="forms disabled form elements"><a href="../forms-disabled/" data-ajax="false">Forms disabled</a></li>
|
||||
<li data-filtertext="forms gallery examples overview forms text checkbox radio range button submit reset inputs selects textarea slider flipswitch label form elements"><a href="../forms-gallery/" data-ajax="false">Forms gallery</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Grids</h3>
|
||||
<ul>
|
||||
<li data-filtertext="grids columns blocks content formatting rwd responsive css framework"><a href="../grids/" data-ajax="false">Grids</a></li>
|
||||
<li data-filtertext="buttons in grids css framework"><a href="../grids-buttons/" data-ajax="false">Buttons in grids</a></li>
|
||||
<li data-filtertext="custom responsive grids rwd css framework"><a href="../grids-custom-responsive/" data-ajax="false">Custom responsive grids</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="blocks content formatting sections heading"><a href="../body-bar-classes/" data-ajax="false">Grouping and dividing content</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Icons</h3>
|
||||
<ul>
|
||||
<li data-filtertext="button icons svg disc alt custom icon position"><a href="../icons/" data-ajax="false">Icons</a></li>
|
||||
<li data-filtertext=""><a href="../icons-grunticon/" data-ajax="false">Grunticon loader</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Listview widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="listview widget thumbnails icons nested split button collapsible ul ol"><a href="../listview/" data-ajax="false">Listview</a></li>
|
||||
<li data-filtertext="autocomplete filterable reveal listview filtertextbeforefilter placeholder"><a href="../listview-autocomplete/" data-ajax="false">Listview autocomplete</a></li>
|
||||
<li data-filtertext="autocomplete filterable reveal listview remote data filtertextbeforefilter placeholder"><a href="../listview-autocomplete-remote/" data-ajax="false">Listview autocomplete remote data</a></li>
|
||||
<li data-filtertext="autodividers anchor jump scroll linkbars listview lists ul ol"><a href="../listview-autodividers-linkbar/" data-ajax="false">Listview autodividers linkbar</a></li>
|
||||
<li data-filtertext="listview autodividers selector autodividersselector lists ul ol"><a href="../listview-autodividers-selector/" data-ajax="false">Listview autodividers selector</a></li>
|
||||
<li data-filtertext="listview nested list items"><a href="../listview-nested-lists/" data-ajax="false">Listview Nested Listviews</a></li>
|
||||
<li data-filtertext="listview collapsible list items flat"><a href="../listview-collapsible-item-flat/" data-ajax="false">Listview collapsible list items (flat)</a></li>
|
||||
<li data-filtertext="listview collapsible list indented"><a href="../listview-collapsible-item-indented/" data-ajax="false">Listview collapsible list items (indented)</a></li>
|
||||
<li data-filtertext="grid listview responsive grids responsive listviews lists ul"><a href="../listview-grid/" data-ajax="false">Listview responsive grid</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="loader widget page loading navigation overlay spinner"><a href="../loader/" data-ajax="false">Loader widget</a></li>
|
||||
<li data-filtertext="navbar widget navmenu toolbars header footer"><a href="../navbar/" data-ajax="false">Navbar widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Navigation</h3>
|
||||
<ul>
|
||||
<li data-filtertext="ajax navigation navigate widget history event method"><a href="../navigation/" data-ajax="false">Navigation</a></li>
|
||||
<li data-filtertext="linking pages page links navigation ajax prefetch cache"><a href="../navigation-linking-pages/" data-ajax="false">Linking pages</a></li>
|
||||
<li data-filtertext="php redirect server redirection server-side navigation"><a href="../navigation-php-redirect/" data-ajax="false">PHP redirect demo</a></li>
|
||||
<li data-filtertext="navigation redirection hash query"><a href="../navigation-hash-processing/" data-ajax="false">Hash processing demo</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Pages</h3>
|
||||
<ul>
|
||||
<li data-filtertext="pages page widget ajax navigation"><a href="../pages/" data-ajax="false">Pages</a></li>
|
||||
<li data-filtertext="single page"><a href="../pages-single-page/" data-ajax="false">Single page</a></li>
|
||||
<li data-filtertext="multipage multi-page page"><a href="../pages-multi-page/" data-ajax="false">Multi-page template</a></li>
|
||||
<li data-filtertext="dialog page widget modal popup"><a href="../pages-dialog/" data-ajax="false">Dialog page</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Panel widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="panel widget sliding panels reveal push overlay responsive"><a href="../panel/" data-ajax="false">Panel</a></li>
|
||||
<li data-filtertext=""><a href="../panel-external/" data-ajax="false">External panels</a></li>
|
||||
<li data-filtertext="panel "><a href="../panel-fixed/" data-ajax="false">Fixed panels</a></li>
|
||||
<li data-filtertext="panel slide panels sliding panels shadow rwd responsive breakpoint"><a href="../panel-responsive/" data-ajax="false">Panels responsive</a></li>
|
||||
<li data-filtertext="panel custom style custom panel width reveal shadow listview panel styling page background wrapper"><a href="../panel-styling/" data-ajax="false">Custom panel style</a></li>
|
||||
<li data-filtertext="panel open on swipe"><a href="../panel-swipe-open/" data-ajax="false">Panel open on swipe</a></li>
|
||||
<li data-filtertext="panels outside page internal external toolbars"><a href="../panel-external-internal/" data-ajax="false">Panel external and internal</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Popup widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="popup widget popups dialog modal transition tooltip lightbox form overlay screen flip pop fade transition"><a href="../popup/" data-ajax="false">Popup</a></li>
|
||||
<li data-filtertext="popup alignment position"><a href="../popup-alignment/" data-ajax="false">Popup alignment</a></li>
|
||||
<li data-filtertext="popup arrow size popups popover"><a href="../popup-arrow-size/" data-ajax="false">Popup arrow size</a></li>
|
||||
<li data-filtertext="dynamic popups popup images lightbox"><a href="../popup-dynamic/" data-ajax="false">Dynamic popups</a></li>
|
||||
<li data-filtertext="popups with iframes scaling"><a href="../popup-iframe/" data-ajax="false">Popups with iframes</a></li>
|
||||
<li data-filtertext="popup image scaling"><a href="../popup-image-scaling/" data-ajax="false">Popup image scaling</a></li>
|
||||
<li data-filtertext="external popup outside multi-page"><a href="../popup-outside-multipage" data-ajax="false">Popup outside multi-page</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="form rangeslider widget dual sliders dual handle sliders range input"><a href="../rangeslider/" data-ajax="false">Rangeslider widget</a></li>
|
||||
<li data-filtertext="responsive web design rwd adaptive progressive enhancement PE accessible mobile breakpoints media query media queries"><a href="../rwd/" data-ajax="false">Responsive Web Design</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Selectmenu widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="form selectmenu widget select input custom select menu selects"><a href="../selectmenu/" data-ajax="false">Selectmenu</a></li>
|
||||
<li data-filtertext="form custom select menu selectmenu widget custom menu option optgroup multiple selects"><a href="../selectmenu-custom/" data-ajax="false">Custom select menu</a></li>
|
||||
<li data-filtertext="filterable select filter popup dialog"><a href="../selectmenu-custom-filter/" data-ajax="false">Custom select menu with filter</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Slider widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="form slider widget range input single sliders"><a href="../slider/" data-ajax="false">Slider</a></li>
|
||||
<li data-filtertext="form slider widget flipswitch slider binary select flip toggle switch"><a href="../slider-flipswitch/" data-ajax="false">Slider flip toggle switch</a></li>
|
||||
<li data-filtertext="form slider tooltip handle value input range sliders"><a href="../slider-tooltip/" data-ajax="false">Slider tooltip</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Table widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="table widget reflow column toggle th td responsive tables rwd hide show tabular"><a href="../table-column-toggle/" data-ajax="false">Table Column Toggle</a></li>
|
||||
<li data-filtertext="table column toggle phone comparison demo"><a href="../table-column-toggle-example/" data-ajax="false">Table Column Toggle demo</a></li>
|
||||
<li data-filtertext="responsive tables table column toggle heading groups rwd breakpoint"><a href="../table-column-toggle-heading-groups/" data-ajax="false">Table Column Toggle heading groups</a></li>
|
||||
<li data-filtertext="responsive tables table column toggle hide rwd breakpoint customization options"><a href="../table-column-toggle-options/" data-ajax="false">Table Column Toggle options</a></li>
|
||||
<li data-filtertext="table reflow th td responsive rwd columns tabular"><a href="../table-reflow/" data-ajax="false">Table Reflow</a></li>
|
||||
<li data-filtertext="responsive tables table reflow heading groups rwd breakpoint"><a href="../table-reflow-heading-groups/" data-ajax="false">Table Reflow heading groups</a></li>
|
||||
<li data-filtertext="responsive tables table reflow stripes strokes table style"><a href="../table-reflow-stripes-strokes/" data-ajax="false">Table Reflow stripes and strokes</a></li>
|
||||
<li data-filtertext="responsive tables table reflow stack custom styles"><a href="../table-reflow-styling/" data-ajax="false">Table Reflow custom styles</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="ui tabs widget"><a href="../tabs/" data-ajax="false">Tabs widget</a></li>
|
||||
<li data-filtertext="form textinput widget text input textarea number date time tel email file color password"><a href="../textinput/" data-ajax="false">Textinput widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Theming</h3>
|
||||
<ul>
|
||||
<li data-filtertext="default theme swatches theming style css"><a href="../theme-default/" data-ajax="false">Default theme</a></li>
|
||||
<li data-filtertext="classic theme old theme swatches theming style css"><a href="../theme-classic/" data-ajax="false">Classic theme</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Toolbar widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="toolbar widget header footer toolbars fixed fullscreen external sections"><a href="../toolbar/" data-ajax="false">Toolbar</a></li>
|
||||
<li data-filtertext="dynamic toolbars dynamically add toolbar header footer"><a href="../toolbar-dynamic/" data-ajax="false">Dynamic toolbars</a></li>
|
||||
<li data-filtertext="external toolbars header footer"><a href="../toolbar-external/" data-ajax="false">External toolbars</a></li>
|
||||
<li data-filtertext="fixed toolbars header footer"><a href="../toolbar-fixed/" data-ajax="false">Fixed toolbars</a></li>
|
||||
<li data-filtertext="fixed fullscreen toolbars header footer"><a href="../toolbar-fixed-fullscreen/" data-ajax="false">Fullscreen toolbars</a></li>
|
||||
<li data-filtertext="external fixed toolbars header footer"><a href="../toolbar-fixed-external/" data-ajax="false">Fixed external toolbars</a></li>
|
||||
<li data-filtertext="external persistent toolbars header footer navbar navmenu"><a href="../toolbar-fixed-persistent/" data-ajax="false">Persistent toolbars</a></li>
|
||||
<li data-filtertext="external ajax optimized toolbars persistent toolbars header footer navbar"><a href="../toolbar-fixed-persistent-optimized/" data-ajax="false">Ajax optimized toolbars</a></li>
|
||||
<li data-filtertext="form in toolbars header footer"><a href="../toolbar-fixed-forms/" data-ajax="false">Form in toolbar</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="page transitions animated pages popup navigation flip slide fade pop"><a href="../transitions/" data-ajax="false">Transitions</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>3rd party API demos</h3>
|
||||
<ul>
|
||||
<li data-filtertext="backbone requirejs navigation router"><a href="../backbone-requirejs/" data-ajax="false">Backbone RequireJS</a></li>
|
||||
<li data-filtertext="google maps geolocation demo"><a href="../map-geolocation/" data-ajax="false">Google Maps geolocation</a></li>
|
||||
<li data-filtertext="google maps hybrid"><a href="../map-list-toggle/" data-ajax="false">Google Maps list toggle</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- /panel -->
|
||||
|
||||
|
||||
</div><!-- /page -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
634
js/libs/jquery.mobile/demos/collapsible/index.html
Normal file
634
js/libs/jquery.mobile/demos/collapsible/index.html
Normal file
@ -0,0 +1,634 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Collapsible - jQuery Mobile Demos</title>
|
||||
<link rel="stylesheet" href="../css/themes/default/jquery.mobile-1.4.2.min.css">
|
||||
<link rel="stylesheet" href="../_assets/css/jqm-demos.css">
|
||||
<link rel="shortcut icon" href="../favicon.ico">
|
||||
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
|
||||
<script src="../js/jquery.js"></script>
|
||||
<script src="../_assets/js/index.js"></script>
|
||||
<script src="../js/jquery.mobile-1.4.2.min.js"></script>
|
||||
<style id="negateDoubleBorder">
|
||||
#demo-borders .ui-collapsible-heading .ui-btn { border-top-width: 1px !important; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div data-role="page" class="jqm-demos" data-quicklinks="true">
|
||||
|
||||
<div data-role="header" class="jqm-header">
|
||||
<h2><a href="../" title="jQuery Mobile Demos home"><img src="../_assets/img/jquery-logo.png" alt="jQuery Mobile"></a></h2>
|
||||
<p><span class="jqm-version"></span> Demos</p>
|
||||
<a href="#" class="jqm-navmenu-link ui-btn ui-btn-icon-notext ui-corner-all ui-icon-bars ui-nodisc-icon ui-alt-icon ui-btn-left">Menu</a>
|
||||
<a href="#" class="jqm-search-link ui-btn ui-btn-icon-notext ui-corner-all ui-icon-search ui-nodisc-icon ui-alt-icon ui-btn-right">Search</a>
|
||||
</div><!-- /header -->
|
||||
|
||||
<div role="main" class="ui-content jqm-content">
|
||||
|
||||
<h1>Collapsible</h1>
|
||||
|
||||
<p>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.</p>
|
||||
|
||||
<h2>Basic collapsible</h2>
|
||||
|
||||
<p>To create a collapsible block of content, create a container and add the <code> data-role="collapsible"</code> attribute. Directly inside this container, add any header (H1-H6) or legend element. The framework will style the header to look like a clickable button and add a "+" icon to the left to indicate it's expandable. After the header, add any HTML markup you want to be collapsible. The framework will wrap this markup in a container that will be hidden/shown when the heading is clicked.</p>
|
||||
|
||||
<div data-demo-html="true">
|
||||
<div data-role="collapsible">
|
||||
<h4>Heading</h4>
|
||||
<p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
|
||||
</div>
|
||||
</div><!--/demo-html -->
|
||||
|
||||
<h2>Theme</h2>
|
||||
|
||||
<p>Add the <code>data-theme</code> attribute to set a theme for the collapsible, and the <code>data-content-theme</code> attribute to the wrapper and specify a theme swatch letter.</p>
|
||||
|
||||
<div data-demo-html="true">
|
||||
<div data-role="collapsible" data-theme="b" data-content-theme="b">
|
||||
<h4>Heading</h4>
|
||||
<p>I'm the collapsible content with a themed content block set to "b".</p>
|
||||
</div>
|
||||
</div><!--/demo-html -->
|
||||
|
||||
<p>The collapsible content inherits a theme by default. Set <code>data-content-theme</code> to <code>false</code> to have no theme at all.</p>
|
||||
|
||||
<div data-demo-html="true">
|
||||
<div data-role="collapsible" data-content-theme="false">
|
||||
<h4>Heading</h4>
|
||||
<p>I'm the collapsible content without a theme.</p>
|
||||
</div>
|
||||
</div><!--/demo-html -->
|
||||
|
||||
<h2>Expanded</h2>
|
||||
|
||||
<p>To expand the content when the page loads, add the <code>data-collapsed="false"</code> attribute to the wrapper.</p>
|
||||
|
||||
<div data-demo-html="true">
|
||||
<div data-role="collapsible" data-collapsed="false">
|
||||
<h4>Heading</h4>
|
||||
<ul data-role="listview">
|
||||
<li><a href="#">List item 1</a></li>
|
||||
<li><a href="#">List item 2</a></li>
|
||||
<li><a href="#">List item 3</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!--/demo-html -->
|
||||
|
||||
<h2>Mini sized</h2>
|
||||
|
||||
<p>For a more compact version that is useful in toolbars and tight spaces, add the <code>data-mini="true"</code> attribute to the element to create a mini version. </p>
|
||||
|
||||
<div data-demo-html="true">
|
||||
<div data-role="collapsible" data-mini="true">
|
||||
<h4>Heading</h4>
|
||||
<ul data-role="listview">
|
||||
<li><a href="#">List item 1</a></li>
|
||||
<li><a href="#">List item 2</a></li>
|
||||
<li><a href="#">List item 3</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!--/demo-html -->
|
||||
|
||||
<h2>Icons</h2>
|
||||
|
||||
<p>The default icons of collapsible headings can be overridden by using the <code>data-collapsed-icon</code> and <code>data-expanded-icon</code> attributes. In the example below, <code>data-collapsed-icon="carat-d"</code> and <code>data-expanded-icon="carat-u"</code>.</p>
|
||||
|
||||
<div data-demo-html="true">
|
||||
<div data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u">
|
||||
<h4>Heading</h4>
|
||||
<ul data-role="listview" data-inset="false">
|
||||
<li>Read-only list item 1</li>
|
||||
<li>Read-only list item 2</li>
|
||||
<li>Read-only list item 3</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!--/demo-html -->
|
||||
|
||||
<h2>Icon positioning</h2>
|
||||
|
||||
<p>The default icon positioning of collapsible headings can be overridden by using the <code>data-iconpos</code> attribute. In the below case, <code>data-iconpos="right"</code>.</p>
|
||||
|
||||
<div data-role="collapsible" data-iconpos="right">
|
||||
<h3>I'm a header</h3>
|
||||
<p><code>data-iconpos="right"</code></p>
|
||||
</div>
|
||||
|
||||
<h2>Legend</h2>
|
||||
|
||||
<p>For forms, use a <code>fieldset</code> and <code>legend</code> for the collapsible.</p>
|
||||
<div data-demo-html="true">
|
||||
<form>
|
||||
<fieldset data-role="collapsible">
|
||||
<legend>Legend</legend>
|
||||
|
||||
<label for="textinput-f">Text Input:</label>
|
||||
<input type="text" name="textinput-f" id="textinput-f" placeholder="Text input" value="">
|
||||
|
||||
<div data-role="controlgroup">
|
||||
<input type="checkbox" name="checkbox-1-a" id="checkbox-1-a">
|
||||
<label for="checkbox-1-a">One</label>
|
||||
<input type="checkbox" name="checkbox-2-a" id="checkbox-2-a">
|
||||
<label for="checkbox-2-a">Two</label>
|
||||
<input type="checkbox" name="checkbox-3-a" id="checkbox-3-a">
|
||||
<label for="checkbox-3-a">Three</label>
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div><!--/demo-html -->
|
||||
|
||||
<h2>Non-inset collapsible</h2>
|
||||
|
||||
<p>By default collapsibles have an inset appearance. To make them full width without corner styling add the <code>data-inset="false"</code> attribute to the element.</p>
|
||||
|
||||
<div data-demo-html="true">
|
||||
<div data-role="collapsible" data-inset="false">
|
||||
<h4>Heading</h4>
|
||||
<p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
|
||||
</div>
|
||||
</div><!--/demo-html -->
|
||||
|
||||
<h2>Set of individual collapsibles</h2>
|
||||
|
||||
<p>This is an example of a series of individual collapsibles. The difference with a "Collapsible Set" is that multiple collapsible rows can be open at once.</p>
|
||||
|
||||
<div data-demo-html="true">
|
||||
<div data-role="collapsible" data-inset="false">
|
||||
<h3>Pets</h3>
|
||||
<ul data-role="listview">
|
||||
<li><a href="#">Canary</a></li>
|
||||
<li><a href="#">Cat</a></li>
|
||||
<li><a href="#">Dog</a></li>
|
||||
<li><a href="#">Gerbil</a></li>
|
||||
<li><a href="#">Iguana</a></li>
|
||||
<li><a href="#">Mouse</a></li>
|
||||
</ul>
|
||||
</div><!-- /collapsible -->
|
||||
<div data-role="collapsible" data-inset="false">
|
||||
<h3>Farm animals</h3>
|
||||
<ul data-role="listview">
|
||||
<li><a href="#">Chicken</a></li>
|
||||
<li><a href="#">Cow</a></li>
|
||||
<li><a href="#">Duck</a></li>
|
||||
<li><a href="#">Horse</a></li>
|
||||
<li><a href="#">Pig</a></li>
|
||||
<li><a href="#">Sheep</a></li>
|
||||
</ul>
|
||||
</div><!-- /collapsible -->
|
||||
<div data-role="collapsible" data-inset="false">
|
||||
<h3>Wild Animals</h3>
|
||||
<ul data-role="listview">
|
||||
<li><a href="#">Aardvark</a></li>
|
||||
<li><a href="#">Alligator</a></li>
|
||||
<li><a href="#">Ant</a></li>
|
||||
<li><a href="#">Bear</a></li>
|
||||
<li><a href="#">Beaver</a></li>
|
||||
<li><a href="#">Cougar</a></li>
|
||||
<li><a href="#">Dingo</a></li>
|
||||
</ul>
|
||||
</div><!-- /collapsible -->
|
||||
</div><!--/demo-html -->
|
||||
|
||||
<p>To avoid "double" borders the framework removes the top border of collapsibles that are immediately preceded by another collapsible. Here we show how to negate this with custom CSS.</p>
|
||||
|
||||
<div data-demo-html="true" data-demo-css="#negateDoubleBorder">
|
||||
<div id="demo-borders">
|
||||
<div data-role="collapsible" data-inset="false">
|
||||
<h3>Pets</h3>
|
||||
<ul data-role="listview">
|
||||
<li><a href="#">Canary</a></li>
|
||||
<li><a href="#">Cat</a></li>
|
||||
<li><a href="#">Dog</a></li>
|
||||
<li><a href="#">Gerbil</a></li>
|
||||
<li><a href="#">Iguana</a></li>
|
||||
<li><a href="#">Mouse</a></li>
|
||||
</ul>
|
||||
</div><!-- /collapsible -->
|
||||
<div data-role="collapsible" data-inset="false">
|
||||
<h3>Farm animals</h3>
|
||||
<ul data-role="listview">
|
||||
<li><a href="#">Chicken</a></li>
|
||||
<li><a href="#">Cow</a></li>
|
||||
<li><a href="#">Duck</a></li>
|
||||
<li><a href="#">Horse</a></li>
|
||||
<li><a href="#">Pig</a></li>
|
||||
<li><a href="#">Sheep</a></li>
|
||||
</ul>
|
||||
</div><!-- /collapsible -->
|
||||
</div>
|
||||
</div><!--/demo-html -->
|
||||
|
||||
<h2>Pre-rendered markup</h2>
|
||||
<p>You can supply pre-rendered markup for any collapsible to save startup time. The example below illustrates the markup you have to provide for a pre-rendered collapsible.</p>
|
||||
<div data-demo-html="true">
|
||||
<div data-role="collapsible" data-enhanced="true" class="ui-collapsible ui-collapsible-inset ui-corner-all ui-collapsible-collapsed">
|
||||
<h4 class="ui-collapsible-heading ui-collapsible-heading-collapsed">
|
||||
<a href="#" class="ui-collapsible-heading-toggle ui-btn ui-btn-icon-left ui-icon-plus">
|
||||
Heading
|
||||
<div class="ui-collapsible-heading-status"> click to expand contents</div>
|
||||
</a>
|
||||
</h4>
|
||||
<div class="ui-collapsible-content ui-collapsible-content-collapsed" aria-hidden="true">
|
||||
<p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div><!-- /content -->
|
||||
<div data-role="panel" class="jqm-navmenu-panel" data-position="left" data-display="overlay" data-theme="a">
|
||||
<ul class="jqm-list ui-alt-icon ui-nodisc-icon">
|
||||
<li data-filtertext="demos homepage" data-icon="home"><a href=".././">Home</a></li>
|
||||
<li data-filtertext="introduction overview getting started"><a href="../intro/" data-ajax="false">Introduction</a></li>
|
||||
<li data-filtertext="buttons button markup buttonmarkup method anchor link button element"><a href="../button-markup/" data-ajax="false">Buttons</a></li>
|
||||
<li data-filtertext="form button widget input button submit reset"><a href="../button/" data-ajax="false">Button widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Checkboxradio widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="form checkboxradio widget checkbox input checkboxes controlgroups"><a href="../checkboxradio-checkbox/" data-ajax="false">Checkboxes</a></li>
|
||||
<li data-filtertext="form checkboxradio widget radio input radio buttons controlgroups"><a href="../checkboxradio-radio/" data-ajax="false">Radio buttons</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Collapsible (set) widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="collapsibles content formatting"><a href="../collapsible/" data-ajax="false">Collapsible</a></li>
|
||||
<li data-filtertext="dynamic collapsible set accordion append expand"><a href="../collapsible-dynamic/" data-ajax="false">Dynamic collapsibles</a></li>
|
||||
<li data-filtertext="accordions collapsible set widget content formatting grouped collapsibles"><a href="../collapsibleset/" data-ajax="false">Collapsible set</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Controlgroup widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="controlgroups selectmenu checkboxradio input grouped buttons horizontal vertical"><a href="../controlgroup/" data-ajax="false">Controlgroup</a></li>
|
||||
<li data-filtertext="dynamic controlgroup dynamically add buttons"><a href="../controlgroup-dynamic/" data-ajax="false">Dynamic controlgroups</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="form datepicker widget date input"><a href="../datepicker/" data-ajax="false">Datepicker</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Events</h3>
|
||||
<ul>
|
||||
<li data-filtertext="swipe to delete list items listviews swipe events"><a href="../swipe-list/" data-ajax="false">Swipe list items</a></li>
|
||||
<li data-filtertext="swipe to navigate swipe page navigation swipe events"><a href="../swipe-page/" data-ajax="false">Swipe page navigation</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="filterable filter elements sorting searching listview table"><a href="../filterable/" data-ajax="false">Filterable widget</a></li>
|
||||
<li data-filtertext="form flipswitch widget flip toggle switch binary select checkbox input"><a href="../flipswitch/" data-ajax="false">Flipswitch widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Forms</h3>
|
||||
<ul>
|
||||
<li data-filtertext="forms text checkbox radio range button submit reset inputs selects textarea slider flipswitch label form elements"><a href="../forms/" data-ajax="false">Forms</a></li>
|
||||
<li data-filtertext="form hide labels hidden accessible ui-hidden-accessible forms"><a href="../forms-label-hidden-accessible/" data-ajax="false">Hide labels</a></li>
|
||||
<li data-filtertext="form field containers fieldcontain ui-field-contain forms"><a href="../forms-field-contain/" data-ajax="false">Field containers</a></li>
|
||||
<li data-filtertext="forms disabled form elements"><a href="../forms-disabled/" data-ajax="false">Forms disabled</a></li>
|
||||
<li data-filtertext="forms gallery examples overview forms text checkbox radio range button submit reset inputs selects textarea slider flipswitch label form elements"><a href="../forms-gallery/" data-ajax="false">Forms gallery</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Grids</h3>
|
||||
<ul>
|
||||
<li data-filtertext="grids columns blocks content formatting rwd responsive css framework"><a href="../grids/" data-ajax="false">Grids</a></li>
|
||||
<li data-filtertext="buttons in grids css framework"><a href="../grids-buttons/" data-ajax="false">Buttons in grids</a></li>
|
||||
<li data-filtertext="custom responsive grids rwd css framework"><a href="../grids-custom-responsive/" data-ajax="false">Custom responsive grids</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="blocks content formatting sections heading"><a href="../body-bar-classes/" data-ajax="false">Grouping and dividing content</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Icons</h3>
|
||||
<ul>
|
||||
<li data-filtertext="button icons svg disc alt custom icon position"><a href="../icons/" data-ajax="false">Icons</a></li>
|
||||
<li data-filtertext=""><a href="../icons-grunticon/" data-ajax="false">Grunticon loader</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Listview widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="listview widget thumbnails icons nested split button collapsible ul ol"><a href="../listview/" data-ajax="false">Listview</a></li>
|
||||
<li data-filtertext="autocomplete filterable reveal listview filtertextbeforefilter placeholder"><a href="../listview-autocomplete/" data-ajax="false">Listview autocomplete</a></li>
|
||||
<li data-filtertext="autocomplete filterable reveal listview remote data filtertextbeforefilter placeholder"><a href="../listview-autocomplete-remote/" data-ajax="false">Listview autocomplete remote data</a></li>
|
||||
<li data-filtertext="autodividers anchor jump scroll linkbars listview lists ul ol"><a href="../listview-autodividers-linkbar/" data-ajax="false">Listview autodividers linkbar</a></li>
|
||||
<li data-filtertext="listview autodividers selector autodividersselector lists ul ol"><a href="../listview-autodividers-selector/" data-ajax="false">Listview autodividers selector</a></li>
|
||||
<li data-filtertext="listview nested list items"><a href="../listview-nested-lists/" data-ajax="false">Listview Nested Listviews</a></li>
|
||||
<li data-filtertext="listview collapsible list items flat"><a href="../listview-collapsible-item-flat/" data-ajax="false">Listview collapsible list items (flat)</a></li>
|
||||
<li data-filtertext="listview collapsible list indented"><a href="../listview-collapsible-item-indented/" data-ajax="false">Listview collapsible list items (indented)</a></li>
|
||||
<li data-filtertext="grid listview responsive grids responsive listviews lists ul"><a href="../listview-grid/" data-ajax="false">Listview responsive grid</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="loader widget page loading navigation overlay spinner"><a href="../loader/" data-ajax="false">Loader widget</a></li>
|
||||
<li data-filtertext="navbar widget navmenu toolbars header footer"><a href="../navbar/" data-ajax="false">Navbar widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Navigation</h3>
|
||||
<ul>
|
||||
<li data-filtertext="ajax navigation navigate widget history event method"><a href="../navigation/" data-ajax="false">Navigation</a></li>
|
||||
<li data-filtertext="linking pages page links navigation ajax prefetch cache"><a href="../navigation-linking-pages/" data-ajax="false">Linking pages</a></li>
|
||||
<li data-filtertext="php redirect server redirection server-side navigation"><a href="../navigation-php-redirect/" data-ajax="false">PHP redirect demo</a></li>
|
||||
<li data-filtertext="navigation redirection hash query"><a href="../navigation-hash-processing/" data-ajax="false">Hash processing demo</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Pages</h3>
|
||||
<ul>
|
||||
<li data-filtertext="pages page widget ajax navigation"><a href="../pages/" data-ajax="false">Pages</a></li>
|
||||
<li data-filtertext="single page"><a href="../pages-single-page/" data-ajax="false">Single page</a></li>
|
||||
<li data-filtertext="multipage multi-page page"><a href="../pages-multi-page/" data-ajax="false">Multi-page template</a></li>
|
||||
<li data-filtertext="dialog page widget modal popup"><a href="../pages-dialog/" data-ajax="false">Dialog page</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Panel widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="panel widget sliding panels reveal push overlay responsive"><a href="../panel/" data-ajax="false">Panel</a></li>
|
||||
<li data-filtertext=""><a href="../panel-external/" data-ajax="false">External panels</a></li>
|
||||
<li data-filtertext="panel "><a href="../panel-fixed/" data-ajax="false">Fixed panels</a></li>
|
||||
<li data-filtertext="panel slide panels sliding panels shadow rwd responsive breakpoint"><a href="../panel-responsive/" data-ajax="false">Panels responsive</a></li>
|
||||
<li data-filtertext="panel custom style custom panel width reveal shadow listview panel styling page background wrapper"><a href="../panel-styling/" data-ajax="false">Custom panel style</a></li>
|
||||
<li data-filtertext="panel open on swipe"><a href="../panel-swipe-open/" data-ajax="false">Panel open on swipe</a></li>
|
||||
<li data-filtertext="panels outside page internal external toolbars"><a href="../panel-external-internal/" data-ajax="false">Panel external and internal</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Popup widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="popup widget popups dialog modal transition tooltip lightbox form overlay screen flip pop fade transition"><a href="../popup/" data-ajax="false">Popup</a></li>
|
||||
<li data-filtertext="popup alignment position"><a href="../popup-alignment/" data-ajax="false">Popup alignment</a></li>
|
||||
<li data-filtertext="popup arrow size popups popover"><a href="../popup-arrow-size/" data-ajax="false">Popup arrow size</a></li>
|
||||
<li data-filtertext="dynamic popups popup images lightbox"><a href="../popup-dynamic/" data-ajax="false">Dynamic popups</a></li>
|
||||
<li data-filtertext="popups with iframes scaling"><a href="../popup-iframe/" data-ajax="false">Popups with iframes</a></li>
|
||||
<li data-filtertext="popup image scaling"><a href="../popup-image-scaling/" data-ajax="false">Popup image scaling</a></li>
|
||||
<li data-filtertext="external popup outside multi-page"><a href="../popup-outside-multipage" data-ajax="false">Popup outside multi-page</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="form rangeslider widget dual sliders dual handle sliders range input"><a href="../rangeslider/" data-ajax="false">Rangeslider widget</a></li>
|
||||
<li data-filtertext="responsive web design rwd adaptive progressive enhancement PE accessible mobile breakpoints media query media queries"><a href="../rwd/" data-ajax="false">Responsive Web Design</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Selectmenu widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="form selectmenu widget select input custom select menu selects"><a href="../selectmenu/" data-ajax="false">Selectmenu</a></li>
|
||||
<li data-filtertext="form custom select menu selectmenu widget custom menu option optgroup multiple selects"><a href="../selectmenu-custom/" data-ajax="false">Custom select menu</a></li>
|
||||
<li data-filtertext="filterable select filter popup dialog"><a href="../selectmenu-custom-filter/" data-ajax="false">Custom select menu with filter</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Slider widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="form slider widget range input single sliders"><a href="../slider/" data-ajax="false">Slider</a></li>
|
||||
<li data-filtertext="form slider widget flipswitch slider binary select flip toggle switch"><a href="../slider-flipswitch/" data-ajax="false">Slider flip toggle switch</a></li>
|
||||
<li data-filtertext="form slider tooltip handle value input range sliders"><a href="../slider-tooltip/" data-ajax="false">Slider tooltip</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Table widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="table widget reflow column toggle th td responsive tables rwd hide show tabular"><a href="../table-column-toggle/" data-ajax="false">Table Column Toggle</a></li>
|
||||
<li data-filtertext="table column toggle phone comparison demo"><a href="../table-column-toggle-example/" data-ajax="false">Table Column Toggle demo</a></li>
|
||||
<li data-filtertext="responsive tables table column toggle heading groups rwd breakpoint"><a href="../table-column-toggle-heading-groups/" data-ajax="false">Table Column Toggle heading groups</a></li>
|
||||
<li data-filtertext="responsive tables table column toggle hide rwd breakpoint customization options"><a href="../table-column-toggle-options/" data-ajax="false">Table Column Toggle options</a></li>
|
||||
<li data-filtertext="table reflow th td responsive rwd columns tabular"><a href="../table-reflow/" data-ajax="false">Table Reflow</a></li>
|
||||
<li data-filtertext="responsive tables table reflow heading groups rwd breakpoint"><a href="../table-reflow-heading-groups/" data-ajax="false">Table Reflow heading groups</a></li>
|
||||
<li data-filtertext="responsive tables table reflow stripes strokes table style"><a href="../table-reflow-stripes-strokes/" data-ajax="false">Table Reflow stripes and strokes</a></li>
|
||||
<li data-filtertext="responsive tables table reflow stack custom styles"><a href="../table-reflow-styling/" data-ajax="false">Table Reflow custom styles</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="ui tabs widget"><a href="../tabs/" data-ajax="false">Tabs widget</a></li>
|
||||
<li data-filtertext="form textinput widget text input textarea number date time tel email file color password"><a href="../textinput/" data-ajax="false">Textinput widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Theming</h3>
|
||||
<ul>
|
||||
<li data-filtertext="default theme swatches theming style css"><a href="../theme-default/" data-ajax="false">Default theme</a></li>
|
||||
<li data-filtertext="classic theme old theme swatches theming style css"><a href="../theme-classic/" data-ajax="false">Classic theme</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Toolbar widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="toolbar widget header footer toolbars fixed fullscreen external sections"><a href="../toolbar/" data-ajax="false">Toolbar</a></li>
|
||||
<li data-filtertext="dynamic toolbars dynamically add toolbar header footer"><a href="../toolbar-dynamic/" data-ajax="false">Dynamic toolbars</a></li>
|
||||
<li data-filtertext="external toolbars header footer"><a href="../toolbar-external/" data-ajax="false">External toolbars</a></li>
|
||||
<li data-filtertext="fixed toolbars header footer"><a href="../toolbar-fixed/" data-ajax="false">Fixed toolbars</a></li>
|
||||
<li data-filtertext="fixed fullscreen toolbars header footer"><a href="../toolbar-fixed-fullscreen/" data-ajax="false">Fullscreen toolbars</a></li>
|
||||
<li data-filtertext="external fixed toolbars header footer"><a href="../toolbar-fixed-external/" data-ajax="false">Fixed external toolbars</a></li>
|
||||
<li data-filtertext="external persistent toolbars header footer navbar navmenu"><a href="../toolbar-fixed-persistent/" data-ajax="false">Persistent toolbars</a></li>
|
||||
<li data-filtertext="external ajax optimized toolbars persistent toolbars header footer navbar"><a href="../toolbar-fixed-persistent-optimized/" data-ajax="false">Ajax optimized toolbars</a></li>
|
||||
<li data-filtertext="form in toolbars header footer"><a href="../toolbar-fixed-forms/" data-ajax="false">Form in toolbar</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="page transitions animated pages popup navigation flip slide fade pop"><a href="../transitions/" data-ajax="false">Transitions</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>3rd party API demos</h3>
|
||||
<ul>
|
||||
<li data-filtertext="backbone requirejs navigation router"><a href="../backbone-requirejs/" data-ajax="false">Backbone RequireJS</a></li>
|
||||
<li data-filtertext="google maps geolocation demo"><a href="../map-geolocation/" data-ajax="false">Google Maps geolocation</a></li>
|
||||
<li data-filtertext="google maps hybrid"><a href="../map-list-toggle/" data-ajax="false">Google Maps list toggle</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
</ul>
|
||||
</div><!-- /panel -->
|
||||
|
||||
|
||||
<div data-role="footer" data-position="fixed" data-tap-toggle="false" class="jqm-footer">
|
||||
<p>jQuery Mobile Demos version <span class="jqm-version"></span></p>
|
||||
<p>Copyright 2014 The jQuery Foundation</p>
|
||||
</div><!-- /footer -->
|
||||
<!-- TODO: This should become an external panel so we can add input to markup (unique ID) -->
|
||||
<div data-role="panel" class="jqm-search-panel" data-position="right" data-display="overlay" data-theme="a">
|
||||
<div class="jqm-search">
|
||||
<ul class="jqm-list" data-filter-placeholder="Search demos..." data-filter-reveal="true">
|
||||
<li data-filtertext="demos homepage" data-icon="home"><a href=".././">Home</a></li>
|
||||
<li data-filtertext="introduction overview getting started"><a href="../intro/" data-ajax="false">Introduction</a></li>
|
||||
<li data-filtertext="buttons button markup buttonmarkup method anchor link button element"><a href="../button-markup/" data-ajax="false">Buttons</a></li>
|
||||
<li data-filtertext="form button widget input button submit reset"><a href="../button/" data-ajax="false">Button widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Checkboxradio widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="form checkboxradio widget checkbox input checkboxes controlgroups"><a href="../checkboxradio-checkbox/" data-ajax="false">Checkboxes</a></li>
|
||||
<li data-filtertext="form checkboxradio widget radio input radio buttons controlgroups"><a href="../checkboxradio-radio/" data-ajax="false">Radio buttons</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Collapsible (set) widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="collapsibles content formatting"><a href="../collapsible/" data-ajax="false">Collapsible</a></li>
|
||||
<li data-filtertext="dynamic collapsible set accordion append expand"><a href="../collapsible-dynamic/" data-ajax="false">Dynamic collapsibles</a></li>
|
||||
<li data-filtertext="accordions collapsible set widget content formatting grouped collapsibles"><a href="../collapsibleset/" data-ajax="false">Collapsible set</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Controlgroup widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="controlgroups selectmenu checkboxradio input grouped buttons horizontal vertical"><a href="../controlgroup/" data-ajax="false">Controlgroup</a></li>
|
||||
<li data-filtertext="dynamic controlgroup dynamically add buttons"><a href="../controlgroup-dynamic/" data-ajax="false">Dynamic controlgroups</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="form datepicker widget date input"><a href="../datepicker/" data-ajax="false">Datepicker</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Events</h3>
|
||||
<ul>
|
||||
<li data-filtertext="swipe to delete list items listviews swipe events"><a href="../swipe-list/" data-ajax="false">Swipe list items</a></li>
|
||||
<li data-filtertext="swipe to navigate swipe page navigation swipe events"><a href="../swipe-page/" data-ajax="false">Swipe page navigation</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="filterable filter elements sorting searching listview table"><a href="../filterable/" data-ajax="false">Filterable widget</a></li>
|
||||
<li data-filtertext="form flipswitch widget flip toggle switch binary select checkbox input"><a href="../flipswitch/" data-ajax="false">Flipswitch widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Forms</h3>
|
||||
<ul>
|
||||
<li data-filtertext="forms text checkbox radio range button submit reset inputs selects textarea slider flipswitch label form elements"><a href="../forms/" data-ajax="false">Forms</a></li>
|
||||
<li data-filtertext="form hide labels hidden accessible ui-hidden-accessible forms"><a href="../forms-label-hidden-accessible/" data-ajax="false">Hide labels</a></li>
|
||||
<li data-filtertext="form field containers fieldcontain ui-field-contain forms"><a href="../forms-field-contain/" data-ajax="false">Field containers</a></li>
|
||||
<li data-filtertext="forms disabled form elements"><a href="../forms-disabled/" data-ajax="false">Forms disabled</a></li>
|
||||
<li data-filtertext="forms gallery examples overview forms text checkbox radio range button submit reset inputs selects textarea slider flipswitch label form elements"><a href="../forms-gallery/" data-ajax="false">Forms gallery</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Grids</h3>
|
||||
<ul>
|
||||
<li data-filtertext="grids columns blocks content formatting rwd responsive css framework"><a href="../grids/" data-ajax="false">Grids</a></li>
|
||||
<li data-filtertext="buttons in grids css framework"><a href="../grids-buttons/" data-ajax="false">Buttons in grids</a></li>
|
||||
<li data-filtertext="custom responsive grids rwd css framework"><a href="../grids-custom-responsive/" data-ajax="false">Custom responsive grids</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="blocks content formatting sections heading"><a href="../body-bar-classes/" data-ajax="false">Grouping and dividing content</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Icons</h3>
|
||||
<ul>
|
||||
<li data-filtertext="button icons svg disc alt custom icon position"><a href="../icons/" data-ajax="false">Icons</a></li>
|
||||
<li data-filtertext=""><a href="../icons-grunticon/" data-ajax="false">Grunticon loader</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Listview widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="listview widget thumbnails icons nested split button collapsible ul ol"><a href="../listview/" data-ajax="false">Listview</a></li>
|
||||
<li data-filtertext="autocomplete filterable reveal listview filtertextbeforefilter placeholder"><a href="../listview-autocomplete/" data-ajax="false">Listview autocomplete</a></li>
|
||||
<li data-filtertext="autocomplete filterable reveal listview remote data filtertextbeforefilter placeholder"><a href="../listview-autocomplete-remote/" data-ajax="false">Listview autocomplete remote data</a></li>
|
||||
<li data-filtertext="autodividers anchor jump scroll linkbars listview lists ul ol"><a href="../listview-autodividers-linkbar/" data-ajax="false">Listview autodividers linkbar</a></li>
|
||||
<li data-filtertext="listview autodividers selector autodividersselector lists ul ol"><a href="../listview-autodividers-selector/" data-ajax="false">Listview autodividers selector</a></li>
|
||||
<li data-filtertext="listview nested list items"><a href="../listview-nested-lists/" data-ajax="false">Listview Nested Listviews</a></li>
|
||||
<li data-filtertext="listview collapsible list items flat"><a href="../listview-collapsible-item-flat/" data-ajax="false">Listview collapsible list items (flat)</a></li>
|
||||
<li data-filtertext="listview collapsible list indented"><a href="../listview-collapsible-item-indented/" data-ajax="false">Listview collapsible list items (indented)</a></li>
|
||||
<li data-filtertext="grid listview responsive grids responsive listviews lists ul"><a href="../listview-grid/" data-ajax="false">Listview responsive grid</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="loader widget page loading navigation overlay spinner"><a href="../loader/" data-ajax="false">Loader widget</a></li>
|
||||
<li data-filtertext="navbar widget navmenu toolbars header footer"><a href="../navbar/" data-ajax="false">Navbar widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Navigation</h3>
|
||||
<ul>
|
||||
<li data-filtertext="ajax navigation navigate widget history event method"><a href="../navigation/" data-ajax="false">Navigation</a></li>
|
||||
<li data-filtertext="linking pages page links navigation ajax prefetch cache"><a href="../navigation-linking-pages/" data-ajax="false">Linking pages</a></li>
|
||||
<li data-filtertext="php redirect server redirection server-side navigation"><a href="../navigation-php-redirect/" data-ajax="false">PHP redirect demo</a></li>
|
||||
<li data-filtertext="navigation redirection hash query"><a href="../navigation-hash-processing/" data-ajax="false">Hash processing demo</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Pages</h3>
|
||||
<ul>
|
||||
<li data-filtertext="pages page widget ajax navigation"><a href="../pages/" data-ajax="false">Pages</a></li>
|
||||
<li data-filtertext="single page"><a href="../pages-single-page/" data-ajax="false">Single page</a></li>
|
||||
<li data-filtertext="multipage multi-page page"><a href="../pages-multi-page/" data-ajax="false">Multi-page template</a></li>
|
||||
<li data-filtertext="dialog page widget modal popup"><a href="../pages-dialog/" data-ajax="false">Dialog page</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Panel widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="panel widget sliding panels reveal push overlay responsive"><a href="../panel/" data-ajax="false">Panel</a></li>
|
||||
<li data-filtertext=""><a href="../panel-external/" data-ajax="false">External panels</a></li>
|
||||
<li data-filtertext="panel "><a href="../panel-fixed/" data-ajax="false">Fixed panels</a></li>
|
||||
<li data-filtertext="panel slide panels sliding panels shadow rwd responsive breakpoint"><a href="../panel-responsive/" data-ajax="false">Panels responsive</a></li>
|
||||
<li data-filtertext="panel custom style custom panel width reveal shadow listview panel styling page background wrapper"><a href="../panel-styling/" data-ajax="false">Custom panel style</a></li>
|
||||
<li data-filtertext="panel open on swipe"><a href="../panel-swipe-open/" data-ajax="false">Panel open on swipe</a></li>
|
||||
<li data-filtertext="panels outside page internal external toolbars"><a href="../panel-external-internal/" data-ajax="false">Panel external and internal</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Popup widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="popup widget popups dialog modal transition tooltip lightbox form overlay screen flip pop fade transition"><a href="../popup/" data-ajax="false">Popup</a></li>
|
||||
<li data-filtertext="popup alignment position"><a href="../popup-alignment/" data-ajax="false">Popup alignment</a></li>
|
||||
<li data-filtertext="popup arrow size popups popover"><a href="../popup-arrow-size/" data-ajax="false">Popup arrow size</a></li>
|
||||
<li data-filtertext="dynamic popups popup images lightbox"><a href="../popup-dynamic/" data-ajax="false">Dynamic popups</a></li>
|
||||
<li data-filtertext="popups with iframes scaling"><a href="../popup-iframe/" data-ajax="false">Popups with iframes</a></li>
|
||||
<li data-filtertext="popup image scaling"><a href="../popup-image-scaling/" data-ajax="false">Popup image scaling</a></li>
|
||||
<li data-filtertext="external popup outside multi-page"><a href="../popup-outside-multipage" data-ajax="false">Popup outside multi-page</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="form rangeslider widget dual sliders dual handle sliders range input"><a href="../rangeslider/" data-ajax="false">Rangeslider widget</a></li>
|
||||
<li data-filtertext="responsive web design rwd adaptive progressive enhancement PE accessible mobile breakpoints media query media queries"><a href="../rwd/" data-ajax="false">Responsive Web Design</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Selectmenu widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="form selectmenu widget select input custom select menu selects"><a href="../selectmenu/" data-ajax="false">Selectmenu</a></li>
|
||||
<li data-filtertext="form custom select menu selectmenu widget custom menu option optgroup multiple selects"><a href="../selectmenu-custom/" data-ajax="false">Custom select menu</a></li>
|
||||
<li data-filtertext="filterable select filter popup dialog"><a href="../selectmenu-custom-filter/" data-ajax="false">Custom select menu with filter</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Slider widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="form slider widget range input single sliders"><a href="../slider/" data-ajax="false">Slider</a></li>
|
||||
<li data-filtertext="form slider widget flipswitch slider binary select flip toggle switch"><a href="../slider-flipswitch/" data-ajax="false">Slider flip toggle switch</a></li>
|
||||
<li data-filtertext="form slider tooltip handle value input range sliders"><a href="../slider-tooltip/" data-ajax="false">Slider tooltip</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Table widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="table widget reflow column toggle th td responsive tables rwd hide show tabular"><a href="../table-column-toggle/" data-ajax="false">Table Column Toggle</a></li>
|
||||
<li data-filtertext="table column toggle phone comparison demo"><a href="../table-column-toggle-example/" data-ajax="false">Table Column Toggle demo</a></li>
|
||||
<li data-filtertext="responsive tables table column toggle heading groups rwd breakpoint"><a href="../table-column-toggle-heading-groups/" data-ajax="false">Table Column Toggle heading groups</a></li>
|
||||
<li data-filtertext="responsive tables table column toggle hide rwd breakpoint customization options"><a href="../table-column-toggle-options/" data-ajax="false">Table Column Toggle options</a></li>
|
||||
<li data-filtertext="table reflow th td responsive rwd columns tabular"><a href="../table-reflow/" data-ajax="false">Table Reflow</a></li>
|
||||
<li data-filtertext="responsive tables table reflow heading groups rwd breakpoint"><a href="../table-reflow-heading-groups/" data-ajax="false">Table Reflow heading groups</a></li>
|
||||
<li data-filtertext="responsive tables table reflow stripes strokes table style"><a href="../table-reflow-stripes-strokes/" data-ajax="false">Table Reflow stripes and strokes</a></li>
|
||||
<li data-filtertext="responsive tables table reflow stack custom styles"><a href="../table-reflow-styling/" data-ajax="false">Table Reflow custom styles</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="ui tabs widget"><a href="../tabs/" data-ajax="false">Tabs widget</a></li>
|
||||
<li data-filtertext="form textinput widget text input textarea number date time tel email file color password"><a href="../textinput/" data-ajax="false">Textinput widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Theming</h3>
|
||||
<ul>
|
||||
<li data-filtertext="default theme swatches theming style css"><a href="../theme-default/" data-ajax="false">Default theme</a></li>
|
||||
<li data-filtertext="classic theme old theme swatches theming style css"><a href="../theme-classic/" data-ajax="false">Classic theme</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Toolbar widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="toolbar widget header footer toolbars fixed fullscreen external sections"><a href="../toolbar/" data-ajax="false">Toolbar</a></li>
|
||||
<li data-filtertext="dynamic toolbars dynamically add toolbar header footer"><a href="../toolbar-dynamic/" data-ajax="false">Dynamic toolbars</a></li>
|
||||
<li data-filtertext="external toolbars header footer"><a href="../toolbar-external/" data-ajax="false">External toolbars</a></li>
|
||||
<li data-filtertext="fixed toolbars header footer"><a href="../toolbar-fixed/" data-ajax="false">Fixed toolbars</a></li>
|
||||
<li data-filtertext="fixed fullscreen toolbars header footer"><a href="../toolbar-fixed-fullscreen/" data-ajax="false">Fullscreen toolbars</a></li>
|
||||
<li data-filtertext="external fixed toolbars header footer"><a href="../toolbar-fixed-external/" data-ajax="false">Fixed external toolbars</a></li>
|
||||
<li data-filtertext="external persistent toolbars header footer navbar navmenu"><a href="../toolbar-fixed-persistent/" data-ajax="false">Persistent toolbars</a></li>
|
||||
<li data-filtertext="external ajax optimized toolbars persistent toolbars header footer navbar"><a href="../toolbar-fixed-persistent-optimized/" data-ajax="false">Ajax optimized toolbars</a></li>
|
||||
<li data-filtertext="form in toolbars header footer"><a href="../toolbar-fixed-forms/" data-ajax="false">Form in toolbar</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="page transitions animated pages popup navigation flip slide fade pop"><a href="../transitions/" data-ajax="false">Transitions</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>3rd party API demos</h3>
|
||||
<ul>
|
||||
<li data-filtertext="backbone requirejs navigation router"><a href="../backbone-requirejs/" data-ajax="false">Backbone RequireJS</a></li>
|
||||
<li data-filtertext="google maps geolocation demo"><a href="../map-geolocation/" data-ajax="false">Google Maps geolocation</a></li>
|
||||
<li data-filtertext="google maps hybrid"><a href="../map-list-toggle/" data-ajax="false">Google Maps list toggle</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- /panel -->
|
||||
|
||||
|
||||
</div><!-- /page -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
609
js/libs/jquery.mobile/demos/collapsibleset/index.html
Normal file
609
js/libs/jquery.mobile/demos/collapsibleset/index.html
Normal file
@ -0,0 +1,609 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Collapsible set - jQuery Mobile Demos</title>
|
||||
<link rel="shortcut icon" href="../favicon.ico">
|
||||
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
|
||||
<link rel="stylesheet" href="../css/themes/default/jquery.mobile-1.4.2.min.css">
|
||||
<link rel="stylesheet" href="../_assets/css/jqm-demos.css">
|
||||
<script src="../js/jquery.js"></script>
|
||||
<script src="../_assets/js/index.js"></script>
|
||||
<script src="../js/jquery.mobile-1.4.2.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div data-role="page" class="jqm-demos" data-quicklinks="true">
|
||||
|
||||
<div data-role="header" class="jqm-header">
|
||||
<h2><a href="../" title="jQuery Mobile Demos home"><img src="../_assets/img/jquery-logo.png" alt="jQuery Mobile"></a></h2>
|
||||
<p><span class="jqm-version"></span> Demos</p>
|
||||
<a href="#" class="jqm-navmenu-link ui-btn ui-btn-icon-notext ui-corner-all ui-icon-bars ui-nodisc-icon ui-alt-icon ui-btn-left">Menu</a>
|
||||
<a href="#" class="jqm-search-link ui-btn ui-btn-icon-notext ui-corner-all ui-icon-search ui-nodisc-icon ui-alt-icon ui-btn-right">Search</a>
|
||||
</div><!-- /header -->
|
||||
|
||||
<div role="main" class="ui-content jqm-content">
|
||||
|
||||
<h1>Collapsible set</h1>
|
||||
|
||||
<p>An accordion is created in jQuery Mobile by grouping a series of individual collapsibles into set.</p>
|
||||
|
||||
<h2>Markup</h2>
|
||||
|
||||
<p>Collapsible sets start with the same markup as <a href="../collapsible/" data-ajax="false">individual collapsibles</a> which have a heading followed by the collapsible content. By adding a parent wrapper with a <code>data-role="collapsibleset"</code> attribute to the collapsibles they will be visually grouped and they will behave like an accordion so only one section can be open at a time.</p>
|
||||
|
||||
<div data-demo-html="true">
|
||||
<div data-role="collapsibleset" data-theme="a" data-content-theme="a">
|
||||
<div data-role="collapsible">
|
||||
<h3>Section 1</h3>
|
||||
<p>I'm the collapsible content for section 1</p>
|
||||
</div>
|
||||
<div data-role="collapsible">
|
||||
<h3>Section 2</h3>
|
||||
<p>I'm the collapsible content for section 2</p>
|
||||
|
||||
</div>
|
||||
<div data-role="collapsible">
|
||||
<h3>Section 3</h3>
|
||||
<p>I'm the collapsible content for section 3</p>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/demo-html -->
|
||||
|
||||
<h2>Inset vs. full width</h2>
|
||||
|
||||
<p>For full width collapsibles without corner styling add the <code>data-inset="false"</code> attribute to the set. This makes the collapsible set look more like an expandable <a href="../listview/">listview</a>.</p>
|
||||
|
||||
<div data-demo-html="true">
|
||||
<div data-role="collapsibleset" data-inset="false">
|
||||
<div data-role="collapsible">
|
||||
<h3>Animals</h3>
|
||||
<ul data-role="listview" data-inset="false">
|
||||
<li>Cats</li>
|
||||
<li>Dogs</li>
|
||||
<li>Lizards</li>
|
||||
<li>Snakes</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div data-role="collapsible">
|
||||
<h3>Cars</h3>
|
||||
<ul data-role="listview" data-inset="false">
|
||||
<li>Acura</li>
|
||||
<li>Audi</li>
|
||||
<li>BMW</li>
|
||||
<li>Cadillac</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div data-role="collapsible">
|
||||
<h3>Planets</h3>
|
||||
<ul data-role="listview" data-inset="false">
|
||||
<li>Earth</li>
|
||||
<li>Jupiter</li>
|
||||
<li>Mars</li>
|
||||
<li>Mercury</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/demo-html -->
|
||||
|
||||
<h2>Mini</h2>
|
||||
|
||||
<p>For a more compact version that is useful in tight spaces, add the <code>data-mini="true"</code> attribute to the set. </p>
|
||||
|
||||
<div data-demo-html="true">
|
||||
<div data-role="collapsibleset" data-theme="a" data-content-theme="a" data-mini="true">
|
||||
<div data-role="collapsible">
|
||||
<h3>I'm a mini collapsible</h3>
|
||||
<p>This is good for tight spaces.</p>
|
||||
</div>
|
||||
<div data-role="collapsible">
|
||||
<h3>I'm another mini</h3>
|
||||
<p>Here's some collapsible content.</p>
|
||||
|
||||
</div>
|
||||
<div data-role="collapsible">
|
||||
<h3>Last one</h3>
|
||||
<p>Final bit of collapsible content.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/demo-html -->
|
||||
|
||||
<h2>Icons</h2>
|
||||
|
||||
<p>The default icons of collapsible headings can be overridden by using the <code>data-collapsed-icon</code> and <code>data-expanded-icon</code> attributes, either at the <code>collapsibleset</code> level or on any of its collapsibles individually.</p>
|
||||
|
||||
<div data-demo-html="true">
|
||||
<div data-role="collapsibleset" data-theme="a" data-content-theme="a" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d">
|
||||
<div data-role="collapsible">
|
||||
<h3>Icon set on the set</h3>
|
||||
<p>Specify the open and close icons on the set to apply it to all the collapsibles within.</p>
|
||||
</div>
|
||||
<div data-role="collapsible">
|
||||
<h3>Icon set on the set</h3>
|
||||
<p>This collapsible also gets the icon from the set.</p>
|
||||
</div>
|
||||
<div data-role="collapsible" data-collapsed-icon="gear" data-expanded-icon="delete">
|
||||
<h3>Icon set on this collapsible</h3>
|
||||
<p>The icons here are applied to this collapsible specifically, thus overriding the set icons.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/demo-html -->
|
||||
|
||||
<h2>Icon position</h2>
|
||||
|
||||
<p>The default icon positioning of collapsible headings can be overridden by using the <code>data-iconpos</code> attribute, either at the <code>collapsibleset</code> level or on any of its collapsibles individually.</p>
|
||||
|
||||
<div data-demo-html="true">
|
||||
<div data-role="collapsibleset" data-theme="a" data-content-theme="a" data-iconpos="right">
|
||||
<div data-role="collapsible">
|
||||
<h3>Right</h3>
|
||||
<p>Inherits icon positioning from <code>data-iconpos="right"</code> attribute on set.</p>
|
||||
</div>
|
||||
<div data-role="collapsible" data-iconpos="left">
|
||||
<h3>Left</h3>
|
||||
<p>Set via <code>data-iconpos="left"</code> attribute on the collapsible</p>
|
||||
</div>
|
||||
<div data-role="collapsible" data-iconpos="bottom">
|
||||
<h3>Bottom</h3>
|
||||
<p>Set via <code>data-iconpos="bottom"</code> attribute on the collapsible</p>
|
||||
</div>
|
||||
<div data-role="collapsible" data-iconpos="top">
|
||||
<h3>Top</h3>
|
||||
<p>Set via <code>data-iconpos="top"</code> attribute on the collapsible</p>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/demo-html -->
|
||||
|
||||
<h2>Corners</h2>
|
||||
<p>Add the <code>data-corners="false"</code> attribute to get an inset collapsible set without rounded corners.</p>
|
||||
|
||||
<div data-demo-html="true">
|
||||
<div data-role="collapsibleset" data-corners="false" data-theme="a" data-content-theme="a">
|
||||
<div data-role="collapsible">
|
||||
<h3>Section 1</h3>
|
||||
<p>Collapsible content</p>
|
||||
</div>
|
||||
<div data-role="collapsible">
|
||||
<h3>Section 2</h3>
|
||||
<p>Collapsible content</p>
|
||||
|
||||
</div>
|
||||
<div data-role="collapsible">
|
||||
<h3>Section 3</h3>
|
||||
<p>Collapsible content</p>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/demo-html -->
|
||||
|
||||
<h2>Theme</h2>
|
||||
|
||||
<p>Add a <code>data-theme</code> attribute to the set to set the color of each collapsible header in a set. Add the <code>data-content-theme</code> attribute to specify the color of the collapsible content. </p>
|
||||
|
||||
<div data-demo-html="true">
|
||||
<div data-role="collapsibleset" data-theme="b" data-content-theme="b">
|
||||
<div data-role="collapsible">
|
||||
<h3>Heading</h3>
|
||||
<p>Content</p>
|
||||
</div>
|
||||
<div data-role="collapsible">
|
||||
<h3>Heading</h3>
|
||||
<p>Content</p>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/demo-html -->
|
||||
|
||||
<p>To have individual sections in a group styled differently, add <code>data-theme</code> and <code>data-content-theme</code> attributes to specific collapsibles.</p>
|
||||
|
||||
<div data-demo-html="true">
|
||||
<div data-role="collapsibleset" data-theme="b" data-content-theme="b">
|
||||
<div data-role="collapsible">
|
||||
<h3>Heading</h3>
|
||||
<p>Content</p>
|
||||
</div>
|
||||
<div data-role="collapsible" data-theme="a" data-content-theme="a">
|
||||
<h3>Heading</h3>
|
||||
<p>Content</p>
|
||||
</div>
|
||||
<div data-role="collapsible">
|
||||
<h3>Heading</h3>
|
||||
<p>Content</p>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/demo-html -->
|
||||
|
||||
</div><!-- /content -->
|
||||
<div data-role="panel" class="jqm-navmenu-panel" data-position="left" data-display="overlay" data-theme="a">
|
||||
<ul class="jqm-list ui-alt-icon ui-nodisc-icon">
|
||||
<li data-filtertext="demos homepage" data-icon="home"><a href=".././">Home</a></li>
|
||||
<li data-filtertext="introduction overview getting started"><a href="../intro/" data-ajax="false">Introduction</a></li>
|
||||
<li data-filtertext="buttons button markup buttonmarkup method anchor link button element"><a href="../button-markup/" data-ajax="false">Buttons</a></li>
|
||||
<li data-filtertext="form button widget input button submit reset"><a href="../button/" data-ajax="false">Button widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Checkboxradio widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="form checkboxradio widget checkbox input checkboxes controlgroups"><a href="../checkboxradio-checkbox/" data-ajax="false">Checkboxes</a></li>
|
||||
<li data-filtertext="form checkboxradio widget radio input radio buttons controlgroups"><a href="../checkboxradio-radio/" data-ajax="false">Radio buttons</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Collapsible (set) widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="collapsibles content formatting"><a href="../collapsible/" data-ajax="false">Collapsible</a></li>
|
||||
<li data-filtertext="dynamic collapsible set accordion append expand"><a href="../collapsible-dynamic/" data-ajax="false">Dynamic collapsibles</a></li>
|
||||
<li data-filtertext="accordions collapsible set widget content formatting grouped collapsibles"><a href="../collapsibleset/" data-ajax="false">Collapsible set</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Controlgroup widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="controlgroups selectmenu checkboxradio input grouped buttons horizontal vertical"><a href="../controlgroup/" data-ajax="false">Controlgroup</a></li>
|
||||
<li data-filtertext="dynamic controlgroup dynamically add buttons"><a href="../controlgroup-dynamic/" data-ajax="false">Dynamic controlgroups</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="form datepicker widget date input"><a href="../datepicker/" data-ajax="false">Datepicker</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Events</h3>
|
||||
<ul>
|
||||
<li data-filtertext="swipe to delete list items listviews swipe events"><a href="../swipe-list/" data-ajax="false">Swipe list items</a></li>
|
||||
<li data-filtertext="swipe to navigate swipe page navigation swipe events"><a href="../swipe-page/" data-ajax="false">Swipe page navigation</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="filterable filter elements sorting searching listview table"><a href="../filterable/" data-ajax="false">Filterable widget</a></li>
|
||||
<li data-filtertext="form flipswitch widget flip toggle switch binary select checkbox input"><a href="../flipswitch/" data-ajax="false">Flipswitch widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Forms</h3>
|
||||
<ul>
|
||||
<li data-filtertext="forms text checkbox radio range button submit reset inputs selects textarea slider flipswitch label form elements"><a href="../forms/" data-ajax="false">Forms</a></li>
|
||||
<li data-filtertext="form hide labels hidden accessible ui-hidden-accessible forms"><a href="../forms-label-hidden-accessible/" data-ajax="false">Hide labels</a></li>
|
||||
<li data-filtertext="form field containers fieldcontain ui-field-contain forms"><a href="../forms-field-contain/" data-ajax="false">Field containers</a></li>
|
||||
<li data-filtertext="forms disabled form elements"><a href="../forms-disabled/" data-ajax="false">Forms disabled</a></li>
|
||||
<li data-filtertext="forms gallery examples overview forms text checkbox radio range button submit reset inputs selects textarea slider flipswitch label form elements"><a href="../forms-gallery/" data-ajax="false">Forms gallery</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Grids</h3>
|
||||
<ul>
|
||||
<li data-filtertext="grids columns blocks content formatting rwd responsive css framework"><a href="../grids/" data-ajax="false">Grids</a></li>
|
||||
<li data-filtertext="buttons in grids css framework"><a href="../grids-buttons/" data-ajax="false">Buttons in grids</a></li>
|
||||
<li data-filtertext="custom responsive grids rwd css framework"><a href="../grids-custom-responsive/" data-ajax="false">Custom responsive grids</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="blocks content formatting sections heading"><a href="../body-bar-classes/" data-ajax="false">Grouping and dividing content</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Icons</h3>
|
||||
<ul>
|
||||
<li data-filtertext="button icons svg disc alt custom icon position"><a href="../icons/" data-ajax="false">Icons</a></li>
|
||||
<li data-filtertext=""><a href="../icons-grunticon/" data-ajax="false">Grunticon loader</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Listview widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="listview widget thumbnails icons nested split button collapsible ul ol"><a href="../listview/" data-ajax="false">Listview</a></li>
|
||||
<li data-filtertext="autocomplete filterable reveal listview filtertextbeforefilter placeholder"><a href="../listview-autocomplete/" data-ajax="false">Listview autocomplete</a></li>
|
||||
<li data-filtertext="autocomplete filterable reveal listview remote data filtertextbeforefilter placeholder"><a href="../listview-autocomplete-remote/" data-ajax="false">Listview autocomplete remote data</a></li>
|
||||
<li data-filtertext="autodividers anchor jump scroll linkbars listview lists ul ol"><a href="../listview-autodividers-linkbar/" data-ajax="false">Listview autodividers linkbar</a></li>
|
||||
<li data-filtertext="listview autodividers selector autodividersselector lists ul ol"><a href="../listview-autodividers-selector/" data-ajax="false">Listview autodividers selector</a></li>
|
||||
<li data-filtertext="listview nested list items"><a href="../listview-nested-lists/" data-ajax="false">Listview Nested Listviews</a></li>
|
||||
<li data-filtertext="listview collapsible list items flat"><a href="../listview-collapsible-item-flat/" data-ajax="false">Listview collapsible list items (flat)</a></li>
|
||||
<li data-filtertext="listview collapsible list indented"><a href="../listview-collapsible-item-indented/" data-ajax="false">Listview collapsible list items (indented)</a></li>
|
||||
<li data-filtertext="grid listview responsive grids responsive listviews lists ul"><a href="../listview-grid/" data-ajax="false">Listview responsive grid</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="loader widget page loading navigation overlay spinner"><a href="../loader/" data-ajax="false">Loader widget</a></li>
|
||||
<li data-filtertext="navbar widget navmenu toolbars header footer"><a href="../navbar/" data-ajax="false">Navbar widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Navigation</h3>
|
||||
<ul>
|
||||
<li data-filtertext="ajax navigation navigate widget history event method"><a href="../navigation/" data-ajax="false">Navigation</a></li>
|
||||
<li data-filtertext="linking pages page links navigation ajax prefetch cache"><a href="../navigation-linking-pages/" data-ajax="false">Linking pages</a></li>
|
||||
<li data-filtertext="php redirect server redirection server-side navigation"><a href="../navigation-php-redirect/" data-ajax="false">PHP redirect demo</a></li>
|
||||
<li data-filtertext="navigation redirection hash query"><a href="../navigation-hash-processing/" data-ajax="false">Hash processing demo</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Pages</h3>
|
||||
<ul>
|
||||
<li data-filtertext="pages page widget ajax navigation"><a href="../pages/" data-ajax="false">Pages</a></li>
|
||||
<li data-filtertext="single page"><a href="../pages-single-page/" data-ajax="false">Single page</a></li>
|
||||
<li data-filtertext="multipage multi-page page"><a href="../pages-multi-page/" data-ajax="false">Multi-page template</a></li>
|
||||
<li data-filtertext="dialog page widget modal popup"><a href="../pages-dialog/" data-ajax="false">Dialog page</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Panel widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="panel widget sliding panels reveal push overlay responsive"><a href="../panel/" data-ajax="false">Panel</a></li>
|
||||
<li data-filtertext=""><a href="../panel-external/" data-ajax="false">External panels</a></li>
|
||||
<li data-filtertext="panel "><a href="../panel-fixed/" data-ajax="false">Fixed panels</a></li>
|
||||
<li data-filtertext="panel slide panels sliding panels shadow rwd responsive breakpoint"><a href="../panel-responsive/" data-ajax="false">Panels responsive</a></li>
|
||||
<li data-filtertext="panel custom style custom panel width reveal shadow listview panel styling page background wrapper"><a href="../panel-styling/" data-ajax="false">Custom panel style</a></li>
|
||||
<li data-filtertext="panel open on swipe"><a href="../panel-swipe-open/" data-ajax="false">Panel open on swipe</a></li>
|
||||
<li data-filtertext="panels outside page internal external toolbars"><a href="../panel-external-internal/" data-ajax="false">Panel external and internal</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Popup widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="popup widget popups dialog modal transition tooltip lightbox form overlay screen flip pop fade transition"><a href="../popup/" data-ajax="false">Popup</a></li>
|
||||
<li data-filtertext="popup alignment position"><a href="../popup-alignment/" data-ajax="false">Popup alignment</a></li>
|
||||
<li data-filtertext="popup arrow size popups popover"><a href="../popup-arrow-size/" data-ajax="false">Popup arrow size</a></li>
|
||||
<li data-filtertext="dynamic popups popup images lightbox"><a href="../popup-dynamic/" data-ajax="false">Dynamic popups</a></li>
|
||||
<li data-filtertext="popups with iframes scaling"><a href="../popup-iframe/" data-ajax="false">Popups with iframes</a></li>
|
||||
<li data-filtertext="popup image scaling"><a href="../popup-image-scaling/" data-ajax="false">Popup image scaling</a></li>
|
||||
<li data-filtertext="external popup outside multi-page"><a href="../popup-outside-multipage" data-ajax="false">Popup outside multi-page</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="form rangeslider widget dual sliders dual handle sliders range input"><a href="../rangeslider/" data-ajax="false">Rangeslider widget</a></li>
|
||||
<li data-filtertext="responsive web design rwd adaptive progressive enhancement PE accessible mobile breakpoints media query media queries"><a href="../rwd/" data-ajax="false">Responsive Web Design</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Selectmenu widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="form selectmenu widget select input custom select menu selects"><a href="../selectmenu/" data-ajax="false">Selectmenu</a></li>
|
||||
<li data-filtertext="form custom select menu selectmenu widget custom menu option optgroup multiple selects"><a href="../selectmenu-custom/" data-ajax="false">Custom select menu</a></li>
|
||||
<li data-filtertext="filterable select filter popup dialog"><a href="../selectmenu-custom-filter/" data-ajax="false">Custom select menu with filter</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Slider widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="form slider widget range input single sliders"><a href="../slider/" data-ajax="false">Slider</a></li>
|
||||
<li data-filtertext="form slider widget flipswitch slider binary select flip toggle switch"><a href="../slider-flipswitch/" data-ajax="false">Slider flip toggle switch</a></li>
|
||||
<li data-filtertext="form slider tooltip handle value input range sliders"><a href="../slider-tooltip/" data-ajax="false">Slider tooltip</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Table widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="table widget reflow column toggle th td responsive tables rwd hide show tabular"><a href="../table-column-toggle/" data-ajax="false">Table Column Toggle</a></li>
|
||||
<li data-filtertext="table column toggle phone comparison demo"><a href="../table-column-toggle-example/" data-ajax="false">Table Column Toggle demo</a></li>
|
||||
<li data-filtertext="responsive tables table column toggle heading groups rwd breakpoint"><a href="../table-column-toggle-heading-groups/" data-ajax="false">Table Column Toggle heading groups</a></li>
|
||||
<li data-filtertext="responsive tables table column toggle hide rwd breakpoint customization options"><a href="../table-column-toggle-options/" data-ajax="false">Table Column Toggle options</a></li>
|
||||
<li data-filtertext="table reflow th td responsive rwd columns tabular"><a href="../table-reflow/" data-ajax="false">Table Reflow</a></li>
|
||||
<li data-filtertext="responsive tables table reflow heading groups rwd breakpoint"><a href="../table-reflow-heading-groups/" data-ajax="false">Table Reflow heading groups</a></li>
|
||||
<li data-filtertext="responsive tables table reflow stripes strokes table style"><a href="../table-reflow-stripes-strokes/" data-ajax="false">Table Reflow stripes and strokes</a></li>
|
||||
<li data-filtertext="responsive tables table reflow stack custom styles"><a href="../table-reflow-styling/" data-ajax="false">Table Reflow custom styles</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="ui tabs widget"><a href="../tabs/" data-ajax="false">Tabs widget</a></li>
|
||||
<li data-filtertext="form textinput widget text input textarea number date time tel email file color password"><a href="../textinput/" data-ajax="false">Textinput widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Theming</h3>
|
||||
<ul>
|
||||
<li data-filtertext="default theme swatches theming style css"><a href="../theme-default/" data-ajax="false">Default theme</a></li>
|
||||
<li data-filtertext="classic theme old theme swatches theming style css"><a href="../theme-classic/" data-ajax="false">Classic theme</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Toolbar widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="toolbar widget header footer toolbars fixed fullscreen external sections"><a href="../toolbar/" data-ajax="false">Toolbar</a></li>
|
||||
<li data-filtertext="dynamic toolbars dynamically add toolbar header footer"><a href="../toolbar-dynamic/" data-ajax="false">Dynamic toolbars</a></li>
|
||||
<li data-filtertext="external toolbars header footer"><a href="../toolbar-external/" data-ajax="false">External toolbars</a></li>
|
||||
<li data-filtertext="fixed toolbars header footer"><a href="../toolbar-fixed/" data-ajax="false">Fixed toolbars</a></li>
|
||||
<li data-filtertext="fixed fullscreen toolbars header footer"><a href="../toolbar-fixed-fullscreen/" data-ajax="false">Fullscreen toolbars</a></li>
|
||||
<li data-filtertext="external fixed toolbars header footer"><a href="../toolbar-fixed-external/" data-ajax="false">Fixed external toolbars</a></li>
|
||||
<li data-filtertext="external persistent toolbars header footer navbar navmenu"><a href="../toolbar-fixed-persistent/" data-ajax="false">Persistent toolbars</a></li>
|
||||
<li data-filtertext="external ajax optimized toolbars persistent toolbars header footer navbar"><a href="../toolbar-fixed-persistent-optimized/" data-ajax="false">Ajax optimized toolbars</a></li>
|
||||
<li data-filtertext="form in toolbars header footer"><a href="../toolbar-fixed-forms/" data-ajax="false">Form in toolbar</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="page transitions animated pages popup navigation flip slide fade pop"><a href="../transitions/" data-ajax="false">Transitions</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>3rd party API demos</h3>
|
||||
<ul>
|
||||
<li data-filtertext="backbone requirejs navigation router"><a href="../backbone-requirejs/" data-ajax="false">Backbone RequireJS</a></li>
|
||||
<li data-filtertext="google maps geolocation demo"><a href="../map-geolocation/" data-ajax="false">Google Maps geolocation</a></li>
|
||||
<li data-filtertext="google maps hybrid"><a href="../map-list-toggle/" data-ajax="false">Google Maps list toggle</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
</ul>
|
||||
</div><!-- /panel -->
|
||||
|
||||
|
||||
<div data-role="footer" data-position="fixed" data-tap-toggle="false" class="jqm-footer">
|
||||
<p>jQuery Mobile Demos version <span class="jqm-version"></span></p>
|
||||
<p>Copyright 2014 The jQuery Foundation</p>
|
||||
</div><!-- /footer -->
|
||||
<!-- TODO: This should become an external panel so we can add input to markup (unique ID) -->
|
||||
<div data-role="panel" class="jqm-search-panel" data-position="right" data-display="overlay" data-theme="a">
|
||||
<div class="jqm-search">
|
||||
<ul class="jqm-list" data-filter-placeholder="Search demos..." data-filter-reveal="true">
|
||||
<li data-filtertext="demos homepage" data-icon="home"><a href=".././">Home</a></li>
|
||||
<li data-filtertext="introduction overview getting started"><a href="../intro/" data-ajax="false">Introduction</a></li>
|
||||
<li data-filtertext="buttons button markup buttonmarkup method anchor link button element"><a href="../button-markup/" data-ajax="false">Buttons</a></li>
|
||||
<li data-filtertext="form button widget input button submit reset"><a href="../button/" data-ajax="false">Button widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Checkboxradio widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="form checkboxradio widget checkbox input checkboxes controlgroups"><a href="../checkboxradio-checkbox/" data-ajax="false">Checkboxes</a></li>
|
||||
<li data-filtertext="form checkboxradio widget radio input radio buttons controlgroups"><a href="../checkboxradio-radio/" data-ajax="false">Radio buttons</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Collapsible (set) widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="collapsibles content formatting"><a href="../collapsible/" data-ajax="false">Collapsible</a></li>
|
||||
<li data-filtertext="dynamic collapsible set accordion append expand"><a href="../collapsible-dynamic/" data-ajax="false">Dynamic collapsibles</a></li>
|
||||
<li data-filtertext="accordions collapsible set widget content formatting grouped collapsibles"><a href="../collapsibleset/" data-ajax="false">Collapsible set</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Controlgroup widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="controlgroups selectmenu checkboxradio input grouped buttons horizontal vertical"><a href="../controlgroup/" data-ajax="false">Controlgroup</a></li>
|
||||
<li data-filtertext="dynamic controlgroup dynamically add buttons"><a href="../controlgroup-dynamic/" data-ajax="false">Dynamic controlgroups</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="form datepicker widget date input"><a href="../datepicker/" data-ajax="false">Datepicker</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Events</h3>
|
||||
<ul>
|
||||
<li data-filtertext="swipe to delete list items listviews swipe events"><a href="../swipe-list/" data-ajax="false">Swipe list items</a></li>
|
||||
<li data-filtertext="swipe to navigate swipe page navigation swipe events"><a href="../swipe-page/" data-ajax="false">Swipe page navigation</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="filterable filter elements sorting searching listview table"><a href="../filterable/" data-ajax="false">Filterable widget</a></li>
|
||||
<li data-filtertext="form flipswitch widget flip toggle switch binary select checkbox input"><a href="../flipswitch/" data-ajax="false">Flipswitch widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Forms</h3>
|
||||
<ul>
|
||||
<li data-filtertext="forms text checkbox radio range button submit reset inputs selects textarea slider flipswitch label form elements"><a href="../forms/" data-ajax="false">Forms</a></li>
|
||||
<li data-filtertext="form hide labels hidden accessible ui-hidden-accessible forms"><a href="../forms-label-hidden-accessible/" data-ajax="false">Hide labels</a></li>
|
||||
<li data-filtertext="form field containers fieldcontain ui-field-contain forms"><a href="../forms-field-contain/" data-ajax="false">Field containers</a></li>
|
||||
<li data-filtertext="forms disabled form elements"><a href="../forms-disabled/" data-ajax="false">Forms disabled</a></li>
|
||||
<li data-filtertext="forms gallery examples overview forms text checkbox radio range button submit reset inputs selects textarea slider flipswitch label form elements"><a href="../forms-gallery/" data-ajax="false">Forms gallery</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Grids</h3>
|
||||
<ul>
|
||||
<li data-filtertext="grids columns blocks content formatting rwd responsive css framework"><a href="../grids/" data-ajax="false">Grids</a></li>
|
||||
<li data-filtertext="buttons in grids css framework"><a href="../grids-buttons/" data-ajax="false">Buttons in grids</a></li>
|
||||
<li data-filtertext="custom responsive grids rwd css framework"><a href="../grids-custom-responsive/" data-ajax="false">Custom responsive grids</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="blocks content formatting sections heading"><a href="../body-bar-classes/" data-ajax="false">Grouping and dividing content</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Icons</h3>
|
||||
<ul>
|
||||
<li data-filtertext="button icons svg disc alt custom icon position"><a href="../icons/" data-ajax="false">Icons</a></li>
|
||||
<li data-filtertext=""><a href="../icons-grunticon/" data-ajax="false">Grunticon loader</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Listview widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="listview widget thumbnails icons nested split button collapsible ul ol"><a href="../listview/" data-ajax="false">Listview</a></li>
|
||||
<li data-filtertext="autocomplete filterable reveal listview filtertextbeforefilter placeholder"><a href="../listview-autocomplete/" data-ajax="false">Listview autocomplete</a></li>
|
||||
<li data-filtertext="autocomplete filterable reveal listview remote data filtertextbeforefilter placeholder"><a href="../listview-autocomplete-remote/" data-ajax="false">Listview autocomplete remote data</a></li>
|
||||
<li data-filtertext="autodividers anchor jump scroll linkbars listview lists ul ol"><a href="../listview-autodividers-linkbar/" data-ajax="false">Listview autodividers linkbar</a></li>
|
||||
<li data-filtertext="listview autodividers selector autodividersselector lists ul ol"><a href="../listview-autodividers-selector/" data-ajax="false">Listview autodividers selector</a></li>
|
||||
<li data-filtertext="listview nested list items"><a href="../listview-nested-lists/" data-ajax="false">Listview Nested Listviews</a></li>
|
||||
<li data-filtertext="listview collapsible list items flat"><a href="../listview-collapsible-item-flat/" data-ajax="false">Listview collapsible list items (flat)</a></li>
|
||||
<li data-filtertext="listview collapsible list indented"><a href="../listview-collapsible-item-indented/" data-ajax="false">Listview collapsible list items (indented)</a></li>
|
||||
<li data-filtertext="grid listview responsive grids responsive listviews lists ul"><a href="../listview-grid/" data-ajax="false">Listview responsive grid</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="loader widget page loading navigation overlay spinner"><a href="../loader/" data-ajax="false">Loader widget</a></li>
|
||||
<li data-filtertext="navbar widget navmenu toolbars header footer"><a href="../navbar/" data-ajax="false">Navbar widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Navigation</h3>
|
||||
<ul>
|
||||
<li data-filtertext="ajax navigation navigate widget history event method"><a href="../navigation/" data-ajax="false">Navigation</a></li>
|
||||
<li data-filtertext="linking pages page links navigation ajax prefetch cache"><a href="../navigation-linking-pages/" data-ajax="false">Linking pages</a></li>
|
||||
<li data-filtertext="php redirect server redirection server-side navigation"><a href="../navigation-php-redirect/" data-ajax="false">PHP redirect demo</a></li>
|
||||
<li data-filtertext="navigation redirection hash query"><a href="../navigation-hash-processing/" data-ajax="false">Hash processing demo</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Pages</h3>
|
||||
<ul>
|
||||
<li data-filtertext="pages page widget ajax navigation"><a href="../pages/" data-ajax="false">Pages</a></li>
|
||||
<li data-filtertext="single page"><a href="../pages-single-page/" data-ajax="false">Single page</a></li>
|
||||
<li data-filtertext="multipage multi-page page"><a href="../pages-multi-page/" data-ajax="false">Multi-page template</a></li>
|
||||
<li data-filtertext="dialog page widget modal popup"><a href="../pages-dialog/" data-ajax="false">Dialog page</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Panel widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="panel widget sliding panels reveal push overlay responsive"><a href="../panel/" data-ajax="false">Panel</a></li>
|
||||
<li data-filtertext=""><a href="../panel-external/" data-ajax="false">External panels</a></li>
|
||||
<li data-filtertext="panel "><a href="../panel-fixed/" data-ajax="false">Fixed panels</a></li>
|
||||
<li data-filtertext="panel slide panels sliding panels shadow rwd responsive breakpoint"><a href="../panel-responsive/" data-ajax="false">Panels responsive</a></li>
|
||||
<li data-filtertext="panel custom style custom panel width reveal shadow listview panel styling page background wrapper"><a href="../panel-styling/" data-ajax="false">Custom panel style</a></li>
|
||||
<li data-filtertext="panel open on swipe"><a href="../panel-swipe-open/" data-ajax="false">Panel open on swipe</a></li>
|
||||
<li data-filtertext="panels outside page internal external toolbars"><a href="../panel-external-internal/" data-ajax="false">Panel external and internal</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Popup widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="popup widget popups dialog modal transition tooltip lightbox form overlay screen flip pop fade transition"><a href="../popup/" data-ajax="false">Popup</a></li>
|
||||
<li data-filtertext="popup alignment position"><a href="../popup-alignment/" data-ajax="false">Popup alignment</a></li>
|
||||
<li data-filtertext="popup arrow size popups popover"><a href="../popup-arrow-size/" data-ajax="false">Popup arrow size</a></li>
|
||||
<li data-filtertext="dynamic popups popup images lightbox"><a href="../popup-dynamic/" data-ajax="false">Dynamic popups</a></li>
|
||||
<li data-filtertext="popups with iframes scaling"><a href="../popup-iframe/" data-ajax="false">Popups with iframes</a></li>
|
||||
<li data-filtertext="popup image scaling"><a href="../popup-image-scaling/" data-ajax="false">Popup image scaling</a></li>
|
||||
<li data-filtertext="external popup outside multi-page"><a href="../popup-outside-multipage" data-ajax="false">Popup outside multi-page</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="form rangeslider widget dual sliders dual handle sliders range input"><a href="../rangeslider/" data-ajax="false">Rangeslider widget</a></li>
|
||||
<li data-filtertext="responsive web design rwd adaptive progressive enhancement PE accessible mobile breakpoints media query media queries"><a href="../rwd/" data-ajax="false">Responsive Web Design</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Selectmenu widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="form selectmenu widget select input custom select menu selects"><a href="../selectmenu/" data-ajax="false">Selectmenu</a></li>
|
||||
<li data-filtertext="form custom select menu selectmenu widget custom menu option optgroup multiple selects"><a href="../selectmenu-custom/" data-ajax="false">Custom select menu</a></li>
|
||||
<li data-filtertext="filterable select filter popup dialog"><a href="../selectmenu-custom-filter/" data-ajax="false">Custom select menu with filter</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Slider widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="form slider widget range input single sliders"><a href="../slider/" data-ajax="false">Slider</a></li>
|
||||
<li data-filtertext="form slider widget flipswitch slider binary select flip toggle switch"><a href="../slider-flipswitch/" data-ajax="false">Slider flip toggle switch</a></li>
|
||||
<li data-filtertext="form slider tooltip handle value input range sliders"><a href="../slider-tooltip/" data-ajax="false">Slider tooltip</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Table widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="table widget reflow column toggle th td responsive tables rwd hide show tabular"><a href="../table-column-toggle/" data-ajax="false">Table Column Toggle</a></li>
|
||||
<li data-filtertext="table column toggle phone comparison demo"><a href="../table-column-toggle-example/" data-ajax="false">Table Column Toggle demo</a></li>
|
||||
<li data-filtertext="responsive tables table column toggle heading groups rwd breakpoint"><a href="../table-column-toggle-heading-groups/" data-ajax="false">Table Column Toggle heading groups</a></li>
|
||||
<li data-filtertext="responsive tables table column toggle hide rwd breakpoint customization options"><a href="../table-column-toggle-options/" data-ajax="false">Table Column Toggle options</a></li>
|
||||
<li data-filtertext="table reflow th td responsive rwd columns tabular"><a href="../table-reflow/" data-ajax="false">Table Reflow</a></li>
|
||||
<li data-filtertext="responsive tables table reflow heading groups rwd breakpoint"><a href="../table-reflow-heading-groups/" data-ajax="false">Table Reflow heading groups</a></li>
|
||||
<li data-filtertext="responsive tables table reflow stripes strokes table style"><a href="../table-reflow-stripes-strokes/" data-ajax="false">Table Reflow stripes and strokes</a></li>
|
||||
<li data-filtertext="responsive tables table reflow stack custom styles"><a href="../table-reflow-styling/" data-ajax="false">Table Reflow custom styles</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="ui tabs widget"><a href="../tabs/" data-ajax="false">Tabs widget</a></li>
|
||||
<li data-filtertext="form textinput widget text input textarea number date time tel email file color password"><a href="../textinput/" data-ajax="false">Textinput widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Theming</h3>
|
||||
<ul>
|
||||
<li data-filtertext="default theme swatches theming style css"><a href="../theme-default/" data-ajax="false">Default theme</a></li>
|
||||
<li data-filtertext="classic theme old theme swatches theming style css"><a href="../theme-classic/" data-ajax="false">Classic theme</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Toolbar widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="toolbar widget header footer toolbars fixed fullscreen external sections"><a href="../toolbar/" data-ajax="false">Toolbar</a></li>
|
||||
<li data-filtertext="dynamic toolbars dynamically add toolbar header footer"><a href="../toolbar-dynamic/" data-ajax="false">Dynamic toolbars</a></li>
|
||||
<li data-filtertext="external toolbars header footer"><a href="../toolbar-external/" data-ajax="false">External toolbars</a></li>
|
||||
<li data-filtertext="fixed toolbars header footer"><a href="../toolbar-fixed/" data-ajax="false">Fixed toolbars</a></li>
|
||||
<li data-filtertext="fixed fullscreen toolbars header footer"><a href="../toolbar-fixed-fullscreen/" data-ajax="false">Fullscreen toolbars</a></li>
|
||||
<li data-filtertext="external fixed toolbars header footer"><a href="../toolbar-fixed-external/" data-ajax="false">Fixed external toolbars</a></li>
|
||||
<li data-filtertext="external persistent toolbars header footer navbar navmenu"><a href="../toolbar-fixed-persistent/" data-ajax="false">Persistent toolbars</a></li>
|
||||
<li data-filtertext="external ajax optimized toolbars persistent toolbars header footer navbar"><a href="../toolbar-fixed-persistent-optimized/" data-ajax="false">Ajax optimized toolbars</a></li>
|
||||
<li data-filtertext="form in toolbars header footer"><a href="../toolbar-fixed-forms/" data-ajax="false">Form in toolbar</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="page transitions animated pages popup navigation flip slide fade pop"><a href="../transitions/" data-ajax="false">Transitions</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>3rd party API demos</h3>
|
||||
<ul>
|
||||
<li data-filtertext="backbone requirejs navigation router"><a href="../backbone-requirejs/" data-ajax="false">Backbone RequireJS</a></li>
|
||||
<li data-filtertext="google maps geolocation demo"><a href="../map-geolocation/" data-ajax="false">Google Maps geolocation</a></li>
|
||||
<li data-filtertext="google maps hybrid"><a href="../map-list-toggle/" data-ajax="false">Google Maps list toggle</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- /panel -->
|
||||
|
||||
|
||||
</div><!-- /page -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
539
js/libs/jquery.mobile/demos/controlgroup-dynamic/index.html
Normal file
539
js/libs/jquery.mobile/demos/controlgroup-dynamic/index.html
Normal file
@ -0,0 +1,539 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Dynamic controlgroup - jQuery Mobile Demos</title>
|
||||
<link rel="shortcut icon" href="../favicon.ico">
|
||||
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
|
||||
<link rel="stylesheet" href="../css/themes/default/jquery.mobile-1.4.2.min.css">
|
||||
<link rel="stylesheet" href="../_assets/css/jqm-demos.css">
|
||||
<script src="../js/jquery.js"></script>
|
||||
<script src="../_assets/js/index.js"></script>
|
||||
<script src="../js/jquery.mobile-1.4.2.min.js"></script>
|
||||
<script>
|
||||
( function( $, undefined ) {
|
||||
var counter = 0;
|
||||
$( document ).bind( "pagecreate", function( e ) {
|
||||
$( "#prepend, #append", e.target ).on( "click", function( e ) {
|
||||
counter++;
|
||||
|
||||
var widgetType = $( "[name='radio-widget']:checked" ).attr( "id" ),
|
||||
group = $( "#my-controlgroup" ),
|
||||
$el,
|
||||
action = function() {
|
||||
var action = $( "[name='radio-action']:checked" ).attr( "id" );
|
||||
if ( $( $el[1] ).is( "select" ) && action === "hide" ) {
|
||||
$el = $( $el[1] ).parents( ".ui-select" );
|
||||
}
|
||||
$el[ action ]();
|
||||
group.controlgroup( "refresh" );
|
||||
};
|
||||
|
||||
if ( widgetType === "link" ) {
|
||||
|
||||
$el = $( "<a href='#'>Link " + counter + "</a>" ).bind( "click", action );
|
||||
$( "#my-controlgroup" ).controlgroup( "container" )[ $( this ).attr( "id" ) ]( $el );
|
||||
$el.buttonMarkup();
|
||||
|
||||
} else if ( widgetType === "select" ) {
|
||||
|
||||
$el = $( "<label for='widget" + counter + "'>Select " + counter + "</label><select id='widget" + counter + "'><option value='option1'>Select " + counter + "</option><option value='option2'>Select option</option></select>" );
|
||||
$( $el[ 1 ] ).bind( "change", action);
|
||||
$( "#my-controlgroup" ).controlgroup( "container" )[ $( this ).attr( "id" ) ]( $el );
|
||||
$( $el[ 1 ] ).selectmenu();
|
||||
|
||||
} else {
|
||||
|
||||
$el = $( "<label for='widget" + counter + "'>Checkbox " + counter + "</label><input type='checkbox' id='widget" + counter + "'></input>" );
|
||||
$( $el[ 1 ] ).bind( "change", action );
|
||||
$( "#my-controlgroup" ).controlgroup( "container" )[ $( this ).attr( "id" ) ]( $el );
|
||||
$( $el[ 1 ] ).checkboxradio();
|
||||
|
||||
}
|
||||
|
||||
group.controlgroup( "refresh" );
|
||||
});
|
||||
|
||||
$( "[name='radio-orientation']" ).bind( "change", function( e ) {
|
||||
$( "#my-controlgroup" ).controlgroup( "option", "type", ( $( "#isHorizontal" ).is( ":checked" ) ? "horizontal" : "vertical" ) );
|
||||
});
|
||||
});
|
||||
})( jQuery );
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div data-role="page" class="jqm-demos">
|
||||
|
||||
<div data-role="header" class="jqm-header">
|
||||
<h2><a href="../" title="jQuery Mobile Demos home"><img src="../_assets/img/jquery-logo.png" alt="jQuery Mobile"></a></h2>
|
||||
<p><span class="jqm-version"></span> Demos</p>
|
||||
<a href="#" class="jqm-navmenu-link ui-btn ui-btn-icon-notext ui-corner-all ui-icon-bars ui-nodisc-icon ui-alt-icon ui-btn-left">Menu</a>
|
||||
<a href="#" class="jqm-search-link ui-btn ui-btn-icon-notext ui-corner-all ui-icon-search ui-nodisc-icon ui-alt-icon ui-btn-right">Search</a>
|
||||
</div><!-- /header -->
|
||||
|
||||
<div role="main" class="ui-content jqm-content">
|
||||
|
||||
<h1>Dynamic controlgroup</h1>
|
||||
|
||||
<p>This demo shows how you can dynamically make changes to a controlgroup.</p>
|
||||
|
||||
<div data-demo-html="true" data-demo-js="true">
|
||||
|
||||
<form>
|
||||
<div class="ui-body ui-body-d ui-corner-all">
|
||||
<p>Controlgroup...</p>
|
||||
<div data-role="controlgroup" id="my-controlgroup"><!-- items will be injected here --></div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="ui-field-contain">
|
||||
<label for="prepend">Add item</label>
|
||||
<button id="prepend" data-mini="true" data-inline="true">Prepend</button>
|
||||
<label for="append" class="ui-hidden-accessible">Action</label>
|
||||
<button id="append" data-mini="true" data-inline="true">Append</button>
|
||||
</div>
|
||||
|
||||
<form action="#" method="get">
|
||||
<div class="ui-field-contain">
|
||||
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
|
||||
<legend>Widget type</legend>
|
||||
|
||||
<input type="radio" name="radio-widget" id="link" value="link" checked="checked">
|
||||
<label for="link">Link</label>
|
||||
|
||||
<input type="radio" name="radio-widget" id="select" value="select">
|
||||
<label for="select">Select</label>
|
||||
|
||||
<input type="radio" name="radio-widget" id="checkbox" value="checkbox">
|
||||
<label for="checkbox">Checkbox</label>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<div class="ui-field-contain">
|
||||
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
|
||||
<legend>Action<br><small>on click/change</small></legend>
|
||||
|
||||
<input type="radio" name="radio-action" id="remove" value="remove" checked="checked">
|
||||
<label for="remove">Remove</label>
|
||||
|
||||
<input type="radio" name="radio-action" id="hide" value="hide">
|
||||
<label for="hide">Hide</label>
|
||||
|
||||
<input type="radio" name="radio-action" id="width" value="width">
|
||||
<label for="width">Nothing</label>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<div class="ui-field-contain">
|
||||
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
|
||||
<legend>Switch orientation</legend>
|
||||
|
||||
<input type="radio" name="radio-orientation" id="isVertical" value="isVertical" checked="checked">
|
||||
<label for="isVertical">Vertical</label>
|
||||
|
||||
<input type="radio" name="radio-orientation" id="isHorizontal" value="isHorizontal">
|
||||
<label for="isHorizontal">Horizontal</label>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
</div><!--/demo-html -->
|
||||
|
||||
</div><!-- /content -->
|
||||
<div data-role="panel" class="jqm-navmenu-panel" data-position="left" data-display="overlay" data-theme="a">
|
||||
<ul class="jqm-list ui-alt-icon ui-nodisc-icon">
|
||||
<li data-filtertext="demos homepage" data-icon="home"><a href=".././">Home</a></li>
|
||||
<li data-filtertext="introduction overview getting started"><a href="../intro/" data-ajax="false">Introduction</a></li>
|
||||
<li data-filtertext="buttons button markup buttonmarkup method anchor link button element"><a href="../button-markup/" data-ajax="false">Buttons</a></li>
|
||||
<li data-filtertext="form button widget input button submit reset"><a href="../button/" data-ajax="false">Button widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Checkboxradio widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="form checkboxradio widget checkbox input checkboxes controlgroups"><a href="../checkboxradio-checkbox/" data-ajax="false">Checkboxes</a></li>
|
||||
<li data-filtertext="form checkboxradio widget radio input radio buttons controlgroups"><a href="../checkboxradio-radio/" data-ajax="false">Radio buttons</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Collapsible (set) widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="collapsibles content formatting"><a href="../collapsible/" data-ajax="false">Collapsible</a></li>
|
||||
<li data-filtertext="dynamic collapsible set accordion append expand"><a href="../collapsible-dynamic/" data-ajax="false">Dynamic collapsibles</a></li>
|
||||
<li data-filtertext="accordions collapsible set widget content formatting grouped collapsibles"><a href="../collapsibleset/" data-ajax="false">Collapsible set</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Controlgroup widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="controlgroups selectmenu checkboxradio input grouped buttons horizontal vertical"><a href="../controlgroup/" data-ajax="false">Controlgroup</a></li>
|
||||
<li data-filtertext="dynamic controlgroup dynamically add buttons"><a href="../controlgroup-dynamic/" data-ajax="false">Dynamic controlgroups</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="form datepicker widget date input"><a href="../datepicker/" data-ajax="false">Datepicker</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Events</h3>
|
||||
<ul>
|
||||
<li data-filtertext="swipe to delete list items listviews swipe events"><a href="../swipe-list/" data-ajax="false">Swipe list items</a></li>
|
||||
<li data-filtertext="swipe to navigate swipe page navigation swipe events"><a href="../swipe-page/" data-ajax="false">Swipe page navigation</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="filterable filter elements sorting searching listview table"><a href="../filterable/" data-ajax="false">Filterable widget</a></li>
|
||||
<li data-filtertext="form flipswitch widget flip toggle switch binary select checkbox input"><a href="../flipswitch/" data-ajax="false">Flipswitch widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Forms</h3>
|
||||
<ul>
|
||||
<li data-filtertext="forms text checkbox radio range button submit reset inputs selects textarea slider flipswitch label form elements"><a href="../forms/" data-ajax="false">Forms</a></li>
|
||||
<li data-filtertext="form hide labels hidden accessible ui-hidden-accessible forms"><a href="../forms-label-hidden-accessible/" data-ajax="false">Hide labels</a></li>
|
||||
<li data-filtertext="form field containers fieldcontain ui-field-contain forms"><a href="../forms-field-contain/" data-ajax="false">Field containers</a></li>
|
||||
<li data-filtertext="forms disabled form elements"><a href="../forms-disabled/" data-ajax="false">Forms disabled</a></li>
|
||||
<li data-filtertext="forms gallery examples overview forms text checkbox radio range button submit reset inputs selects textarea slider flipswitch label form elements"><a href="../forms-gallery/" data-ajax="false">Forms gallery</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Grids</h3>
|
||||
<ul>
|
||||
<li data-filtertext="grids columns blocks content formatting rwd responsive css framework"><a href="../grids/" data-ajax="false">Grids</a></li>
|
||||
<li data-filtertext="buttons in grids css framework"><a href="../grids-buttons/" data-ajax="false">Buttons in grids</a></li>
|
||||
<li data-filtertext="custom responsive grids rwd css framework"><a href="../grids-custom-responsive/" data-ajax="false">Custom responsive grids</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="blocks content formatting sections heading"><a href="../body-bar-classes/" data-ajax="false">Grouping and dividing content</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Icons</h3>
|
||||
<ul>
|
||||
<li data-filtertext="button icons svg disc alt custom icon position"><a href="../icons/" data-ajax="false">Icons</a></li>
|
||||
<li data-filtertext=""><a href="../icons-grunticon/" data-ajax="false">Grunticon loader</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Listview widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="listview widget thumbnails icons nested split button collapsible ul ol"><a href="../listview/" data-ajax="false">Listview</a></li>
|
||||
<li data-filtertext="autocomplete filterable reveal listview filtertextbeforefilter placeholder"><a href="../listview-autocomplete/" data-ajax="false">Listview autocomplete</a></li>
|
||||
<li data-filtertext="autocomplete filterable reveal listview remote data filtertextbeforefilter placeholder"><a href="../listview-autocomplete-remote/" data-ajax="false">Listview autocomplete remote data</a></li>
|
||||
<li data-filtertext="autodividers anchor jump scroll linkbars listview lists ul ol"><a href="../listview-autodividers-linkbar/" data-ajax="false">Listview autodividers linkbar</a></li>
|
||||
<li data-filtertext="listview autodividers selector autodividersselector lists ul ol"><a href="../listview-autodividers-selector/" data-ajax="false">Listview autodividers selector</a></li>
|
||||
<li data-filtertext="listview nested list items"><a href="../listview-nested-lists/" data-ajax="false">Listview Nested Listviews</a></li>
|
||||
<li data-filtertext="listview collapsible list items flat"><a href="../listview-collapsible-item-flat/" data-ajax="false">Listview collapsible list items (flat)</a></li>
|
||||
<li data-filtertext="listview collapsible list indented"><a href="../listview-collapsible-item-indented/" data-ajax="false">Listview collapsible list items (indented)</a></li>
|
||||
<li data-filtertext="grid listview responsive grids responsive listviews lists ul"><a href="../listview-grid/" data-ajax="false">Listview responsive grid</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="loader widget page loading navigation overlay spinner"><a href="../loader/" data-ajax="false">Loader widget</a></li>
|
||||
<li data-filtertext="navbar widget navmenu toolbars header footer"><a href="../navbar/" data-ajax="false">Navbar widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Navigation</h3>
|
||||
<ul>
|
||||
<li data-filtertext="ajax navigation navigate widget history event method"><a href="../navigation/" data-ajax="false">Navigation</a></li>
|
||||
<li data-filtertext="linking pages page links navigation ajax prefetch cache"><a href="../navigation-linking-pages/" data-ajax="false">Linking pages</a></li>
|
||||
<li data-filtertext="php redirect server redirection server-side navigation"><a href="../navigation-php-redirect/" data-ajax="false">PHP redirect demo</a></li>
|
||||
<li data-filtertext="navigation redirection hash query"><a href="../navigation-hash-processing/" data-ajax="false">Hash processing demo</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Pages</h3>
|
||||
<ul>
|
||||
<li data-filtertext="pages page widget ajax navigation"><a href="../pages/" data-ajax="false">Pages</a></li>
|
||||
<li data-filtertext="single page"><a href="../pages-single-page/" data-ajax="false">Single page</a></li>
|
||||
<li data-filtertext="multipage multi-page page"><a href="../pages-multi-page/" data-ajax="false">Multi-page template</a></li>
|
||||
<li data-filtertext="dialog page widget modal popup"><a href="../pages-dialog/" data-ajax="false">Dialog page</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Panel widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="panel widget sliding panels reveal push overlay responsive"><a href="../panel/" data-ajax="false">Panel</a></li>
|
||||
<li data-filtertext=""><a href="../panel-external/" data-ajax="false">External panels</a></li>
|
||||
<li data-filtertext="panel "><a href="../panel-fixed/" data-ajax="false">Fixed panels</a></li>
|
||||
<li data-filtertext="panel slide panels sliding panels shadow rwd responsive breakpoint"><a href="../panel-responsive/" data-ajax="false">Panels responsive</a></li>
|
||||
<li data-filtertext="panel custom style custom panel width reveal shadow listview panel styling page background wrapper"><a href="../panel-styling/" data-ajax="false">Custom panel style</a></li>
|
||||
<li data-filtertext="panel open on swipe"><a href="../panel-swipe-open/" data-ajax="false">Panel open on swipe</a></li>
|
||||
<li data-filtertext="panels outside page internal external toolbars"><a href="../panel-external-internal/" data-ajax="false">Panel external and internal</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Popup widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="popup widget popups dialog modal transition tooltip lightbox form overlay screen flip pop fade transition"><a href="../popup/" data-ajax="false">Popup</a></li>
|
||||
<li data-filtertext="popup alignment position"><a href="../popup-alignment/" data-ajax="false">Popup alignment</a></li>
|
||||
<li data-filtertext="popup arrow size popups popover"><a href="../popup-arrow-size/" data-ajax="false">Popup arrow size</a></li>
|
||||
<li data-filtertext="dynamic popups popup images lightbox"><a href="../popup-dynamic/" data-ajax="false">Dynamic popups</a></li>
|
||||
<li data-filtertext="popups with iframes scaling"><a href="../popup-iframe/" data-ajax="false">Popups with iframes</a></li>
|
||||
<li data-filtertext="popup image scaling"><a href="../popup-image-scaling/" data-ajax="false">Popup image scaling</a></li>
|
||||
<li data-filtertext="external popup outside multi-page"><a href="../popup-outside-multipage" data-ajax="false">Popup outside multi-page</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="form rangeslider widget dual sliders dual handle sliders range input"><a href="../rangeslider/" data-ajax="false">Rangeslider widget</a></li>
|
||||
<li data-filtertext="responsive web design rwd adaptive progressive enhancement PE accessible mobile breakpoints media query media queries"><a href="../rwd/" data-ajax="false">Responsive Web Design</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Selectmenu widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="form selectmenu widget select input custom select menu selects"><a href="../selectmenu/" data-ajax="false">Selectmenu</a></li>
|
||||
<li data-filtertext="form custom select menu selectmenu widget custom menu option optgroup multiple selects"><a href="../selectmenu-custom/" data-ajax="false">Custom select menu</a></li>
|
||||
<li data-filtertext="filterable select filter popup dialog"><a href="../selectmenu-custom-filter/" data-ajax="false">Custom select menu with filter</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Slider widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="form slider widget range input single sliders"><a href="../slider/" data-ajax="false">Slider</a></li>
|
||||
<li data-filtertext="form slider widget flipswitch slider binary select flip toggle switch"><a href="../slider-flipswitch/" data-ajax="false">Slider flip toggle switch</a></li>
|
||||
<li data-filtertext="form slider tooltip handle value input range sliders"><a href="../slider-tooltip/" data-ajax="false">Slider tooltip</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Table widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="table widget reflow column toggle th td responsive tables rwd hide show tabular"><a href="../table-column-toggle/" data-ajax="false">Table Column Toggle</a></li>
|
||||
<li data-filtertext="table column toggle phone comparison demo"><a href="../table-column-toggle-example/" data-ajax="false">Table Column Toggle demo</a></li>
|
||||
<li data-filtertext="responsive tables table column toggle heading groups rwd breakpoint"><a href="../table-column-toggle-heading-groups/" data-ajax="false">Table Column Toggle heading groups</a></li>
|
||||
<li data-filtertext="responsive tables table column toggle hide rwd breakpoint customization options"><a href="../table-column-toggle-options/" data-ajax="false">Table Column Toggle options</a></li>
|
||||
<li data-filtertext="table reflow th td responsive rwd columns tabular"><a href="../table-reflow/" data-ajax="false">Table Reflow</a></li>
|
||||
<li data-filtertext="responsive tables table reflow heading groups rwd breakpoint"><a href="../table-reflow-heading-groups/" data-ajax="false">Table Reflow heading groups</a></li>
|
||||
<li data-filtertext="responsive tables table reflow stripes strokes table style"><a href="../table-reflow-stripes-strokes/" data-ajax="false">Table Reflow stripes and strokes</a></li>
|
||||
<li data-filtertext="responsive tables table reflow stack custom styles"><a href="../table-reflow-styling/" data-ajax="false">Table Reflow custom styles</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="ui tabs widget"><a href="../tabs/" data-ajax="false">Tabs widget</a></li>
|
||||
<li data-filtertext="form textinput widget text input textarea number date time tel email file color password"><a href="../textinput/" data-ajax="false">Textinput widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Theming</h3>
|
||||
<ul>
|
||||
<li data-filtertext="default theme swatches theming style css"><a href="../theme-default/" data-ajax="false">Default theme</a></li>
|
||||
<li data-filtertext="classic theme old theme swatches theming style css"><a href="../theme-classic/" data-ajax="false">Classic theme</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Toolbar widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="toolbar widget header footer toolbars fixed fullscreen external sections"><a href="../toolbar/" data-ajax="false">Toolbar</a></li>
|
||||
<li data-filtertext="dynamic toolbars dynamically add toolbar header footer"><a href="../toolbar-dynamic/" data-ajax="false">Dynamic toolbars</a></li>
|
||||
<li data-filtertext="external toolbars header footer"><a href="../toolbar-external/" data-ajax="false">External toolbars</a></li>
|
||||
<li data-filtertext="fixed toolbars header footer"><a href="../toolbar-fixed/" data-ajax="false">Fixed toolbars</a></li>
|
||||
<li data-filtertext="fixed fullscreen toolbars header footer"><a href="../toolbar-fixed-fullscreen/" data-ajax="false">Fullscreen toolbars</a></li>
|
||||
<li data-filtertext="external fixed toolbars header footer"><a href="../toolbar-fixed-external/" data-ajax="false">Fixed external toolbars</a></li>
|
||||
<li data-filtertext="external persistent toolbars header footer navbar navmenu"><a href="../toolbar-fixed-persistent/" data-ajax="false">Persistent toolbars</a></li>
|
||||
<li data-filtertext="external ajax optimized toolbars persistent toolbars header footer navbar"><a href="../toolbar-fixed-persistent-optimized/" data-ajax="false">Ajax optimized toolbars</a></li>
|
||||
<li data-filtertext="form in toolbars header footer"><a href="../toolbar-fixed-forms/" data-ajax="false">Form in toolbar</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="page transitions animated pages popup navigation flip slide fade pop"><a href="../transitions/" data-ajax="false">Transitions</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>3rd party API demos</h3>
|
||||
<ul>
|
||||
<li data-filtertext="backbone requirejs navigation router"><a href="../backbone-requirejs/" data-ajax="false">Backbone RequireJS</a></li>
|
||||
<li data-filtertext="google maps geolocation demo"><a href="../map-geolocation/" data-ajax="false">Google Maps geolocation</a></li>
|
||||
<li data-filtertext="google maps hybrid"><a href="../map-list-toggle/" data-ajax="false">Google Maps list toggle</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
</ul>
|
||||
</div><!-- /panel -->
|
||||
|
||||
|
||||
<div data-role="footer" data-position="fixed" data-tap-toggle="false" class="jqm-footer">
|
||||
<p>jQuery Mobile Demos version <span class="jqm-version"></span></p>
|
||||
<p>Copyright 2014 The jQuery Foundation</p>
|
||||
</div><!-- /footer -->
|
||||
<!-- TODO: This should become an external panel so we can add input to markup (unique ID) -->
|
||||
<div data-role="panel" class="jqm-search-panel" data-position="right" data-display="overlay" data-theme="a">
|
||||
<div class="jqm-search">
|
||||
<ul class="jqm-list" data-filter-placeholder="Search demos..." data-filter-reveal="true">
|
||||
<li data-filtertext="demos homepage" data-icon="home"><a href=".././">Home</a></li>
|
||||
<li data-filtertext="introduction overview getting started"><a href="../intro/" data-ajax="false">Introduction</a></li>
|
||||
<li data-filtertext="buttons button markup buttonmarkup method anchor link button element"><a href="../button-markup/" data-ajax="false">Buttons</a></li>
|
||||
<li data-filtertext="form button widget input button submit reset"><a href="../button/" data-ajax="false">Button widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Checkboxradio widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="form checkboxradio widget checkbox input checkboxes controlgroups"><a href="../checkboxradio-checkbox/" data-ajax="false">Checkboxes</a></li>
|
||||
<li data-filtertext="form checkboxradio widget radio input radio buttons controlgroups"><a href="../checkboxradio-radio/" data-ajax="false">Radio buttons</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Collapsible (set) widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="collapsibles content formatting"><a href="../collapsible/" data-ajax="false">Collapsible</a></li>
|
||||
<li data-filtertext="dynamic collapsible set accordion append expand"><a href="../collapsible-dynamic/" data-ajax="false">Dynamic collapsibles</a></li>
|
||||
<li data-filtertext="accordions collapsible set widget content formatting grouped collapsibles"><a href="../collapsibleset/" data-ajax="false">Collapsible set</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Controlgroup widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="controlgroups selectmenu checkboxradio input grouped buttons horizontal vertical"><a href="../controlgroup/" data-ajax="false">Controlgroup</a></li>
|
||||
<li data-filtertext="dynamic controlgroup dynamically add buttons"><a href="../controlgroup-dynamic/" data-ajax="false">Dynamic controlgroups</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="form datepicker widget date input"><a href="../datepicker/" data-ajax="false">Datepicker</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Events</h3>
|
||||
<ul>
|
||||
<li data-filtertext="swipe to delete list items listviews swipe events"><a href="../swipe-list/" data-ajax="false">Swipe list items</a></li>
|
||||
<li data-filtertext="swipe to navigate swipe page navigation swipe events"><a href="../swipe-page/" data-ajax="false">Swipe page navigation</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="filterable filter elements sorting searching listview table"><a href="../filterable/" data-ajax="false">Filterable widget</a></li>
|
||||
<li data-filtertext="form flipswitch widget flip toggle switch binary select checkbox input"><a href="../flipswitch/" data-ajax="false">Flipswitch widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Forms</h3>
|
||||
<ul>
|
||||
<li data-filtertext="forms text checkbox radio range button submit reset inputs selects textarea slider flipswitch label form elements"><a href="../forms/" data-ajax="false">Forms</a></li>
|
||||
<li data-filtertext="form hide labels hidden accessible ui-hidden-accessible forms"><a href="../forms-label-hidden-accessible/" data-ajax="false">Hide labels</a></li>
|
||||
<li data-filtertext="form field containers fieldcontain ui-field-contain forms"><a href="../forms-field-contain/" data-ajax="false">Field containers</a></li>
|
||||
<li data-filtertext="forms disabled form elements"><a href="../forms-disabled/" data-ajax="false">Forms disabled</a></li>
|
||||
<li data-filtertext="forms gallery examples overview forms text checkbox radio range button submit reset inputs selects textarea slider flipswitch label form elements"><a href="../forms-gallery/" data-ajax="false">Forms gallery</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Grids</h3>
|
||||
<ul>
|
||||
<li data-filtertext="grids columns blocks content formatting rwd responsive css framework"><a href="../grids/" data-ajax="false">Grids</a></li>
|
||||
<li data-filtertext="buttons in grids css framework"><a href="../grids-buttons/" data-ajax="false">Buttons in grids</a></li>
|
||||
<li data-filtertext="custom responsive grids rwd css framework"><a href="../grids-custom-responsive/" data-ajax="false">Custom responsive grids</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="blocks content formatting sections heading"><a href="../body-bar-classes/" data-ajax="false">Grouping and dividing content</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Icons</h3>
|
||||
<ul>
|
||||
<li data-filtertext="button icons svg disc alt custom icon position"><a href="../icons/" data-ajax="false">Icons</a></li>
|
||||
<li data-filtertext=""><a href="../icons-grunticon/" data-ajax="false">Grunticon loader</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Listview widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="listview widget thumbnails icons nested split button collapsible ul ol"><a href="../listview/" data-ajax="false">Listview</a></li>
|
||||
<li data-filtertext="autocomplete filterable reveal listview filtertextbeforefilter placeholder"><a href="../listview-autocomplete/" data-ajax="false">Listview autocomplete</a></li>
|
||||
<li data-filtertext="autocomplete filterable reveal listview remote data filtertextbeforefilter placeholder"><a href="../listview-autocomplete-remote/" data-ajax="false">Listview autocomplete remote data</a></li>
|
||||
<li data-filtertext="autodividers anchor jump scroll linkbars listview lists ul ol"><a href="../listview-autodividers-linkbar/" data-ajax="false">Listview autodividers linkbar</a></li>
|
||||
<li data-filtertext="listview autodividers selector autodividersselector lists ul ol"><a href="../listview-autodividers-selector/" data-ajax="false">Listview autodividers selector</a></li>
|
||||
<li data-filtertext="listview nested list items"><a href="../listview-nested-lists/" data-ajax="false">Listview Nested Listviews</a></li>
|
||||
<li data-filtertext="listview collapsible list items flat"><a href="../listview-collapsible-item-flat/" data-ajax="false">Listview collapsible list items (flat)</a></li>
|
||||
<li data-filtertext="listview collapsible list indented"><a href="../listview-collapsible-item-indented/" data-ajax="false">Listview collapsible list items (indented)</a></li>
|
||||
<li data-filtertext="grid listview responsive grids responsive listviews lists ul"><a href="../listview-grid/" data-ajax="false">Listview responsive grid</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="loader widget page loading navigation overlay spinner"><a href="../loader/" data-ajax="false">Loader widget</a></li>
|
||||
<li data-filtertext="navbar widget navmenu toolbars header footer"><a href="../navbar/" data-ajax="false">Navbar widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Navigation</h3>
|
||||
<ul>
|
||||
<li data-filtertext="ajax navigation navigate widget history event method"><a href="../navigation/" data-ajax="false">Navigation</a></li>
|
||||
<li data-filtertext="linking pages page links navigation ajax prefetch cache"><a href="../navigation-linking-pages/" data-ajax="false">Linking pages</a></li>
|
||||
<li data-filtertext="php redirect server redirection server-side navigation"><a href="../navigation-php-redirect/" data-ajax="false">PHP redirect demo</a></li>
|
||||
<li data-filtertext="navigation redirection hash query"><a href="../navigation-hash-processing/" data-ajax="false">Hash processing demo</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Pages</h3>
|
||||
<ul>
|
||||
<li data-filtertext="pages page widget ajax navigation"><a href="../pages/" data-ajax="false">Pages</a></li>
|
||||
<li data-filtertext="single page"><a href="../pages-single-page/" data-ajax="false">Single page</a></li>
|
||||
<li data-filtertext="multipage multi-page page"><a href="../pages-multi-page/" data-ajax="false">Multi-page template</a></li>
|
||||
<li data-filtertext="dialog page widget modal popup"><a href="../pages-dialog/" data-ajax="false">Dialog page</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Panel widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="panel widget sliding panels reveal push overlay responsive"><a href="../panel/" data-ajax="false">Panel</a></li>
|
||||
<li data-filtertext=""><a href="../panel-external/" data-ajax="false">External panels</a></li>
|
||||
<li data-filtertext="panel "><a href="../panel-fixed/" data-ajax="false">Fixed panels</a></li>
|
||||
<li data-filtertext="panel slide panels sliding panels shadow rwd responsive breakpoint"><a href="../panel-responsive/" data-ajax="false">Panels responsive</a></li>
|
||||
<li data-filtertext="panel custom style custom panel width reveal shadow listview panel styling page background wrapper"><a href="../panel-styling/" data-ajax="false">Custom panel style</a></li>
|
||||
<li data-filtertext="panel open on swipe"><a href="../panel-swipe-open/" data-ajax="false">Panel open on swipe</a></li>
|
||||
<li data-filtertext="panels outside page internal external toolbars"><a href="../panel-external-internal/" data-ajax="false">Panel external and internal</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Popup widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="popup widget popups dialog modal transition tooltip lightbox form overlay screen flip pop fade transition"><a href="../popup/" data-ajax="false">Popup</a></li>
|
||||
<li data-filtertext="popup alignment position"><a href="../popup-alignment/" data-ajax="false">Popup alignment</a></li>
|
||||
<li data-filtertext="popup arrow size popups popover"><a href="../popup-arrow-size/" data-ajax="false">Popup arrow size</a></li>
|
||||
<li data-filtertext="dynamic popups popup images lightbox"><a href="../popup-dynamic/" data-ajax="false">Dynamic popups</a></li>
|
||||
<li data-filtertext="popups with iframes scaling"><a href="../popup-iframe/" data-ajax="false">Popups with iframes</a></li>
|
||||
<li data-filtertext="popup image scaling"><a href="../popup-image-scaling/" data-ajax="false">Popup image scaling</a></li>
|
||||
<li data-filtertext="external popup outside multi-page"><a href="../popup-outside-multipage" data-ajax="false">Popup outside multi-page</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="form rangeslider widget dual sliders dual handle sliders range input"><a href="../rangeslider/" data-ajax="false">Rangeslider widget</a></li>
|
||||
<li data-filtertext="responsive web design rwd adaptive progressive enhancement PE accessible mobile breakpoints media query media queries"><a href="../rwd/" data-ajax="false">Responsive Web Design</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Selectmenu widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="form selectmenu widget select input custom select menu selects"><a href="../selectmenu/" data-ajax="false">Selectmenu</a></li>
|
||||
<li data-filtertext="form custom select menu selectmenu widget custom menu option optgroup multiple selects"><a href="../selectmenu-custom/" data-ajax="false">Custom select menu</a></li>
|
||||
<li data-filtertext="filterable select filter popup dialog"><a href="../selectmenu-custom-filter/" data-ajax="false">Custom select menu with filter</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Slider widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="form slider widget range input single sliders"><a href="../slider/" data-ajax="false">Slider</a></li>
|
||||
<li data-filtertext="form slider widget flipswitch slider binary select flip toggle switch"><a href="../slider-flipswitch/" data-ajax="false">Slider flip toggle switch</a></li>
|
||||
<li data-filtertext="form slider tooltip handle value input range sliders"><a href="../slider-tooltip/" data-ajax="false">Slider tooltip</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Table widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="table widget reflow column toggle th td responsive tables rwd hide show tabular"><a href="../table-column-toggle/" data-ajax="false">Table Column Toggle</a></li>
|
||||
<li data-filtertext="table column toggle phone comparison demo"><a href="../table-column-toggle-example/" data-ajax="false">Table Column Toggle demo</a></li>
|
||||
<li data-filtertext="responsive tables table column toggle heading groups rwd breakpoint"><a href="../table-column-toggle-heading-groups/" data-ajax="false">Table Column Toggle heading groups</a></li>
|
||||
<li data-filtertext="responsive tables table column toggle hide rwd breakpoint customization options"><a href="../table-column-toggle-options/" data-ajax="false">Table Column Toggle options</a></li>
|
||||
<li data-filtertext="table reflow th td responsive rwd columns tabular"><a href="../table-reflow/" data-ajax="false">Table Reflow</a></li>
|
||||
<li data-filtertext="responsive tables table reflow heading groups rwd breakpoint"><a href="../table-reflow-heading-groups/" data-ajax="false">Table Reflow heading groups</a></li>
|
||||
<li data-filtertext="responsive tables table reflow stripes strokes table style"><a href="../table-reflow-stripes-strokes/" data-ajax="false">Table Reflow stripes and strokes</a></li>
|
||||
<li data-filtertext="responsive tables table reflow stack custom styles"><a href="../table-reflow-styling/" data-ajax="false">Table Reflow custom styles</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="ui tabs widget"><a href="../tabs/" data-ajax="false">Tabs widget</a></li>
|
||||
<li data-filtertext="form textinput widget text input textarea number date time tel email file color password"><a href="../textinput/" data-ajax="false">Textinput widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Theming</h3>
|
||||
<ul>
|
||||
<li data-filtertext="default theme swatches theming style css"><a href="../theme-default/" data-ajax="false">Default theme</a></li>
|
||||
<li data-filtertext="classic theme old theme swatches theming style css"><a href="../theme-classic/" data-ajax="false">Classic theme</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Toolbar widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="toolbar widget header footer toolbars fixed fullscreen external sections"><a href="../toolbar/" data-ajax="false">Toolbar</a></li>
|
||||
<li data-filtertext="dynamic toolbars dynamically add toolbar header footer"><a href="../toolbar-dynamic/" data-ajax="false">Dynamic toolbars</a></li>
|
||||
<li data-filtertext="external toolbars header footer"><a href="../toolbar-external/" data-ajax="false">External toolbars</a></li>
|
||||
<li data-filtertext="fixed toolbars header footer"><a href="../toolbar-fixed/" data-ajax="false">Fixed toolbars</a></li>
|
||||
<li data-filtertext="fixed fullscreen toolbars header footer"><a href="../toolbar-fixed-fullscreen/" data-ajax="false">Fullscreen toolbars</a></li>
|
||||
<li data-filtertext="external fixed toolbars header footer"><a href="../toolbar-fixed-external/" data-ajax="false">Fixed external toolbars</a></li>
|
||||
<li data-filtertext="external persistent toolbars header footer navbar navmenu"><a href="../toolbar-fixed-persistent/" data-ajax="false">Persistent toolbars</a></li>
|
||||
<li data-filtertext="external ajax optimized toolbars persistent toolbars header footer navbar"><a href="../toolbar-fixed-persistent-optimized/" data-ajax="false">Ajax optimized toolbars</a></li>
|
||||
<li data-filtertext="form in toolbars header footer"><a href="../toolbar-fixed-forms/" data-ajax="false">Form in toolbar</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="page transitions animated pages popup navigation flip slide fade pop"><a href="../transitions/" data-ajax="false">Transitions</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>3rd party API demos</h3>
|
||||
<ul>
|
||||
<li data-filtertext="backbone requirejs navigation router"><a href="../backbone-requirejs/" data-ajax="false">Backbone RequireJS</a></li>
|
||||
<li data-filtertext="google maps geolocation demo"><a href="../map-geolocation/" data-ajax="false">Google Maps geolocation</a></li>
|
||||
<li data-filtertext="google maps hybrid"><a href="../map-list-toggle/" data-ajax="false">Google Maps list toggle</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- /panel -->
|
||||
|
||||
|
||||
</div><!-- /page -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
795
js/libs/jquery.mobile/demos/controlgroup/index.html
Normal file
795
js/libs/jquery.mobile/demos/controlgroup/index.html
Normal file
@ -0,0 +1,795 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Controlgroup - jQuery Mobile Demos</title>
|
||||
<link rel="stylesheet" href="../css/themes/default/jquery.mobile-1.4.2.min.css">
|
||||
<link rel="stylesheet" href="../_assets/css/jqm-demos.css">
|
||||
<link rel="shortcut icon" href="../favicon.ico">
|
||||
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
|
||||
<script src="../js/jquery.js"></script>
|
||||
<script src="../_assets/js/index.js"></script>
|
||||
<script src="../js/jquery.mobile-1.4.2.min.js"></script>
|
||||
<style>
|
||||
#demo-borders .ui-collapsible .ui-collapsible-heading .ui-btn { border-top-width: 1px !important; }
|
||||
</style>
|
||||
<style id="textinput-controlgroup">
|
||||
.controlgroup-textinput{
|
||||
padding-top:.22em;
|
||||
padding-bottom:.22em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div data-role="page" class="jqm-demos" data-quicklinks="true">
|
||||
|
||||
<div data-role="header" class="jqm-header">
|
||||
<h2><a href="../" title="jQuery Mobile Demos home"><img src="../_assets/img/jquery-logo.png" alt="jQuery Mobile"></a></h2>
|
||||
<p><span class="jqm-version"></span> Demos</p>
|
||||
<a href="#" class="jqm-navmenu-link ui-btn ui-btn-icon-notext ui-corner-all ui-icon-bars ui-nodisc-icon ui-alt-icon ui-btn-left">Menu</a>
|
||||
<a href="#" class="jqm-search-link ui-btn ui-btn-icon-notext ui-corner-all ui-icon-search ui-nodisc-icon ui-alt-icon ui-btn-right">Search</a>
|
||||
</div><!-- /header -->
|
||||
|
||||
<div role="main" class="ui-content jqm-content">
|
||||
|
||||
<h1>Controlgroup</h1>
|
||||
|
||||
<p>Controlgroups are used to visually group a set of buttons to form a single block that looks contained like a navigation component.
|
||||
</p>
|
||||
|
||||
<h2>Controlgroup vertical</h2>
|
||||
|
||||
<div data-demo-html="true">
|
||||
<div data-role="controlgroup">
|
||||
<a href="#" class="ui-btn ui-corner-all">No icon</a>
|
||||
<a href="#" class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-left">Left</a>
|
||||
<a href="#" class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-right">Right</a>
|
||||
<a href="#" class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-top">Top</a>
|
||||
<a href="#" class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-bottom">Bottom</a>
|
||||
<a href="#" class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-notext">Icon only</a>
|
||||
</div>
|
||||
</div><!--/demo-html -->
|
||||
|
||||
<h3>Mini sized</h3>
|
||||
|
||||
<div data-demo-html="true">
|
||||
<div data-role="controlgroup" data-mini="true">
|
||||
<a href="#" class="ui-btn ui-corner-all">No icon</a>
|
||||
<a href="#" class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-left">Left</a>
|
||||
<a href="#" class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-right">Right</a>
|
||||
<a href="#" class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-top">Top</a>
|
||||
<a href="#" class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-bottom">Bottom</a>
|
||||
<a href="#" class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-notext">Icon only</a>
|
||||
</div>
|
||||
</div><!--/demo-html -->
|
||||
|
||||
<h2>Controlgroup horizontal</h2>
|
||||
|
||||
<div data-demo-html="true">
|
||||
<div data-role="controlgroup" data-type="horizontal">
|
||||
<a href="#" class="ui-btn ui-corner-all">No icon</a>
|
||||
<a href="#" class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-left">Left</a>
|
||||
<a href="#" class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-right">Right</a>
|
||||
</div>
|
||||
<div data-role="controlgroup" data-type="horizontal">
|
||||
<a href="#" class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-top">Top</a>
|
||||
<a href="#" class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-top">Top</a>
|
||||
</div>
|
||||
<div data-role="controlgroup" data-type="horizontal">
|
||||
<a href="#" class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-bottom">Bottom</a>
|
||||
<a href="#" class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-bottom">Bottom</a>
|
||||
</div>
|
||||
<div data-role="controlgroup" data-type="horizontal">
|
||||
<a href="#" class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-notext">Icon only</a>
|
||||
<a href="#" class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-notext">Icon only</a>
|
||||
</div>
|
||||
<form>
|
||||
<fieldset data-role="controlgroup" data-type="horizontal">
|
||||
<button data-icon="home">Home</button>
|
||||
<button data-icon="search" data-iconpos="notext">Search</button>
|
||||
<label for="select-more-1a" class="ui-hidden-accessible">More</label>
|
||||
<select name="select-more-1a" id="select-more-1a">
|
||||
<option value="">Select…</option>
|
||||
<option value="#">One</option>
|
||||
<option value="#">Two</option>
|
||||
<option value="#">Three</option>
|
||||
</select>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div><!--/demo-html -->
|
||||
|
||||
<h2>Mini sized</h2>
|
||||
|
||||
<div data-demo-html="true">
|
||||
<div data-role="controlgroup" data-type="horizontal" data-mini="true">
|
||||
<a href="#" class="ui-btn ui-corner-all">No icon</a>
|
||||
<a href="#" class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-left">Left</a>
|
||||
<a href="#" class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-right">Right</a>
|
||||
</div>
|
||||
<div data-role="controlgroup" data-type="horizontal" data-mini="true">
|
||||
<a href="#" class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-top">Top</a>
|
||||
<a href="#" class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-top">Top</a>
|
||||
</div>
|
||||
<div data-role="controlgroup" data-type="horizontal" data-mini="true">
|
||||
<a href="#" class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-bottom">Bottom</a>
|
||||
<a href="#" class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-bottom">Bottom</a>
|
||||
</div>
|
||||
<div data-role="controlgroup" data-type="horizontal" data-mini="true">
|
||||
<a href="#" class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-notext">Icon only</a>
|
||||
<a href="#" class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-notext">Icon only</a>
|
||||
</div>
|
||||
<form>
|
||||
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
|
||||
<button data-icon="home">Home</button>
|
||||
<button data-icon="search" data-iconpos="notext">Search</button>
|
||||
<label for="select-more-2a" class="ui-hidden-accessible">More</label>
|
||||
<select name="select-more-2a" id="select-more-2a">
|
||||
<option value="">Select…</option>
|
||||
<option value="#">One</option>
|
||||
<option value="#">Two</option>
|
||||
<option value="#">Three</option>
|
||||
</select>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div><!--/demo-html -->
|
||||
|
||||
<h2>Radio button</h2>
|
||||
|
||||
<div data-demo-html="true">
|
||||
<form>
|
||||
<fieldset data-role="controlgroup">
|
||||
<legend>Vertical:</legend>
|
||||
<input type="radio" name="radio-choice-v-2" id="radio-choice-v-2a" value="on" checked="checked">
|
||||
<label for="radio-choice-v-2a">One</label>
|
||||
<input type="radio" name="radio-choice-v-2" id="radio-choice-v-2b" value="off">
|
||||
<label for="radio-choice-v-2b">Two</label>
|
||||
<input type="radio" name="radio-choice-v-2" id="radio-choice-v-2c" value="other">
|
||||
<label for="radio-choice-v-2c">Three</label>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div><!--/demo-html -->
|
||||
|
||||
<div data-demo-html="true">
|
||||
<form>
|
||||
<fieldset data-role="controlgroup" data-mini="true">
|
||||
<legend>Vertical, mini sized:</legend>
|
||||
<input type="radio" name="radio-choice-v-6" id="radio-choice-v-6a" value="on" checked="checked">
|
||||
<label for="radio-choice-v-6a">One</label>
|
||||
<input type="radio" name="radio-choice-v-6" id="radio-choice-v-6b" value="off">
|
||||
<label for="radio-choice-v-6b">Two</label>
|
||||
<input type="radio" name="radio-choice-v-6" id="radio-choice-v-6c" value="other">
|
||||
<label for="radio-choice-v-6c">Three</label>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div><!--/demo-html -->
|
||||
|
||||
<div data-demo-html="true">
|
||||
<form>
|
||||
<fieldset data-role="controlgroup" data-type="horizontal">
|
||||
<legend>Horizontal:</legend>
|
||||
<input type="radio" name="radio-choice-h-2" id="radio-choice-h-2a" value="on" checked="checked">
|
||||
<label for="radio-choice-h-2a">One</label>
|
||||
<input type="radio" name="radio-choice-h-2" id="radio-choice-h-2b" value="off">
|
||||
<label for="radio-choice-h-2b">Two</label>
|
||||
<input type="radio" name="radio-choice-h-2" id="radio-choice-h-2c" value="other">
|
||||
<label for="radio-choice-h-2c">Three</label>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div><!--/demo-html -->
|
||||
|
||||
<div data-demo-html="true">
|
||||
<form>
|
||||
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
|
||||
<legend>Horizontal, mini sized:</legend>
|
||||
<input type="radio" name="radio-choice-h-6" id="radio-choice-h-6a" value="on" checked="checked">
|
||||
<label for="radio-choice-h-6a">One</label>
|
||||
<input type="radio" name="radio-choice-h-6" id="radio-choice-h-6b" value="off">
|
||||
<label for="radio-choice-h-6b">Two</label>
|
||||
<input type="radio" name="radio-choice-h-6" id="radio-choice-h-6c" value="other">
|
||||
<label for="radio-choice-h-6c">Three</label>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div><!--/demo-html -->
|
||||
|
||||
<h2>Checkbox</h2>
|
||||
|
||||
<div data-demo-html="true">
|
||||
<form>
|
||||
<fieldset data-role="controlgroup">
|
||||
<legend>Vertical:</legend>
|
||||
<input type="checkbox" name="checkbox-v-2a" id="checkbox-v-2a">
|
||||
<label for="checkbox-v-2a">One</label>
|
||||
<input type="checkbox" name="checkbox-v-2b" id="checkbox-v-2b">
|
||||
<label for="checkbox-v-2b">Two</label>
|
||||
<input type="checkbox" name="checkbox-v-2c" id="checkbox-v-2c">
|
||||
<label for="checkbox-v-2c">Three</label>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div><!--/demo-html -->
|
||||
|
||||
<div data-demo-html="true">
|
||||
<form>
|
||||
<fieldset data-role="controlgroup" data-mini="true">
|
||||
<legend>Vertical, mini sized:</legend>
|
||||
<input type="checkbox" name="checkbox-v-6a" id="checkbox-v-6a">
|
||||
<label for="checkbox-v-6a">One</label>
|
||||
<input type="checkbox" name="checkbox-v-6b" id="checkbox-v-6b">
|
||||
<label for="checkbox-v-6b">Two</label>
|
||||
<input type="checkbox" name="checkbox-v-6c" id="checkbox-v-6c">
|
||||
<label for="checkbox-v-6c">Three</label>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div><!--/demo-html -->
|
||||
|
||||
<div data-demo-html="true">
|
||||
<form>
|
||||
<fieldset data-role="controlgroup" data-type="horizontal">
|
||||
<legend>Horizontal:</legend>
|
||||
<input type="checkbox" name="checkbox-h-2a" id="checkbox-h-2a">
|
||||
<label for="checkbox-h-2a">One</label>
|
||||
<input type="checkbox" name="checkbox-h-2b" id="checkbox-h-2b">
|
||||
<label for="checkbox-h-2b">Two</label>
|
||||
<input type="checkbox" name="checkbox-h-2c" id="checkbox-h-2c">
|
||||
<label for="checkbox-h-2c">Three</label>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div><!--/demo-html -->
|
||||
|
||||
<div data-demo-html="true">
|
||||
<form>
|
||||
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
|
||||
<legend>Horizontal, mini sized:</legend>
|
||||
<input type="checkbox" name="checkbox-h-6a" id="checkbox-h-6a">
|
||||
<label for="checkbox-h-6a">One</label>
|
||||
<input type="checkbox" name="checkbox-h-6b" id="checkbox-h-6b">
|
||||
<label for="checkbox-h-6b">Two</label>
|
||||
<input type="checkbox" name="checkbox-h-6c" id="checkbox-h-6c">
|
||||
<label for="checkbox-h-6c">Three</label>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div><!--/demo-html -->
|
||||
|
||||
<h2>Selects</h2>
|
||||
|
||||
<div data-demo-html="true">
|
||||
<form>
|
||||
<fieldset data-role="controlgroup">
|
||||
<legend>Vertical:</legend>
|
||||
<label for="select-v-2a">Select A</label>
|
||||
<select name="select-v-2a" id="select-v-2a">
|
||||
<option value="#">One</option>
|
||||
<option value="#">Two</option>
|
||||
<option value="#">Three</option>
|
||||
</select>
|
||||
<label for="select-v-2b">Select B</label>
|
||||
<select name="select-v-2b" id="select-v-2b">
|
||||
<option value="#">One</option>
|
||||
<option value="#">Two</option>
|
||||
<option value="#">Three</option>
|
||||
</select>
|
||||
<label for="select-v-2c">Select C</label>
|
||||
<select name="select-v-2c" id="select-v-2c">
|
||||
<option value="#">One</option>
|
||||
<option value="#">Two</option>
|
||||
<option value="#">Three</option>
|
||||
</select>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div><!--/demo-html -->
|
||||
|
||||
<div data-demo-html="true">
|
||||
<form>
|
||||
<fieldset data-role="controlgroup" data-mini="true">
|
||||
<legend>Vertical, mini sized:</legend>
|
||||
<label for="select-v-6a">Select A</label>
|
||||
<select name="select-v-6a" id="select-v-6a">
|
||||
<option value="#">One</option>
|
||||
<option value="#">Two</option>
|
||||
<option value="#">Three</option>
|
||||
</select>
|
||||
<label for="select-v-6b">Select B</label>
|
||||
<select name="select-v-6b" id="select-v-6b">
|
||||
<option value="#">One</option>
|
||||
<option value="#">Two</option>
|
||||
<option value="#">Three</option>
|
||||
</select>
|
||||
<label for="select-v-6c">Select C</label>
|
||||
<select name="select-v-6c" id="select-v-6c">
|
||||
<option value="#">One</option>
|
||||
<option value="#">Two</option>
|
||||
<option value="#">Three</option>
|
||||
</select>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div><!--/demo-html -->
|
||||
|
||||
<div data-demo-html="true">
|
||||
<form>
|
||||
<fieldset data-role="controlgroup" data-type="horizontal">
|
||||
<legend>Horizontal:</legend>
|
||||
<label for="select-h-2a">Select A</label>
|
||||
<select name="select-h-2a" id="select-h-2a">
|
||||
<option value="#">One</option>
|
||||
<option value="#">Two</option>
|
||||
<option value="#">Three</option>
|
||||
</select>
|
||||
<label for="select-h-2b">Select B</label>
|
||||
<select name="select-h-2b" id="select-h-2b">
|
||||
<option value="#">One</option>
|
||||
<option value="#">Two</option>
|
||||
<option value="#">Three</option>
|
||||
</select>
|
||||
<label for="select-h-2c">Select C</label>
|
||||
<select name="select-h-2c" id="select-h-2c">
|
||||
<option value="#">One</option>
|
||||
<option value="#">Two</option>
|
||||
<option value="#">Three</option>
|
||||
</select>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div><!--/demo-html -->
|
||||
|
||||
<div data-demo-html="true">
|
||||
<form>
|
||||
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
|
||||
<legend>Horizontal, mini sized:</legend>
|
||||
<label for="select-h-6a">Select A</label>
|
||||
<select name="select-h-6a" id="select-h-6a">
|
||||
<option value="#">One</option>
|
||||
<option value="#">Two</option>
|
||||
<option value="#">Three</option>
|
||||
</select>
|
||||
<label for="select-h-6b">Select B</label>
|
||||
<select name="select-h-6b" id="select-h-6b">
|
||||
<option value="#">One</option>
|
||||
<option value="#">Two</option>
|
||||
<option value="#">Three</option>
|
||||
</select>
|
||||
<label for="select-h-6c">Select C</label>
|
||||
<select name="select-h-6c" id="select-h-6c">
|
||||
<option value="#">One</option>
|
||||
<option value="#">Two</option>
|
||||
<option value="#">Three</option>
|
||||
</select>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div><!--/demo-html -->
|
||||
|
||||
<h2>Textinputs</h2>
|
||||
<p>While textinputs are not officially supported by the controlgroup they can be made to work with some simple css.</p>
|
||||
<p>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.</p>
|
||||
<div data-demo-html="true" data-demo-css="#textinput-controlgroup">
|
||||
<label for="currency-controlgroup">Value</label>
|
||||
<div data-role="controlgroup" data-type="horizontal">
|
||||
<select>
|
||||
<option>$</option>
|
||||
<option>€</option>
|
||||
<option>£</option>
|
||||
<option>¥</option>
|
||||
<option>₩</option>
|
||||
<option>₹</option>
|
||||
</select>
|
||||
<input id="currency-controlgroup" type="text" data-wrapper-class="controlgroup-textinput ui-btn">
|
||||
<button>.00</button>
|
||||
</div>
|
||||
<label for="search-control-group">Search</label>
|
||||
<div data-role="controlgroup" data-type="horizontal">
|
||||
<input type="text" id="search-control-group" data-wrapper-class="controlgroup-textinput ui-btn">
|
||||
<button>Submit</button>
|
||||
<button>Reset</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Pre-rendered markup</h2>
|
||||
<p>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.</p>
|
||||
<div data-demo-html="true">
|
||||
<div data-role="controlgroup" data-enhanced="true" class="ui-controlgroup ui-controlgroup-vertical ui-group-theme-b ui-corner-all">
|
||||
<div role="heading" class="ui-controlgroup-label">
|
||||
<legend>Pre-rendered controlgroup:</legend>
|
||||
</div>
|
||||
<div class="ui-controlgroup-controls ui-shadow">
|
||||
<label for="pre-rendered-cb-1" class="ui-first-child">Checkbox 1</label>
|
||||
<input type="checkbox" id="pre-rendered-cb-1" name="pre-rendered-cb-1" value="1"></input>
|
||||
<label for="pre-rendered-cb-2" class="ui-last-child">Checkbox 2</label>
|
||||
<input type="checkbox" id="pre-rendered-cb-2" name="pre-rendered-cb-2" value="2"></input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div><!-- /content -->
|
||||
<div data-role="panel" class="jqm-navmenu-panel" data-position="left" data-display="overlay" data-theme="a">
|
||||
<ul class="jqm-list ui-alt-icon ui-nodisc-icon">
|
||||
<li data-filtertext="demos homepage" data-icon="home"><a href=".././">Home</a></li>
|
||||
<li data-filtertext="introduction overview getting started"><a href="../intro/" data-ajax="false">Introduction</a></li>
|
||||
<li data-filtertext="buttons button markup buttonmarkup method anchor link button element"><a href="../button-markup/" data-ajax="false">Buttons</a></li>
|
||||
<li data-filtertext="form button widget input button submit reset"><a href="../button/" data-ajax="false">Button widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Checkboxradio widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="form checkboxradio widget checkbox input checkboxes controlgroups"><a href="../checkboxradio-checkbox/" data-ajax="false">Checkboxes</a></li>
|
||||
<li data-filtertext="form checkboxradio widget radio input radio buttons controlgroups"><a href="../checkboxradio-radio/" data-ajax="false">Radio buttons</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Collapsible (set) widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="collapsibles content formatting"><a href="../collapsible/" data-ajax="false">Collapsible</a></li>
|
||||
<li data-filtertext="dynamic collapsible set accordion append expand"><a href="../collapsible-dynamic/" data-ajax="false">Dynamic collapsibles</a></li>
|
||||
<li data-filtertext="accordions collapsible set widget content formatting grouped collapsibles"><a href="../collapsibleset/" data-ajax="false">Collapsible set</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Controlgroup widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="controlgroups selectmenu checkboxradio input grouped buttons horizontal vertical"><a href="../controlgroup/" data-ajax="false">Controlgroup</a></li>
|
||||
<li data-filtertext="dynamic controlgroup dynamically add buttons"><a href="../controlgroup-dynamic/" data-ajax="false">Dynamic controlgroups</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="form datepicker widget date input"><a href="../datepicker/" data-ajax="false">Datepicker</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Events</h3>
|
||||
<ul>
|
||||
<li data-filtertext="swipe to delete list items listviews swipe events"><a href="../swipe-list/" data-ajax="false">Swipe list items</a></li>
|
||||
<li data-filtertext="swipe to navigate swipe page navigation swipe events"><a href="../swipe-page/" data-ajax="false">Swipe page navigation</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="filterable filter elements sorting searching listview table"><a href="../filterable/" data-ajax="false">Filterable widget</a></li>
|
||||
<li data-filtertext="form flipswitch widget flip toggle switch binary select checkbox input"><a href="../flipswitch/" data-ajax="false">Flipswitch widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Forms</h3>
|
||||
<ul>
|
||||
<li data-filtertext="forms text checkbox radio range button submit reset inputs selects textarea slider flipswitch label form elements"><a href="../forms/" data-ajax="false">Forms</a></li>
|
||||
<li data-filtertext="form hide labels hidden accessible ui-hidden-accessible forms"><a href="../forms-label-hidden-accessible/" data-ajax="false">Hide labels</a></li>
|
||||
<li data-filtertext="form field containers fieldcontain ui-field-contain forms"><a href="../forms-field-contain/" data-ajax="false">Field containers</a></li>
|
||||
<li data-filtertext="forms disabled form elements"><a href="../forms-disabled/" data-ajax="false">Forms disabled</a></li>
|
||||
<li data-filtertext="forms gallery examples overview forms text checkbox radio range button submit reset inputs selects textarea slider flipswitch label form elements"><a href="../forms-gallery/" data-ajax="false">Forms gallery</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Grids</h3>
|
||||
<ul>
|
||||
<li data-filtertext="grids columns blocks content formatting rwd responsive css framework"><a href="../grids/" data-ajax="false">Grids</a></li>
|
||||
<li data-filtertext="buttons in grids css framework"><a href="../grids-buttons/" data-ajax="false">Buttons in grids</a></li>
|
||||
<li data-filtertext="custom responsive grids rwd css framework"><a href="../grids-custom-responsive/" data-ajax="false">Custom responsive grids</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="blocks content formatting sections heading"><a href="../body-bar-classes/" data-ajax="false">Grouping and dividing content</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Icons</h3>
|
||||
<ul>
|
||||
<li data-filtertext="button icons svg disc alt custom icon position"><a href="../icons/" data-ajax="false">Icons</a></li>
|
||||
<li data-filtertext=""><a href="../icons-grunticon/" data-ajax="false">Grunticon loader</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Listview widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="listview widget thumbnails icons nested split button collapsible ul ol"><a href="../listview/" data-ajax="false">Listview</a></li>
|
||||
<li data-filtertext="autocomplete filterable reveal listview filtertextbeforefilter placeholder"><a href="../listview-autocomplete/" data-ajax="false">Listview autocomplete</a></li>
|
||||
<li data-filtertext="autocomplete filterable reveal listview remote data filtertextbeforefilter placeholder"><a href="../listview-autocomplete-remote/" data-ajax="false">Listview autocomplete remote data</a></li>
|
||||
<li data-filtertext="autodividers anchor jump scroll linkbars listview lists ul ol"><a href="../listview-autodividers-linkbar/" data-ajax="false">Listview autodividers linkbar</a></li>
|
||||
<li data-filtertext="listview autodividers selector autodividersselector lists ul ol"><a href="../listview-autodividers-selector/" data-ajax="false">Listview autodividers selector</a></li>
|
||||
<li data-filtertext="listview nested list items"><a href="../listview-nested-lists/" data-ajax="false">Listview Nested Listviews</a></li>
|
||||
<li data-filtertext="listview collapsible list items flat"><a href="../listview-collapsible-item-flat/" data-ajax="false">Listview collapsible list items (flat)</a></li>
|
||||
<li data-filtertext="listview collapsible list indented"><a href="../listview-collapsible-item-indented/" data-ajax="false">Listview collapsible list items (indented)</a></li>
|
||||
<li data-filtertext="grid listview responsive grids responsive listviews lists ul"><a href="../listview-grid/" data-ajax="false">Listview responsive grid</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="loader widget page loading navigation overlay spinner"><a href="../loader/" data-ajax="false">Loader widget</a></li>
|
||||
<li data-filtertext="navbar widget navmenu toolbars header footer"><a href="../navbar/" data-ajax="false">Navbar widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Navigation</h3>
|
||||
<ul>
|
||||
<li data-filtertext="ajax navigation navigate widget history event method"><a href="../navigation/" data-ajax="false">Navigation</a></li>
|
||||
<li data-filtertext="linking pages page links navigation ajax prefetch cache"><a href="../navigation-linking-pages/" data-ajax="false">Linking pages</a></li>
|
||||
<li data-filtertext="php redirect server redirection server-side navigation"><a href="../navigation-php-redirect/" data-ajax="false">PHP redirect demo</a></li>
|
||||
<li data-filtertext="navigation redirection hash query"><a href="../navigation-hash-processing/" data-ajax="false">Hash processing demo</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Pages</h3>
|
||||
<ul>
|
||||
<li data-filtertext="pages page widget ajax navigation"><a href="../pages/" data-ajax="false">Pages</a></li>
|
||||
<li data-filtertext="single page"><a href="../pages-single-page/" data-ajax="false">Single page</a></li>
|
||||
<li data-filtertext="multipage multi-page page"><a href="../pages-multi-page/" data-ajax="false">Multi-page template</a></li>
|
||||
<li data-filtertext="dialog page widget modal popup"><a href="../pages-dialog/" data-ajax="false">Dialog page</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Panel widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="panel widget sliding panels reveal push overlay responsive"><a href="../panel/" data-ajax="false">Panel</a></li>
|
||||
<li data-filtertext=""><a href="../panel-external/" data-ajax="false">External panels</a></li>
|
||||
<li data-filtertext="panel "><a href="../panel-fixed/" data-ajax="false">Fixed panels</a></li>
|
||||
<li data-filtertext="panel slide panels sliding panels shadow rwd responsive breakpoint"><a href="../panel-responsive/" data-ajax="false">Panels responsive</a></li>
|
||||
<li data-filtertext="panel custom style custom panel width reveal shadow listview panel styling page background wrapper"><a href="../panel-styling/" data-ajax="false">Custom panel style</a></li>
|
||||
<li data-filtertext="panel open on swipe"><a href="../panel-swipe-open/" data-ajax="false">Panel open on swipe</a></li>
|
||||
<li data-filtertext="panels outside page internal external toolbars"><a href="../panel-external-internal/" data-ajax="false">Panel external and internal</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Popup widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="popup widget popups dialog modal transition tooltip lightbox form overlay screen flip pop fade transition"><a href="../popup/" data-ajax="false">Popup</a></li>
|
||||
<li data-filtertext="popup alignment position"><a href="../popup-alignment/" data-ajax="false">Popup alignment</a></li>
|
||||
<li data-filtertext="popup arrow size popups popover"><a href="../popup-arrow-size/" data-ajax="false">Popup arrow size</a></li>
|
||||
<li data-filtertext="dynamic popups popup images lightbox"><a href="../popup-dynamic/" data-ajax="false">Dynamic popups</a></li>
|
||||
<li data-filtertext="popups with iframes scaling"><a href="../popup-iframe/" data-ajax="false">Popups with iframes</a></li>
|
||||
<li data-filtertext="popup image scaling"><a href="../popup-image-scaling/" data-ajax="false">Popup image scaling</a></li>
|
||||
<li data-filtertext="external popup outside multi-page"><a href="../popup-outside-multipage" data-ajax="false">Popup outside multi-page</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="form rangeslider widget dual sliders dual handle sliders range input"><a href="../rangeslider/" data-ajax="false">Rangeslider widget</a></li>
|
||||
<li data-filtertext="responsive web design rwd adaptive progressive enhancement PE accessible mobile breakpoints media query media queries"><a href="../rwd/" data-ajax="false">Responsive Web Design</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Selectmenu widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="form selectmenu widget select input custom select menu selects"><a href="../selectmenu/" data-ajax="false">Selectmenu</a></li>
|
||||
<li data-filtertext="form custom select menu selectmenu widget custom menu option optgroup multiple selects"><a href="../selectmenu-custom/" data-ajax="false">Custom select menu</a></li>
|
||||
<li data-filtertext="filterable select filter popup dialog"><a href="../selectmenu-custom-filter/" data-ajax="false">Custom select menu with filter</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Slider widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="form slider widget range input single sliders"><a href="../slider/" data-ajax="false">Slider</a></li>
|
||||
<li data-filtertext="form slider widget flipswitch slider binary select flip toggle switch"><a href="../slider-flipswitch/" data-ajax="false">Slider flip toggle switch</a></li>
|
||||
<li data-filtertext="form slider tooltip handle value input range sliders"><a href="../slider-tooltip/" data-ajax="false">Slider tooltip</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Table widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="table widget reflow column toggle th td responsive tables rwd hide show tabular"><a href="../table-column-toggle/" data-ajax="false">Table Column Toggle</a></li>
|
||||
<li data-filtertext="table column toggle phone comparison demo"><a href="../table-column-toggle-example/" data-ajax="false">Table Column Toggle demo</a></li>
|
||||
<li data-filtertext="responsive tables table column toggle heading groups rwd breakpoint"><a href="../table-column-toggle-heading-groups/" data-ajax="false">Table Column Toggle heading groups</a></li>
|
||||
<li data-filtertext="responsive tables table column toggle hide rwd breakpoint customization options"><a href="../table-column-toggle-options/" data-ajax="false">Table Column Toggle options</a></li>
|
||||
<li data-filtertext="table reflow th td responsive rwd columns tabular"><a href="../table-reflow/" data-ajax="false">Table Reflow</a></li>
|
||||
<li data-filtertext="responsive tables table reflow heading groups rwd breakpoint"><a href="../table-reflow-heading-groups/" data-ajax="false">Table Reflow heading groups</a></li>
|
||||
<li data-filtertext="responsive tables table reflow stripes strokes table style"><a href="../table-reflow-stripes-strokes/" data-ajax="false">Table Reflow stripes and strokes</a></li>
|
||||
<li data-filtertext="responsive tables table reflow stack custom styles"><a href="../table-reflow-styling/" data-ajax="false">Table Reflow custom styles</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="ui tabs widget"><a href="../tabs/" data-ajax="false">Tabs widget</a></li>
|
||||
<li data-filtertext="form textinput widget text input textarea number date time tel email file color password"><a href="../textinput/" data-ajax="false">Textinput widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Theming</h3>
|
||||
<ul>
|
||||
<li data-filtertext="default theme swatches theming style css"><a href="../theme-default/" data-ajax="false">Default theme</a></li>
|
||||
<li data-filtertext="classic theme old theme swatches theming style css"><a href="../theme-classic/" data-ajax="false">Classic theme</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Toolbar widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="toolbar widget header footer toolbars fixed fullscreen external sections"><a href="../toolbar/" data-ajax="false">Toolbar</a></li>
|
||||
<li data-filtertext="dynamic toolbars dynamically add toolbar header footer"><a href="../toolbar-dynamic/" data-ajax="false">Dynamic toolbars</a></li>
|
||||
<li data-filtertext="external toolbars header footer"><a href="../toolbar-external/" data-ajax="false">External toolbars</a></li>
|
||||
<li data-filtertext="fixed toolbars header footer"><a href="../toolbar-fixed/" data-ajax="false">Fixed toolbars</a></li>
|
||||
<li data-filtertext="fixed fullscreen toolbars header footer"><a href="../toolbar-fixed-fullscreen/" data-ajax="false">Fullscreen toolbars</a></li>
|
||||
<li data-filtertext="external fixed toolbars header footer"><a href="../toolbar-fixed-external/" data-ajax="false">Fixed external toolbars</a></li>
|
||||
<li data-filtertext="external persistent toolbars header footer navbar navmenu"><a href="../toolbar-fixed-persistent/" data-ajax="false">Persistent toolbars</a></li>
|
||||
<li data-filtertext="external ajax optimized toolbars persistent toolbars header footer navbar"><a href="../toolbar-fixed-persistent-optimized/" data-ajax="false">Ajax optimized toolbars</a></li>
|
||||
<li data-filtertext="form in toolbars header footer"><a href="../toolbar-fixed-forms/" data-ajax="false">Form in toolbar</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="page transitions animated pages popup navigation flip slide fade pop"><a href="../transitions/" data-ajax="false">Transitions</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>3rd party API demos</h3>
|
||||
<ul>
|
||||
<li data-filtertext="backbone requirejs navigation router"><a href="../backbone-requirejs/" data-ajax="false">Backbone RequireJS</a></li>
|
||||
<li data-filtertext="google maps geolocation demo"><a href="../map-geolocation/" data-ajax="false">Google Maps geolocation</a></li>
|
||||
<li data-filtertext="google maps hybrid"><a href="../map-list-toggle/" data-ajax="false">Google Maps list toggle</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
</ul>
|
||||
</div><!-- /panel -->
|
||||
|
||||
|
||||
<div data-role="footer" data-position="fixed" data-tap-toggle="false" class="jqm-footer">
|
||||
<p>jQuery Mobile Demos version <span class="jqm-version"></span></p>
|
||||
<p>Copyright 2014 The jQuery Foundation</p>
|
||||
</div><!-- /footer -->
|
||||
<!-- TODO: This should become an external panel so we can add input to markup (unique ID) -->
|
||||
<div data-role="panel" class="jqm-search-panel" data-position="right" data-display="overlay" data-theme="a">
|
||||
<div class="jqm-search">
|
||||
<ul class="jqm-list" data-filter-placeholder="Search demos..." data-filter-reveal="true">
|
||||
<li data-filtertext="demos homepage" data-icon="home"><a href=".././">Home</a></li>
|
||||
<li data-filtertext="introduction overview getting started"><a href="../intro/" data-ajax="false">Introduction</a></li>
|
||||
<li data-filtertext="buttons button markup buttonmarkup method anchor link button element"><a href="../button-markup/" data-ajax="false">Buttons</a></li>
|
||||
<li data-filtertext="form button widget input button submit reset"><a href="../button/" data-ajax="false">Button widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Checkboxradio widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="form checkboxradio widget checkbox input checkboxes controlgroups"><a href="../checkboxradio-checkbox/" data-ajax="false">Checkboxes</a></li>
|
||||
<li data-filtertext="form checkboxradio widget radio input radio buttons controlgroups"><a href="../checkboxradio-radio/" data-ajax="false">Radio buttons</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Collapsible (set) widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="collapsibles content formatting"><a href="../collapsible/" data-ajax="false">Collapsible</a></li>
|
||||
<li data-filtertext="dynamic collapsible set accordion append expand"><a href="../collapsible-dynamic/" data-ajax="false">Dynamic collapsibles</a></li>
|
||||
<li data-filtertext="accordions collapsible set widget content formatting grouped collapsibles"><a href="../collapsibleset/" data-ajax="false">Collapsible set</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Controlgroup widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="controlgroups selectmenu checkboxradio input grouped buttons horizontal vertical"><a href="../controlgroup/" data-ajax="false">Controlgroup</a></li>
|
||||
<li data-filtertext="dynamic controlgroup dynamically add buttons"><a href="../controlgroup-dynamic/" data-ajax="false">Dynamic controlgroups</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="form datepicker widget date input"><a href="../datepicker/" data-ajax="false">Datepicker</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Events</h3>
|
||||
<ul>
|
||||
<li data-filtertext="swipe to delete list items listviews swipe events"><a href="../swipe-list/" data-ajax="false">Swipe list items</a></li>
|
||||
<li data-filtertext="swipe to navigate swipe page navigation swipe events"><a href="../swipe-page/" data-ajax="false">Swipe page navigation</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="filterable filter elements sorting searching listview table"><a href="../filterable/" data-ajax="false">Filterable widget</a></li>
|
||||
<li data-filtertext="form flipswitch widget flip toggle switch binary select checkbox input"><a href="../flipswitch/" data-ajax="false">Flipswitch widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Forms</h3>
|
||||
<ul>
|
||||
<li data-filtertext="forms text checkbox radio range button submit reset inputs selects textarea slider flipswitch label form elements"><a href="../forms/" data-ajax="false">Forms</a></li>
|
||||
<li data-filtertext="form hide labels hidden accessible ui-hidden-accessible forms"><a href="../forms-label-hidden-accessible/" data-ajax="false">Hide labels</a></li>
|
||||
<li data-filtertext="form field containers fieldcontain ui-field-contain forms"><a href="../forms-field-contain/" data-ajax="false">Field containers</a></li>
|
||||
<li data-filtertext="forms disabled form elements"><a href="../forms-disabled/" data-ajax="false">Forms disabled</a></li>
|
||||
<li data-filtertext="forms gallery examples overview forms text checkbox radio range button submit reset inputs selects textarea slider flipswitch label form elements"><a href="../forms-gallery/" data-ajax="false">Forms gallery</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Grids</h3>
|
||||
<ul>
|
||||
<li data-filtertext="grids columns blocks content formatting rwd responsive css framework"><a href="../grids/" data-ajax="false">Grids</a></li>
|
||||
<li data-filtertext="buttons in grids css framework"><a href="../grids-buttons/" data-ajax="false">Buttons in grids</a></li>
|
||||
<li data-filtertext="custom responsive grids rwd css framework"><a href="../grids-custom-responsive/" data-ajax="false">Custom responsive grids</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="blocks content formatting sections heading"><a href="../body-bar-classes/" data-ajax="false">Grouping and dividing content</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Icons</h3>
|
||||
<ul>
|
||||
<li data-filtertext="button icons svg disc alt custom icon position"><a href="../icons/" data-ajax="false">Icons</a></li>
|
||||
<li data-filtertext=""><a href="../icons-grunticon/" data-ajax="false">Grunticon loader</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Listview widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="listview widget thumbnails icons nested split button collapsible ul ol"><a href="../listview/" data-ajax="false">Listview</a></li>
|
||||
<li data-filtertext="autocomplete filterable reveal listview filtertextbeforefilter placeholder"><a href="../listview-autocomplete/" data-ajax="false">Listview autocomplete</a></li>
|
||||
<li data-filtertext="autocomplete filterable reveal listview remote data filtertextbeforefilter placeholder"><a href="../listview-autocomplete-remote/" data-ajax="false">Listview autocomplete remote data</a></li>
|
||||
<li data-filtertext="autodividers anchor jump scroll linkbars listview lists ul ol"><a href="../listview-autodividers-linkbar/" data-ajax="false">Listview autodividers linkbar</a></li>
|
||||
<li data-filtertext="listview autodividers selector autodividersselector lists ul ol"><a href="../listview-autodividers-selector/" data-ajax="false">Listview autodividers selector</a></li>
|
||||
<li data-filtertext="listview nested list items"><a href="../listview-nested-lists/" data-ajax="false">Listview Nested Listviews</a></li>
|
||||
<li data-filtertext="listview collapsible list items flat"><a href="../listview-collapsible-item-flat/" data-ajax="false">Listview collapsible list items (flat)</a></li>
|
||||
<li data-filtertext="listview collapsible list indented"><a href="../listview-collapsible-item-indented/" data-ajax="false">Listview collapsible list items (indented)</a></li>
|
||||
<li data-filtertext="grid listview responsive grids responsive listviews lists ul"><a href="../listview-grid/" data-ajax="false">Listview responsive grid</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="loader widget page loading navigation overlay spinner"><a href="../loader/" data-ajax="false">Loader widget</a></li>
|
||||
<li data-filtertext="navbar widget navmenu toolbars header footer"><a href="../navbar/" data-ajax="false">Navbar widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Navigation</h3>
|
||||
<ul>
|
||||
<li data-filtertext="ajax navigation navigate widget history event method"><a href="../navigation/" data-ajax="false">Navigation</a></li>
|
||||
<li data-filtertext="linking pages page links navigation ajax prefetch cache"><a href="../navigation-linking-pages/" data-ajax="false">Linking pages</a></li>
|
||||
<li data-filtertext="php redirect server redirection server-side navigation"><a href="../navigation-php-redirect/" data-ajax="false">PHP redirect demo</a></li>
|
||||
<li data-filtertext="navigation redirection hash query"><a href="../navigation-hash-processing/" data-ajax="false">Hash processing demo</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Pages</h3>
|
||||
<ul>
|
||||
<li data-filtertext="pages page widget ajax navigation"><a href="../pages/" data-ajax="false">Pages</a></li>
|
||||
<li data-filtertext="single page"><a href="../pages-single-page/" data-ajax="false">Single page</a></li>
|
||||
<li data-filtertext="multipage multi-page page"><a href="../pages-multi-page/" data-ajax="false">Multi-page template</a></li>
|
||||
<li data-filtertext="dialog page widget modal popup"><a href="../pages-dialog/" data-ajax="false">Dialog page</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Panel widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="panel widget sliding panels reveal push overlay responsive"><a href="../panel/" data-ajax="false">Panel</a></li>
|
||||
<li data-filtertext=""><a href="../panel-external/" data-ajax="false">External panels</a></li>
|
||||
<li data-filtertext="panel "><a href="../panel-fixed/" data-ajax="false">Fixed panels</a></li>
|
||||
<li data-filtertext="panel slide panels sliding panels shadow rwd responsive breakpoint"><a href="../panel-responsive/" data-ajax="false">Panels responsive</a></li>
|
||||
<li data-filtertext="panel custom style custom panel width reveal shadow listview panel styling page background wrapper"><a href="../panel-styling/" data-ajax="false">Custom panel style</a></li>
|
||||
<li data-filtertext="panel open on swipe"><a href="../panel-swipe-open/" data-ajax="false">Panel open on swipe</a></li>
|
||||
<li data-filtertext="panels outside page internal external toolbars"><a href="../panel-external-internal/" data-ajax="false">Panel external and internal</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Popup widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="popup widget popups dialog modal transition tooltip lightbox form overlay screen flip pop fade transition"><a href="../popup/" data-ajax="false">Popup</a></li>
|
||||
<li data-filtertext="popup alignment position"><a href="../popup-alignment/" data-ajax="false">Popup alignment</a></li>
|
||||
<li data-filtertext="popup arrow size popups popover"><a href="../popup-arrow-size/" data-ajax="false">Popup arrow size</a></li>
|
||||
<li data-filtertext="dynamic popups popup images lightbox"><a href="../popup-dynamic/" data-ajax="false">Dynamic popups</a></li>
|
||||
<li data-filtertext="popups with iframes scaling"><a href="../popup-iframe/" data-ajax="false">Popups with iframes</a></li>
|
||||
<li data-filtertext="popup image scaling"><a href="../popup-image-scaling/" data-ajax="false">Popup image scaling</a></li>
|
||||
<li data-filtertext="external popup outside multi-page"><a href="../popup-outside-multipage" data-ajax="false">Popup outside multi-page</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="form rangeslider widget dual sliders dual handle sliders range input"><a href="../rangeslider/" data-ajax="false">Rangeslider widget</a></li>
|
||||
<li data-filtertext="responsive web design rwd adaptive progressive enhancement PE accessible mobile breakpoints media query media queries"><a href="../rwd/" data-ajax="false">Responsive Web Design</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Selectmenu widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="form selectmenu widget select input custom select menu selects"><a href="../selectmenu/" data-ajax="false">Selectmenu</a></li>
|
||||
<li data-filtertext="form custom select menu selectmenu widget custom menu option optgroup multiple selects"><a href="../selectmenu-custom/" data-ajax="false">Custom select menu</a></li>
|
||||
<li data-filtertext="filterable select filter popup dialog"><a href="../selectmenu-custom-filter/" data-ajax="false">Custom select menu with filter</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Slider widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="form slider widget range input single sliders"><a href="../slider/" data-ajax="false">Slider</a></li>
|
||||
<li data-filtertext="form slider widget flipswitch slider binary select flip toggle switch"><a href="../slider-flipswitch/" data-ajax="false">Slider flip toggle switch</a></li>
|
||||
<li data-filtertext="form slider tooltip handle value input range sliders"><a href="../slider-tooltip/" data-ajax="false">Slider tooltip</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Table widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="table widget reflow column toggle th td responsive tables rwd hide show tabular"><a href="../table-column-toggle/" data-ajax="false">Table Column Toggle</a></li>
|
||||
<li data-filtertext="table column toggle phone comparison demo"><a href="../table-column-toggle-example/" data-ajax="false">Table Column Toggle demo</a></li>
|
||||
<li data-filtertext="responsive tables table column toggle heading groups rwd breakpoint"><a href="../table-column-toggle-heading-groups/" data-ajax="false">Table Column Toggle heading groups</a></li>
|
||||
<li data-filtertext="responsive tables table column toggle hide rwd breakpoint customization options"><a href="../table-column-toggle-options/" data-ajax="false">Table Column Toggle options</a></li>
|
||||
<li data-filtertext="table reflow th td responsive rwd columns tabular"><a href="../table-reflow/" data-ajax="false">Table Reflow</a></li>
|
||||
<li data-filtertext="responsive tables table reflow heading groups rwd breakpoint"><a href="../table-reflow-heading-groups/" data-ajax="false">Table Reflow heading groups</a></li>
|
||||
<li data-filtertext="responsive tables table reflow stripes strokes table style"><a href="../table-reflow-stripes-strokes/" data-ajax="false">Table Reflow stripes and strokes</a></li>
|
||||
<li data-filtertext="responsive tables table reflow stack custom styles"><a href="../table-reflow-styling/" data-ajax="false">Table Reflow custom styles</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="ui tabs widget"><a href="../tabs/" data-ajax="false">Tabs widget</a></li>
|
||||
<li data-filtertext="form textinput widget text input textarea number date time tel email file color password"><a href="../textinput/" data-ajax="false">Textinput widget</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Theming</h3>
|
||||
<ul>
|
||||
<li data-filtertext="default theme swatches theming style css"><a href="../theme-default/" data-ajax="false">Default theme</a></li>
|
||||
<li data-filtertext="classic theme old theme swatches theming style css"><a href="../theme-classic/" data-ajax="false">Classic theme</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>Toolbar widget</h3>
|
||||
<ul>
|
||||
<li data-filtertext="toolbar widget header footer toolbars fixed fullscreen external sections"><a href="../toolbar/" data-ajax="false">Toolbar</a></li>
|
||||
<li data-filtertext="dynamic toolbars dynamically add toolbar header footer"><a href="../toolbar-dynamic/" data-ajax="false">Dynamic toolbars</a></li>
|
||||
<li data-filtertext="external toolbars header footer"><a href="../toolbar-external/" data-ajax="false">External toolbars</a></li>
|
||||
<li data-filtertext="fixed toolbars header footer"><a href="../toolbar-fixed/" data-ajax="false">Fixed toolbars</a></li>
|
||||
<li data-filtertext="fixed fullscreen toolbars header footer"><a href="../toolbar-fixed-fullscreen/" data-ajax="false">Fullscreen toolbars</a></li>
|
||||
<li data-filtertext="external fixed toolbars header footer"><a href="../toolbar-fixed-external/" data-ajax="false">Fixed external toolbars</a></li>
|
||||
<li data-filtertext="external persistent toolbars header footer navbar navmenu"><a href="../toolbar-fixed-persistent/" data-ajax="false">Persistent toolbars</a></li>
|
||||
<li data-filtertext="external ajax optimized toolbars persistent toolbars header footer navbar"><a href="../toolbar-fixed-persistent-optimized/" data-ajax="false">Ajax optimized toolbars</a></li>
|
||||
<li data-filtertext="form in toolbars header footer"><a href="../toolbar-fixed-forms/" data-ajax="false">Form in toolbar</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-filtertext="page transitions animated pages popup navigation flip slide fade pop"><a href="../transitions/" data-ajax="false">Transitions</a></li>
|
||||
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
|
||||
<h3>3rd party API demos</h3>
|
||||
<ul>
|
||||
<li data-filtertext="backbone requirejs navigation router"><a href="../backbone-requirejs/" data-ajax="false">Backbone RequireJS</a></li>
|
||||
<li data-filtertext="google maps geolocation demo"><a href="../map-geolocation/" data-ajax="false">Google Maps geolocation</a></li>
|
||||
<li data-filtertext="google maps hybrid"><a href="../map-list-toggle/" data-ajax="false">Google Maps list toggle</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- /panel -->
|
||||
|
||||
|
||||
</div><!-- /page -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 6.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 219 B |
Binary file not shown.
|
After Width: | Height: | Size: 227 B |
Binary file not shown.
|
After Width: | Height: | Size: 244 B |
Binary file not shown.
|
After Width: | Height: | Size: 243 B |
Binary file not shown.
|
After Width: | Height: | Size: 146 B |
Binary file not shown.
|
After Width: | Height: | Size: 167 B |
Binary file not shown.
|
After Width: | Height: | Size: 173 B |
Binary file not shown.
|
After Width: | Height: | Size: 159 B |
Binary file not shown.
|
After Width: | Height: | Size: 171 B |
Binary file not shown.
|
After Width: | Height: | Size: 149 B |
Binary file not shown.
|
After Width: | Height: | Size: 149 B |
Binary file not shown.
|
After Width: | Height: | Size: 156 B |
Binary file not shown.
|
After Width: | Height: | Size: 147 B |
Binary file not shown.
|
After Width: | Height: | Size: 152 B |
Binary file not shown.
|
After Width: | Height: | Size: 147 B |
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user