Skip to content

M
mui
Commit 1685cf20 authored by hbcui1984's avatar hbcui1984
Browse files
Options

编译至mui 0.8.0

parent bf7e9622
Hide whitespace changes
Inline Side-by-side
Showing with 3768 additions and 2968 deletions
dist/css/mui.css
View file @ 1685cf20
/*!
* =====================================================
* Mui v0.7.1 (https://github.com/dcloudio/mui)
* Mui v0.8.0 (https://github.com/dcloudio/mui)
* =====================================================
*/
......@@ -237,9 +237,6 @@ body {
a {
color: #007aff;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
-webkit-tap-highlight-color: transparent;
}
a:active {
color: #0062cc;
......@@ -292,8 +289,8 @@ a:active {
bottom: 94px;
}
.mui-hidden {
display: none !important;
.mui-content-padded {
margin: 10px;
}
.mui-inline {
......@@ -302,7 +299,15 @@ a:active {
}
.mui-block {
display: block;
display: block !important;
}
.mui-visibility {
visibility: visible !important;
}
.mui-hidden {
display: none !important;
}
.mui-ellipsis {
......@@ -558,7 +563,7 @@ p {
z-index: 9998;
overflow: hidden;
pointer-events: none;
opacity: 1;
opacity: 0;
-webkit-transition: 500ms;
transition: 500ms;
transform: translateZ(0px);
......@@ -689,171 +694,140 @@ p {
right: 0;
}
.mui-loading {
height: 100%;
min-height: 80px;
padding: 15px 0;
text-align: center;
vertical-align: middle;
}
.mui-loading .mui-icon-spinner, .mui-loading .mui-icon-spinner-cycle {
font-size: 48px;
color: #999;
.mui-loading .mui-spinner {
display: block;
margin: 0 auto;
}
.mui-spinner {
position: relative;
display: inline-block;
width: 24px;
height: 24px;
-webkit-transform-origin: 50%;
transform-origin: 50%;
-webkit-animation: spinner-spin 1s step-end infinite;
animation: spinner-spin 1s step-end infinite;
}
.mui-spinner.mui-spinner-large {
width: 56px;
height: 56px;
}
.mui-spinner-indicator {
position: absolute;
top: 37%;
left: 44.5%;
width: 14%;
height: 30%;
background: #787878;
border-radius: 80%;
opacity: 0;
-webkit-animation: fade 1s linear infinite;
animation: fade 1s linear infinite;
-webkit-border-radius: 80%;
.mui-spinner:after {
display: block;
width: 100%;
height: 100%;
content: "";
background-image: url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><defs><line id='l' x1='60' x2='60' y1='7' y2='27' stroke='%236c6c6c' stroke-width='11' stroke-linecap='round'/></defs><g><use xlink:href='%23l' opacity='.27'/><use xlink:href='%23l' opacity='.27' transform='rotate(30 60,60)'/><use xlink:href='%23l' opacity='.27' transform='rotate(60 60,60)'/><use xlink:href='%23l' opacity='.27' transform='rotate(90 60,60)'/><use xlink:href='%23l' opacity='.27' transform='rotate(120 60,60)'/><use xlink:href='%23l' opacity='.27' transform='rotate(150 60,60)'/><use xlink:href='%23l' opacity='.37' transform='rotate(180 60,60)'/><use xlink:href='%23l' opacity='.46' transform='rotate(210 60,60)'/><use xlink:href='%23l' opacity='.56' transform='rotate(240 60,60)'/><use xlink:href='%23l' opacity='.66' transform='rotate(270 60,60)'/><use xlink:href='%23l' opacity='.75' transform='rotate(300 60,60)'/><use xlink:href='%23l' opacity='.85' transform='rotate(330 60,60)'/></g></svg>");
background-repeat: no-repeat;
background-position: 50%;
background-size: 100%;
}
.mui-spinner-indicator1 {
-webkit-transform: rotate(0) translate(0, -142%);
transform: rotate(0) translate(0, -142%);
-webkit-animation-delay: 0;
animation-delay: 0;
.mui-spinner-white:after {
background-image: url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><defs><line id='l' x1='60' x2='60' y1='7' y2='27' stroke='%23fff' stroke-width='11' stroke-linecap='round'/></defs><g><use xlink:href='%23l' opacity='.27'/><use xlink:href='%23l' opacity='.27' transform='rotate(30 60,60)'/><use xlink:href='%23l' opacity='.27' transform='rotate(60 60,60)'/><use xlink:href='%23l' opacity='.27' transform='rotate(90 60,60)'/><use xlink:href='%23l' opacity='.27' transform='rotate(120 60,60)'/><use xlink:href='%23l' opacity='.27' transform='rotate(150 60,60)'/><use xlink:href='%23l' opacity='.37' transform='rotate(180 60,60)'/><use xlink:href='%23l' opacity='.46' transform='rotate(210 60,60)'/><use xlink:href='%23l' opacity='.56' transform='rotate(240 60,60)'/><use xlink:href='%23l' opacity='.66' transform='rotate(270 60,60)'/><use xlink:href='%23l' opacity='.75' transform='rotate(300 60,60)'/><use xlink:href='%23l' opacity='.85' transform='rotate(330 60,60)'/></g></svg>");
}
.mui-spinner-indicator2 {
-webkit-transform: rotate(30deg) translate(0, -142%);
transform: rotate(30deg) translate(0, -142%);
-webkit-animation-delay: -.9167s;
animation-delay: -.9167s;
}
@-webkit-keyframes spinner-spin {
0% {
-webkit-transform: rotate(0deg);
}
.mui-spinner-indicator3 {
-webkit-transform: rotate(60deg) translate(0, -142%);
transform: rotate(60deg) translate(0, -142%);
-webkit-animation-delay: -.833s;
animation-delay: -.833s;
}
8.33333333% {
-webkit-transform: rotate(30deg);
}
.mui-spinner-indicator4 {
-webkit-transform: rotate(90deg) translate(0, -142%);
transform: rotate(90deg) translate(0, -142%);
-webkit-animation-delay: -.75s;
animation-delay: -.75s;
}
16.66666667% {
-webkit-transform: rotate(60deg);
}
.mui-spinner-indicator5 {
-webkit-transform: rotate(120deg) translate(0, -142%);
transform: rotate(120deg) translate(0, -142%);
-webkit-animation-delay: -.667s;
animation-delay: -.667s;
}
25% {
-webkit-transform: rotate(90deg);
}
.mui-spinner-indicator6 {
-webkit-transform: rotate(150deg) translate(0, -142%);
transform: rotate(150deg) translate(0, -142%);
-webkit-animation-delay: -.5833s;
animation-delay: -.5833s;
}
33.33333333% {
-webkit-transform: rotate(120deg);
}
.mui-spinner-indicator7 {
-webkit-transform: rotate(180deg) translate(0, -142%);
transform: rotate(180deg) translate(0, -142%);
-webkit-animation-delay: -.5s;
animation-delay: -.5s;
}
41.66666667% {
-webkit-transform: rotate(150deg);
}
.mui-spinner-indicator8 {
-webkit-transform: rotate(210deg) translate(0, -142%);
transform: rotate(210deg) translate(0, -142%);
-webkit-animation-delay: -.41667s;
animation-delay: -.41667s;
}
50% {
-webkit-transform: rotate(180deg);
}
.mui-spinner-indicator9 {
-webkit-transform: rotate(240deg) translate(0, -142%);
transform: rotate(240deg) translate(0, -142%);
-webkit-animation-delay: -.333s;
animation-delay: -.333s;
}
58.33333333% {
-webkit-transform: rotate(210deg);
}
.mui-spinner-indicator10 {
-webkit-transform: rotate(270deg) translate(0, -142%);
transform: rotate(270deg) translate(0, -142%);
-webkit-animation-delay: -.25s;
animation-delay: -.25s;
}
66.66666667% {
-webkit-transform: rotate(240deg);
}
.mui-spinner-indicator11 {
-webkit-transform: rotate(300deg) translate(0, -142%);
transform: rotate(300deg) translate(0, -142%);
-webkit-animation-delay: -.1667s;
animation-delay: -.1667s;
}
75% {
-webkit-transform: rotate(270deg);
}
.mui-spinner-indicator12 {
-webkit-transform: rotate(330deg) translate(0, -142%);
transform: rotate(330deg) translate(0, -142%);
-webkit-animation-delay: -.0833s;
animation-delay: -.0833s;
}
83.33333333% {
-webkit-transform: rotate(300deg);
}
@-webkit-keyframes fade {
from {
opacity: 1;
91.66666667% {
-webkit-transform: rotate(330deg);
}
to {
opacity: .25;
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes fade {
from {
opacity: 1;
@keyframes spinner-spin {
0% {
transform: rotate(0deg);
}
to {
opacity: .25;
8.33333333% {
transform: rotate(30deg);
}
}
.mui-spin {
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-animation: spin 1s infinite linear;
animation: spin 1s infinite linear;
-webkit-animation-fill-mode: forwards;
}
16.66666667% {
transform: rotate(60deg);
}
@-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg) translateZ(0);
25% {
transform: rotate(90deg);
}
100% {
-webkit-transform: rotate(359deg) translateZ(0);
33.33333333% {
transform: rotate(120deg);
}
}
@keyframes spin {
from {
transform: rotate(0deg) translateZ(0);
41.66666667% {
transform: rotate(150deg);
}
50% {
transform: rotate(180deg);
}
58.33333333% {
transform: rotate(210deg);
}
66.66666667% {
transform: rotate(240deg);
}
75% {
transform: rotate(270deg);
}
83.33333333% {
transform: rotate(300deg);
}
91.66666667% {
transform: rotate(330deg);
}
100% {
transform: rotate(359deg) translateZ(0);
transform: rotate(360deg);
}
}
input[type="button"],
......@@ -874,6 +848,7 @@ button,
vertical-align: top;
cursor: pointer;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ccc;
border-radius: 3px;
-webkit-transition: all;
......@@ -1342,15 +1317,79 @@ input[type="submit"]:active, input[type="submit"].mui-active,
background-color: transparent;
}
.mui-card {
margin: 0 15px;
overflow: hidden;
background-color: white;
background-clip: padding-box;
border: 1px solid #ddd;
border-radius: 6px;
}
.mui-content > .mui-card:first-child {
margin-top: 15px;
}
.mui-card .mui-input-group {
background: none;
}
.mui-card .mui-table-view {
margin-bottom: 0;
border-top: 0;
border-bottom: 0;
border-radius: 6px;
}
.mui-card .mui-table-view .mui-table-view-divider:first-child {
top: 0;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
.mui-card .mui-table-view .mui-table-view-divider:last-child {
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
}
.mui-card .mui-table-view:before, .mui-card .mui-table-view:after {
height: 0;
}
.mui-card > .mui-table-view {
background-image: none;
}
.mui-card > .mui-table-view > .mui-table-view-cell:last-child {
background-image: none;
}
.mui-card .mui-input-group .mui-input-row:last-child {
background-image: none;
}
.mui-table-view {
position: relative;
padding-left: 0;
margin-top: 0;
margin-bottom: 0;
list-style: none;
background-color: #fff;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>"), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");
background-repeat: no-repeat;
background-position: 0 100%, 0 0;
}
.mui-table-view:after {
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 1px;
content: '';
background-color: #c8c7cc;
}
.mui-table-view:before {
position: absolute;
top: 0;
right: 0;
left: 0;
height: 1px;
content: '';
background-color: #c8c7cc;
}
.mui-table-view-striped > li:nth-child(odd) {
......@@ -1377,14 +1416,33 @@ input[type="submit"]:active, input[type="submit"].mui-active,
.mui-table-view-inverted {
color: #fff;
background: #333;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#222222' x='0' y='0' width='100%' height='0.5'/></svg>"), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#222222' x='0' y='0' width='100%' height='0.5'/></svg>");
background-repeat: no-repeat;
background-position: 0 100%, 0 0;
}
.mui-table-view-inverted .mui-table-view-cell {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#222222' x='0' y='0' width='100%' height='0.5'/></svg>");
background-repeat: no-repeat;
background-position: 15px 100%;
.mui-table-view-inverted:after {
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 1px;
content: '';
background-color: #222;
}
.mui-table-view-inverted:before {
position: absolute;
top: 0;
right: 0;
left: 0;
height: 1px;
content: '';
background-color: #222;
}
.mui-table-view-inverted .mui-table-view-cell:after {
position: absolute;
right: 0;
bottom: 0;
left: 15px;
height: 1px;
content: '';
background-color: #222;
}
.mui-table-view-inverted .mui-table-view-cell.mui-active {
background-color: #242424;
......@@ -1397,12 +1455,18 @@ input[type="submit"]:active, input[type="submit"].mui-active,
position: relative;
padding: 11px 15px;
overflow: hidden;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");
background-repeat: no-repeat;
background-position: 15px 100%;
-webkit-touch-callout: none;
}
.mui-table-view-cell:after {
position: absolute;
right: 0;
bottom: 0;
left: 15px;
height: 1px;
content: '';
background-color: #c8c7cc;
}
.mui-table-view-cell.mui-radio input[type=radio], .mui-table-view-cell.mui-checkbox input[type=checkbox] {
top: 8px;
}
......@@ -1415,8 +1479,8 @@ input[type="submit"]:active, input[type="submit"].mui-active,
.mui-table-view-cell.mui-active > .mui-slider-cell > .mui-slider-left ~ .mui-slider-handle, .mui-table-view-cell.mui-active > .mui-slider-cell > .mui-slider-right ~ .mui-slider-handle {
background-color: #eee;
}
.mui-table-view-cell:last-child {
background-image: none;
.mui-table-view-cell:last-child:before, .mui-table-view-cell:last-child:after {
height: 0;
}
.mui-table-view-cell > a:not(.mui-btn) {
position: relative;
......@@ -1476,9 +1540,24 @@ input[type="submit"]:active, input[type="submit"].mui-active,
font-weight: 500;
color: #999;
background-color: #fafafa;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>"), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");
background-repeat: no-repeat;
background-position: 0 100%, 0 0;
}
.mui-table-view-divider:after {
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 1px;
content: '';
background-color: #c8c7cc;
}
.mui-table-view-divider:before {
position: absolute;
top: 0;
right: 0;
left: 0;
height: 1px;
content: '';
background-color: #c8c7cc;
}
.mui-table-view .mui-media,
......@@ -1575,6 +1654,7 @@ input[type="submit"]:active, input[type="submit"].mui-active,
margin-right: -15px;
margin-bottom: -11px;
margin-left: -15px;
border: 0;
}
.mui-table-view-cell.mui-collapse .mui-table-view.mui-table-view-chevron {
margin-right: -65px;
......@@ -1583,6 +1663,15 @@ input[type="submit"]:active, input[type="submit"].mui-active,
padding-left: 31px;
background-position: 31px 100%;
}
.mui-table-view-cell.mui-collapse .mui-table-view .mui-table-view-cell:after {
position: absolute;
right: 0;
bottom: 0;
left: 30px;
height: 1px;
content: '';
background-color: #c8c7cc;
}
.mui-table-view.mui-grid-view {
display: block;
......@@ -1621,6 +1710,9 @@ input[type="submit"]:active, input[type="submit"].mui-active,
color: #333;
text-overflow: ellipsis;
}
.mui-table-view.mui-grid-view .mui-table-view-cell:before, .mui-table-view.mui-grid-view .mui-table-view-cell:after {
height: 0;
}
.mui-grid-view.mui-grid-9 {
padding: 1px 0 1px 0;
......@@ -1753,26 +1845,49 @@ select:focus {
}
.mui-input-group {
position: relative;
padding: 0;
background-color: #fff;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>"), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");
background-repeat: no-repeat;
background-position: 0 100%, 0 0;
border: 0;
}
.mui-input-group:after {
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 1px;
content: '';
background-color: #c8c7cc;
}
.mui-input-group:before {
position: absolute;
top: 0;
right: 0;
left: 0;
height: 1px;
content: '';
background-color: #c8c7cc;
}
.mui-input-group input,
.mui-input-group input[type=text],
.mui-input-group textarea {
margin-bottom: 0;
background-color: transparent;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");
background-repeat: no-repeat;
background-position: 15px 100%;
border: 0;
border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.mui-input-group input[type=text]:after,
.mui-input-group textarea:after {
position: absolute;
right: 0;
bottom: 0;
left: 15px;
height: 1px;
content: '';
background-color: #c8c7cc;
}
.mui-input-group input[type="search"] {
background: none;
......@@ -1798,9 +1913,15 @@ select:focus {
.mui-input-group .mui-input-row {
height: 40px;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");
background-repeat: no-repeat;
background-position: 15px 100%;
}
.mui-input-group .mui-input-row:after {
position: absolute;
right: 0;
bottom: 0;
left: 15px;
height: 1px;
content: '';
background-color: #c8c7cc;
}
.mui-input-row label {
......@@ -2003,6 +2124,7 @@ select:focus {
height: 28px;
-webkit-appearance: none !important;
background-color: #007aff;
background-clip: padding-box;
border-color: #0062cc;
border-radius: 50%;
}
......@@ -2066,6 +2188,7 @@ select:focus {
content: '\e466';
}
.mui-search.mui-active:before {
right: auto;
left: 5px;
display: block;
margin-right: 0;
......@@ -2172,6 +2295,7 @@ select:focus {
}
.mui-control-content {
position: relative;
display: none;
}
.mui-control-content.mui-active {
......@@ -2179,15 +2303,12 @@ select:focus {
}
.mui-popover {
position: fixed;
top: 55px;
left: 50%;
position: absolute;
z-index: 999;
display: none;
width: 280px;
margin-left: -140px;
background-color: rgba(247, 247, 247, .98);
border-radius: 12px;
border-radius: 7px;
-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, .1);
box-shadow: 0 0 15px rgba(0, 0, 0, .1);
opacity: 0;
......@@ -2196,38 +2317,37 @@ select:focus {
-webkit-transform: translate3d(0, -15px, 0);
transform: translate3d(0, -15px, 0);
}
.mui-popover:before {
.mui-popover .mui-popover-arrow {
position: absolute;
top: -15px;
left: 50%;
width: 0;
height: 0;
margin-left: -8px;
content: '';
border-right: 8px solid transparent;
border-bottom: 15px solid rgba(247, 247, 247, .98);
border-left: 8px solid transparent;
top: -25px;
left: 0;
z-index: 1000;
width: 26px;
height: 26px;
overflow: hidden;
}
.mui-popover.mui-popover-bottom {
top: auto;
bottom: 65px;
left: auto;
width: auto;
margin-left: 0;
border: 1px solid #ddd;
border-radius: 6px;
.mui-popover .mui-popover-arrow:after {
position: absolute;
top: 19px;
left: 0;
width: 26px;
height: 26px;
content: ' ';
background: rgba(247, 247, 247, .98);
border-radius: 3px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.mui-popover.mui-popover-bottom:before {
top: auto;
bottom: -8px;
border-top: 8px solid rgba(247, 247, 247, .98);
border-bottom: 0;
.mui-popover .mui-popover-arrow.mui-bottom {
top: 100%;
left: -26px;
margin-top: -1px;
}
.mui-popover.mui-popover-bottom.mui-popover-action {
top: auto;
right: 0;
bottom: 0;
.mui-popover .mui-popover-arrow.mui-bottom:after {
top: -19px;
left: 0;
}
.mui-popover.mui-popover-action {
width: 100%;
border-radius: 0;
-webkit-transition: -webkit-transform .25s, opacity 1ms .25s;
......@@ -2235,7 +2355,7 @@ select:focus {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
.mui-popover.mui-popover-bottom.mui-popover-action.mui-active {
.mui-popover.mui-popover-action.mui-active {
opacity: 1;
-webkit-transition: -webkit-transform .25s;
transition: transform .25s;
......@@ -2301,6 +2421,10 @@ select:focus {
box-shadow: none;
}
.mui-popover .mui-scroll .mui-table-view {
max-height: none;
}
.mui-popover .mui-table-view {
max-height: 300px;
margin-bottom: 0;
......@@ -2308,7 +2432,10 @@ select:focus {
-webkit-overflow-scrolling: touch;
background-color: rgba(247, 247, 247, .98);
background-image: none;
border-radius: 12px;
border-radius: 7px;
}
.mui-popover .mui-table-view:before, .mui-popover .mui-table-view:after {
height: 0;
}
.mui-popover .mui-table-view .mui-table-view-cell:first-child,
.mui-popover .mui-table-view .mui-table-view-cell:first-child > a:not(.mui-btn) {
......@@ -2485,10 +2612,23 @@ select:focus {
.mui-slider .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
border-bottom: 0;
}
.mui-slider .mui-segmented-control.mui-segmented-control-inverted ~ .mui-slider-group .mui-slider-item {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>"), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");
background-repeat: no-repeat;
background-position: 0 100%, 0 0;
.mui-slider .mui-segmented-control.mui-segmented-control-inverted ~ .mui-slider-group .mui-slider-item:after {
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 1px;
content: '';
background-color: #c8c7cc;
}
.mui-slider .mui-segmented-control.mui-segmented-control-inverted ~ .mui-slider-group .mui-slider-item:before {
position: absolute;
top: 0;
right: 0;
left: 0;
height: 1px;
content: '';
background-color: #c8c7cc;
}
.mui-slider .mui-slider-group {
position: relative;
......@@ -2496,8 +2636,6 @@ select:focus {
white-space: nowrap;
-webkit-transition: all 0s linear;
transition: all 0s linear;
-webkit-backface-visibility: hidden;
}
.mui-slider .mui-slider-group .mui-slider-item {
position: relative;
......@@ -2723,6 +2861,12 @@ select:focus {
width: 100%;
height: 50px;
overflow: hidden;
visibility: hidden;
}
.mui-plus-pullrefresh .mui-pull-top-pocket, .mui-plus-pullrefresh .mui-pull-bottom-pocket {
display: none;
visibility: visible;
}
.mui-pull-top-pocket {
......@@ -2757,6 +2901,8 @@ select:focus {
.mui-pull-loading {
vertical-align: middle;
-webkit-transition: -webkit-transform .4s;
transition: transform .4s;
-webkit-transition-duration: 400ms;
transition-duration: 400ms;
......
dist/css/mui.min.css
View file @ 1685cf20
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/js/mui.js
View file @ 1685cf20
/*!
* =====================================================
* Mui v0.7.1 (https://github.com/dcloudio/mui)
* Mui v0.8.0 (https://github.com/dcloudio/mui)
* =====================================================
*/
/**
......@@ -80,7 +80,7 @@ var mui = (function(document, undefined) {
$.slice = [].slice;
$.type = function(obj) {
return obj == null ? String(obj) : class2type[{}.toString.call(obj)] || "object";
return obj === null ? String(obj) : class2type[{}.toString.call(obj)] || "object";
};
/**
* mui isArray
......@@ -93,25 +93,25 @@ var mui = (function(document, undefined) {
* mui isWindow
*/
$.isWindow = function(obj) {
return obj != null && obj == obj.window;
return obj !== null && obj === obj.window;
};
/**
* mui isObject
*/
$.isObject = function(obj) {
return $.type(obj) == "object";
return $.type(obj) === "object";
};
/**
* mui isPlainObject
*/
$.isPlainObject = function(obj) {
return $.isObject(obj) && !$.isWindow(obj) && Object.getPrototypeOf(obj) == Object.prototype;
return $.isObject(obj) && !$.isWindow(obj) && Object.getPrototypeOf(obj) === Object.prototype;
};
/**
* mui isFunction
*/
$.isFunction = function(value) {
return $.type(value) == "function";
return $.type(value) === "function";
};
/**
* mui querySelectorAll
......@@ -144,22 +144,22 @@ var mui = (function(document, undefined) {
$.map = function(elements, callback) {
var value, values = [],
i, key;
if (typeof elements.length == 'number') {
if (typeof elements.length === 'number') {
for (i = 0, len = elements.length; i < len; i++) {
value = callback(elements[i], i);
if (value != null) values.push(value);
if (value !== null) values.push(value);
}
} else {
for (key in elements) {
value = callback(elements[key], key);
if (value != null) values.push(value);
if (value !== null) values.push(value);
}
}
return values.length > 0 ? [].concat.apply([], values) : values;
};
/**
* each
* @param {type} array
* @param {type} elements
* @param {type} callback
* @returns {_L8.$}
*/
......@@ -169,7 +169,7 @@ var mui = (function(document, undefined) {
return callback.call(el, idx, el) !== false;
});
} else {
for (key in elements) {
for (var key in elements) {
if (callback.call(elements[key], key, elements[key]) === false) return elements;
}
}
......@@ -364,7 +364,7 @@ var mui = (function(document, undefined) {
Object.setPrototypeOf = Object.setPrototypeOf || function(obj, proto) {
obj['__proto__'] = proto;
return obj;
}
};
})();
/**
......@@ -507,7 +507,7 @@ var mui = (function(document, undefined) {
clickEvent.forwardedTouchEvent = true;
targetElement.dispatchEvent(clickEvent);
}
}
};
window.addEventListener('tap', dispatchEvent);
window.addEventListener('doubletap', dispatchEvent);
//捕获
......@@ -534,7 +534,6 @@ var mui = (function(document, undefined) {
return;
}
var CLASS_FOCUSIN = 'mui-focusin';
var CLASS_CONTENT = 'mui-content';
var CLASS_BAR_TAB = 'mui-bar-tab';
var CLASS_BAR_FOOTER = 'mui-bar-footer';
var CLASS_BAR_FOOTER_SECONDARY = 'mui-bar-footer-secondary';
......@@ -743,6 +742,9 @@ var mui = (function(document, undefined) {
if ($.gestures.stoped) {
return;
}
if (event.target != touch.target) {
return;
}
var now = Date.now();
var point = event.touches ? event.touches[0] : event;
touch.touchTime = now - touch.startTime;
......@@ -769,6 +771,9 @@ var mui = (function(document, undefined) {
if ($.gestures.stoped) {
return;
}
if (event.target != touch.target) {
return;
}
var now = Date.now();
touch.touchTime = now - touch.startTime;
touch.flickTime = now - touch.flickStartTime;
......@@ -785,7 +790,7 @@ var mui = (function(document, undefined) {
window.addEventListener($.EVENT_CANCEL, detectTouchEnd);
//fixed hashchange(android)
window.addEventListener($.EVENT_CLICK, function(e) {
if ($.targets.popover || $.targets.tab || $.targets.offcanvas || $.targets.modal) {
if ($.targets.popover || ($.targets.tab && $.targets.tab.hash) || $.targets.offcanvas || $.targets.modal) {
e.preventDefault();
}
});
......@@ -1077,7 +1082,6 @@ var mui = (function(document, undefined) {
* @returns {undefined}
*/
(function($) {
var funcs = [];
$.global = $.options = {
gestureConfig: {
tap: true,
......@@ -1138,19 +1142,22 @@ var mui = (function(document, undefined) {
*/
(function($) {
var defaultOptions = {
optimize: true,
swipeBack: false,
preloadPages: [], //5+ lazyLoad webview
preloadLimit: 10 //预加载窗口的数量限制(一旦超出，先进先出)
preloadLimit: 10, //预加载窗口的数量限制(一旦超出，先进先出)
keyEventBind: {
backbutton: true,
menubutton: true
}
};
//默认页面动画
var defaultShow = {
autoShow: true,
duration: $.os.ios ? 200 : 100,
aniShow: 'slide-in-right'
}
//若执行了显示动画初始化操作，则要覆盖默认配置
autoShow: true,
duration: $.os.ios ? 200 : 100,
aniShow: 'slide-in-right'
};
//若执行了显示动画初始化操作，则要覆盖默认配置
if ($.options.show) {
defaultShow = $.extend(defaultShow, $.options.show, true);
}
......@@ -1158,8 +1165,8 @@ var mui = (function(document, undefined) {
$.currentWebview = null;
$.isHomePage = false;
$.extend($.global, defaultOptions);
$.extend($.options, defaultOptions);
$.extend($.global, defaultOptions, true);
$.extend($.options, defaultOptions, true);
/**
* 等待动画配置
* @param {type} options
......@@ -1240,30 +1247,30 @@ var mui = (function(document, undefined) {
}
};
var trigger = function(webview, eventType, timeChecked) {
if (timeChecked) {
if (!webview[eventType + 'ed']) {
$.fire(webview, eventType);
var list = webview.children();
for (var i = 0; i < list.length; i++) {
$.fire(list[i], eventType);
}
webview[eventType + 'ed'] = true;
}
} else {
if (timeChecked) {
if (!webview[eventType + 'ed']) {
$.fire(webview, eventType);
var list = webview.children();
for (var i = 0; i < list.length; i++) {
$.fire(list[i], eventType);
}
webview[eventType + 'ed'] = true;
}
} else {
$.fire(webview, eventType);
var list = webview.children();
for (var i = 0; i < list.length; i++) {
$.fire(list[i], eventType);
}
}
/**
* 打开新窗口
* @param {string} url 要打开的页面地址
* @param {string} id 指定页面ID
* @param {object} options 可选:参数,等待,窗口,显示配置{params:{},waiting:{},styles:{},show:{}}
*/
};
/**
* 打开新窗口
* @param {string} url 要打开的页面地址
* @param {string} id 指定页面ID
* @param {object} options 可选:参数,等待,窗口,显示配置{params:{},waiting:{},styles:{},show:{}}
*/
$.openWindow = function(url, id, options) {
if (!window.plus) {
......@@ -1420,7 +1427,7 @@ var mui = (function(document, undefined) {
options.preload = true;
}
return $.createWindow(options);
}
};
/**
*关闭当前webview打开的所有webview；
......@@ -1441,7 +1448,7 @@ var mui = (function(document, undefined) {
}
}
}
}
};
$.closeAll = function(webview, aniShow) {
$.closeOpened(webview);
if (aniShow) {
......@@ -1449,7 +1456,7 @@ var mui = (function(document, undefined) {
} else {
webview.close();
}
}
};
/**
* 批量创建webview
......@@ -1492,7 +1499,7 @@ var mui = (function(document, undefined) {
//$.currentWebview
$.plusReady(function() {
$.currentWebview = plus.webview.currentWebview();
})
});
$.registerInit({
name: '5+',
index: 100,
......@@ -1506,7 +1513,7 @@ var mui = (function(document, undefined) {
$.appendWebview(subpage);
});
//判断是否首页
if ($.currentWebview == plus.webview.getWebviewById(plus.runtime.appid)) {
if ($.currentWebview === plus.webview.getWebviewById(plus.runtime.appid)) {
$.isHomePage = true;
//首页需要自己激活预加载；
//timeout因为子页面loaded之后才append的，防止子页面尚未append、从而导致其preload未触发的问题；
......@@ -1585,7 +1592,7 @@ var mui = (function(document, undefined) {
});
window.addEventListener('swiperight', function(e) {
var detail = e.detail;
if (detail.angle > -15 && detail.angle < 15 && $.options.swipeBack === true) {
if ($.options.swipeBack === true && detail.angle > -10 && detail.angle < 10) {
$.back();
}
});
......@@ -1598,6 +1605,18 @@ var mui = (function(document, undefined) {
* @returns {undefined}
*/
(function($, window) {
if ($.os.plus && $.os.android) {
$.registerBack({
name: 'popover',
index: 5,
handle: function() {
if ($.targets._popover) {
$($.targets._popover).popover('hide');
return true;
}
}
});
}
/**
* 5+ back
*/
......@@ -1660,19 +1679,22 @@ var mui = (function(document, undefined) {
}
}
}
}
$.plusReady(function() {
plus.key.addEventListener('backbutton', function() {
$.back();
}, false);
plus.key.addEventListener('menubutton', function() {
$.menu();
}, false);
};
//处理按键监听事件
$.registerInit({
name: 'keyEventBind',
index: 1000,
handle: function() {
$.plusReady(function() {
if ($.options.keyEventBind.backbutton) {
plus.key.addEventListener('backbutton', $.back, false);
}
if ($.options.keyEventBind.menubutton) {
plus.key.addEventListener('menubutton', $.menu, false);
}
});
}
});
})(mui, window);
/**
* mui.init pulldownRefresh
......@@ -1686,15 +1708,37 @@ var mui = (function(document, undefined) {
handle: function() {
var options = $.options;
var pullRefreshOptions = options.pullRefresh || {};
if ((pullRefreshOptions.down && pullRefreshOptions.down.hasOwnProperty('callback')) || (pullRefreshOptions.up && pullRefreshOptions.up.hasOwnProperty('callback'))) {
var hasPulldown = pullRefreshOptions.down && pullRefreshOptions.down.hasOwnProperty('callback');
var hasPullup = pullRefreshOptions.up && pullRefreshOptions.up.hasOwnProperty('callback');
if (hasPulldown || hasPullup) {
var container = pullRefreshOptions.container;
if (container) {
var $container = $(container);
if ($container.length === 1) {
if ($.os.plus && $.os.android) { //android 5+
$.plusReady(function() {
$container.pullRefresh(pullRefreshOptions);
if (hasPullup) {
//当前页面初始化pullup
var upOptions = {};
upOptions.up = pullRefreshOptions.up;
$container.pullRefresh(upOptions);
}
if (hasPulldown) {
var webview = plus.webview.currentWebview();
var parent = webview.parent();
if (parent) {
if (!hasPullup) { //如果没有上拉加载，需要手动初始化一个默认的pullRefresh，以便当前页面容器可以调用endPulldownToRefresh等方法
$container.pullRefresh();
}
var downOptions = {
webviewId: webview.id
};
downOptions.down = $.extend({}, pullRefreshOptions.down);
downOptions.down.callback = '_CALLBACK';
//父页面初始化pulldown
parent.evalJS("mui(document.querySelector('.mui-content')).pullRefresh('" + JSON.stringify(downOptions) + "')");
}
}
});
} else {
$container.pullRefresh(pullRefreshOptions);
......@@ -1710,257 +1754,271 @@ var mui = (function(document, undefined) {
* @param {type} $
* @returns {undefined}
*/
(function($, window, undefined) {
var jsonType = 'application/json';
var htmlType = 'text/html';
var rscript = /<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi;
var scriptTypeRE = /^(?:text|application)\/javascript/i;
var xmlTypeRE = /^(?:text|application)\/xml/i;
var blankRE = /^\s*$/;
$.ajaxSettings = {
type: 'GET',
success: $.noop,
error: $.noop,
complete: $.noop,
context: null,
xhr: function() {
return new window.XMLHttpRequest();
},
accepts: {
script: 'text/javascript, application/javascript, application/x-javascript',
json: jsonType,
xml: 'application/xml, text/xml',
html: htmlType,
text: 'text/plain'
},
timeout: 0,
processData: true,
cache: true
};
var ajaxSuccess = function(data, xhr, settings) {
settings.success.call(settings.context, data, 'success', xhr);
ajaxComplete('success', xhr, settings);
};
// type: "timeout", "error", "abort", "parsererror"
var ajaxError = function(error, type, xhr, settings) {
settings.error.call(settings.context, xhr, type, error);
ajaxComplete(type, xhr, settings);
};
// status: "success", "notmodified", "error", "timeout", "abort", "parsererror"
var ajaxComplete = function(status, xhr, settings) {
settings.complete.call(settings.context, xhr, status);
};
(function ($, window, undefined) {
var jsonType = 'application/json';
var htmlType = 'text/html';
var rscript = /<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi;
var scriptTypeRE = /^(?:text|application)\/javascript/i;
var xmlTypeRE = /^(?:text|application)\/xml/i;
var blankRE = /^\s*$/;
$.ajaxSettings = {
type: 'GET',
success: $.noop,
error: $.noop,
complete: $.noop,
context: null,
xhr: function () {
return new window.XMLHttpRequest();
},
accepts: {
script: 'text/javascript, application/javascript, application/x-javascript',
json: jsonType,
xml: 'application/xml, text/xml',
html: htmlType,
text: 'text/plain'
},
timeout: 0,
processData: true,
cache: true
};
var serialize = function(params, obj, traditional, scope) {
var type, array = $.isArray(obj),
hash = $.isPlainObject(obj)
$.each(obj, function(key, value) {
type = $.type(value)
if (scope) key = traditional ? scope :
scope + '[' + (hash || type == 'object' || type == 'array' ? key : '') + ']'
// handle data in serializeArray() format
if (!scope && array) params.add(value.name, value.value)
// recurse into nested objects
else if (type == "array" || (!traditional && type == "object"))
serialize(params, value, traditional, key)
else params.add(key, value)
})
};
var serializeData = function(options) {
if (options.processData && options.data && typeof options.data != "string") {
options.data = $.param(options.data, options.traditional);
}
if (options.data && (!options.type || options.type.toUpperCase() == 'GET')) {
options.url = appendQuery(options.url, options.data);
options.data = undefined;
}
}
var appendQuery = function(url, query) {
if (query == '') return url;
return (url + '&' + query).replace(/[&?]{1,2}/, '?');
}
var mimeToDataType = function(mime) {
if (mime) mime = mime.split(';', 2)[0]
return mime && (mime == htmlType ? 'html' :
mime == jsonType ? 'json' :
scriptTypeRE.test(mime) ? 'script' :
xmlTypeRE.test(mime) && 'xml') || 'text'
}
var parseArguments = function(url, data, success, dataType) {
if ($.isFunction(data)) {
dataType = success, success = data, data = undefined;
}
if (!$.isFunction(success)) {
dataType = success, success = undefined;
}
return {
url: url,
data: data,
success: success,
dataType: dataType
};
}
$.ajax = function(url, options) {
if (typeof url === "object") {
options = url;
url = undefined;
}
var settings = options || {};
settings.url = url || settings.url;
for (key in $.ajaxSettings) {
if (settings[key] === undefined) {
settings[key] = $.ajaxSettings[key];
}
}
serializeData(settings);
var dataType = settings.dataType;
var ajaxSuccess = function (data, xhr, settings) {
settings.success.call(settings.context, data, 'success', xhr);
ajaxComplete('success', xhr, settings);
};
// type: "timeout", "error", "abort", "parsererror"
var ajaxError = function (error, type, xhr, settings) {
settings.error.call(settings.context, xhr, type, error);
ajaxComplete(type, xhr, settings);
};
// status: "success", "notmodified", "error", "timeout", "abort", "parsererror"
var ajaxComplete = function (status, xhr, settings) {
settings.complete.call(settings.context, xhr, status);
};
if (settings.cache === false || ((!options || options.cache !== true) && ('script' == dataType))) {
settings.url = appendQuery(settings.url, '_=' + Date.now());
}
var mime = settings.accepts[dataType];
var headers = {};
var setHeader = function(name, value) {
headers[name.toLowerCase()] = [name, value]
};
var protocol = /^([\w-]+:)\/\//.test(settings.url) ? RegExp.$1 : window.location.protocol;
var xhr = settings.xhr();
var nativeSetHeader = xhr.setRequestHeader;
var abortTimeout;
setHeader('X-Requested-With', 'XMLHttpRequest');
setHeader('Accept', mime || '*/*');
if (mime = settings.mimeType || mime) {
if (mime.indexOf(',') > -1) {
mime = mime.split(',', 2)[0]
}
xhr.overrideMimeType && xhr.overrideMimeType(mime);
}
if (settings.contentType || (settings.contentType !== false && settings.data && settings.type.toUpperCase() != 'GET')) {
setHeader('Content-Type', settings.contentType || 'application/x-www-form-urlencoded')
}
if (settings.headers) {
for (name in settings.headers) setHeader(name, settings.headers[name])
}
xhr.setRequestHeader = setHeader;
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
xhr.onreadystatechange = $.noop;
clearTimeout(abortTimeout)
var result, error = false;
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304 || (xhr.status == 0 && protocol == 'file:')) {
dataType = dataType || mimeToDataType(settings.mimeType || xhr.getResponseHeader('content-type'));
result = xhr.responseText;
try {
// http://perfectionkills.com/global-eval-what-are-the-options/
if (dataType == 'script') {
(1, eval)(result);
} else if (dataType == 'xml') {
result = xhr.responseXML;
} else if (dataType == 'json') {
result = blankRE.test(result) ? null : $.parseJSON(result);
}
} catch (e) {
error = e
}
var serialize = function (params, obj, traditional, scope) {
var type, array = $.isArray(obj),
hash = $.isPlainObject(obj);
$.each(obj, function (key, value) {
type = $.type(value);
if (scope) {
key = traditional ? scope :
scope + '[' + (hash || type === 'object' || type === 'array' ? key : '') + ']';
}
// handle data in serializeArray() format
if (!scope && array) {
params.add(value.name, value.value);
}
// recurse into nested objects
else if (type === "array" || (!traditional && type === "object")) {
serialize(params, value, traditional, key);
}
else {
params.add(key, value);
}
});
};
var serializeData = function (options) {
if (options.processData && options.data && typeof options.data !== "string") {
options.data = $.param(options.data, options.traditional);
}
if (options.data && (!options.type || options.type.toUpperCase() === 'GET')) {
options.url = appendQuery(options.url, options.data);
options.data = undefined;
}
};
var appendQuery = function (url, query) {
if (query === '') {
return url;
}
return (url + '&' + query).replace(/[&?]{1,2}/, '?');
};
var mimeToDataType = function (mime) {
if (mime) {
mime = mime.split(';', 2)[0];
}
return mime && (mime === htmlType ? 'html' :
mime === jsonType ? 'json' :
scriptTypeRE.test(mime) ? 'script' :
xmlTypeRE.test(mime) && 'xml') || 'text';
};
var parseArguments = function (url, data, success, dataType) {
if ($.isFunction(data)) {
dataType = success, success = data, data = undefined;
}
if (!$.isFunction(success)) {
dataType = success, success = undefined;
}
return {
url: url,
data: data,
success: success,
dataType: dataType
};
};
$.ajax = function (url, options) {
if (typeof url === "object") {
options = url;
url = undefined;
}
var settings = options || {};
settings.url = url || settings.url;
for (key in $.ajaxSettings) {
if (settings[key] === undefined) {
settings[key] = $.ajaxSettings[key];
}
}
serializeData(settings);
var dataType = settings.dataType;
if (error) {
ajaxError(error, 'parsererror', xhr, settings);
} else {
ajaxSuccess(result, xhr, settings);
}
} else {
ajaxError(xhr.statusText || null, xhr.status ? 'error' : 'abort', xhr, settings);
}
}
}
// if (ajaxBeforeSend(xhr, settings) === false) {
// xhr.abort();
// ajaxError(null, 'abort', xhr, settings);
// return xhr;
// }
if (settings.cache === false || ((!options || options.cache !== true) && ('script' === dataType))) {
settings.url = appendQuery(settings.url, '_=' + Date.now());
}
var mime = settings.accepts[dataType];
var headers = {};
var setHeader = function (name, value) {
headers[name.toLowerCase()] = [name, value];
};
var protocol = /^([\w-]+:)\/\//.test(settings.url) ? RegExp.$1 : window.location.protocol;
var xhr = settings.xhr();
var nativeSetHeader = xhr.setRequestHeader;
var abortTimeout;
setHeader('X-Requested-With', 'XMLHttpRequest');
setHeader('Accept', mime || '*/*');
if (!!(mime = settings.mimeType || mime)) {
if (mime.indexOf(',') > -1) {
mime = mime.split(',', 2)[0];
}
xhr.overrideMimeType && xhr.overrideMimeType(mime);
}
if (settings.contentType || (settings.contentType !== false && settings.data && settings.type.toUpperCase() !== 'GET')) {
setHeader('Content-Type', settings.contentType || 'application/x-www-form-urlencoded');
}
if (settings.headers) {
for (name in settings.headers)
setHeader(name, settings.headers[name]);
}
xhr.setRequestHeader = setHeader;
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
xhr.onreadystatechange = $.noop;
clearTimeout(abortTimeout);
var result, error = false;
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304 || (xhr.status === 0 && protocol === 'file:')) {
dataType = dataType || mimeToDataType(settings.mimeType || xhr.getResponseHeader('content-type'));
result = xhr.responseText;
try {
// http://perfectionkills.com/global-eval-what-are-the-options/
if (dataType === 'script') {
(1, eval)(result);
} else if (dataType === 'xml') {
result = xhr.responseXML;
} else if (dataType === 'json') {
result = blankRE.test(result) ? null : $.parseJSON(result);
}
} catch (e) {
error = e;
}
if (settings.xhrFields) {
for (name in settings.xhrFields) {
xhr[name] = settings.xhrFields[name];
}
}
if (error) {
ajaxError(error, 'parsererror', xhr, settings);
} else {
ajaxSuccess(result, xhr, settings);
}
} else {
ajaxError(xhr.statusText || null, xhr.status ? 'error' : 'abort', xhr, settings);
}
}
};
// if (ajaxBeforeSend(xhr, settings) === false) {
// xhr.abort();
// ajaxError(null, 'abort', xhr, settings);
// return xhr;
// }
if (settings.xhrFields) {
for (name in settings.xhrFields) {
xhr[name] = settings.xhrFields[name];
}
}
var async = 'async' in settings ? settings.async : true;
var async = 'async' in settings ? settings.async : true;
xhr.open(settings.type, settings.url, async, settings.username, settings.password);
xhr.open(settings.type, settings.url, async, settings.username, settings.password);
for (name in headers) {
nativeSetHeader.apply(xhr, headers[name]);
}
if (settings.timeout > 0) {
abortTimeout = setTimeout(function() {
xhr.onreadystatechange = $.noop;
xhr.abort();
ajaxError(null, 'timeout', xhr, settings);
}, settings.timeout);
}
xhr.send(settings.data ? settings.data : null);
return xhr;
};
for (name in headers) {
nativeSetHeader.apply(xhr, headers[name]);
}
if (settings.timeout > 0) {
abortTimeout = setTimeout(function () {
xhr.onreadystatechange = $.noop;
xhr.abort();
ajaxError(null, 'timeout', xhr, settings);
}, settings.timeout);
}
xhr.send(settings.data ? settings.data : null);
return xhr;
};
$.param = function(obj, traditional) {
var params = [];
params.add = function(k, v) {
this.push(encodeURIComponent(k) + '=' + encodeURIComponent(v));
};
serialize(params, obj, traditional);
return params.join('&').replace(/%20/g, '+');
}
$.get = function( /* url, data, success, dataType */ ) {
return $.ajax(parseArguments.apply(null, arguments));
}
$.param = function (obj, traditional) {
var params = [];
params.add = function (k, v) {
this.push(encodeURIComponent(k) + '=' + encodeURIComponent(v));
};
serialize(params, obj, traditional);
return params.join('&').replace(/%20/g, '+');
};
$.get = function ( /* url, data, success, dataType */ ) {
return $.ajax(parseArguments.apply(null, arguments));
};
$.post = function( /* url, data, success, dataType */ ) {
var options = parseArguments.apply(null, arguments);
options.type = 'POST';
return $.ajax(options);
}
$.post = function ( /* url, data, success, dataType */ ) {
var options = parseArguments.apply(null, arguments);
options.type = 'POST';
return $.ajax(options);
};
$.getJSON = function( /* url, data, success */ ) {
var options = parseArguments.apply(null, arguments);
options.dataType = 'json';
return $.ajax(options);
}
$.getJSON = function ( /* url, data, success */ ) {
var options = parseArguments.apply(null, arguments);
options.dataType = 'json';
return $.ajax(options);
};
$.fn.load = function(url, data, success) {
if (!this.length) return this
var self = this,
parts = url.split(/\s/),
selector,
options = parseArguments(url, data, success),
callback = options.success;
if (parts.length > 1) options.url = parts[0], selector = parts[1];
options.success = function(response) {
if (selector) {
var div = document.createElement('div');
div.innerHTML = response.replace(rscript, "");
var selectorDiv = document.createElement('div');
var childs = div.querySelectorAll(selector);
if (childs && childs.length > 0) {
for (var i = 0, len = childs.length; i < len; i++) {
selectorDiv.appendChild(childs[i]);
}
}
self[0].innerHTML = selectorDiv.innerHTML;
} else {
self[0].innerHTML = response;
}
callback && callback.apply(self, arguments)
}
$.ajax(options);
return this;
}
$.fn.load = function (url, data, success) {
if (!this.length)
return this;
var self = this,
parts = url.split(/\s/),
selector,
options = parseArguments(url, data, success),
callback = options.success;
if (parts.length > 1)
options.url = parts[0], selector = parts[1];
options.success = function (response) {
if (selector) {
var div = document.createElement('div');
div.innerHTML = response.replace(rscript, "");
var selectorDiv = document.createElement('div');
var childs = div.querySelectorAll(selector);
if (childs && childs.length > 0) {
for (var i = 0, len = childs.length; i < len; i++) {
selectorDiv.appendChild(childs[i]);
}
}
self[0].innerHTML = selectorDiv.innerHTML;
} else {
self[0].innerHTML = response;
}
callback && callback.apply(self, arguments);
};
$.ajax(options);
return this;
};
})(mui, window);
/**
......@@ -2062,6 +2120,162 @@ var mui = (function(document, undefined) {
};
$.Class = Class;
})(mui);
(function($, document, undefined) {
var CLASS_PULL_TOP_POCKET = 'mui-pull-top-pocket';
var CLASS_PULL_BOTTOM_POCKET = 'mui-pull-bottom-pocket';
var CLASS_PULL = 'mui-pull';
var CLASS_PULL_LOADING = 'mui-pull-loading';
var CLASS_PULL_CAPTION = 'mui-pull-caption';
var CLASS_ICON = 'mui-icon';
var CLASS_SPINNER = 'mui-spinner';
var CLASS_ICON_PULLDOWN = 'mui-icon-pulldown';
var CLASS_IN = 'mui-in';
var CLASS_BLOCK = 'mui-block';
var CLASS_VISIBILITY = 'mui-visibility';
var CLASS_LOADING_UP = CLASS_PULL_LOADING + ' ' + CLASS_ICON + ' ' + CLASS_ICON_PULLDOWN;
var CLASS_LOADING_DOWN = CLASS_PULL_LOADING + ' ' + CLASS_ICON + ' ' + CLASS_ICON_PULLDOWN;
var CLASS_LOADING = CLASS_PULL_LOADING + ' ' + CLASS_ICON + ' ' + CLASS_SPINNER;
var pocketHtml = ['<div class="' + CLASS_PULL + '">', '<div class="{icon}"></div>', '<div class="' + CLASS_PULL_CAPTION + '">{contentrefresh}</div>', '</div>'].join('');
var PullRefresh = {
init: function(element, options) {
this._super(element, $.extend({
scrollY: true,
scrollX: false,
indicators: true,
down: {
height: 50,
contentdown: '下拉可以刷新',
contentover: '释放立即刷新',
contentrefresh: '正在刷新...'
},
up: {
height: 50,
contentdown: '上拉显示更多',
contentrefresh: '正在加载...',
duration: 300
}
}, options, true));
},
_init: function() {
this._super();
this._initPocket();
},
_initPulldownRefresh: function() {
this.pulldown = true;
this.pullPocket = this.topPocket;
this.pullPocket.classList.add(CLASS_BLOCK);
this.pullPocket.classList.add(CLASS_VISIBILITY);
this.pullCaption = this.topCaption;
this.pullLoading = this.topLoading;
},
_initPullupRefresh: function() {
this.pulldown = false;
this.pullPocket = this.bottomPocket;
this.pullPocket.classList.add(CLASS_BLOCK);
this.pullPocket.classList.add(CLASS_VISIBILITY);
this.pullCaption = this.bottomCaption;
this.pullLoading = this.bottomLoading;
},
_initPocket: function() {
var options = this.options;
if (options.down && options.down.hasOwnProperty('callback')) {
this.topPocket = this.scroller.querySelector('.' + CLASS_PULL_TOP_POCKET);
if (!this.topPocket) {
this.topPocket = this._createPocket(CLASS_PULL_TOP_POCKET, options.down, CLASS_LOADING_DOWN);
this.wrapper.insertBefore(this.topPocket, this.wrapper.firstChild);
this.topLoading = this.topPocket.querySelector('.' + CLASS_PULL_LOADING);
this.topCaption = this.topPocket.querySelector('.' + CLASS_PULL_CAPTION);
}
}
if (options.up && options.up.hasOwnProperty('callback')) {
this.bottomPocket = this.scroller.querySelector('.' + CLASS_PULL_BOTTOM_POCKET);
if (!this.bottomPocket) {
this.bottomPocket = this._createPocket(CLASS_PULL_BOTTOM_POCKET, options.up, CLASS_LOADING);
this.scroller.appendChild(this.bottomPocket);
this.bottomLoading = this.bottomPocket.querySelector('.' + CLASS_PULL_LOADING);
this.bottomCaption = this.bottomPocket.querySelector('.' + CLASS_PULL_CAPTION);
}
//TODO only for h5
this.wrapper.addEventListener('scrollbottom', this);
}
},
_createPocket: function(clazz, options, iconClass) {
var pocket = document.createElement('div');
pocket.className = clazz;
pocket.innerHTML = pocketHtml.replace('{contentrefresh}', options.contentrefresh).replace('{icon}', iconClass);
return pocket;
},
_resetPullDownLoading: function() {
var loading = this.pullLoading;
if (loading) {
this.pullCaption.innerHTML = this.options.down.contentdown;
loading.style.webkitTransition = "";
loading.style.webkitTransform = "";
loading.style.webkitAnimation = "";
loading.className = CLASS_LOADING_DOWN;
}
},
_setCaption: function(title, reset) {
if (this.loading) {
return;
}
var options = this.options;
var pocket = this.pullPocket;
var caption = this.pullCaption;
var loading = this.pullLoading;
var isPulldown = this.pulldown;
if (pocket) {
if (reset) {
setTimeout(function() {
caption.innerHTML = title;
if (isPulldown) {
loading.className = CLASS_LOADING_DOWN;
} else {
loading.className = CLASS_LOADING;
}
loading.style.webkitAnimation = "";
loading.style.webkitTransition = "";
loading.style.webkitTransform = "";
}, 100);
} else {
if (title !== this.lastTitle) {
caption.innerHTML = title;
if (isPulldown) {
if (title === options.down.contentrefresh) {
loading.className = CLASS_LOADING;
loading.style.webkitAnimation = "spinner-spin 1s step-end infinite";
} else if (title === options.down.contentover) {
loading.className = CLASS_LOADING_UP;
loading.style.webkitTransition = "-webkit-transform 0.3s ease-in";
loading.style.webkitTransform = "rotate(180deg)";
} else if (title === options.down.contentdown) {
loading.className = CLASS_LOADING_DOWN;
loading.style.webkitTransition = "-webkit-transform 0.3s ease-in";
loading.style.webkitTransform = "rotate(0deg)";
}
} else {
if (title === options.up.contentrefresh) {
loading.className = CLASS_LOADING + ' ' + CLASS_IN;
} else {
loading.className = CLASS_LOADING;
}
}
this.lastTitle = title;
}
}
}
}
};
$.PullRefresh = PullRefresh;
})(mui, document);
(function($, window, document, undefined) {
var CLASS_SCROLLBAR = 'mui-scrollbar';
var CLASS_INDICATOR = 'mui-scrollbar-indicator';
......@@ -2087,6 +2301,7 @@ var mui = (function(document, undefined) {
this.wrapper = this.element = element;
this.scroller = this.wrapper.children[0];
this.scrollerStyle = this.scroller.style;
this.stopped = false;
this.options = $.extend({
scrollY: true,
......@@ -2094,6 +2309,7 @@ var mui = (function(document, undefined) {
startX: 0,
startY: 0,
indicators: true,
stopPropagation: false,
hardwareAccelerated: true,
fixedBadAndorid: false,
preventDefaultException: {
......@@ -2170,11 +2386,11 @@ var mui = (function(document, undefined) {
});
});
this.wrapper.addEventListener('beforescrollstart', function() {
self.indicators.map(function(indicator) {
indicator.fade(1, true);
});
});
// this.wrapper.addEventListener('beforescrollstart', function() {
// self.indicators.map(function(indicator) {
// indicator.fade(1, true);
// });
// });
this.wrapper.addEventListener('refresh', function() {
self.indicators.map(function(indicator) {
......@@ -2200,15 +2416,21 @@ var mui = (function(document, undefined) {
}
},
handleEvent: function(e) {
if (this.stopped) {
this.resetPosition();
return;
}
switch (e.type) {
case 'touchstart':
this._start(e);
break;
case 'drag':
this.options.stopPropagation && e.stopPropagation();
this._drag(e);
break;
case 'dragend':
case 'flick':
this.options.stopPropagation && e.stopPropagation();
this._flick(e);
break;
case 'touchcancel':
......@@ -2233,34 +2455,59 @@ var mui = (function(document, undefined) {
},
_start: function(e) {
this.moved = this.needReset = false;
this._transitionTime();
if (this.isInTransition) {
this.needReset = true;
this.isInTransition = false;
var pos = $.parseTranslateMatrix($.getStyles(this.scroller, 'webkitTransform'));
this.setTranslate(Math.round(pos.x), Math.round(pos.y));
this.resetPosition(); //reset
$.trigger(this.wrapper, 'scrollend', this);
e.stopPropagation();
e.preventDefault();
}
this.reLayout();
$.trigger(this.wrapper, 'beforescrollstart', this);
},
_drag: function(e) {
if (this.needReset) {
e.stopPropagation(); //disable parent drag(nested scroller)
return;
}
var detail = e.detail;
var isPreventDefault = false;
//ios8 hack
if ($.os.ios && parseFloat($.os.version) >= 8) {
if ((detail.gesture.touches[0].clientY + 10) > window.innerHeight) {
this.resetPosition(this.options.bounceTime);
return;
}
}
var isPreventDefault = isReturn = false;
if (detail.direction === 'left' || detail.direction === 'right') {
if (this.options.scrollX) {
isPreventDefault = true;
} else if (this.options.scrollY && !this.moved) {
isReturn = true;
}
} else if (detail.direction === 'up' || detail.direction === 'down') {
if (this.options.scrollY) {
isPreventDefault = true;
} else if (this.options.scrollX && !this.moved) {
isReturn = true;
}
}
if (isPreventDefault) {
e.stopPropagation(); //阻止冒泡(scroll类嵌套)
detail.gesture && detail.gesture.preventDefault();
}
if (isReturn) { //禁止非法方向滚动
return;
}
if (!this.moved) {
$.trigger(this.wrapper, 'scrollstart', this);
} else {
e.stopPropagation(); //move期间阻止冒泡(scroll嵌套)
}
var deltaX = detail.deltaX - detail.lastDeltaX;
var deltaY = detail.deltaY - detail.lastDeltaY;
var absDeltaX = Math.abs(detail.deltaX);
......@@ -2282,17 +2529,19 @@ var mui = (function(document, undefined) {
if (newY > 0 || newY < this.maxScrollY) {
newY = this.options.bounce ? this.y + deltaY / 3 : newY > 0 ? 0 : this.maxScrollY;
}
if (!this.requestAnimationFrame) {
this._updateTranslate();
}
if (!this.moved) {
$.trigger(this.wrapper, 'scrollstart', this);
}
this.moved = true;
this.x = newX;
this.y = newY;
},
_flick: function(e) {
if (!this.moved || this.needReset) {
return;
}
var detail = e.detail;
this._clearRequestAnimationFrame();
if (e.type === 'dragend' && detail.flick) { //dragend
......@@ -2344,15 +2593,15 @@ var mui = (function(document, undefined) {
e.stopPropagation();
},
_end: function(e) {
if (!this.moved && this.needReset) {
this.resetPosition(this.options.bounceTime);
this.needReset = false;
if ((!this.moved && this.needReset) || e.type === 'touchcancel') {
this.resetPosition();
}
},
_transitionEnd: function(e) {
if (e.target != this.scroller || !this.isInTransition) {
return;
}
this._transitionTime();
if (!this.resetPosition(this.options.bounceTime)) {
this.isInTransition = false;
......@@ -2360,7 +2609,7 @@ var mui = (function(document, undefined) {
}
},
_scrollend: function(e) {
if (this.y <= this.maxScrollY) {
if (Math.abs(this.y) > 0 && this.y <= this.maxScrollY) {
$.trigger(this.wrapper, 'scrollbottom', this);
}
},
......@@ -2473,6 +2722,9 @@ var mui = (function(document, undefined) {
};
},
//API
setStopped: function(stopped) {
this.stopped = !!stopped;
},
setTranslate: function(x, y) {
this.x = x;
this.y = y;
......@@ -2549,6 +2801,10 @@ var mui = (function(document, undefined) {
this.setTranslate(x, y);
}
},
scrollToBottom: function(time, easing) {
time = time || this.options.bounceTime;
this.scrollTo(0, this.maxScrollY, time, easing);
}
});
//Indicator
......@@ -2696,139 +2952,40 @@ var mui = (function(document, undefined) {
$.Scroll = Scroll;
$.fn.scroll = function(options) {
var scrollApis = [];
this.each(function() {
var id = this.getAttribute('data-scroll');
var scrollApi = null;
var self = this;
var id = self.getAttribute('data-scroll');
if (!id) {
id = ++$.uuid;
$.data[id] = new Scroll(this, options);
this.setAttribute('data-scroll', id);
$.data[id] = scrollApi = new Scroll(self, options);
self.setAttribute('data-scroll', id);
} else {
scrollApi = $.data[id];
}
scrollApis.push(scrollApi);
});
return scrollApis.length === 1 ? scrollApis[0] : scrollApis;
};
})(mui, window, document);
(function($, window, document, undefined) {
var CLASS_PULL_TOP_POCKET = 'mui-pull-top-pocket';
var CLASS_PULL_BOTTOM_POCKET = 'mui-pull-bottom-pocket';
var CLASS_PULL = 'mui-pull';
var CLASS_PULL_LOADING = 'mui-pull-loading';
var CLASS_PULL_CAPTION = 'mui-pull-caption';
var CLASS_ICON = 'mui-icon';
// var CLASS_PRELOADER = 'mui-preloader';
// var CLASS_PULLDOWN_ARROW = 'mui-pulldown-arrow';
var CLASS_ICON_SPINNER = 'mui-icon-spinner-cycle';
var CLASS_ICON_PULLDOWN = 'mui-icon-pulldown';
var CLASS_SPIN = 'mui-spin';
var CLASS_IN = 'mui-in';
var CLASS_HIDDEN = 'mui-hidden';
var CLASS_REVERSE = 'mui-reverse';
// var CLASS_LOADING_UP = CLASS_PULL_LOADING + ' ' + CLASS_PULLDOWN_ARROW + ' ' + CLASS_REVERSE;
// var CLASS_LOADING_DOWN = CLASS_PULL_LOADING + ' ' + CLASS_PULLDOWN_ARROW;
// var CLASS_LOADING = CLASS_PULL_LOADING + ' ' + CLASS_PRELOADER;
var CLASS_LOADING_UP = CLASS_PULL_LOADING + ' ' + CLASS_ICON + ' ' + CLASS_ICON_PULLDOWN + ' ' + CLASS_REVERSE;
var CLASS_LOADING_DOWN = CLASS_PULL_LOADING + ' ' + CLASS_ICON + ' ' + CLASS_ICON_PULLDOWN;
var CLASS_LOADING = CLASS_PULL_LOADING + ' ' + CLASS_ICON + ' ' + CLASS_ICON_SPINNER + ' ' + CLASS_SPIN;
var pocketHtml = ['<div class="' + CLASS_PULL + '">', '<div class="' + CLASS_LOADING_DOWN + '"></div>', '<div class="' + CLASS_PULL_CAPTION + '">{downCaption}</div>', '</div>'].join('');
var PullRefresh = $.Scroll.extend({
init: function(element, options) {
this._super(element, $.extend({
scrollY: true,
scrollX: false,
indicators: true,
down: {
height: 50,
contentdown: '下拉可以刷新',
contentover: '释放立即刷新',
contentrefresh: '正在刷新...'
},
up: {
height: 50,
contentdown: '上拉显示更多',
contentrefresh: '正在加载...',
duration: 300
}
}, options, true));
},
_init: function() {
this._super();
this._initPocket();
},
_initPocket: function() {
var options = this.options;
if (options.down && options.down.hasOwnProperty('callback')) {
this.topPocket = this.scroller.querySelector('.' + CLASS_PULL_TOP_POCKET);
if (!this.topPocket) {
this.topPocket = this._createPocket(CLASS_PULL_TOP_POCKET, options.down);
this.wrapper.insertBefore(this.topPocket, this.wrapper.firstChild);
this.topLoading = this.topPocket.querySelector('.' + CLASS_PULL_LOADING);
this.topCaption = this.topPocket.querySelector('.' + CLASS_PULL_CAPTION);
}
}
if (options.up && options.up.hasOwnProperty('callback')) {
this.bottomPocket = this.scroller.querySelector('.' + CLASS_PULL_BOTTOM_POCKET);
if (!this.bottomPocket) {
this.bottomPocket = this._createPocket(CLASS_PULL_BOTTOM_POCKET, options.up);
this.scroller.appendChild(this.bottomPocket);
this.bottomLoading = this.bottomPocket.querySelector('.' + CLASS_PULL_LOADING);
this.bottomCaption = this.bottomPocket.querySelector('.' + CLASS_PULL_CAPTION);
}
this.wrapper.addEventListener('scrollbottom', this);
}
},
handleEvent: function(e) {
this._super(e);
if (e.type === 'scrollbottom') {
this._scrollbottom();
}
},
_scrollbottom: function() {
if (!this.pulldown && !this.loading) {
this.pulldown = false;
this._initPullupRefresh();
this.pullupLoading();
}
},
_createPocket: function(clazz, options) {
var pocket = document.createElement('div');
pocket.className = clazz;
pocket.innerHTML = pocketHtml.replace('{downCaption}', options.contentdown);
return pocket;
},
_setCaption: function(title) {
if (this.loading) {
return;
}
var options = this.options;
var pocket = this.pullPocket;
if (pocket) {
if (title !== this.lastTitle) {
var caption = this.pullCaption;
var loading = this.pullLoading;
caption.innerHTML = title;
var isPulldown = this.pulldown;
if (this.pulldown) {
if (title === options.down.contentrefresh) {
loading.className = CLASS_LOADING;
} else if (title === options.down.contentover) {
loading.className = CLASS_LOADING_UP;
} else if (title === options.down.contentdown) {
loading.className = CLASS_LOADING_DOWN;
}
} else {
if (title === options.up.contentrefresh) {
loading.className = CLASS_LOADING + ' ' + CLASS_IN;
} else {
loading.className = CLASS_LOADING;
}
}
this.lastTitle = title;
}
var CLASS_VISIBILITY = 'mui-visibility';
var CLASS_HIDDEN = 'mui-hidden';
var PullRefresh = $.Scroll.extend($.extend({
handleEvent: function(e) {
this._super(e);
if (e.type === 'scrollbottom') {
this._scrollbottom();
}
},
_scrollbottom: function() {
if (!this.pulldown && !this.loading) {
this.pulldown = false;
this._initPullupRefresh();
this.pullupLoading();
}
},
_start: function(e) {
......@@ -2846,18 +3003,7 @@ var mui = (function(document, undefined) {
this._setCaption(this.y > this.options.down.height ? this.options.down.contentover : this.options.down.contentdown);
}
},
_initPulldownRefresh: function() {
this.pulldown = true;
this.pullPocket = this.topPocket;
this.pullCaption = this.topCaption;
this.pullLoading = this.topLoading;
},
_initPullupRefresh: function() {
this.pulldown = false;
this.pullPocket = this.bottomPocket;
this.pullCaption = this.bottomCaption;
this.pullLoading = this.bottomLoading;
},
_reLayout: function() {
this.hasVerticalScroll = true;
this._super();
......@@ -2888,12 +3034,15 @@ var mui = (function(document, undefined) {
callback && callback.call(this);
},
endPulldownToRefresh: function() {
if (this.topPocket) {
this.scrollTo(0, 0, this.options.bounceTime, this.options.bounceEasing);
this.loading = false;
this._setCaption(this.options.down.contentdown);
var self = this;
if (self.topPocket) {
self.scrollTo(0, 0, self.options.bounceTime, self.options.bounceEasing);
self.loading = false;
self._setCaption(self.options.down.contentdown, true);
setTimeout(function() {
self.loading || self.topPocket.classList.remove(CLASS_VISIBILITY);
}, 350);
}
},
pullupLoading: function(x, time) {
x = x || 0;
......@@ -2913,12 +3062,18 @@ var mui = (function(document, undefined) {
callback && callback.call(this);
},
endPullupToRefresh: function(finished) {
if (this.bottomPocket) {
this.loading = false;
this._setCaption(this.options.up.contentdown);
var self = this;
if (self.bottomPocket) {
self.loading = false;
self._setCaption(self.options.up.contentdown);
if (finished) {
this.bottomPocket.classList.add(CLASS_HIDDEN);
this.wrapper.removeEventListener('scrollbottom', this);
self.bottomPocket.classList.remove(CLASS_VISIBILITY);
self.bottomPocket.classList.add(CLASS_HIDDEN);
self.wrapper.removeEventListener('scrollbottom', self);
} else {
setTimeout(function() {
self.loading || self.bottomPocket.classList.remove(CLASS_VISIBILITY);
}, 350);
}
}
},
......@@ -2932,7 +3087,7 @@ var mui = (function(document, undefined) {
}
this._super();
},
});
}, $.PullRefresh));
$.fn.pullRefresh = function(options) {
if (this.length === 1) {
var self = this[0];
......@@ -2956,7 +3111,7 @@ var mui = (function(document, undefined) {
}
};
})(mui, window, document);
(function($, window, document, undefined) {
(function($, window) {
var CLASS_SLIDER = 'mui-slider';
var CLASS_SLIDER_GROUP = 'mui-slider-group';
var CLASS_SLIDER_LOOP = 'mui-slider-loop';
......@@ -2964,12 +3119,8 @@ var mui = (function(document, undefined) {
var CLASS_ACTION_PREVIOUS = 'mui-action-previous';
var CLASS_ACTION_NEXT = 'mui-action-next';
var CLASS_SLIDER_ITEM = 'mui-slider-item';
var CLASS_SLIDER_ITEM_DUPLICATE = CLASS_SLIDER_ITEM + '-duplicate';
var CLASS_DISABLED = 'mui-disabled';
var SELECTOR_SLIDER_ITEM = '.' + CLASS_SLIDER_ITEM;
var SELECTOR_SLIDER_ITEM_DUPLICATE = '.' + CLASS_SLIDER_ITEM_DUPLICATE;
var SELECTOR_SLIDER_INDICATOR = '.' + CLASS_SLIDER_INDICATOR;
var SELECTOR_SLIDER_PROGRESS_BAR = '.mui-slider-progress-bar';
......@@ -3008,6 +3159,7 @@ var mui = (function(document, undefined) {
self._super();
self.wrapper.addEventListener('swiperight', $.stopPropagation);
self.wrapper.addEventListener('scrollend', function() {
self.isInTransition = false;
self.slideNumber = self._getSlideNumber();
var slideNumber = self.slideNumber;
if (self.loop) {
......@@ -3025,21 +3177,27 @@ var mui = (function(document, undefined) {
});
});
self.wrapper.addEventListener('slide', function(e) {
if (e.target !== self.wrapper) {
return;
}
var detail = e.detail;
detail.slideNumber = detail.slideNumber || 0;
var indicators = self.wrapper.querySelectorAll('.mui-slider-indicator .mui-indicator');
if (indicators.length > 0) { //图片轮播
for (var i = 0, len = indicators.length; i < len; i++) {
indicators[i].classList[i === detail.slideNumber ? 'add' : 'remove']('mui-active');
}
} else {
var number = self.wrapper.querySelector('.mui-slider-indicator .mui-number span');
if (number) { //图文表格
number.innerText = (detail.slideNumber + 1);
} else { //segmented controls
var controlItems = self.wrapper.querySelectorAll('.mui-control-item');
for (var i = 0, len = controlItems.length; i < len; i++) {
controlItems[i].classList[i === detail.slideNumber ? 'add' : 'remove']('mui-active');
var indicatorWrap = self.wrapper.querySelector('.mui-slider-indicator');
if (indicatorWrap) {
var indicators = indicatorWrap.querySelectorAll('.mui-indicator');
if (indicators.length > 0) { //图片轮播
for (var i = 0, len = indicators.length; i < len; i++) {
indicators[i].classList[i === detail.slideNumber ? 'add' : 'remove']('mui-active');
}
} else {
var number = indicatorWrap.querySelector('.mui-number span');
if (number) { //图文表格
number.innerText = (detail.slideNumber + 1);
} else { //segmented controls
var controlItems = self.wrapper.querySelectorAll('.mui-control-item');
for (var i = 0, len = controlItems.length; i < len; i++) {
controlItems[i].classList[i === detail.slideNumber ? 'add' : 'remove']('mui-active');
}
}
}
}
......@@ -3063,7 +3221,10 @@ var mui = (function(document, undefined) {
},
_drag: function(e) {
this._super(e);
e.stopPropagation();
var direction = e.detail.direction;
if (direction === 'left' || direction === 'right') {
e.stopPropagation();
}
},
_initTimer: function() {
var self = this;
......@@ -3089,7 +3250,14 @@ var mui = (function(document, undefined) {
_reLayout: function() {
this.hasHorizontalScroll = true;
this.loop = this.scroller.classList.contains(CLASS_SLIDER_LOOP);
this.itemLength = this.scroller.querySelectorAll(SELECTOR_SLIDER_ITEM).length;
//以防slider类嵌套使用
var items = this.scroller.querySelectorAll(SELECTOR_SLIDER_ITEM);
this.itemLength = 0;
for (var i = 0, len = items.length; i < len; i++) {
if (items[i].parentNode === this.scroller) {
this.itemLength++;
}
}
this.scrollerWidth = this.itemLength * this.scrollerWidth;
this.maxScrollX = Math.min(this.wrapperWidth - this.scrollerWidth, 0);
this.slideNumber = this._getSlideNumber();
......@@ -3103,7 +3271,7 @@ var mui = (function(document, undefined) {
return Math.abs(Math.round(this.x / this.wrapperWidth));
},
_transitionEnd: function(e) {
if (e.target != this.scroller || !this.isInTransition) {
if (e.target !== this.scroller || !this.isInTransition) {
return;
}
this._transitionTime();
......@@ -3174,6 +3342,9 @@ var mui = (function(document, undefined) {
}
}
this._gotoItem(slideNumber, bounceTime);
// if (!auto) { //TODO 这个设置后续还得仔细过一遍
// this.isInTransition = false;
// }
},
prevItem: function() {
this._gotoItem(this._fixedSlideNumber(this.slideNumber - 1), this.options.bounceTime);
......@@ -3186,7 +3357,7 @@ var mui = (function(document, undefined) {
} else {
this._super();
}
},
}
});
$.fn.slider = function(options) {
var slider = null;
......@@ -3217,7 +3388,7 @@ var mui = (function(document, undefined) {
}, 500); //临时处理slider宽度计算不正确的问题(初步确认是scrollbar导致的)
});
})(mui, window, document);
})(mui, window);
/**
* pullRefresh 5+
* @param {type} $
......@@ -3228,121 +3399,180 @@ var mui = (function(document, undefined) {
return;
}
var CLASS_PLUS_PULLREFRESH = 'mui-plus-pullrefresh';
var CLASS_CONTENT = 'mui-content';
var CLASS_IN = 'mui-in';
var CLASS_HIDDEN = 'mui-hidden';
var CLASS_BLOCK = 'mui-block';
var SELECTOR_CONTENT = '.' + CLASS_CONTENT;
var defaultOptions = {
down: {
height: 50,
contentdown: '下拉可以刷新',
contentover: '释放立即刷新',
contentrefresh: '正在刷新...'
var PlusPullRefresh = $.Class.extend({
init: function(element, options) {
this.element = element;
this.options = options;
this.wrapper = this.scroller = element;
this._init();
this._initPulldownRefreshEvent();
},
up: {
contentdown: '上拉显示更多',
contentrefresh: '正在加载...'
}
};
var PlusPullRefresh = function(options) {
options = $.extend(defaultOptions, options, true);
this.downOptions = options.down;
this.upOptions = options.up;
if (this.downOptions && this.downOptions.hasOwnProperty('callback')) {
this.initPulldownRefresh();
}
if (this.upOptions && this.upOptions.hasOwnProperty('callback')) {
this.initPullupRefresh();
}
};
PlusPullRefresh.prototype.initPulldownRefresh = function() {
var self = this;
plus.webview.currentWebview().setPullToRefresh({
support: true,
height: self.downOptions.height + 'px',
range: "200px",
contentdown: {
caption: self.downOptions.contentdown
},
contentover: {
caption: self.downOptions.contentover
},
contentrefresh: {
caption: self.downOptions.contentrefresh
_init: function() {
document.addEventListener('plusscrollbottom', this);
},
_initPulldownRefreshEvent: function() {
var self = this;
if (self.topPocket && self.options.webviewId) {
$.plusReady(function() {
var webview = plus.webview.getWebviewById(self.options.webviewId);
if (!webview) {
return;
}
self.options.webview = webview;
var downOptions = self.options.down;
var height = downOptions.height;
webview.addEventListener("dragBounce", function(e) {
if (!self.pulldown) {
self._initPulldownRefresh();
} else {
self.pullPocket.classList.add(CLASS_BLOCK);
}
switch (e.status) {
case "beforeChangeOffset": //下拉可刷新状态
self._setCaption(downOptions.contentdown);
break;
case "afterChangeOffset": //松开可刷新状态
self._setCaption(downOptions.contentover);
break;
case "dragEndAfterChangeOffset": //正在刷新状态
//执行下拉刷新所在webview的回调函数
webview.evalJS("mui.options.pullRefresh.down.callback()");
self._setCaption(downOptions.contentrefresh);
break;
default:
break;
}
}, false);
webview.setBounce({
position: {
top: height * 2 + 'px'
},
changeoffset: {
top: height + 'px'
}
});
});
}
}, function() {
self.downOptions.callback && self.downOptions.callback.call(self);
});
};
PlusPullRefresh.prototype.initPullupRefresh = function() {
var self = this;
var content = document.querySelector(SELECTOR_CONTENT);
if (content) {
self.bottomPocket = document.createElement('div');
self.bottomPocket.className = $.classNamePrefix + 'pull-bottom-pocket';
self.bottomPocket.innerHTML = '<div class="' + $.classNamePrefix + 'pull"><div class="' + $.classNamePrefix + 'pull-loading ' + $.classNamePrefix + 'icon ' + $.classNamePrefix + 'icon-spinner-cycle ' + $.classNamePrefix + 'spin"></div><div class="' + $.classNamePrefix + 'pull-caption">' + self.upOptions.contentdown + '</div></div>';
content.appendChild(self.bottomPocket);
self.pullLoading = self.bottomPocket.querySelector('.mui-pull-loading');
self.pullCaption = self.bottomPocket.querySelector('.mui-pull-caption');
self.isLoading = false;
document.addEventListener('plusscrollbottom', self);
}
};
PlusPullRefresh.prototype.handleEvent = function(event) {
if (event.type === 'plusscrollbottom') {
this.pullupLoading();
}
};
PlusPullRefresh.prototype.endPulldownToRefresh = function() {
$.currentWebview.endPullToRefresh();
};
PlusPullRefresh.prototype.pullupLoading = function() {
var self = this;
if (self.isLoading) return;
self.isLoading = true;
setTimeout(function() {
self.pullLoading.classList.add(CLASS_IN);
self.pullCaption.innerHTML = ''; //修正5+里边第一次加载时，文字显示的bug(还会显示出来个“多”,猜测应该是渲染问题导致的)
self.pullCaption.innerHTML = self.upOptions.contentrefresh;
var callback = self.upOptions.callback;
callback && callback.call(self);
}, 300);
};
PlusPullRefresh.prototype.endPullupToRefresh = function(finished) {
if (this.pullLoading) {
this.pullLoading.classList.remove(CLASS_IN);
this.pullCaption.innerHTML = this.upOptions.contentdown;
this.isLoading = false;
if (finished) {
this.bottomPocket.classList.add(CLASS_HIDDEN);
document.removeEventListener('plusscrollbottom', this);
},
handleEvent: function(e) {
if (this.stopped) {
return;
}
if (e.type === 'plusscrollbottom') {
if (this.bottomPocket) {
this.pullupLoading();
}
}
}
};
PlusPullRefresh.prototype.refresh = function(isReset) {
if (isReset) {
var classList = this.bottomPocket.classList;
if (classList.contains(CLASS_HIDDEN)) {
classList.remove(CLASS_HIDDEN);
document.addEventListener('plusscrollbottom', this);
}).extend($.extend({
setStopped: function(stopped) { //该方法是子页面调用的
this.stopped = !!stopped;
//TODO 此处需要设置当前webview的bounce为none,目前5+有BUG
var webview = plus.webview.currentWebview();
if (this.stopped) {
webview.setStyle({
bounce: 'none'
});
webview.setBounce({
position: {
top: 'none'
}
});
} else {
var height = this.options.down.height;
webview.setStyle({
bounce: 'vertical'
});
webview.setBounce({
position: {
top: height * 2 + 'px'
},
changeoffset: {
top: height + 'px'
}
});
}
},
pulldownLoading: function() {
//TODO
throw new Error('暂不支持');
},
endPulldownToRefresh: function() { //该方法是子页面调用的
plus.webview.currentWebview().parent().evalJS("mui(document.querySelector('.mui-content')).pullRefresh()._endPulldownToRefresh()");
},
_endPulldownToRefresh: function() { //该方法是父页面调用的
var self = this;
if (self.topPocket && self.options.webview) {
self.options.webview.endPullToRefresh(); //下拉刷新所在webview回弹
self.loading = false;
self._setCaption(self.options.down.contentdown, true);
setTimeout(function() {
self.loading || self.topPocket.classList.remove(CLASS_BLOCK);
}, 350);
}
},
pullupLoading: function() {
var self = this;
if (self.isLoading) return;
self.isLoading = true;
if (self.pulldown !== false) {
self._initPullupRefresh();
} else {
this.pullPocket.classList.add(CLASS_BLOCK);
}
setTimeout(function() {
self.pullLoading.classList.add(CLASS_IN);
self.pullCaption.innerHTML = ''; //修正5+里边第一次加载时，文字显示的bug(还会显示出来个“多”,猜测应该是渲染问题导致的)
self.pullCaption.innerHTML = self.options.up.contentrefresh;
var callback = self.options.up.callback;
callback && callback.call(self);
}, 300);
},
endPullupToRefresh: function(finished) {
var self = this;
if (self.pullLoading) {
self.pullLoading.classList.remove(CLASS_IN);
self.pullCaption.innerHTML = self.options.up.contentdown;
self.isLoading = false;
if (finished) {
self.bottomPocket.classList.remove(CLASS_BLOCK);
self.bottomPocket.classList.add(CLASS_HIDDEN);
document.removeEventListener('plusscrollbottom', self);
} else { //初始化时隐藏，后续不再隐藏
// setTimeout(function() {
// self.loading || self.bottomPocket.classList.remove(CLASS_BLOCK);
// }, 350);
}
}
},
refresh: function(isReset) {
if (isReset) {
var classList = this.bottomPocket.classList;
if (classList.contains(CLASS_HIDDEN)) {
classList.remove(CLASS_HIDDEN);
document.addEventListener('plusscrollbottom', this);
}
}
}
};
}, $.PullRefresh));
//override h5 pullRefresh
$.fn.pullRefresh = function(options) {
if (this.length === 1) {
if (typeof options === 'string') {
options = $.parseJSON(options);
}
var self = this[0];
var pullRefreshApi = null;
var id = self.getAttribute('data-pullrefresh-plus');
if (!id) { //避免重复初始化5+ pullrefresh
document.body.classList.add(CLASS_PLUS_PULLREFRESH);
id = ++$.uuid;
$.data[id] = pullRefreshApi = new PlusPullRefresh(options);
$.data[id] = pullRefreshApi = new PlusPullRefresh(self, options);
self.setAttribute('data-pullrefresh-plus', id);
} else {
pullRefreshApi = $.data[id];
......@@ -3359,7 +3589,7 @@ var mui = (function(document, undefined) {
* @param {type} action
* @returns {undefined}
*/
(function($, window, document, name, undefined) {
(function($, window, document, name) {
var CLASS_OFF_CANVAS_LEFT = 'mui-off-canvas-left';
var CLASS_OFF_CANVAS_RIGHT = 'mui-off-canvas-right';
var CLASS_ACTION_BACKDEOP = 'mui-off-canvas-backdrop';
......@@ -3384,7 +3614,7 @@ var mui = (function(document, undefined) {
}
}
}
}
};
var handle = function(event, target) {
if (target.classList && target.classList.contains(CLASS_ACTION_BACKDEOP)) { //backdrop
var container = findOffCanvasContainer(target);
......@@ -3428,8 +3658,8 @@ var mui = (function(document, undefined) {
body.classList.remove(CLASS_OFF_CANVAS_HEIGHT_FIXED);
content && (content.classList.remove(CLASS_OFF_CANVAS_HEIGHT_FIXED));
}
}
var offCanvasTransitionEnd = function() {
};
var offCanvasTransitionEnd = function(e) {
var container = this.parentNode;
container.classList.remove(CLASS_SLIDING);
this.removeEventListener('webkitTransitionEnd', offCanvasTransitionEnd);
......@@ -3456,7 +3686,7 @@ var mui = (function(document, undefined) {
}
container.classList.add(CLASS_SLIDING);
}
}
};
window.addEventListener('tap', function(event) {
if (!$.targets.offcanvas) {
return;
......@@ -3484,15 +3714,13 @@ var mui = (function(document, undefined) {
* @param {type} $
* @param {type} window
* @param {type} document
* @param {type} action
* @returns {undefined}
*/
(function($, window, document, name, undefined) {
(function($, window, document, undefined) {
//仅android平台不支持拖拽,滑动
if ($.os.android) {
return;
}
var CLASS_SLIDER_HANDLE = 'mui-slider-handle';
var CLASS_OFF_CANVAS_LEFT = 'mui-off-canvas-left';
var CLASS_OFF_CANVAS_RIGHT = 'mui-off-canvas-right';
var CLASS_OFF_CANVAS_WRAP = 'mui-off-canvas-wrap';
......@@ -3529,7 +3757,7 @@ var mui = (function(document, undefined) {
setTranslate(innerContainer, translateX);
}
} else if (direction === 'left' && translateX < 0) { //dragLeft
translateX = Math.max(translateX, -maxOffCanvasWidth)
translateX = Math.max(translateX, -maxOffCanvasWidth);
if (offCanvasTranslateX > 0) {
setTranslate(innerContainer, offCanvasTranslateX + translateX);
} else {
......@@ -3551,22 +3779,22 @@ var mui = (function(document, undefined) {
* TODO repeat with mui.offcanvas.js
*/
var fixedHeight = function(container, isShown) {
var content = container.querySelector('.mui-content');
var html = document.getElementsByTagName('html')[0];
var body = document.body;
if (isShown) {
html.classList.add(CLASS_OFF_CANVAS_HEIGHT_FIXED);
body.classList.add(CLASS_OFF_CANVAS_HEIGHT_FIXED);
content && (content.classList.add(CLASS_OFF_CANVAS_HEIGHT_FIXED));
} else {
html.classList.remove(CLASS_OFF_CANVAS_HEIGHT_FIXED);
body.classList.remove(CLASS_OFF_CANVAS_HEIGHT_FIXED);
content && (content.classList.remove(CLASS_OFF_CANVAS_HEIGHT_FIXED));
}
var content = container.querySelector('.mui-content');
var html = document.getElementsByTagName('html')[0];
var body = document.body;
if (isShown) {
html.classList.add(CLASS_OFF_CANVAS_HEIGHT_FIXED);
body.classList.add(CLASS_OFF_CANVAS_HEIGHT_FIXED);
content && (content.classList.add(CLASS_OFF_CANVAS_HEIGHT_FIXED));
} else {
html.classList.remove(CLASS_OFF_CANVAS_HEIGHT_FIXED);
body.classList.remove(CLASS_OFF_CANVAS_HEIGHT_FIXED);
content && (content.classList.remove(CLASS_OFF_CANVAS_HEIGHT_FIXED));
}
/**
* TODO repeat with mui.offcanvas.js
*/
};
/**
* TODO repeat with mui.offcanvas.js
*/
var offCanvasTransitionEnd = function() {
var container = this.parentNode;
var classList = container.classList;
......@@ -3678,35 +3906,32 @@ var mui = (function(document, undefined) {
}
});
})(mui, window, document, 'offcanvas');
})(mui, window, document);
/**
* actions
* @param {type} $
* @param {type} window
* @param {type} document
* @param {type} action
* @param {type} undefined
* @param {type} name
* @returns {undefined}
*/
(function($, window, document, name, undefined) {
var CLASS_ACTION = 'mui-action';
(function ($, name) {
var CLASS_ACTION = 'mui-action';
var handle = function(event, target) {
if (target.className && ~target.className.indexOf(CLASS_ACTION)) {
return target;
}
return false;
};
var handle = function (event, target) {
if (target.className && ~target.className.indexOf(CLASS_ACTION)) {
return target;
}
return false;
};
$.registerTarget({
name : name,
index : 50,
handle : handle,
target : false,
isContinue: true
});
$.registerTarget({
name: name,
index: 50,
handle: handle,
target: false,
isContinue: true
});
})(mui, window, document, 'action');
})(mui, 'action');
/**
* Modals
......@@ -3714,17 +3939,16 @@ var mui = (function(document, undefined) {
* @param {type} window
* @param {type} document
* @param {type} name
* @param {type} undefined
* @returns {undefined}
*/
(function($, window, document, name, undefined) {
(function($, window, document, name) {
var CLASS_MODAL = 'mui-modal';
var handle = function(event, target) {
if (target.tagName === 'A' && target.hash) {
var modal = document.getElementById(target.hash.replace('#', ''));
if (modal && modal.classList.contains(CLASS_MODAL)) {
event.preventDefault();//fixed hashchange
event.preventDefault(); //fixed hashchange
return modal;
}
}
......@@ -3732,12 +3956,12 @@ var mui = (function(document, undefined) {
};
$.registerTarget({
name : name,
index : 50,
handle : handle,
target : false,
isReset : false,
isContinue : true
name: name,
index: 50,
handle: handle,
target: false,
isReset: false,
isContinue: true
});
window.addEventListener('tap', function(event) {
......@@ -3746,7 +3970,6 @@ var mui = (function(document, undefined) {
}
});
})(mui, window, document, 'modal');
/**
* Popovers
* @param {type} $
......@@ -3756,15 +3979,19 @@ var mui = (function(document, undefined) {
* @param {type} undefined
* @returns {undefined}
*/
(function($, window, document, name, undefined) {
(function($, window, document, name) {
var CLASS_POPOVER = 'mui-popover';
var CLASS_BAR_POPOVER = 'mui-bar-popover';
var CLASS_POPOVER_ARROW = 'mui-popover-arrow';
var CLASS_ACTION_POPOVER = 'mui-popover-action';
var CLASS_BACKDROP = 'mui-backdrop';
var CLASS_BAR_POPOVER = 'mui-bar-popover';
var CLASS_BAR_BACKDROP = 'mui-bar-backdrop';
var CLASS_ACTION_BACKDROP = 'mui-backdrop-action';
var CLASS_ACTIVE = 'mui-active';
var CLASS_BOTTOM = 'mui-bottom';
var handle = function(event, target) {
if (target.tagName === 'A' && target.hash) {
......@@ -3772,6 +3999,8 @@ var mui = (function(document, undefined) {
if ($.targets._popover && $.targets._popover.classList.contains(CLASS_POPOVER)) {
event.preventDefault(); //fixed hashchange
return target;
} else {
$.targets._popover = null;
}
}
return false;
......@@ -3788,13 +4017,13 @@ var mui = (function(document, undefined) {
var fixedPopoverScroll = function(isPopoverScroll) {
if (isPopoverScroll) {
document.body.setAttribute('style', 'position:fixed;width:100%;height:100%;overflow:hidden;');
document.body.setAttribute('style', 'overflow:hidden;');
} else {
document.body.setAttribute('style', '');
}
};
var onPopoverHidden = function() {
this.style.display = 'none';
var onPopoverHidden = function(e) {
this.setAttribute('style', '');
this.removeEventListener('webkitTransitionEnd', onPopoverHidden);
fixedPopoverScroll(false);
};
......@@ -3802,12 +4031,14 @@ var mui = (function(document, undefined) {
var backdrop = (function() {
var element = document.createElement('div');
element.classList.add(CLASS_BACKDROP);
element.addEventListener('touchmove', $.preventDefault);
element.addEventListener('tap', function(e) {
var popover = $.targets._popover;
if (popover) {
popover.addEventListener('webkitTransitionEnd', onPopoverHidden);
popover.classList.remove(CLASS_ACTIVE);
removeBackdrop(popover);
document.body.setAttribute('style', ''); //webkitTransitionEnd有时候不触发？
}
});
......@@ -3815,8 +4046,9 @@ var mui = (function(document, undefined) {
}());
var removeBackdrop = function(popover) {
backdrop.setAttribute('style', 'opacity:0');
$.targets.popover = $.targets._popover = null; //reset
setTimeout(function() {
if (backdrop.parentNode && backdrop.parentNode === popover.parentNode) {
if (!popover.classList.contains(CLASS_ACTIVE) && backdrop.parentNode && backdrop.parentNode === popover.parentNode) {
popover.parentNode.removeChild(backdrop);
}
}, 350);
......@@ -3833,13 +4065,13 @@ var mui = (function(document, undefined) {
backdrop.classList.remove(CLASS_ACTION_BACKDROP);
var _popover = document.querySelector('.mui-popover.mui-active');
if (_popover) {
_popover.style.display = 'none';
_popover.setAttribute('style', '');
_popover.classList.remove(CLASS_ACTIVE);
_popover.removeEventListener('webkitTransitionEnd', onPopoverHidden);
fixedPopoverScroll(false);
removeBackdrop(_popover);
//同一个弹出则直接返回，解决同一个popover的toggle
if (popover === _popover) {
removeBackdrop(_popover);
return;
}
}
......@@ -3848,28 +4080,122 @@ var mui = (function(document, undefined) {
backdrop.classList.add(CLASS_ACTION_BACKDROP);
} else { //bar popover
backdrop.classList.add(CLASS_BAR_BACKDROP);
if (anchor) {
if (anchor.parentNode) {
var offsetWidth = anchor.offsetWidth;
var offsetLeft = anchor.offsetLeft;
var innerWidth = window.innerWidth;
popover.style.left = (Math.min(Math.max(offsetLeft, 5), innerWidth - offsetWidth - 5)) + "px";
} else {
//TODO anchor is position:{left,top,bottom,right}
}
}
// if (anchor) {
// if (anchor.parentNode) {
// var offsetWidth = anchor.offsetWidth;
// var offsetLeft = anchor.offsetLeft;
// var innerWidth = window.innerWidth;
// popover.style.left = (Math.min(Math.max(offsetLeft, defaultPadding), innerWidth - offsetWidth - defaultPadding)) + "px";
// } else {
// //TODO anchor is position:{left,top,bottom,right}
// }
// }
}
}
popover.style.display = 'block';
popover.offsetHeight
popover.classList.add(CLASS_ACTIVE);
backdrop.setAttribute('style', '');
popover.parentNode.appendChild(backdrop);
fixedPopoverScroll(true);
calPosition(popover, anchor); //position
backdrop.classList.add(CLASS_ACTIVE);
};
var calPosition = function(popover, anchor) {
if (!popover || !anchor) {
return;
}
var pWidth = popover.offsetWidth;
var pHeight = popover.offsetHeight;
var aWidth = anchor.offsetWidth;
var aHeight = anchor.offsetHeight;
var offset = $.offset(anchor);
var arrow = popover.querySelector('.' + CLASS_POPOVER_ARROW);
var arrowSize = arrow && arrow.offsetWidth / 2 || 0;
var wWidth = window.innerWidth;
var wHeight = window.innerHeight;
var pTop = 0;
var pLeft = 0;
var diff = 0;
var arrowLeft = 0;
var defaultPadding = popover.classList.contains(CLASS_ACTION_POPOVER) ? 0 : 5;
var position = 'top';
if ((pHeight + arrowSize) < offset.top) { //top
pTop = offset.top - pHeight - arrowSize;
} else if ((pHeight + arrowSize) < (wHeight - offset.top - aHeight)) { //bottom
position = 'bottom';
pTop = offset.top + aHeight + arrowSize;
} else { //middle
position = 'middle';
pTop = aHeight / 2 + offset.top - pHeight / 2;
diff = pTop;
if (pTop < 0) {
pTop = defaultPadding;
} else if (pTop + pHeight > wHeight) {
pTop = wHeight - pHeight - defaultPadding;
}
diff = diff - pTop;
}
if (position === 'top' || position === 'bottom') {
pLeft = aWidth / 2 + offset.left - pWidth / 2;
diff = pLeft;
if (pLeft < defaultPadding) pLeft = defaultPadding;
if (pLeft + pWidth > wWidth) pLeft = wWidth - pWidth - defaultPadding;
if (arrow) {
if (position === 'top') {
arrow.classList.add(CLASS_BOTTOM);
} else {
arrow.classList.remove(CLASS_BOTTOM);
}
diff = diff - pLeft;
arrowLeft = (pWidth / 2 - arrowSize / 2 + diff);
arrowLeft = Math.max(Math.min(arrowLeft, pWidth - arrowSize * 2 - 6), 6);
arrow.setAttribute('style', 'left:' + arrowLeft + 'px');
}
} else if (position === 'middle') {
//TODO hide angle
}
popover.setAttribute('style', 'display:block;top:' + pTop + 'px;left:' + pLeft + 'px;');
};
$.createMask = function(callback) {
var element = document.createElement('div');
element.classList.add(CLASS_BACKDROP);
element.addEventListener('touchmove', $.preventDefault);
element.addEventListener('tap', function() {
callback && callback();
mask.close();
});
var mask = [element];
mask._show = false;
mask.show = function() {
this._show = true;
element.setAttribute('style', 'opacity:1');
document.body.appendChild(element);
return this;
};
mask._remove = function() {
if (this._show) {
this._show = false;
element.setAttribute('style', 'opacity:0');
setTimeout(function() {
document.body.removeChild(element);
}, 350);
}
return this;
};
mask.close = function() {
return this._remove();
};
return mask;
};
$.fn.popover = function() {
var args = arguments;
this.each(function() {
......@@ -3898,7 +4224,9 @@ var mui = (function(document, undefined) {
var handle = function(event, target) {
if (target.classList && (target.classList.contains(CLASS_CONTROL_ITEM) || target.classList.contains(CLASS_TAB_ITEM))) {
// if (target.hash) {
return target;
// }
}
return false;
};
......@@ -3949,10 +4277,11 @@ var mui = (function(document, undefined) {
if (isLastActive) { //same
return;
}
activeBodies = targetBody.parentNode.getElementsByClassName(className);
var parentNode = targetBody.parentNode;
activeBodies = parentNode.querySelectorAll('.' + CLASS_CONTROL_CONTENT + classSelector);
for (var i = 0; i < activeBodies.length; i++) {
activeBodies[i].classList.remove(className);
var activeBody = activeBodies[i];
activeBody.parentNode === parentNode && activeBody.classList.remove(className);
}
targetBody.classList.add(className);
......@@ -3970,12 +4299,10 @@ var mui = (function(document, undefined) {
* Toggles switch
* @param {type} $
* @param {type} window
* @param {type} document
* @param {type} name
* @param {type} undefined
* @returns {undefined}
*/
(function($, window, document, name, undefined) {
(function($, window, name) {
var CLASS_SWITCH = 'mui-switch';
var CLASS_SWITCH_HANDLE = 'mui-switch-handle';
......@@ -4058,16 +4385,15 @@ var mui = (function(document, undefined) {
window.addEventListener('drag', dragToggle);
window.addEventListener('dragend', switchToggle);
})(mui, window, document, 'toggle');
})(mui, window, 'toggle');
/**
* Tableviews
* @param {type} $
* @param {type} window
* @param {type} document
* @param {type} undefined
* @returns {undefined}
*/
(function($, window, document, undefined) {
(function($, window, document) {
var CLASS_ACTIVE = 'mui-active';
var CLASS_SELECTED = 'mui-selected';
......@@ -4198,7 +4524,7 @@ var mui = (function(document, undefined) {
cell.classList.remove(CLASS_SELECTED);
}
}
}
};
var toggleSliderRightAction = function(show, trigger) {
if (sliderRight) { //显示
sliderRight.setAttribute('style', '');
......@@ -4214,7 +4540,7 @@ var mui = (function(document, undefined) {
cell.classList.remove(CLASS_SELECTED);
}
}
}
};
var toggleSliderHandle = function(show) {
if (sliderHandle) {
if (show) {
......@@ -4225,7 +4551,7 @@ var mui = (function(document, undefined) {
cell.classList.remove(CLASS_SELECTED);
}
}
}
};
var endDraging = function(isSwipe, detail) {
isDraging = false;
if (sliderRequestAnimationFrame) {
......@@ -4308,7 +4634,7 @@ var mui = (function(document, undefined) {
if (classList.contains(CLASS_TABLE_VIEW_CELL)) {
cell = target;
var selected = cell.parentNode.querySelector('.' + CLASS_SELECTED);
if (selected && selected != cell) {
if (selected && selected !== cell) {
selected.classList.remove(CLASS_SELECTED);
var selectedSliderHandle = selected.querySelector(SELECTOR_SLIDER_HANDLE);
if (selectedSliderHandle) {
......@@ -4476,7 +4802,7 @@ var mui = (function(document, undefined) {
}
event.stopPropagation();
}
}
};
function toggleEvents(element, isRemove) {
var method = !!isRemove ? 'removeEventListener' : 'addEventListener';
......@@ -4504,20 +4830,20 @@ var mui = (function(document, undefined) {
sliderHandle && toggleEvents(cell, true);
});
var radioOrCheckboxClick = function() {
var classList = cell.classList;
if (classList.contains('mui-radio')) {
var input = cell.querySelector('input[type=radio]');
if (input) {
input.click();
}
} else if (classList.contains('mui-checkbox')) {
var input = cell.querySelector('input[type=checkbox]');
if (input) {
input.click();
}
var classList = cell.classList;
if (classList.contains('mui-radio')) {
var input = cell.querySelector('input[type=radio]');
if (input) {
input.click();
}
} else if (classList.contains('mui-checkbox')) {
var input = cell.querySelector('input[type=checkbox]');
if (input) {
input.click();
}
}
//fixed hashchange(android)
};
//fixed hashchange(android)
window.addEventListener($.EVENT_CLICK, function(e) {
if (cell && cell.classList.contains('mui-collapse')) {
e.preventDefault();
......@@ -4677,10 +5003,9 @@ var mui = (function(document, undefined) {
* @param {type} $
* @param {type} window
* @param {type} document
* @param {type} undefined
* @returns {undefined}
*/
(function($, window, document, undefined) {
(function($, window, document) {
var CLASS_ICON = 'mui-icon';
var CLASS_ICON_CLEAR = 'mui-icon-clear';
var CLASS_ICON_SPEECH = 'mui-icon-speech';
......@@ -4702,7 +5027,7 @@ var mui = (function(document, undefined) {
}
}
return null;
}
};
var Input = function(element, options) {
this.element = element;
this.options = options || {
......@@ -4742,17 +5067,19 @@ var mui = (function(document, undefined) {
if (self.searchActionClass) {
self.searchAction = self.createAction(row, self.searchActionClass, self.searchActionSelector);
self.searchAction.addEventListener('tap', function(e) {
setTimeout(function() {
if($.os.ios){
setTimeout(function(){
self.element.focus();
},10);
}else{
self.element.focus();
}, 10);
}
e.stopPropagation();
});
}
if (self.speechActionClass) {
self.speechAction = self.createAction(row, self.speechActionClass, self.speechActionSelector);
self.speechAction.addEventListener('click', function(event) {
event.stopPropagation();
});
self.speechAction.addEventListener('click', $.stopPropagation);
self.speechAction.addEventListener('tap', function(event) {
self.speechActionClick(event);
});
......
dist/js/mui.min.js
View file @ 1685cf20
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/js/mui.tpl.js
View file @ 1685cf20
/*!
* =====================================================
* Mui v0.7.1 (https://github.com/dcloudio/mui)
* Mui v0.8.0 (https://github.com/dcloudio/mui)
* =====================================================
*/
/*!
......
dist/js/mui.tpl.min.js
View file @ 1685cf20
/*!
* =====================================================
* Mui v0.7.1 (https://github.com/dcloudio/mui)
* Mui v0.8.0 (https://github.com/dcloudio/mui)
* =====================================================
*/
!function(a,b){"function"==typeof define&&define.amd?define([],b):"object"==typeof exports?module.exports=b():a.Handlebars=a.Handlebars||b()}(this,function(){var a=function(){"use strict";function a(a){this.string=a}var b;return a.prototype.toString=function(){return""+this.string},b=a}(),b=function(a){"use strict";function b(a){return i[a]}function c(a){for(var b=1;b<arguments.length;b++)for(var c in arguments[b])Object.prototype.hasOwnProperty.call(arguments[b],c)&&(a[c]=arguments[b][c]);return a}function d(a){return a instanceof h?a.toString():null==a?"":a?(a=""+a,k.test(a)?a.replace(j,b):a):a+""}function e(a){return a||0===a?n(a)&&0===a.length?!0:!1:!0}function f(a,b){return(a?a+".":"")+b}var g={},h=a,i={"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#x27;","`":"&#x60;"},j=/[&<>"'`]/g,k=/[&<>"'`]/;g.extend=c;var l=Object.prototype.toString;g.toString=l;var m=function(a){return"function"==typeof a};m(/x/)&&(m=function(a){return"function"==typeof a&&"[object Function]"===l.call(a)});var m;g.isFunction=m;var n=Array.isArray||function(a){return a&&"object"==typeof a?"[object Array]"===l.call(a):!1};return g.isArray=n,g.escapeExpression=d,g.isEmpty=e,g.appendContextPath=f,g}(a),c=function(){"use strict";function a(a,b){var d;b&&b.firstLine&&(d=b.firstLine,a+=" - "+d+":"+b.firstColumn);for(var e=Error.prototype.constructor.call(this,a),f=0;f<c.length;f++)this[c[f]]=e[c[f]];d&&(this.lineNumber=d,this.column=b.firstColumn)}var b,c=["description","fileName","lineNumber","message","name","number","stack"];return a.prototype=new Error,b=a}(),d=function(a,b){"use strict";function c(a,b){this.helpers=a||{},this.partials=b||{},d(this)}function d(a){a.registerHelper("helperMissing",function(){if(1===arguments.length)return void 0;throw new g("Missing helper: '"+arguments[arguments.length-1].name+"'")}),a.registerHelper("blockHelperMissing",function(b,c){var d=c.inverse,e=c.fn;if(b===!0)return e(this);if(b===!1||null==b)return d(this);if(k(b))return b.length>0?(c.ids&&(c.ids=[c.name]),a.helpers.each(b,c)):d(this);if(c.data&&c.ids){var g=q(c.data);g.contextPath=f.appendContextPath(c.data.contextPath,c.name),c={data:g}}return e(b,c)}),a.registerHelper("each",function(a,b){if(!b)throw new g("Must pass iterator to #each");var c,d,e=b.fn,h=b.inverse,i=0,j="";if(b.data&&b.ids&&(d=f.appendContextPath(b.data.contextPath,b.ids[0])+"."),l(a)&&(a=a.call(this)),b.data&&(c=q(b.data)),a&&"object"==typeof a)if(k(a))for(var m=a.length;m>i;i++)c&&(c.index=i,c.first=0===i,c.last=i===a.length-1,d&&(c.contextPath=d+i)),j+=e(a[i],{data:c});else for(var n in a)a.hasOwnProperty(n)&&(c&&(c.key=n,c.index=i,c.first=0===i,d&&(c.contextPath=d+n)),j+=e(a[n],{data:c}),i++);return 0===i&&(j=h(this)),j}),a.registerHelper("if",function(a,b){return l(a)&&(a=a.call(this)),!b.hash.includeZero&&!a||f.isEmpty(a)?b.inverse(this):b.fn(this)}),a.registerHelper("unless",function(b,c){return a.helpers["if"].call(this,b,{fn:c.inverse,inverse:c.fn,hash:c.hash})}),a.registerHelper("with",function(a,b){l(a)&&(a=a.call(this));var c=b.fn;if(f.isEmpty(a))return b.inverse(this);if(b.data&&b.ids){var d=q(b.data);d.contextPath=f.appendContextPath(b.data.contextPath,b.ids[0]),b={data:d}}return c(a,b)}),a.registerHelper("log",function(b,c){var d=c.data&&null!=c.data.level?parseInt(c.data.level,10):1;a.log(d,b)}),a.registerHelper("lookup",function(a,b){return a&&a[b]})}var e={},f=a,g=b,h="2.0.0";e.VERSION=h;var i=6;e.COMPILER_REVISION=i;var j={1:"<= 1.0.rc.2",2:"== 1.0.0-rc.3",3:"== 1.0.0-rc.4",4:"== 1.x.x",5:"== 2.0.0-alpha.x",6:">= 2.0.0-beta.1"};e.REVISION_CHANGES=j;var k=f.isArray,l=f.isFunction,m=f.toString,n="[object Object]";e.HandlebarsEnvironment=c,c.prototype={constructor:c,logger:o,log:p,registerHelper:function(a,b){if(m.call(a)===n){if(b)throw new g("Arg not supported with multiple helpers");f.extend(this.helpers,a)}else this.helpers[a]=b},unregisterHelper:function(a){delete this.helpers[a]},registerPartial:function(a,b){m.call(a)===n?f.extend(this.partials,a):this.partials[a]=b},unregisterPartial:function(a){delete this.partials[a]}};var o={methodMap:{0:"debug",1:"info",2:"warn",3:"error"},DEBUG:0,INFO:1,WARN:2,ERROR:3,level:3,log:function(a,b){if(o.level<=a){var c=o.methodMap[a];"undefined"!=typeof console&&console[c]&&console[c].call(console,b)}}};e.logger=o;var p=o.log;e.log=p;var q=function(a){var b=f.extend({},a);return b._parent=a,b};return e.createFrame=q,e}(b,c),e=function(a,b,c){"use strict";function d(a){var b=a&&a[0]||1,c=m;if(b!==c){if(c>b){var d=n[c],e=n[b];throw new l("Template was precompiled with an older version of Handlebars than the current runtime. Please update your precompiler to a newer version ("+d+") or downgrade your runtime to an older version ("+e+").")}throw new l("Template was precompiled with a newer version of Handlebars than the current runtime. Please update your runtime to a newer version ("+a[1]+").")}}function e(a,b){if(!b)throw new l("No environment passed to template");if(!a||!a.main)throw new l("Unknown template object: "+typeof a);b.VM.checkRevision(a.compiler);var c=function(c,d,e,f,g,h,i,j,m){g&&(f=k.extend({},f,g));var n=b.VM.invokePartial.call(this,c,e,f,h,i,j,m);if(null==n&&b.compile){var o={helpers:h,partials:i,data:j,depths:m};i[e]=b.compile(c,{data:void 0!==j,compat:a.compat},b),n=i[e](f,o)}if(null!=n){if(d){for(var p=n.split("\n"),q=0,r=p.length;r>q&&(p[q]||q+1!==r);q++)p[q]=d+p[q];n=p.join("\n")}return n}throw new l("The partial "+e+" could not be compiled when running in runtime-only mode")},d={lookup:function(a,b){for(var c=a.length,d=0;c>d;d++)if(a[d]&&null!=a[d][b])return a[d][b]},lambda:function(a,b){return"function"==typeof a?a.call(b):a},escapeExpression:k.escapeExpression,invokePartial:c,fn:function(b){return a[b]},programs:[],program:function(a,b,c){var d=this.programs[a],e=this.fn(a);return b||c?d=f(this,a,e,b,c):d||(d=this.programs[a]=f(this,a,e)),d},data:function(a,b){for(;a&&b--;)a=a._parent;return a},merge:function(a,b){var c=a||b;return a&&b&&a!==b&&(c=k.extend({},b,a)),c},noop:b.VM.noop,compilerInfo:a.compiler},e=function(b,c){c=c||{};var f=c.data;e._setup(c),!c.partial&&a.useData&&(f=i(b,f));var g;return a.useDepths&&(g=c.depths?[b].concat(c.depths):[b]),a.main.call(d,b,d.helpers,d.partials,f,g)};return e.isTop=!0,e._setup=function(c){c.partial?(d.helpers=c.helpers,d.partials=c.partials):(d.helpers=d.merge(c.helpers,b.helpers),a.usePartial&&(d.partials=d.merge(c.partials,b.partials)))},e._child=function(b,c,e){if(a.useDepths&&!e)throw new l("must pass parent depths");return f(d,b,a[b],c,e)},e}function f(a,b,c,d,e){var f=function(b,f){return f=f||{},c.call(a,b,a.helpers,a.partials,f.data||d,e&&[b].concat(e))};return f.program=b,f.depth=e?e.length:0,f}function g(a,b,c,d,e,f,g){var h={partial:!0,helpers:d,partials:e,data:f,depths:g};if(void 0===a)throw new l("The partial "+b+" could not be found");return a instanceof Function?a(c,h):void 0}function h(){return""}function i(a,b){return b&&"root"in b||(b=b?o(b):{},b.root=a),b}var j={},k=a,l=b,m=c.COMPILER_REVISION,n=c.REVISION_CHANGES,o=c.createFrame;return j.checkRevision=d,j.template=e,j.program=f,j.invokePartial=g,j.noop=h,j}(b,c,d),f=function(a,b,c,d,e){"use strict";var f,g=a,h=b,i=c,j=d,k=e,l=function(){var a=new g.HandlebarsEnvironment;return j.extend(a,g),a.SafeString=h,a.Exception=i,a.Utils=j,a.escapeExpression=j.escapeExpression,a.VM=k,a.template=function(b){return k.template(b,a)},a},m=l();return m.create=l,m["default"]=m,f=m}(d,a,c,b,e),g=function(a){"use strict";function b(a){a=a||{},this.firstLine=a.first_line,this.firstColumn=a.first_column,this.lastColumn=a.last_column,this.lastLine=a.last_line}var c,d=a,e={ProgramNode:function(a,c,d){b.call(this,d),this.type="program",this.statements=a,this.strip=c},MustacheNode:function(a,c,d,f,g){if(b.call(this,g),this.type="mustache",this.strip=f,null!=d&&d.charAt){var h=d.charAt(3)||d.charAt(2);this.escaped="{"!==h&&"&"!==h}else this.escaped=!!d;this.sexpr=a instanceof e.SexprNode?a:new e.SexprNode(a,c),this.id=this.sexpr.id,this.params=this.sexpr.params,this.hash=this.sexpr.hash,this.eligibleHelper=this.sexpr.eligibleHelper,this.isHelper=this.sexpr.isHelper},SexprNode:function(a,c,d){b.call(this,d),this.type="sexpr",this.hash=c;var e=this.id=a[0],f=this.params=a.slice(1);this.isHelper=!(!f.length&&!c),this.eligibleHelper=this.isHelper||e.isSimple},PartialNode:function(a,c,d,e,f){b.call(this,f),this.type="partial",this.partialName=a,this.context=c,this.hash=d,this.strip=e,this.strip.inlineStandalone=!0},BlockNode:function(a,c,d,e,f){b.call(this,f),this.type="block",this.mustache=a,this.program=c,this.inverse=d,this.strip=e,d&&!c&&(this.isInverse=!0)},RawBlockNode:function(a,c,f,g){if(b.call(this,g),a.sexpr.id.original!==f)throw new d(a.sexpr.id.original+" doesn't match "+f,this);c=new e.ContentNode(c,g),this.type="block",this.mustache=a,this.program=new e.ProgramNode([c],{},g)},ContentNode:function(a,c){b.call(this,c),this.type="content",this.original=this.string=a},HashNode:function(a,c){b.call(this,c),this.type="hash",this.pairs=a},IdNode:function(a,c){b.call(this,c),this.type="ID";for(var e="",f=[],g=0,h="",i=0,j=a.length;j>i;i++){var k=a[i].part;if(e+=(a[i].separator||"")+k,".."===k||"."===k||"this"===k){if(f.length>0)throw new d("Invalid path: "+e,this);".."===k?(g++,h+="../"):this.isScoped=!0}else f.push(k)}this.original=e,this.parts=f,this.string=f.join("."),this.depth=g,this.idName=h+this.string,this.isSimple=1===a.length&&!this.isScoped&&0===g,this.stringModeValue=this.string},PartialNameNode:function(a,c){b.call(this,c),this.type="PARTIAL_NAME",this.name=a.original},DataNode:function(a,c){b.call(this,c),this.type="DATA",this.id=a,this.stringModeValue=a.stringModeValue,this.idName="@"+a.stringModeValue},StringNode:function(a,c){b.call(this,c),this.type="STRING",this.original=this.string=this.stringModeValue=a},NumberNode:function(a,c){b.call(this,c),this.type="NUMBER",this.original=this.number=a,this.stringModeValue=Number(a)},BooleanNode:function(a,c){b.call(this,c),this.type="BOOLEAN",this.bool=a,this.stringModeValue="true"===a},CommentNode:function(a,c){b.call(this,c),this.type="comment",this.comment=a,this.strip={inlineStandalone:!0}}};return c=e}(c),h=function(){"use strict";var a,b=function(){function a(){this.yy={}}var b={trace:function(){},yy:{},symbols_:{error:2,root:3,program:4,EOF:5,program_repetition0:6,statement:7,mustache:8,block:9,rawBlock:10,partial:11,CONTENT:12,COMMENT:13,openRawBlock:14,END_RAW_BLOCK:15,OPEN_RAW_BLOCK:16,sexpr:17,CLOSE_RAW_BLOCK:18,openBlock:19,block_option0:20,closeBlock:21,openInverse:22,block_option1:23,OPEN_BLOCK:24,CLOSE:25,OPEN_INVERSE:26,inverseAndProgram:27,INVERSE:28,OPEN_ENDBLOCK:29,path:30,OPEN:31,OPEN_UNESCAPED:32,CLOSE_UNESCAPED:33,OPEN_PARTIAL:34,partialName:35,param:36,partial_option0:37,partial_option1:38,sexpr_repetition0:39,sexpr_option0:40,dataName:41,STRING:42,NUMBER:43,BOOLEAN:44,OPEN_SEXPR:45,CLOSE_SEXPR:46,hash:47,hash_repetition_plus0:48,hashSegment:49,ID:50,EQUALS:51,DATA:52,pathSegments:53,SEP:54,$accept:0,$end:1},terminals_:{2:"error",5:"EOF",12:"CONTENT",13:"COMMENT",15:"END_RAW_BLOCK",16:"OPEN_RAW_BLOCK",18:"CLOSE_RAW_BLOCK",24:"OPEN_BLOCK",25:"CLOSE",26:"OPEN_INVERSE",28:"INVERSE",29:"OPEN_ENDBLOCK",31:"OPEN",32:"OPEN_UNESCAPED",33:"CLOSE_UNESCAPED",34:"OPEN_PARTIAL",42:"STRING",43:"NUMBER",44:"BOOLEAN",45:"OPEN_SEXPR",46:"CLOSE_SEXPR",50:"ID",51:"EQUALS",52:"DATA",54:"SEP"},productions_:[0,[3,2],[4,1],[7,1],[7,1],[7,1],[7,1],[7,1],[7,1],[10,3],[14,3],[9,4],[9,4],[19,3],[22,3],[27,2],[21,3],[8,3],[8,3],[11,5],[11,4],[17,3],[17,1],[36,1],[36,1],[36,1],[36,1],[36,1],[36,3],[47,1],[49,3],[35,1],[35,1],[35,1],[41,2],[30,1],[53,3],[53,1],[6,0],[6,2],[20,0],[20,1],[23,0],[23,1],[37,0],[37,1],[38,0],[38,1],[39,0],[39,2],[40,0],[40,1],[48,1],[48,2]],performAction:function(a,b,c,d,e,f){var g=f.length-1;switch(e){case 1:return d.prepareProgram(f[g-1].statements,!0),f[g-1];case 2:this.$=new d.ProgramNode(d.prepareProgram(f[g]),{},this._$);break;case 3:this.$=f[g];break;case 4:this.$=f[g];break;case 5:this.$=f[g];break;case 6:this.$=f[g];break;case 7:this.$=new d.ContentNode(f[g],this._$);break;case 8:this.$=new d.CommentNode(f[g],this._$);break;case 9:this.$=new d.RawBlockNode(f[g-2],f[g-1],f[g],this._$);break;case 10:this.$=new d.MustacheNode(f[g-1],null,"","",this._$);break;case 11:this.$=d.prepareBlock(f[g-3],f[g-2],f[g-1],f[g],!1,this._$);break;case 12:this.$=d.prepareBlock(f[g-3],f[g-2],f[g-1],f[g],!0,this._$);break;case 13:this.$=new d.MustacheNode(f[g-1],null,f[g-2],d.stripFlags(f[g-2],f[g]),this._$);break;case 14:this.$=new d.MustacheNode(f[g-1],null,f[g-2],d.stripFlags(f[g-2],f[g]),this._$);break;case 15:this.$={strip:d.stripFlags(f[g-1],f[g-1]),program:f[g]};break;case 16:this.$={path:f[g-1],strip:d.stripFlags(f[g-2],f[g])};break;case 17:this.$=new d.MustacheNode(f[g-1],null,f[g-2],d.stripFlags(f[g-2],f[g]),this._$);break;case 18:this.$=new d.MustacheNode(f[g-1],null,f[g-2],d.stripFlags(f[g-2],f[g]),this._$);break;case 19:this.$=new d.PartialNode(f[g-3],f[g-2],f[g-1],d.stripFlags(f[g-4],f[g]),this._$);break;case 20:this.$=new d.PartialNode(f[g-2],void 0,f[g-1],d.stripFlags(f[g-3],f[g]),this._$);break;case 21:this.$=new d.SexprNode([f[g-2]].concat(f[g-1]),f[g],this._$);break;case 22:this.$=new d.SexprNode([f[g]],null,this._$);break;case 23:this.$=f[g];break;case 24:this.$=new d.StringNode(f[g],this._$);break;case 25:this.$=new d.NumberNode(f[g],this._$);break;case 26:this.$=new d.BooleanNode(f[g],this._$);break;case 27:this.$=f[g];break;case 28:f[g-1].isHelper=!0,this.$=f[g-1];break;case 29:this.$=new d.HashNode(f[g],this._$);break;case 30:this.$=[f[g-2],f[g]];break;case 31:this.$=new d.PartialNameNode(f[g],this._$);break;case 32:this.$=new d.PartialNameNode(new d.StringNode(f[g],this._$),this._$);break;case 33:this.$=new d.PartialNameNode(new d.NumberNode(f[g],this._$));break;case 34:this.$=new d.DataNode(f[g],this._$);break;case 35:this.$=new d.IdNode(f[g],this._$);break;case 36:f[g-2].push({part:f[g],separator:f[g-1]}),this.$=f[g-2];break;case 37:this.$=[{part:f[g]}];break;case 38:this.$=[];break;case 39:f[g-1].push(f[g]);break;case 48:this.$=[];break;case 49:f[g-1].push(f[g]);break;case 52:this.$=[f[g]];break;case 53:f[g-1].push(f[g])}},table:[{3:1,4:2,5:[2,38],6:3,12:[2,38],13:[2,38],16:[2,38],24:[2,38],26:[2,38],31:[2,38],32:[2,38],34:[2,38]},{1:[3]},{5:[1,4]},{5:[2,2],7:5,8:6,9:7,10:8,11:9,12:[1,10],13:[1,11],14:16,16:[1,20],19:14,22:15,24:[1,18],26:[1,19],28:[2,2],29:[2,2],31:[1,12],32:[1,13],34:[1,17]},{1:[2,1]},{5:[2,39],12:[2,39],13:[2,39],16:[2,39],24:[2,39],26:[2,39],28:[2,39],29:[2,39],31:[2,39],32:[2,39],34:[2,39]},{5:[2,3],12:[2,3],13:[2,3],16:[2,3],24:[2,3],26:[2,3],28:[2,3],29:[2,3],31:[2,3],32:[2,3],34:[2,3]},{5:[2,4],12:[2,4],13:[2,4],16:[2,4],24:[2,4],26:[2,4],28:[2,4],29:[2,4],31:[2,4],32:[2,4],34:[2,4]},{5:[2,5],12:[2,5],13:[2,5],16:[2,5],24:[2,5],26:[2,5],28:[2,5],29:[2,5],31:[2,5],32:[2,5],34:[2,5]},{5:[2,6],12:[2,6],13:[2,6],16:[2,6],24:[2,6],26:[2,6],28:[2,6],29:[2,6],31:[2,6],32:[2,6],34:[2,6]},{5:[2,7],12:[2,7],13:[2,7],16:[2,7],24:[2,7],26:[2,7],28:[2,7],29:[2,7],31:[2,7],32:[2,7],34:[2,7]},{5:[2,8],12:[2,8],13:[2,8],16:[2,8],24:[2,8],26:[2,8],28:[2,8],29:[2,8],31:[2,8],32:[2,8],34:[2,8]},{17:21,30:22,41:23,50:[1,26],52:[1,25],53:24},{17:27,30:22,41:23,50:[1,26],52:[1,25],53:24},{4:28,6:3,12:[2,38],13:[2,38],16:[2,38],24:[2,38],26:[2,38],28:[2,38],29:[2,38],31:[2,38],32:[2,38],34:[2,38]},{4:29,6:3,12:[2,38],13:[2,38],16:[2,38],24:[2,38],26:[2,38],28:[2,38],29:[2,38],31:[2,38],32:[2,38],34:[2,38]},{12:[1,30]},{30:32,35:31,42:[1,33],43:[1,34],50:[1,26],53:24},{17:35,30:22,41:23,50:[1,26],52:[1,25],53:24},{17:36,30:22,41:23,50:[1,26],52:[1,25],53:24},{17:37,30:22,41:23,50:[1,26],52:[1,25],53:24},{25:[1,38]},{18:[2,48],25:[2,48],33:[2,48],39:39,42:[2,48],43:[2,48],44:[2,48],45:[2,48],46:[2,48],50:[2,48],52:[2,48]},{18:[2,22],25:[2,22],33:[2,22],46:[2,22]},{18:[2,35],25:[2,35],33:[2,35],42:[2,35],43:[2,35],44:[2,35],45:[2,35],46:[2,35],50:[2,35],52:[2,35],54:[1,40]},{30:41,50:[1,26],53:24},{18:[2,37],25:[2,37],33:[2,37],42:[2,37],43:[2,37],44:[2,37],45:[2,37],46:[2,37],50:[2,37],52:[2,37],54:[2,37]},{33:[1,42]},{20:43,27:44,28:[1,45],29:[2,40]},{23:46,27:47,28:[1,45],29:[2,42]},{15:[1,48]},{25:[2,46],30:51,36:49,38:50,41:55,42:[1,52],43:[1,53],44:[1,54],45:[1,56],47:57,48:58,49:60,50:[1,59],52:[1,25],53:24},{25:[2,31],42:[2,31],43:[2,31],44:[2,31],45:[2,31],50:[2,31],52:[2,31]},{25:[2,32],42:[2,32],43:[2,32],44:[2,32],45:[2,32],50:[2,32],52:[2,32]},{25:[2,33],42:[2,33],43:[2,33],44:[2,33],45:[2,33],50:[2,33],52:[2,33]},{25:[1,61]},{25:[1,62]},{18:[1,63]},{5:[2,17],12:[2,17],13:[2,17],16:[2,17],24:[2,17],26:[2,17],28:[2,17],29:[2,17],31:[2,17],32:[2,17],34:[2,17]},{18:[2,50],25:[2,50],30:51,33:[2,50],36:65,40:64,41:55,42:[1,52],43:[1,53],44:[1,54],45:[1,56],46:[2,50],47:66,48:58,49:60,50:[1,59],52:[1,25],53:24},{50:[1,67]},{18:[2,34],25:[2,34],33:[2,34],42:[2,34],43:[2,34],44:[2,34],45:[2,34],46:[2,34],50:[2,34],52:[2,34]},{5:[2,18],12:[2,18],13:[2,18],16:[2,18],24:[2,18],26:[2,18],28:[2,18],29:[2,18],31:[2,18],32:[2,18],34:[2,18]},{21:68,29:[1,69]},{29:[2,41]},{4:70,6:3,12:[2,38],13:[2,38],16:[2,38],24:[2,38],26:[2,38],29:[2,38],31:[2,38],32:[2,38],34:[2,38]},{21:71,29:[1,69]},{29:[2,43]},{5:[2,9],12:[2,9],13:[2,9],16:[2,9],24:[2,9],26:[2,9],28:[2,9],29:[2,9],31:[2,9],32:[2,9],34:[2,9]},{25:[2,44],37:72,47:73,48:58,49:60,50:[1,74]},{25:[1,75]},{18:[2,23],25:[2,23],33:[2,23],42:[2,23],43:[2,23],44:[2,23],45:[2,23],46:[2,23],50:[2,23],52:[2,23]},{18:[2,24],25:[2,24],33:[2,24],42:[2,24],43:[2,24],44:[2,24],45:[2,24],46:[2,24],50:[2,24],52:[2,24]},{18:[2,25],25:[2,25],33:[2,25],42:[2,25],43:[2,25],44:[2,25],45:[2,25],46:[2,25],50:[2,25],52:[2,25]},{18:[2,26],25:[2,26],33:[2,26],42:[2,26],43:[2,26],44:[2,26],45:[2,26],46:[2,26],50:[2,26],52:[2,26]},{18:[2,27],25:[2,27],33:[2,27],42:[2,27],43:[2,27],44:[2,27],45:[2,27],46:[2,27],50:[2,27],52:[2,27]},{17:76,30:22,41:23,50:[1,26],52:[1,25],53:24},{25:[2,47]},{18:[2,29],25:[2,29],33:[2,29],46:[2,29],49:77,50:[1,74]},{18:[2,37],25:[2,37],33:[2,37],42:[2,37],43:[2,37],44:[2,37],45:[2,37],46:[2,37],50:[2,37],51:[1,78],52:[2,37],54:[2,37]},{18:[2,52],25:[2,52],33:[2,52],46:[2,52],50:[2,52]},{12:[2,13],13:[2,13],16:[2,13],24:[2,13],26:[2,13],28:[2,13],29:[2,13],31:[2,13],32:[2,13],34:[2,13]},{12:[2,14],13:[2,14],16:[2,14],24:[2,14],26:[2,14],28:[2,14],29:[2,14],31:[2,14],32:[2,14],34:[2,14]},{12:[2,10]},{18:[2,21],25:[2,21],33:[2,21],46:[2,21]},{18:[2,49],25:[2,49],33:[2,49],42:[2,49],43:[2,49],44:[2,49],45:[2,49],46:[2,49],50:[2,49],52:[2,49]},{18:[2,51],25:[2,51],33:[2,51],46:[2,51]},{18:[2,36],25:[2,36],33:[2,36],42:[2,36],43:[2,36],44:[2,36],45:[2,36],46:[2,36],50:[2,36],52:[2,36],54:[2,36]},{5:[2,11],12:[2,11],13:[2,11],16:[2,11],24:[2,11],26:[2,11],28:[2,11],29:[2,11],31:[2,11],32:[2,11],34:[2,11]},{30:79,50:[1,26],53:24},{29:[2,15]},{5:[2,12],12:[2,12],13:[2,12],16:[2,12],24:[2,12],26:[2,12],28:[2,12],29:[2,12],31:[2,12],32:[2,12],34:[2,12]},{25:[1,80]},{25:[2,45]},{51:[1,78]},{5:[2,20],12:[2,20],13:[2,20],16:[2,20],24:[2,20],26:[2,20],28:[2,20],29:[2,20],31:[2,20],32:[2,20],34:[2,20]},{46:[1,81]},{18:[2,53],25:[2,53],33:[2,53],46:[2,53],50:[2,53]},{30:51,36:82,41:55,42:[1,52],43:[1,53],44:[1,54],45:[1,56],50:[1,26],52:[1,25],53:24},{25:[1,83]},{5:[2,19],12:[2,19],13:[2,19],16:[2,19],24:[2,19],26:[2,19],28:[2,19],29:[2,19],31:[2,19],32:[2,19],34:[2,19]},{18:[2,28],25:[2,28],33:[2,28],42:[2,28],43:[2,28],44:[2,28],45:[2,28],46:[2,28],50:[2,28],52:[2,28]},{18:[2,30],25:[2,30],33:[2,30],46:[2,30],50:[2,30]},{5:[2,16],12:[2,16],13:[2,16],16:[2,16],24:[2,16],26:[2,16],28:[2,16],29:[2,16],31:[2,16],32:[2,16],34:[2,16]}],defaultActions:{4:[2,1],44:[2,41],47:[2,43],57:[2,47],63:[2,10],70:[2,15],73:[2,45]},parseError:function(a){throw new Error(a)},parse:function(a){function b(){var a;return a=c.lexer.lex()||1,"number"!=typeof a&&(a=c.symbols_[a]||a),a}var c=this,d=[0],e=[null],f=[],g=this.table,h="",i=0,j=0,k=0;this.lexer.setInput(a),this.lexer.yy=this.yy,this.yy.lexer=this.lexer,this.yy.parser=this,"undefined"==typeof this.lexer.yylloc&&(this.lexer.yylloc={});var l=this.lexer.yylloc;f.push(l);var m=this.lexer.options&&this.lexer.options.ranges;"function"==typeof this.yy.parseError&&(this.parseError=this.yy.parseError);for(var n,o,p,q,r,s,t,u,v,w={};;){if(p=d[d.length-1],this.defaultActions[p]?q=this.defaultActions[p]:((null===n||"undefined"==typeof n)&&(n=b()),q=g[p]&&g[p][n]),"undefined"==typeof q||!q.length||!q[0]){var x="";if(!k){v=[];for(s in g[p])this.terminals_[s]&&s>2&&v.push("'"+this.terminals_[s]+"'");x=this.lexer.showPosition?"Parse error on line "+(i+1)+":\n"+this.lexer.showPosition()+"\nExpecting "+v.join(", ")+", got '"+(this.terminals_[n]||n)+"'":"Parse error on line "+(i+1)+": Unexpected "+(1==n?"end of input":"'"+(this.terminals_[n]||n)+"'"),this.parseError(x,{text:this.lexer.match,token:this.terminals_[n]||n,line:this.lexer.yylineno,loc:l,expected:v})}}if(q[0]instanceof Array&&q.length>1)throw new Error("Parse Error: multiple actions possible at state: "+p+", token: "+n);switch(q[0]){case 1:d.push(n),e.push(this.lexer.yytext),f.push(this.lexer.yylloc),d.push(q[1]),n=null,o?(n=o,o=null):(j=this.lexer.yyleng,h=this.lexer.yytext,i=this.lexer.yylineno,l=this.lexer.yylloc,k>0&&k--);break;case 2:if(t=this.productions_[q[1]][1],w.$=e[e.length-t],w._$={first_line:f[f.length-(t||1)].first_line,last_line:f[f.length-1].last_line,first_column:f[f.length-(t||1)].first_column,last_column:f[f.length-1].last_column},m&&(w._$.range=[f[f.length-(t||1)].range[0],f[f.length-1].range[1]]),r=this.performAction.call(w,h,j,i,this.yy,q[1],e,f),"undefined"!=typeof r)return r;t&&(d=d.slice(0,-1*t*2),e=e.slice(0,-1*t),f=f.slice(0,-1*t)),d.push(this.productions_[q[1]][0]),e.push(w.$),f.push(w._$),u=g[d[d.length-2]][d[d.length-1]],d.push(u);break;case 3:return!0}}return!0}},c=function(){var a={EOF:1,parseError:function(a,b){if(!this.yy.parser)throw new Error(a);this.yy.parser.parseError(a,b)},setInput:function(a){return this._input=a,this._more=this._less=this.done=!1,this.yylineno=this.yyleng=0,this.yytext=this.matched=this.match="",this.conditionStack=["INITIAL"],this.yylloc={first_line:1,first_column:0,last_line:1,last_column:0},this.options.ranges&&(this.yylloc.range=[0,0]),this.offset=0,this},input:function(){var a=this._input[0];this.yytext+=a,this.yyleng++,this.offset++,this.match+=a,this.matched+=a;var b=a.match(/(?:\r\n?|\n).*/g);return b?(this.yylineno++,this.yylloc.last_line++):this.yylloc.last_column++,this.options.ranges&&this.yylloc.range[1]++,this._input=this._input.slice(1),a},unput:function(a){var b=a.length,c=a.split(/(?:\r\n?|\n)/g);this._input=a+this._input,this.yytext=this.yytext.substr(0,this.yytext.length-b-1),this.offset-=b;var d=this.match.split(/(?:\r\n?|\n)/g);this.match=this.match.substr(0,this.match.length-1),this.matched=this.matched.substr(0,this.matched.length-1),c.length-1&&(this.yylineno-=c.length-1);var e=this.yylloc.range;return this.yylloc={first_line:this.yylloc.first_line,last_line:this.yylineno+1,first_column:this.yylloc.first_column,last_column:c?(c.length===d.length?this.yylloc.first_column:0)+d[d.length-c.length].length-c[0].length:this.yylloc.first_column-b},this.options.ranges&&(this.yylloc.range=[e[0],e[0]+this.yyleng-b]),this},more:function(){return this._more=!0,this},less:function(a){this.unput(this.match.slice(a))},pastInput:function(){var a=this.matched.substr(0,this.matched.length-this.match.length);return(a.length>20?"...":"")+a.substr(-20).replace(/\n/g,"")},upcomingInput:function(){var a=this.match;return a.length<20&&(a+=this._input.substr(0,20-a.length)),(a.substr(0,20)+(a.length>20?"...":"")).replace(/\n/g,"")},showPosition:function(){var a=this.pastInput(),b=new Array(a.length+1).join("-");return a+this.upcomingInput()+"\n"+b+"^"},next:function(){if(this.done)return this.EOF;this._input||(this.done=!0);var a,b,c,d,e;this._more||(this.yytext="",this.match="");for(var f=this._currentRules(),g=0;g<f.length&&(c=this._input.match(this.rules[f[g]]),!c||b&&!(c[0].length>b[0].length)||(b=c,d=g,this.options.flex));g++);return b?(e=b[0].match(/(?:\r\n?|\n).*/g),e&&(this.yylineno+=e.length),this.yylloc={first_line:this.yylloc.last_line,last_line:this.yylineno+1,first_column:this.yylloc.last_column,last_column:e?e[e.length-1].length-e[e.length-1].match(/\r?\n?/)[0].length:this.yylloc.last_column+b[0].length},this.yytext+=b[0],this.match+=b[0],this.matches=b,this.yyleng=this.yytext.length,this.options.ranges&&(this.yylloc.range=[this.offset,this.offset+=this.yyleng]),this._more=!1,this._input=this._input.slice(b[0].length),this.matched+=b[0],a=this.performAction.call(this,this.yy,this,f[d],this.conditionStack[this.conditionStack.length-1]),this.done&&this._input&&(this.done=!1),a?a:void 0):""===this._input?this.EOF:this.parseError("Lexical error on line "+(this.yylineno+1)+". Unrecognized text.\n"+this.showPosition(),{text:"",token:null,line:this.yylineno})},lex:function(){var a=this.next();return"undefined"!=typeof a?a:this.lex()},begin:function(a){this.conditionStack.push(a)},popState:function(){return this.conditionStack.pop()},_currentRules:function(){return this.conditions[this.conditionStack[this.conditionStack.length-1]].rules},topState:function(){return this.conditionStack[this.conditionStack.length-2]},pushState:function(a){this.begin(a)}};return a.options={},a.performAction=function(a,b,c,d){function e(a,c){return b.yytext=b.yytext.substr(a,b.yyleng-c)}switch(c){case 0:if("\\\\"===b.yytext.slice(-2)?(e(0,1),this.begin("mu")):"\\"===b.yytext.slice(-1)?(e(0,1),this.begin("emu")):this.begin("mu"),b.yytext)return 12;break;case 1:return 12;case 2:return this.popState(),12;case 3:return b.yytext=b.yytext.substr(5,b.yyleng-9),this.popState(),15;case 4:return 12;case 5:return e(0,4),this.popState(),13;case 6:return 45;case 7:return 46;case 8:return 16;case 9:return this.popState(),this.begin("raw"),18;case 10:return 34;case 11:return 24;case 12:return 29;case 13:return this.popState(),28;case 14:return this.popState(),28;case 15:return 26;case 16:return 26;case 17:return 32;case 18:return 31;case 19:this.popState(),this.begin("com");break;case 20:return e(3,5),this.popState(),13;case 21:return 31;case 22:return 51;case 23:return 50;case 24:return 50;case 25:return 54;case 26:break;case 27:return this.popState(),33;case 28:return this.popState(),25;case 29:return b.yytext=e(1,2).replace(/\\"/g,'"'),42;case 30:return b.yytext=e(1,2).replace(/\\'/g,"'"),42;case 31:return 52;case 32:return 44;case 33:return 44;case 34:return 43;case 35:return 50;case 36:return b.yytext=e(1,2),50;case 37:return"INVALID";case 38:return 5}},a.rules=[/^(?:[^\x00]*?(?=(\{\{)))/,/^(?:[^\x00]+)/,/^(?:[^\x00]{2,}?(?=(\{\{|\\\{\{|\\\\\{\{|$)))/,/^(?:\{\{\{\{\/[^\s!"#%-,\.\/;->@\[-\^`\{-~]+(?=[=}\s\/.])\}\}\}\})/,/^(?:[^\x00]*?(?=(\{\{\{\{\/)))/,/^(?:[\s\S]*?--\}\})/,/^(?:\()/,/^(?:\))/,/^(?:\{\{\{\{)/,/^(?:\}\}\}\})/,/^(?:\{\{(~)?>)/,/^(?:\{\{(~)?#)/,/^(?:\{\{(~)?\/)/,/^(?:\{\{(~)?\^\s*(~)?\}\})/,/^(?:\{\{(~)?\s*else\s*(~)?\}\})/,/^(?:\{\{(~)?\^)/,/^(?:\{\{(~)?\s*else\b)/,/^(?:\{\{(~)?\{)/,/^(?:\{\{(~)?&)/,/^(?:\{\{!--)/,/^(?:\{\{![\s\S]*?\}\})/,/^(?:\{\{(~)?)/,/^(?:=)/,/^(?:\.\.)/,/^(?:\.(?=([=~}\s\/.)])))/,/^(?:[\/.])/,/^(?:\s+)/,/^(?:\}(~)?\}\})/,/^(?:(~)?\}\})/,/^(?:"(\\["]|[^"])*")/,/^(?:'(\\[']|[^'])*')/,/^(?:@)/,/^(?:true(?=([~}\s)])))/,/^(?:false(?=([~}\s)])))/,/^(?:-?[0-9]+(?:\.[0-9]+)?(?=([~}\s)])))/,/^(?:([^\s!"#%-,\.\/;->@\[-\^`\{-~]+(?=([=~}\s\/.)]))))/,/^(?:\[[^\]]*\])/,/^(?:.)/,/^(?:$)/],a.conditions={mu:{rules:[6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38],inclusive:!1},emu:{rules:[2],inclusive:!1},com:{rules:[5],inclusive:!1},raw:{rules:[3,4],inclusive:!1},INITIAL:{rules:[0,1,38],inclusive:!0}},a}();return b.lexer=c,a.prototype=b,b.Parser=a,new a}();return a=b}(),i=function(a){"use strict";function b(a,b){return{left:"~"===a.charAt(2),right:"~"===b.charAt(b.length-3)}}function c(a,b,c,d,i,k){if(a.sexpr.id.original!==d.path.original)throw new j(a.sexpr.id.original+" doesn't match "+d.path.original,a);var l=c&&c.program,m={left:a.strip.left,right:d.strip.right,openStandalone:f(b.statements),closeStandalone:e((l||b).statements)};if(a.strip.right&&g(b.statements,null,!0),l){var n=c.strip;n.left&&h(b.statements,null,!0),n.right&&g(l.statements,null,!0),d.strip.left&&h(l.statements,null,!0),e(b.statements)&&f(l.statements)&&(h(b.statements),g(l.statements))}else d.strip.left&&h(b.statements,null,!0);return i?new this.BlockNode(a,l,b,m,k):new this.BlockNode(a,b,l,m,k)}function d(a,b){for(var c=0,d=a.length;d>c;c++){var i=a[c],j=i.strip;if(j){var k=e(a,c,b,"partial"===i.type),l=f(a,c,b),m=j.openStandalone&&k,n=j.closeStandalone&&l,o=j.inlineStandalone&&k&&l;j.right&&g(a,c,!0),j.left&&h(a,c,!0),o&&(g(a,c),h(a,c)&&"partial"===i.type&&(i.indent=/([ \t]+$)/.exec(a[c-1].original)?RegExp.$1:"")),m&&(g((i.program||i.inverse).statements),h(a,c)),n&&(g(a,c),h((i.inverse||i.program).statements))}}return a}function e(a,b,c){void 0===b&&(b=a.length);var d=a[b-1],e=a[b-2];return d?"content"===d.type?(e||!c?/\r?\n\s*?$/:/(^|\r?\n)\s*?$/).test(d.original):void 0:c}function f(a,b,c){void 0===b&&(b=-1);var d=a[b+1],e=a[b+2];return d?"content"===d.type?(e||!c?/^\s*?\r?\n/:/^\s*?(\r?\n|$)/).test(d.original):void 0:c}function g(a,b,c){var d=a[null==b?0:b+1];if(d&&"content"===d.type&&(c||!d.rightStripped)){var e=d.string;d.string=d.string.replace(c?/^\s+/:/^[ \t]*\r?\n?/,""),d.rightStripped=d.string!==e}}function h(a,b,c){var d=a[null==b?a.length-1:b-1];if(d&&"content"===d.type&&(c||!d.leftStripped)){var e=d.string;return d.string=d.string.replace(c?/\s+$/:/[ \t]+$/,""),d.leftStripped=d.string!==e,d.leftStripped}}var i={},j=a;return i.stripFlags=b,i.prepareBlock=c,i.prepareProgram=d,i}(c),j=function(a,b,c,d){"use strict";function e(a){return a.constructor===h.ProgramNode?a:(g.yy=k,g.parse(a))}var f={},g=a,h=b,i=c,j=d.extend;f.parser=g;var k={};return j(k,i,h),f.parse=e,f}(h,g,i,b),k=function(a,b){"use strict";function c(){}function d(a,b,c){if(null==a||"string"!=typeof a&&a.constructor!==c.AST.ProgramNode)throw new h("You must pass a string or Handlebars AST to Handlebars.precompile. You passed "+a);b=b||{},"data"in b||(b.data=!0),b.compat&&(b.useDepths=!0);var d=c.parse(a),e=(new c.Compiler).compile(d,b);return(new c.JavaScriptCompiler).compile(e,b)}function e(a,b,c){function d(){var d=c.parse(a),e=(new c.Compiler).compile(d,b),f=(new c.JavaScriptCompiler).compile(e,b,void 0,!0);return c.template(f)}if(null==a||"string"!=typeof a&&a.constructor!==c.AST.ProgramNode)throw new h("You must pass a string or Handlebars AST to Handlebars.compile. You passed "+a);b=b||{},"data"in b||(b.data=!0),b.compat&&(b.useDepths=!0);var e,f=function(a,b){return e||(e=d()),e.call(this,a,b)};return f._setup=function(a){return e||(e=d()),e._setup(a)},f._child=function(a,b,c){return e||(e=d()),e._child(a,b,c)},f}function f(a,b){if(a===b)return!0;if(i(a)&&i(b)&&a.length===b.length){for(var c=0;c<a.length;c++)if(!f(a[c],b[c]))return!1;return!0}}var g={},h=a,i=b.isArray,j=[].slice;return g.Compiler=c,c.prototype={compiler:c,equals:function(a){var b=this.opcodes.length;if(a.opcodes.length!==b)return!1;for(var c=0;b>c;c++){var d=this.opcodes[c],e=a.opcodes[c];if(d.opcode!==e.opcode||!f(d.args,e.args))return!1}for(b=this.children.length,c=0;b>c;c++)if(!this.children[c].equals(a.children[c]))return!1;return!0},guid:0,compile:function(a,b){this.opcodes=[],this.children=[],this.depths={list:[]},this.options=b,this.stringParams=b.stringParams,this.trackIds=b.trackIds;var c=this.options.knownHelpers;if(this.options.knownHelpers={helperMissing:!0,blockHelperMissing:!0,each:!0,"if":!0,unless:!0,"with":!0,log:!0,lookup:!0},c)for(var d in c)this.options.knownHelpers[d]=c[d];return this.accept(a)},accept:function(a){return this[a.type](a)},program:function(a){for(var b=a.statements,c=0,d=b.length;d>c;c++)this.accept(b[c]);return this.isSimple=1===d,this.depths.list=this.depths.list.sort(function(a,b){return a-b}),this},compileProgram:function(a){var b,c=(new this.compiler).compile(a,this.options),d=this.guid++;
......
examples/hello-mui/css/mui.min.css
View file @ 1685cf20
This source diff could not be displayed because it is too large. You can view the blob instead.
examples/hello-mui/examples/icons.html
View file @ 1685cf20
......@@ -12,13 +12,14 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,body {
html,
body {
background-color: #efeff4;
}
header.mui-bar{
header.mui-bar {
display: none;
}
.mui-bar-nav~.mui-content{
.mui-bar-nav~.mui-content {
padding: 0;
}
</style>
......@@ -29,178 +30,164 @@
<body>
<style>
.mui-content-padded {
padding: 10px;
}
.mui-content-padded a {
margin: 3px;
width: 50px;
height: 50px;
display: inline-block;
text-align: center;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 25px;
float: left;
}
.mui-content-padded a .mui-icon {
margin-top: 12px;
}
.mui-spinner {
margin-top: 12px
}
.active .mui-spinner-indicator {
background: #007AFF;
}
.mui-content a{
color: #8F8F94;
}
.mui-content a.active{
color: #007aff;
}
</style>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">Icons</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded">
<p>点击图标查看高亮样式</p>
<a id="icon-icon-contact"><span class="mui-icon mui-icon-contact"></span></a>
<a id="icon-person"><span class="mui-icon mui-icon-person"></span></a>
<a id="icon-personadd"><span class="mui-icon mui-icon-personadd"></span></a>
<a id="icon-phone"><span class="mui-icon mui-icon-phone"></span></a>
<a id="icon-email"><span class="mui-icon mui-icon-email"></span></a>
<a id="icon-chatbubble"><span class="mui-icon mui-icon-chatbubble"></span></a>
<a id="icon-chatboxes"><span class="mui-icon mui-icon-chatboxes"></span></a>
<a><span class="mui-icon mui-icon-weibo"></span></a>
<a><span class="mui-icon mui-icon-weixin"></span></a>
<a><span class="mui-icon mui-icon-pengyouquan"></span></a>
<a><span class="mui-icon mui-icon-chat"></span></a>
<a><span class="mui-icon mui-icon-videocam"></span></a>
<a><span class="mui-icon mui-icon-camera"></span></a>
<a><span class="mui-icon mui-icon-image"></span></a>
<a id="icon-mic"><span class="mui-icon mui-icon-mic"></span></a>
<a><span class="mui-icon mui-icon-micoff"></span></a>
<a id="icon-location"><span class="mui-icon mui-icon-location"></span></a>
<a><span class="mui-icon mui-icon-map"></span></a>
<!--<a><span class="mui-icon mui-icon-volumehigh"></span></a>
<a><span class="mui-icon mui-icon-volumelow"></span></a>-->
<a><span class="mui-icon mui-icon-compose"></span></a>
<a><span class="mui-icon mui-icon-trash"></span></a>
<a><span class="mui-icon mui-icon-upload"></span></a>
<a><span class="mui-icon mui-icon-download"></span></a>
<a id="icon-close"><span class="mui-icon mui-icon-close"></span></a>
<a><span class="mui-icon mui-icon-closeempty"></span></a>
<a><span class="mui-icon mui-icon-redo"></span></a>
<a><span class="mui-icon mui-icon-undo"></span></a>
<a id="icon-refresh"><span class="mui-icon mui-icon-refresh"></span></a>
<a><span class="mui-icon mui-icon-refreshempty"></span></a>
<a><span class="mui-icon mui-icon-reload"></span></a>
<a><span class="mui-icon mui-icon-loop"></span></a>
<!--<a><span class="mui-icon mui-icon-loopstrong"></span></a>-->
<a>
<div class="mui-spinner">
<div class="mui-spinner-indicator mui-spinner-indicator1"></div>
<div class="mui-spinner-indicator mui-spinner-indicator2"></div>
<div class="mui-spinner-indicator mui-spinner-indicator3"></div>
<div class="mui-spinner-indicator mui-spinner-indicator4"></div>
<div class="mui-spinner-indicator mui-spinner-indicator5"></div>
<div class="mui-spinner-indicator mui-spinner-indicator6"></div>
<div class="mui-spinner-indicator mui-spinner-indicator7"></div>
<div class="mui-spinner-indicator mui-spinner-indicator8"></div>
<div class="mui-spinner-indicator mui-spinner-indicator9"></div>
<div class="mui-spinner-indicator mui-spinner-indicator10"></div>
<div class="mui-spinner-indicator mui-spinner-indicator11"></div>
<div class="mui-spinner-indicator mui-spinner-indicator12"></div>
</div>
</a>
<a><span class="mui-icon mui-icon-spinner mui-spin"></span></a>
<a><span class="mui-icon mui-icon-spinner-cycle mui-spin"></span></a>
<a id="icon-star"><span class="mui-icon mui-icon-star"></span></a>
<a><span class="mui-icon mui-icon-starhalf"></span></a>
<a id="icon-plus"><span class="mui-icon mui-icon-plus"></span></a>
<a><span class="mui-icon mui-icon-plusempty"></span></a>
<a id="icon-minus"><span class="mui-icon mui-icon-minus"></span></a>
<a><span class="mui-icon mui-icon-checkmarkempty"></span></a>
<a><span class="mui-icon mui-icon-search"></span></a>
<!--<a><span class="mui-icon mui-icon-searchstrong"></span></a>-->
<!--<a><span class="mui-icon mui-icon-share"></span></a>-->
<a id="icon-home"><span class="mui-icon mui-icon-home"></span></a>
<a><span class="mui-icon mui-icon-navigate"></span></a>
<a id="icon-gear"><span class="mui-icon mui-icon-gear"></span></a>
<a><span class="mui-icon mui-icon-settings"></span></a>
<!--<a><span class="mui-icon mui-icon-settingsstrong"></span></a>-->
<a><span class="mui-icon mui-icon-list"></span></a>
<a><span class="mui-icon mui-icon-bars"></span></a>
<a ><span class="mui-icon mui-icon-paperplane"></span></a>
<a id="icon-info"><span class="mui-icon mui-icon-info"></span></a>
<a id="icon-help"><span class="mui-icon mui-icon-help"></span></a>
<a><span class="mui-icon mui-icon-locked"></span></a>
<a id="icon-more"><span class="mui-icon mui-icon-more"></span></a>
<!--<a><span class="mui-icon mui-icon-more-vertical"></span></a>-->
<a><span class="mui-icon mui-icon-flag"></span></a>
<a><span class="mui-icon mui-icon-paperclip"></span></a>
<a><span class="mui-icon mui-icon-back"></span></a>
<a><span class="mui-icon mui-icon-forward"></span></a>
<a><span class="mui-icon mui-icon-arrowup"></span></a>
<a><span class="mui-icon mui-icon-arrowdown"></span></a>
<a><span class="mui-icon mui-icon-arrowleft"></span></a>
<a><span class="mui-icon mui-icon-arrowright"></span></a>
<a><span class="mui-icon mui-icon-arrowthinup"></span></a>
<a><span class="mui-icon mui-icon-arrowthindown"></span></a>
<a><span class="mui-icon mui-icon-arrowthinleft"></span></a>
<a><span class="mui-icon mui-icon-arrowthinright"></span></a>
<a><span class="mui-icon mui-icon-pulldown"></span></a>
</div>
</div>
<script type="text/javascript" charset="utf-8">
var active = null,lastid,span;
mui(".mui-content").on("tap","a",function(){
var id = this.getAttribute("id");
if(!active){
this.classList.add("active");
if(id){
span = this.querySelector("span");
span.classList.remove("mui-"+id);
span.classList.add("mui-"+id+"-filled");
}
active = this;
}else{
active.classList.remove("active");
if(lastid){
span.classList.remove("mui-"+lastid+"-filled");
span.classList.add("mui-"+lastid);
}
this.classList.add("active");
if(id){
span = this.querySelector("span");
span.classList.remove("mui-"+id);
span.classList.add("mui-"+id+"-filled");
}
active = this;
}
lastid = id;
});
</script>
</body>
<style>
.mui-content-padded {
padding: 10px;
}
.mui-content-padded a {
margin: 3px;
width: 50px;
height: 50px;
display: inline-block;
text-align: center;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 25px;
float: left;
}
.mui-content-padded a .mui-icon {
margin-top: 12px;
}
.mui-spinner,
.mui-spinner-white {
margin-top: 12px
}
.active .mui-spinner-indicator {
background: #007AFF;
}
.mui-content a {
color: #8F8F94;
}
.mui-content a.active {
color: #007aff;
}
</style>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">Icons</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded" >
<p>点击图标查看高亮样式</p>
<a id="icon-icon-contact"><span class="mui-icon mui-icon-contact"></span></a>
<a id="icon-person"><span class="mui-icon mui-icon-person"></span></a>
<a id="icon-personadd"><span class="mui-icon mui-icon-personadd"></span></a>
<a id="icon-phone"><span class="mui-icon mui-icon-phone"></span></a>
<a id="icon-email"><span class="mui-icon mui-icon-email"></span></a>
<a id="icon-chatbubble"><span class="mui-icon mui-icon-chatbubble"></span></a>
<a id="icon-chatboxes"><span class="mui-icon mui-icon-chatboxes"></span></a>
<a><span class="mui-icon mui-icon-weibo"></span></a>
<a><span class="mui-icon mui-icon-weixin"></span></a>
<a><span class="mui-icon mui-icon-pengyouquan"></span></a>
<a><span class="mui-icon mui-icon-chat"></span></a>
<a><span class="mui-icon mui-icon-videocam"></span></a>
<a><span class="mui-icon mui-icon-camera"></span></a>
<a><span class="mui-icon mui-icon-image"></span></a>
<a id="icon-mic"><span class="mui-icon mui-icon-mic"></span></a>
<a><span class="mui-icon mui-icon-micoff"></span></a>
<a id="icon-location"><span class="mui-icon mui-icon-location"></span></a>
<a><span class="mui-icon mui-icon-map"></span></a>
<!--<a><span class="mui-icon mui-icon-volumehigh"></span></a>
<a><span class="mui-icon mui-icon-volumelow"></span></a>-->
<a><span class="mui-icon mui-icon-compose"></span></a>
<a><span class="mui-icon mui-icon-trash"></span></a>
<a><span class="mui-icon mui-icon-upload"></span></a>
<a><span class="mui-icon mui-icon-download"></span></a>
<a id="icon-close"><span class="mui-icon mui-icon-close"></span></a>
<a><span class="mui-icon mui-icon-closeempty"></span></a>
<a><span class="mui-icon mui-icon-redo"></span></a>
<a><span class="mui-icon mui-icon-undo"></span></a>
<a id="icon-refresh"><span class="mui-icon mui-icon-refresh"></span></a>
<a><span class="mui-icon mui-icon-refreshempty"></span></a>
<a><span class="mui-icon mui-icon-reload"></span></a>
<a><span class="mui-icon mui-icon-loop"></span></a>
<!--<a><span class="mui-icon mui-icon-loopstrong"></span></a>-->
<a>
<span class="mui-spinner"></span>
</a>
<a id="icon-star"><span class="mui-icon mui-icon-star"></span></a>
<a><span class="mui-icon mui-icon-starhalf"></span></a>
<a id="icon-plus"><span class="mui-icon mui-icon-plus"></span></a>
<a><span class="mui-icon mui-icon-plusempty"></span></a>
<a id="icon-minus"><span class="mui-icon mui-icon-minus"></span></a>
<a><span class="mui-icon mui-icon-checkmarkempty"></span></a>
<a><span class="mui-icon mui-icon-search"></span></a>
<!--<a><span class="mui-icon mui-icon-searchstrong"></span></a>-->
<!--<a><span class="mui-icon mui-icon-share"></span></a>-->
<a id="icon-home"><span class="mui-icon mui-icon-home"></span></a>
<a><span class="mui-icon mui-icon-navigate"></span></a>
<a id="icon-gear"><span class="mui-icon mui-icon-gear"></span></a>
<a><span class="mui-icon mui-icon-settings"></span></a>
<!--<a><span class="mui-icon mui-icon-settingsstrong"></span></a>-->
<a><span class="mui-icon mui-icon-list"></span></a>
<a><span class="mui-icon mui-icon-bars"></span></a>
<a><span class="mui-icon mui-icon-paperplane"></span></a>
<a id="icon-info"><span class="mui-icon mui-icon-info"></span></a>
<a id="icon-help"><span class="mui-icon mui-icon-help"></span></a>
<a><span class="mui-icon mui-icon-locked"></span></a>
<a id="icon-more"><span class="mui-icon mui-icon-more"></span></a>
<!--<a><span class="mui-icon mui-icon-more-vertical"></span></a>-->
<a><span class="mui-icon mui-icon-flag"></span></a>
<a><span class="mui-icon mui-icon-paperclip"></span></a>
<a><span class="mui-icon mui-icon-back"></span></a>
<a><span class="mui-icon mui-icon-forward"></span></a>
<a><span class="mui-icon mui-icon-arrowup"></span></a>
<a><span class="mui-icon mui-icon-arrowdown"></span></a>
<a><span class="mui-icon mui-icon-arrowleft"></span></a>
<a><span class="mui-icon mui-icon-arrowright"></span></a>
<a><span class="mui-icon mui-icon-arrowthinup"></span></a>
<a><span class="mui-icon mui-icon-arrowthindown"></span></a>
<a><span class="mui-icon mui-icon-arrowthinleft"></span></a>
<a><span class="mui-icon mui-icon-arrowthinright"></span></a>
<a><span class="mui-icon mui-icon-pulldown"></span></a>
</div>
</div>
<script type="text/javascript" charset="utf-8">
var active = null,
lastid, span;
mui(".mui-content").on("tap", "a", function() {
var id = this.getAttribute("id");
if (!active) {
this.classList.add("active");
if (id) {
span = this.querySelector("span");
span.classList.remove("mui-" + id);
span.classList.add("mui-" + id + "-filled");
}
active = this;
} else {
active.classList.remove("active");
if (lastid) {
span.classList.remove("mui-" + lastid + "-filled");
span.classList.add("mui-" + lastid);
}
this.classList.add("active");
if (id) {
span = this.querySelector("span");
span.classList.remove("mui-" + id);
span.classList.add("mui-" + id + "-filled");
}
active = this;
}
lastid = id;
});
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/index-menu.html deleted 100644 → 0
View file @ bf7e9622
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<style>
html,body {
background-color: #efeff4;
}
header.mui-bar{
display: none;
}
.mui-bar-nav~.mui-content{
padding: 0;
}
</style>
</head>
<body>
<div class="mui-content">
<ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted">
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="buttons.html">
button（按钮）
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" open-type="common" href="inputs.html">
input（输入框）
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="tableview-image-left.html">
media list（图文列表）
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="switches.html">
switch（开关）
</a>
</li>
</ul>
</div>
<style type="text/css">
html,body{
background-color: #333;
}
</style>
<script type="text/javascript" charset="utf-8">
var subWebview=null,template=null,index=null;
mui.plusReady(function () {
index = plus.webview.currentWebview().opener();
})
mui('.mui-table-view').on('tap', 'a', function() {
var id = this.getAttribute("href");
var type = this.getAttribute("open-type");
if(type=="common"){
mui.openWindow({
id: id,
url: this.href,
waiting:{
autoShow:false
}
});
}else{
if(subWebview==null){
subWebview = plus.webview.getWebviewById("template_sub");
template = plus.webview.getWebviewById("demoTemplate");
}
var title = this.innerText;
template.evalJS("with(document.getElementById('title')){innerHTML='" + title + "';className='mui-title mui-fadein';};");
if(subWebview.getURL()==this.href){
subWebview.show();
}else{
subWebview.loadURL(this.href);
}
template.show('slide-in-right', 150);
}
//然后要关闭侧滑菜单；
index.evalJS("toggleMenu()");
});
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/info.html
View file @ 1685cf20
......@@ -51,7 +51,7 @@
</p>
<p>更多详细介绍，请到<a href="http://dcloudio.github.io/mui">mui官网</a>查看；</p>
<h4>版本介绍</h4>
<p>当前版本为0.7.1，可到<a href="https://github.com/dcloudio/mui">Github</a>上获取最新版本。</p>
<p>当前版本为0.8.0，可到<a href="https://github.com/dcloudio/mui">Github</a>上获取最新版本。</p>
<h4>License</h4>
<p>
mui遵循MIT License，源码已提交至Github，<a href="https://github.com/dcloudio/mui">点击查看</a>;
......
examples/hello-mui/examples/inputs.html
View file @ 1685cf20
......@@ -15,12 +15,6 @@
html,body {
background-color: #efeff4;
}
/*header.mui-bar{
display: none;
}
.mui-bar-nav~.mui-content{
padding: 0;
}*/
</style>
<script>
mui.init();
......@@ -29,69 +23,69 @@
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">输入框（Input）</h1>
</header>
<div class="mui-content">
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">输入框（Input）</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded" style="margin: 5px;">
<h5>默认搜索框：</h5>
<div class="mui-input-row mui-search">
<input type="search" class="mui-input-clear" placeholder="">
</div>
<h5>语音输入搜索框：</h5>
<div class="mui-input-row mui-search">
<input id="search" type="search" class="mui-input-speech mui-input-clear" placeholder="带语音输入的搜索框">
</div>
<div class="mui-input-row mui-input-range">
<label>slider</label>
<input type="range" min="0" max="100">
</div>
<div class="mui-input-row">
<label>Switch</label>
<div class="mui-switch mui-active">
<div class="mui-switch-handle"></div>
<div class="mui-content-padded" style="margin: 5px;">
<h5>默认搜索框：</h5>
<div class="mui-input-row mui-search">
<input type="search" class="mui-input-clear" placeholder="">
</div>
</div>
<form class="mui-input-group">
<div class="mui-input-row">
<label>Input</label>
<input type="text" placeholder="普通输入框">
</div>
<div class="mui-input-row">
<label>Input</label>
<input type="text" class="mui-input-clear" placeholder="带清除按钮的输入框">
</div>
<h5>语音输入搜索框：</h5>
<div class="mui-input-row mui-search">
<input id="search" type="search" class="mui-input-speech mui-input-clear" placeholder="带语音输入的搜索框">
</div>
<div class="mui-input-row mui-input-range">
<label>slider</label>
<input type="range" min="0" max="100">
</div>
<div class="mui-input-row">
<label>Switch</label>
<div class="mui-switch mui-active">
<div class="mui-switch-handle"></div>
</div>
</div>
<form class="mui-input-group">
<div class="mui-input-row">
<label>Input</label>
<input type="text" class="mui-input-speech mui-input-clear" placeholder="语音输入">
</div>
<div class="mui-button-row">
<button class="mui-btn mui-btn-primary" onclick="return false;">确认</button>&nbsp;&nbsp;
<button class="mui-btn mui-btn-danger" onclick="return false;">取消</button>
<div class="mui-input-row">
<label>Input</label>
<input type="text" placeholder="普通输入框">
</div>
<div class="mui-input-row">
<label>Input</label>
<input type="text" class="mui-input-clear" placeholder="带清除按钮的输入框">
</div>
<div class="mui-input-row">
<label>Input</label>
<input type="text" class="mui-input-speech mui-input-clear" placeholder="语音输入">
</div>
<div class="mui-button-row">
<button class="mui-btn mui-btn-primary" onclick="return false;">确认</button>&nbsp;&nbsp;
<button class="mui-btn mui-btn-danger" onclick="return false;">取消</button>
</div>
</form>
<div class="mui-input-row" style="margin: 10px 5px;">
<textarea id="textarea" rows="5" placeholder="多行文本框"></textarea>
</div>
</div>
</form>
<div class="mui-input-row" style="margin: 10px 5px;">
<textarea id="textarea" rows="5" placeholder="多行文本框"></textarea>
</div>
</div>
</div>
<style type="text/css">
h5 {
margin: 5px 7px;
}
</style>
<script>
//语音识别完成事件
document.getElementById("search").addEventListener('recognized', function(e) {
console.log(e.detail.value);
});
</script>
</body>
<style type="text/css">
h5 {
margin: 5px 7px;
}
</style>
<script>
//语音识别完成事件
document.getElementById("search").addEventListener('recognized', function(e) {
console.log(e.detail.value);
});
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/list-with-input.html
View file @ 1685cf20
......@@ -36,8 +36,8 @@
<div class="mui-content">
<div class="mui-card">
<ul class="mui-table-view">
<li class="mui-table-view-cell mui-hidden">
cared
<li class="mui-table-view-cell">
card（圆角列表）
<div id="M_Toggle" class="mui-switch mui-active">
<div class="mui-switch-handle"></div>
</div>
......
examples/hello-mui/examples/tableview-image-left.html → examples/hello-mui/examples/media-list.html
View file @ 1685cf20
......@@ -21,6 +21,11 @@
.mui-bar-nav~.mui-content{
padding: 0;
}
.title{
margin: 20px 15px 10px;
color: #6d6d72;
font-size: 15px;
}
</style>
<script>
mui.init();
......@@ -28,19 +33,15 @@
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">缩略图居左</h1>
</header>
<div class="mui-content">
<div class="mui-card">
<div class="mui-content">
<div class="title">
缩略图居左
</div>
<ul class="mui-table-view">
<li class="mui-table-view-cell mui-hidden">cared
<div id="M_Toggle" class="mui-switch mui-active">
<div class="mui-switch-handle"></div>
</div>
</li>
<li class="mui-table-view-cell mui-media">
<a href="#">
<img class="mui-media-object mui-pull-left" src="../images/shuijiao.jpg">
......@@ -68,8 +69,55 @@
</div>
</a>
</li>
</ul>
<div class="title">
缩略图居右
</div>
<ul class="mui-table-view">
<li class="mui-table-view-cell mui-media">
<a href="#">
<img class="mui-media-object mui-pull-right" src="../images/yuantiao.jpg">
<div class="mui-media-body">
远眺
<p class='mui-ellipsis'>静静的看这个世界，最后终于疯了</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a href="#">
<img class="mui-media-object mui-pull-right" src="../images/shuijiao.jpg">
<div class="mui-media-body">
幸福
<p class='mui-ellipsis'>能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a href="#">
<img class="mui-media-object mui-pull-right" src="../images/muwu.jpg">
<div class="mui-media-body">
木屋
<p class='mui-ellipsis'>想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.</p>
</div>
</a>
</li>
</ul>
<div class="title">
右侧带导航箭头
</div>
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell mui-media">
<a class="mui-navigate-right">
<img class="mui-media-object mui-pull-left" src="../images/cbd.jpg">
<div class="mui-media-body">
CBD
<p class='mui-ellipsis'>烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a class='mui-navigate-right' href="#">
<img class="mui-media-object mui-pull-left" src="../images/yuantiao.jpg">
<div class="mui-media-body">
远眺
......@@ -77,10 +125,51 @@
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a class="mui-navigate-right">
<img class="mui-media-object mui-pull-left" src="../images/shuijiao.jpg">
<div class="mui-media-body">
幸福
<p class='mui-ellipsis'>能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
</div>
</a>
</li>
</ul>
</div>
</div>
<div class="title">
card（卡片模式）
</div>
<div class="mui-card" style="margin-bottom: 35px;">
<ul class="mui-table-view">
<li class="mui-table-view-cell mui-media">
<a href="#">
<img class="mui-media-object mui-pull-right" src="../images/muwu.jpg">
<div class="mui-media-body">
木屋
<p class='mui-ellipsis'>想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a href="#">
<img class="mui-media-object mui-pull-right" src="../images/cbd.jpg">
<div class="mui-media-body">
CBD
<p class='mui-ellipsis'>烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a href="#">
<img class="mui-media-object mui-pull-right" src="../images/yuantiao.jpg">
<div class="mui-media-body">
远眺
<p class='mui-ellipsis'>静静的看这个世界，最后终于疯了</p>
</div>
</a>
</li>
</ul>
</div>
</div>
</body>
......
examples/hello-mui/examples/offcanvas-drag-left-plus-main.html 0 → 100644
View file @ 1685cf20
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
background-color: #efeff4;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-menu mui-icon mui-icon-bars mui-pull-right"></a>
<a class="mui-action-back mui-icon mui-icon-back mui-pull-left"></a>
<h1 class="mui-title">off canvas（侧滑导航）</h1>
</header>
<div class="mui-content">
<ul class="mui-table-view mui-table-view-chevron mui-hidden">
<li id="switch" class="mui-table-view-cell">
整体滑动
<div class="mui-switch">
<div class="mui-switch-handle"></div>
</div>
</li>
</ul>
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell mui-media">
<a class="mui-navigate-right">
<img class="mui-media-object mui-pull-left" src="../images/42x42.gif">
<div class="mui-media-body">
Item 1
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.
</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a class="mui-navigate-right">
<img class="mui-media-object mui-pull-left" src="../images/42x42.gif">
<div class="mui-media-body">
Item 1
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.
</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a class="mui-navigate-right">
<img class="mui-media-object mui-pull-left" src="../images/42x42.gif">
<div class="mui-media-body">
Item 1
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.
</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a class="mui-navigate-right">
<img class="mui-media-object mui-pull-left" src="../images/42x42.gif">
<div class="mui-media-body">
Item 1
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.
</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a class="mui-navigate-right">
<img class="mui-media-object mui-pull-left" src="../images/42x42.gif">
<div class="mui-media-body">
Item 1
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.
</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a class="mui-navigate-right">
<img class="mui-media-object mui-pull-left" src="../images/42x42.gif">
<div class="mui-media-body">
Item 1
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.
</p>
</div>
</a>
</li>
</ul>
</div>
<script>
var menu, mask = mui.createMask(closeMenu);
var showMenu = false,slideTogether = false;
//整体滑动暂不支持android手机，因为两个页面的移动动画，无法保证同步性；
if (!mui.os.android) {
var switchElem = document.getElementById("switch");
switchElem.parentNode.classList.remove('mui-hidden');
//整体切换开关事件，按下时，需变换menu界面的初始化位置；
switchElem.addEventListener('toggle', function(event) {
if (event.detail.isActive) {
//切换为整体移动
//首先改变移动标志
slideTogether = true;
//变换menu界面初始化位置，整体移动时，Menu界面left需要在100%的地方；
menu.setStyle({
left: '100%'
});
} else {
slideTogether = false;
menu.setStyle({
left: '30%'
});
}
});
}
mui.init({
swipeBack: false,
back:back
});
function back () {
if(showMenu){
//菜单处于显示状态，返回键应该先关闭菜单,阻止主窗口执行mui.back逻辑；
closeMenu();
return false;
}else{
//菜单处于隐藏状态，执行返回时，要先close菜单页面，然后继续执行mui.back逻辑关闭主窗口；
menu.close('none');
return true;
}
}
//plusReady事件后，自动创建menu窗口；
mui.plusReady(function () {
menu = mui.preload({
id: 'offcanvas-drag-left-plus-menu',
url: 'offcanvas-drag-left-plus-menu.html',
styles: {
left: "30%",
width: '70%',
zindex: 9998
},
show: {
aniShow: 'none'
},
waiting: {
autoShow: false
}
});
});
/*
* 显示菜单菜单
*/
function openMenu () {
if(!showMenu){
//解决android 4.4以下版本webview移动时，导致fixed定位元素错乱的bug;
if (mui.os.android && parseFloat(mui.os.version) < 4.4) {
document.querySelector("header.mui-bar").style.position = "static";
//同时需要修改以下.mui-contnt的padding-top，否则会多出空白；
document.querySelector(".mui-bar-nav~.mui-content").style.paddingTop = "0px";
}
//侧滑菜单处于隐藏状态，则立即显示出来；
menu.show();
//显示主窗体遮罩
mask.show();
//主窗体开始移动
mui.currentWebview.setStyle({
left: '-70%',
transition: {
duration: 150
}
});
//若需整体移动，则需让menu窗口同时移动；
if (slideTogether) {
menu.setStyle({
left: '30%',
transition: {
duration: 150
}
});
}
showMenu = true;
}
}
/**
* 关闭侧滑菜单
*/
function closeMenu () {
if(showMenu){
//解决android 4.4以下版本webview移动时，导致fixed定位元素错乱的bug;
if (mui.os.android && parseFloat(mui.os.version) < 4.4) {
document.querySelector("header.mui-bar").style.position = "fixed";
//同时需要修改以下.mui-contnt的padding-top，否则会多出空白；
document.querySelector(".mui-bar-nav~.mui-content").style.paddingTop = "44px";
}
//关闭遮罩
mask.close();
//主窗体开始移动
mui.currentWebview.setStyle({
left: '0',
transition: {
duration: 150
}
});
//若整体移动，则同时移动menu窗口；
if (slideTogether) {
menu.setStyle({
left: '100%',
transition: {
duration: 150
}
});
}
//等窗体动画结束后，隐藏菜单webview，节省资源；
setTimeout(function() {
menu.hide();
}, 300);
showMenu = false;
}
}
//点击侧滑图标，打开侧滑菜单；
document.querySelector('.mui-action-menu').addEventListener('tap', openMenu);
//主界面向左滑动，若菜单未显示，则显示菜单；否则不做任何操作；
window.addEventListener("swipeleft",openMenu);
//主界面向右滑动，若菜单已显示，则关闭菜单；否则，不做任何操作；
window.addEventListener("swiperight",closeMenu);
//menu页面向右滑动，关闭菜单；
window.addEventListener("menu:swiperight",closeMenu);
//重写mui.menu方法，Android版本menu按键按下可自动打开、关闭侧滑菜单；
mui.menu = function () {
if(showMenu){
closeMenu();
}else{
openMenu();
}
}
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/offcanvas-plus-menu.html → examples/hello-mui/examples/offcanvas-drag-left-plus-menu.html
View file @ 1685cf20
......@@ -28,49 +28,32 @@
</head>
<body>
<ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted">
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 1
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 2
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 3
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 4
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 5
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 6
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 7
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 8
</a>
</li>
</ul>
<ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted">
<li class="mui-table-view-cell">
<a class="mui-navigate-right">Item 1</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">Item 2</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">Item 3</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">Item 4</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">Item 5</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">Item 6</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">Item 7
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">Item 8</a>
</li>
</ul>
<style type="text/css">
html,body{
......@@ -81,6 +64,12 @@
mui.init({
swipeBack:false
});
//左滑显示出来的菜单，只需监听右滑，然后将菜单关闭即可；在该菜单上左滑，不做任何操作；
window.addEventListener("swiperight",function () {
mui.fire(mui.currentWebview.opener(),"menu:swiperight");
});
</script>
</body>
......
examples/hello-mui/examples/offcanvas-drag-right-plus-main.html 0 → 100644
View file @ 1685cf20
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,body {
background-color: #efeff4;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-menu mui-icon mui-icon-bars mui-pull-left"></a>
<a class="mui-action-back mui-btn mui-btn-link mui-pull-right">关闭</a>
<h1 class="mui-title">off canvas（侧滑导航）</h1>
</header>
<div class="mui-content">
<ul class="mui-table-view mui-table-view-chevron mui-hidden">
<li id="switch" class="mui-table-view-cell">
整体滑动
<div class="mui-switch">
<div class="mui-switch-handle"></div>
</div>
</li>
</ul>
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell mui-media">
<a class="mui-navigate-right">
<img class="mui-media-object mui-pull-left" src="../images/42x42.gif">
<div class="mui-media-body">
Item 1
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.
</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a class="mui-navigate-right">
<img class="mui-media-object mui-pull-left" src="../images/42x42.gif">
<div class="mui-media-body">
Item 1
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.
</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a class="mui-navigate-right">
<img class="mui-media-object mui-pull-left" src="../images/42x42.gif">
<div class="mui-media-body">
Item 1
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.
</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a class="mui-navigate-right">
<img class="mui-media-object mui-pull-left" src="../images/42x42.gif">
<div class="mui-media-body">
Item 1
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.
</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a class="mui-navigate-right">
<img class="mui-media-object mui-pull-left" src="../images/42x42.gif">
<div class="mui-media-body">
Item 1
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.
</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a class="mui-navigate-right">
<img class="mui-media-object mui-pull-left" src="../images/42x42.gif">
<div class="mui-media-body">
Item 1
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.
</p>
</div>
</a>
</li>
</ul>
</div>
<script>
var menu, mask = mui.createMask(closeMenu);
var showMenu = false,slideTogether = false;
//整体滑动暂不支持android手机，因为两个页面的移动动画，无法保证同步性；
if (!mui.os.android) {
var switchElem = document.getElementById("switch");
switchElem.parentNode.classList.remove('mui-hidden');
//整体切换开关事件，按下时，需变换menu界面的初始化位置；
switchElem.addEventListener('toggle', function(event) {
if (event.detail.isActive) {
//切换为整体移动
//首先改变移动标志
slideTogether = true;
//变换menu界面初始化位置，整体移动时，Menu界面left需要在-70%的地方；
menu.setStyle({
left: '-70%'
});
} else {
slideTogether = false;
menu.setStyle({
left: '0%'
});
}
});
}
mui.init({
swipeBack: false,
back:back
});
function back () {
if(showMenu){
//菜单处于显示状态，返回键应该先关闭菜单,阻止主窗口执行mui.back逻辑；
closeMenu();
return false;
}else{
//菜单处于隐藏状态，执行返回时，要先close菜单页面，然后继续执行mui.back逻辑关闭主窗口；
menu.close('none');
return true;
}
}
//plusReady事件后，自动创建menu窗口；
mui.plusReady(function () {
//侧滑菜单默认隐藏，这样可以节省内存；
menu = mui.preload({
id: 'offcanvas-drag-right-plus-menu',
url: 'offcanvas-drag-right-plus-menu.html',
styles: {
left: 0,
width: '70%',
zindex: 9998
},
show:{
aniShow:'none'
},
waiting:{
autoShow:false
}
});
});
/**
* 显示菜单菜单
*/
function openMenu () {
if(!showMenu){
//侧滑菜单处于隐藏状态，则立即显示出来；
menu.show();
//显示遮罩
mask.show();
//主窗体开始侧滑；
mui.currentWebview.setStyle({
left: '70%',
transition: {
duration: 150
}
});
//如果整体移动，则menu页面也需要移动；
if (slideTogether) {
menu.setStyle({
left: '0%',
transition: {
duration: 150
}
});
}
showMenu = true;
}
}
/**
* 关闭侧滑菜单
*/
function closeMenu () {
if(showMenu){
//关闭遮罩；
mask.close();
//主窗体开始侧滑；
mui.currentWebview.setStyle({
left: '0',
transition: {
duration: 150
}
});
//如果整体移动，则menu页面也需要移动；
if (slideTogether) {
menu.setStyle({
left: '-70%',
transition: {
duration: 150
}
});
}
//等窗体动画结束后，隐藏菜单webview，节省资源；
setTimeout(function () {
menu.hide();
},300);
//改变标志位
showMenu = false;
}
}
//点击左上角图标，打开侧滑菜单；
document.querySelector('.mui-icon-bars').addEventListener('tap', openMenu);
//主界面向右滑动，若菜单未显示，则显示菜单；否则不做任何操作；
window.addEventListener("swiperight",openMenu);
//主界面向左滑动，若菜单已显示，则关闭菜单；否则，不做任何操作；
window.addEventListener("swipeleft",closeMenu);
//menu页面向左滑动，关闭菜单；
window.addEventListener("menu:swipeleft",closeMenu);
//重写mui.menu方法，Android版本menu按键按下可自动打开、关闭侧滑菜单；
mui.menu = function () {
if(showMenu){
closeMenu();
}else{
openMenu();
}
}
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/popovers-with-cross-webviews-popover.html → examples/hello-mui/examples/offcanvas-drag-right-plus-menu.html
View file @ 1685cf20
......@@ -4,7 +4,7 @@
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
......@@ -28,81 +28,63 @@
</head>
<body>
<div class="mui-content">
<div id="popover" class="mui-popover">
<ul class="mui-table-view">
<ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted">
<li class="mui-table-view-cell">
<a href="#">
Item1
</a>
<a class="mui-navigate-right">
Item 1
</a>
</li>
<li class="mui-table-view-cell">
<a href="#">
Item2
</a>
<a class="mui-navigate-right">
Item 2
</a>
</li>
<li class="mui-table-view-cell">
<a href="#">
Item3
</a>
<a class="mui-navigate-right">
Item 3
</a>
</li>
<li class="mui-table-view-cell">
<a href="#">
Item4
</a>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 4
</a>
</li>
<li class="mui-table-view-cell">
<a href="#">
Item5
</a>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 5
</a>
</li>
<li class="mui-table-view-cell">
<a href="#">
Item6
</a>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 6
</a>
</li>
<li class="mui-table-view-cell">
<a href="#">
Item7
</a>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 7
</a>
</li>
<li class="mui-table-view-cell">
<a href="#">
Item8
</a>
</li>
<li class="mui-table-view-cell">
<a href="#">
Item9
</a>
</li>
<li class="mui-table-view-cell">
<a href="#">
Item10
</a>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 8
</a>
</li>
</ul>
</div>
</div>
<script>
<style type="text/css">
html,body{
background-color: #333;
}
</style>
<script type="text/javascript" charset="utf-8">
mui.init({
back: function() {
var webview = plus.webview.currentWebview();
var parent = webview.parent();
if (parent) {
parent.hide('auto');
return false;
}
}
})
(function($) {
document.addEventListener('plus:togglePopover', function() {
$('#popover').popover('toggle');
});
})(mui);
swipeBack:false
});
//优化显示出来的侧滑菜单，只需监听该菜单的左滑事件，然后将其关闭即可；在菜单上右滑，不做任何操作；
window.addEventListener("swipeleft",function () {
mui.fire(mui.currentWebview.opener(),"menu:swipeleft");
});
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/offcanvas-left-plus-main.html deleted 100644 → 0
View file @ bf7e9622
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,body {
background-color: #efeff4;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-menu mui-icon mui-icon-bars mui-pull-left"></a>
<a class="mui-action-back mui-btn mui-btn-link mui-pull-right">关闭</a>
<h1 class="mui-title">off canvas（侧滑导航）</h1>
</header>
<div class="mui-content">
<ul class="mui-table-view mui-table-view-chevron mui-hidden">
<li id="switch" class="mui-table-view-cell">
整体滑动
<div class="mui-switch">
<div class="mui-switch-handle"></div>
</div>
</li>
</ul>
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell mui-media">
<a class="mui-navigate-right">
<img class="mui-media-object mui-pull-left" src="../images/42x42.gif">
<div class="mui-media-body">
Item 1
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.
</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a class="mui-navigate-right">
<img class="mui-media-object mui-pull-left" src="../images/42x42.gif">
<div class="mui-media-body">
Item 1
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.
</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a class="mui-navigate-right">
<img class="mui-media-object mui-pull-left" src="../images/42x42.gif">
<div class="mui-media-body">
Item 1
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.
</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a class="mui-navigate-right">
<img class="mui-media-object mui-pull-left" src="../images/42x42.gif">
<div class="mui-media-body">
Item 1
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.
</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a class="mui-navigate-right">
<img class="mui-media-object mui-pull-left" src="../images/42x42.gif">
<div class="mui-media-body">
Item 1
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.
</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a class="mui-navigate-right">
<img class="mui-media-object mui-pull-left" src="../images/42x42.gif">
<div class="mui-media-body">
Item 1
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.
</p>
</div>
</a>
</li>
</ul>
</div>
<script>
mui.init({
swipeBack: false
});
//整体滑动暂不支持android手机，因为两个页面的移动动画，无法保证同步性；
if (!mui.os.android) {
document.getElementById("switch").parentNode.classList.remove('mui-hidden');
}
var menu, showMenu = false,
slideTogether = false;
window.addEventListener('pagebeforeshow', function() {
var left = '0%';
if (slideTogether) {
left = '-70%';
}
//侧滑菜单默认隐藏，这样可以节省内存；
menu = mui.preload({
id: 'offcanvas-plus-menu',
url: 'offcanvas-plus-menu.html',
styles: {
left: left,
width: '70%',
zindex: 9998
},
show:{
aniShow:'none'
},
waiting:{
autoShow:false
}
});
//初始化主页面位置
mui.currentWebview.setStyle({
left: 0
});
});
document.querySelector('.mui-icon-bars').addEventListener('tap', function() {
//控制侧滑菜单webview的显示、隐藏；
if(showMenu){
//侧滑菜单已显示，则等主窗体移动完毕后，再隐藏自己；
setTimeout(function () {
menu.hide();
},300);
}else{
//侧滑菜单处于隐藏状态，则立即显示出来；
menu.show();
}
//主窗体开始侧滑；
mui.currentWebview.setStyle({
left: showMenu ? '0' : '70%',
transition: {
duration: 200
}
});
//如果整体移动，则menu页面也需要移动；
if (slideTogether) {
menu.setStyle({
left: showMenu ? '-70%' : '0%',
transition: {
duration: 200
}
});
}
showMenu = !showMenu;
});
function closeMenu() {
menu.close('none');
}
//按返回图标时，关闭菜单webview
document.querySelector('.mui-action-back').addEventListener('tap', closeMenu);
mui.plusReady(function() {
//按返回键时，关闭菜单webview
plus.key.addEventListener('backbutton', closeMenu, false);
});
//整体切换开关事件，按下时，需变换menu界面的初始化位置；
document.getElementById("switch").addEventListener('toggle', function(event) {
if (event.detail.isActive) {
//切换为整体移动
//首先改变移动标志
slideTogether = true;
//变换menu界面初始化位置，整体移动时，Menu界面left需要在-70%的地方；
menu.setStyle({
left: '-70%'
});
} else {
slideTogether = false;
menu.setStyle({
left: '0%'
});
}
});
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/offcanvas-right-plus-main.html deleted 100644 → 0
View file @ bf7e9622
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,body {
background-color: #efeff4;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-menu mui-icon mui-icon-bars mui-pull-right"></a>
<a class="mui-action-back mui-icon mui-icon-back mui-pull-left"></a>
<h1 class="mui-title">off canvas（侧滑导航）</h1>
</header>
<div class="mui-content">
<ul class="mui-table-view mui-table-view-chevron mui-hidden">
<li id="switch" class="mui-table-view-cell">
整体滑动
<div class="mui-switch">
<div class="mui-switch-handle"></div>
</div>
</li>
</ul>
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell mui-media">
<a class="mui-navigate-right">
<img class="mui-media-object mui-pull-left" src="../images/42x42.gif">
<div class="mui-media-body">
Item 1
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.
</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a class="mui-navigate-right">
<img class="mui-media-object mui-pull-left" src="../images/42x42.gif">
<div class="mui-media-body">
Item 1
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.
</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a class="mui-navigate-right">
<img class="mui-media-object mui-pull-left" src="../images/42x42.gif">
<div class="mui-media-body">
Item 1
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.
</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a class="mui-navigate-right">
<img class="mui-media-object mui-pull-left" src="../images/42x42.gif">
<div class="mui-media-body">
Item 1
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.
</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a class="mui-navigate-right">
<img class="mui-media-object mui-pull-left" src="../images/42x42.gif">
<div class="mui-media-body">
Item 1
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.
</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a class="mui-navigate-right">
<img class="mui-media-object mui-pull-left" src="../images/42x42.gif">
<div class="mui-media-body">
Item 1
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.
</p>
</div>
</a>
</li>
</ul>
</div>
<script>
mui.init({
swipeBack: false
});
//整体滑动暂不支持android手机，因为两个页面的移动动画，无法保证同步性；
if (!mui.os.android) {
document.getElementById("switch").parentNode.classList.remove('mui-hidden');
}
var menu, showMenu = false,slideTogether = false;
window.addEventListener('pagebeforeshow', function() {
var left = '30%';
if(slideTogether){
left = '100%';
}
menu = mui.preload({
id: 'offcanvas-plus-menu',
url: 'offcanvas-plus-menu.html',
styles: {
left: left,
width:'70%',
zindex: 9998
},
show:{
aniShow:'none'
},
waiting:{
autoShow:false
}
});
mui.currentWebview.setStyle({left:0});
});
//点击侧滑按钮
document.querySelector('.mui-action-menu').addEventListener('tap', function() {
//解决android 4.4以下版本webview移动时，导致fixed定位元素错乱的bug;
if(mui.os.android&&parseFloat(mui.os.version)<4.4){
var bar_position = showMenu?"fixed":"static";
document.querySelector("header.mui-bar").style.position = bar_position;
//同时需要修改以下.mui-contnt的padding-top，否则会多出空白；
var content_padding = showMenu?"44px":"0px";
document.querySelector(".mui-bar-nav~.mui-content").style.paddingTop = content_padding;
}
//控制侧滑菜单webview的显示、隐藏；
if(showMenu){
//侧滑菜单已显示，则等主窗体移动完毕后，再隐藏自己；
setTimeout(function () {
menu.hide();
},300);
}else{
//侧滑菜单处于隐藏状态，则立即显示出来；
menu.show();
}
//主窗体开始移动
mui.currentWebview.setStyle({
left: showMenu ? '0' : '-70%',
transition: {
duration: 200
}
});
if(slideTogether){
menu.setStyle({
left: showMenu ? '100%' : '30%',
transition: {
duration: 200
}
});
}
showMenu = !showMenu;
});
function closeMenu(){
menu.close('none');
}
//按返回图标时，关闭菜单webview
document.querySelector('.mui-action-back').addEventListener('tap',closeMenu);
mui.plusReady(function(){
//按返回键时，关闭菜单webview
plus.key.addEventListener('backbutton', closeMenu, false);
});
//整体切换开关事件，按下时，需变换menu界面的初始化位置；
document.getElementById("switch").addEventListener('toggle',function(event){
if(event.detail.isActive){
//切换为整体移动
//首先改变移动标志
slideTogether = true;
//变换menu界面初始化位置，整体移动时，Menu界面left需要在100%的地方；
menu.setStyle({left:'100%'});
}else{
slideTogether = false;
menu.setStyle({left:'30%'});
}
});
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/popovers-with-cross-webviews.html deleted 100644 → 0
View file @ bf7e9622
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,body {
background-color: #efeff4;
}
header.mui-bar{
display: none;
}
.mui-bar-nav~.mui-content{
padding: 0;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">Popovers cross webviews</h1>
<a id="M_Popover_Trigger" class="mui-action-menu mui-icon mui-icon-bars mui-pull-right"></a>
</header>
<script>
mui.plusReady(function() {
var popover = plus.webview.create('popovers-with-cross-webviews-popover.html', null, {
top: '45px',
bottom: 0
});
plus.webview.currentWebview().append(popover);
document.getElementById('M_Popover_Trigger').addEventListener('tap', function() {
//mui hack plus event
mui.fire(popover, 'plus:togglePopover');
});
});
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/popovers-with-js-call.html deleted 100644 → 0
View file @ bf7e9622
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,body {
background-color: #efeff4;
}
header.mui-bar{
display: none;
}
.mui-bar-nav~.mui-content{
padding: 0;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
<style>
.mui-popover {
top: 125px;
}
</style>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">Popovers</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded">
<a id="openPopover" class="mui-btn mui-btn-primary mui-btn-block">Open Popover</a>
</div>
<div id="popover" class="mui-popover">
<div class="mui-content-padded">
<a id="closePopover" class="mui-btn mui-btn-primary mui-btn-block">Close Popover</a>
</div>
<ul class="mui-table-view">
<li class="mui-table-view-cell"><a href="#">Item1</a>
</li>
<li class="mui-table-view-cell"><a href="#">Item2</a>
</li>
<li class="mui-table-view-cell"><a href="#">Item3</a>
</li>
<li class="mui-table-view-cell"><a href="#">Item4</a>
</li>
<li class="mui-table-view-cell"><a href="#">Item5</a>
</li>
<li class="mui-table-view-cell"><a href="#">Item6</a>
</li>
<li class="mui-table-view-cell"><a href="#">Item7</a>
</li>
<li class="mui-table-view-cell"><a href="#">Item8</a>
</li>
<li class="mui-table-view-cell"><a href="#">Item9</a>
</li>
<li class="mui-table-view-cell"><a href="#">Item10</a>
</li>
</ul>
</div>
</div>
<script>
document.getElementById('openPopover').addEventListener('tap', function() {
mui('#popover').popover('show', {
left: 100,
right: 200
});
//$('#popover').popover('toggle');//也可以直接调用toggle。该方法自动识别是显示还是隐藏
});
document.getElementById('closePopover').addEventListener('tap', function() {
mui('#popover').popover('hide');
//$('#popover').popover('toggle');//也可以直接调用toggle。该方法自动识别是显示还是隐藏
});
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/popovers.html
View file @ 1685cf20
......@@ -12,14 +12,16 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,body {
html,
body {
background-color: #efeff4;
}
header.mui-bar{
/*header.mui-bar {
display: none;
}
.mui-bar-nav~.mui-content{
padding-top: 0;
}*/
.mui-content {
padding: 10px;
}
</style>
<script>
......@@ -28,32 +30,165 @@
</head>
<body>
<style>
/*跨webview需要手动指定位置*/
#topPopover {
position: fixed;
top: 16px;
right: 6px;
}
#topPopover .mui-popover-arrow {
left: auto;
right: 6px;
}
#actionSheet .mui-table-view {
border-radius: 4px;
}
#actionSheet .mui-table-view-cell {
padding: 15px;
text-align: center;
}
#actionSheet .mui-table-view .mui-table-view-cell:first-child,
#actionSheet .mui-table-view .mui-table-view-cell:first-child>a:not(.mui-btn) {
border-top-right-radius: 4px;
border-top-left-radius: 4px;
}
#actionSheet .mui-table-view .mui-table-view-cell:last-child,
#actionSheet .mui-table-view .mui-table-view-cell:last-child>a:not(.mui-btn) {
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
}
.mui-backdrop-action.mui-backdrop {
bottom: 0;
}
p {
text-indent: 22px;
}
span.mui-icon {
font-size: 14px;
color: #007aff;
margin-left: -15px;
padding-right: 10px;
}
.mui-popover {
height: 300px;
}
</style>
<header class="mui-bar mui-bar-footer">
<a href="#bottomPopover" class="mui-btn mui-btn-link mui-pull-right">菜单</a>
</header>
<div class="mui-content">
<div class="mui-content-padded">
<p>popover（弹出菜单是）mobile App中常见的UI组件，在用户点击位置附近弹出悬浮菜单，向用户展示更多信息或提供快捷操作。</p>
<p>popover最常用的两个位置：顶部导航栏右侧和底部工具栏右侧； 点击本页右上角的
<span class="mui-icon mui-icon-bars"></span> 图标体验，这是一个
<strong>跨webview</strong>的popover示例，
<span class="mui-icon mui-icon-bars"></span>在父webview中，点击后通过自定义事件 通知子webview， 子webview再执行popover的显示隐藏逻辑； 接着点击本页面右下角的“菜单”按钮体验。
</p>
<p>除了页面顶部导航栏、底部工具栏固定位置之外，其它区域要使用弹出菜单，都要准确计算物理位置，从而实现弹出菜单的绝对定位； mui封装的手势事件中，可以获得点击位置，通过这些位置可实现任意区域的弹出菜单显示，点击如下按钮体验：
</p>
<p>
<a href="#middlePopover" class="mui-btn mui-btn-primary mui-btn-block mui-btn-outlined" style="padding: 5px 20px;">打开弹出菜单</a>
</p>
</div>
</div>
<!--右上角弹出菜单-->
<div id="topPopover" class="mui-popover">
<div class="mui-popover-arrow"></div>
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a href="#">Item1</a>
</li>
<li class="mui-table-view-cell"><a href="#">Item2</a>
</li>
<li class="mui-table-view-cell"><a href="#">Item3</a>
</li>
<li class="mui-table-view-cell"><a href="#">Item4</a>
</li>
<li class="mui-table-view-cell"><a href="#">Item5</a>
</li>
<li class="mui-table-view-cell"><a href="#">Item6</a>
</li>
<li class="mui-table-view-cell"><a href="#">Item7</a>
</li>
<li class="mui-table-view-cell"><a href="#">Item8</a>
</li>
<li class="mui-table-view-cell"><a href="#">Item9</a>
</li>
<li class="mui-table-view-cell"><a href="#">Item10</a>
</li>
</ul>
</div>
</div>
</div>
<div id="middlePopover" class="mui-popover">
<div class="mui-popover-arrow"></div>
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view">
<li class="mui-table-view-cell"><a href="#">Item1</a>
</li>
<li class="mui-table-view-cell"><a href="#">Item2</a>
</li>
<li class="mui-table-view-cell"><a href="#">Item3</a>
</li>
<li class="mui-table-view-cell"><a href="#">Item4</a>
</li>
<li class="mui-table-view-cell"><a href="#">Item5</a>
</li>
<li class="mui-table-view-cell"><a href="#">Item6</a>
</li>
<li class="mui-table-view-cell"><a href="#">Item7</a>
</li>
<li class="mui-table-view-cell"><a href="#">Item8</a>
</li>
<li class="mui-table-view-cell"><a href="#">Item9</a>
</li>
<li class="mui-table-view-cell"><a href="#">Item10</a>
</li>
</ul>
</div>
</div>
<style>
.mui-popover{
top: 74px;
}
</style>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">Popovers</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded" style="padding: 20px 10px;">
<a href="#popover" class="mui-btn mui-btn-primary mui-btn-block mui-btn-outlined" style="padding: 5px 20px;">打开弹出菜单</a>
</div>
<div id="popover" class="mui-popover">
<ul class="mui-table-view">
<li class="mui-table-view-cell"><a href="#">Item1</a></li>
<li class="mui-table-view-cell"><a href="#">Item2</a></li>
<li class="mui-table-view-cell"><a href="#">Item3</a></li>
<li class="mui-table-view-cell"><a href="#">Item4</a></li>
<li class="mui-table-view-cell"><a href="#">Item5</a></li>
<li class="mui-table-view-cell"><a href="#">Item6</a></li>
</ul>
</div>
</div>
</div>
<!--右下角弹出菜单-->
<div id="bottomPopover" class="mui-popover mui-popover-bottom">
<div class="mui-popover-arrow"></div>
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view">
<li class="mui-table-view-cell"><a href="#">Item1</a>
</li>
<li class="mui-table-view-cell"><a href="#">Item2</a>
</li>
<li class="mui-table-view-cell"><a href="#">Item3</a>
</li>
<li class="mui-table-view-cell"><a href="#">Item4</a>
</li>
<li class="mui-table-view-cell"><a href="#">Item5</a>
</li>
<li class="mui-table-view-cell"><a href="#">Item6</a>
</li>
<li class="mui-table-view-cell"><a href="#">Item7</a>
</li>
<li class="mui-table-view-cell"><a href="#">Item8</a>
</li>
<li class="mui-table-view-cell"><a href="#">Item9</a>
</li>
<li class="mui-table-view-cell"><a href="#">Item10</a>
</li>
</ul>
</div>
</div>
</body>
</div>
<script>
mui('.mui-scroll-wrapper').scroll();
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/pullrefresh-main.html deleted 100644 → 0
View file @ bf7e9622
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
background-color: #efeff4;
}
#pull{
text-align: left;
}
/*#pull {
width: 24px;
height: 100%;
display: inline-block;
margin: 0 1em;
}
#icon {
height: 24px;
vertical-align: middle;
}*/
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
</style>
<script>
mui.init();
</script>
</head>
<body>
<script type="text/javascript" charset="utf-8">
var list;
// 扩展API加载完毕，现在可以正常调用扩展API
function init() {
list = plus.webview.create("pullrefresh-content.html", "pullrefresh-content.html", {
top: "48px",
bottom: "0px",
bounce: "vertical"
});
plus.webview.currentWebview().append(list);
if (mui.os.plus && mui.os.android) {
// 实现列表可下拉刷新
list.addEventListener("dragBounce", onPullStateChange, false);
list.setBounce({
position: {
top: "100px"
},
changeoffset: {
top: "50px"
}
});
}
}
mui.plusReady(init);
// DOMContentLoaded事件处理
var etext = null,
eicon = null;
document.addEventListener("DOMContentLoaded", function() {
etext = document.getElementById("text");
eicon = document.getElementById("icon");
}, false);
// 下拉状态改变
function onPullStateChange(e) {
switch (e.status) {
case "beforeChangeOffset": //下拉可刷新状态
pull1();
break;
case "afterChangeOffset": //松开可刷新状态
pull2();
break;
case "dragEndAfterChangeOffset": //正在刷新状态
list.evalJS("pulldownRefresh();");
pull3();
break;
default:
break;
}
}
function pull1() {
etext.innerText = "下拉可以刷新";
eicon.className = 'mui-pull-loading mui-icon mui-icon-pulldown';
eicon.style.webkitTransition = "all 0.3s ease-in";
eicon.style.webkitTransform = "rotate(0deg)";
}
function pull2() {
etext.innerText = "释放立即刷新";
eicon.className = 'mui-pull-loading mui-icon mui-icon-pulldown';
eicon.style.webkitTransition = "all 0.3s ease-in";
eicon.style.webkitTransform = "rotate(180deg)";
}
function pull3() {
etext.innerText = "正在刷新...";
eicon.className = 'mui-pull-loading mui-icon mui-icon-spinner-cycle';
eicon.style.webkitAnimation = "spin 1s infinite linear";
}
function pullReset() {
etext.innerText = "下拉可刷新";
eicon.style.webkitTransition = "";
eicon.style.webkitTransform = "";
eicon.style.webkitAnimation = "";
}
</script>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">下拉刷新&上拉加载</h1>
</header>
<div class="mui-content">
<div class="mui-pull-top-pocket">
<div class="mui-pull">
<div id="icon" class="mui-pull-loading mui-icon mui-icon-pulldown"></div>
<div id="text" class="mui-pull-caption">下拉可以刷新</div>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/pullrefresh-content.html → examples/hello-mui/examples/pullrefresh.html
View file @ 1685cf20
......@@ -9,21 +9,105 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/mui.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
background-color: #efeff4;
}
header.mui-bar {
display: none;
}
.mui-bar-nav ~ .mui-content {
padding: 0;
}
</style>
</head>
<body>
<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view mui-table-view-chevron">
<!--<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 15
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 14
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 13
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 12
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 11
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 10
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 9
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 8
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 7
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 6
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 5
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 4
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 3
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 2
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 1
</a>
</li>-->
</ul>
</div>
</div>
<script>
var ws = null,wo = null;
mui.plusReady(function() {
// 获取自身窗口
ws = plus.webview.currentWebview();
wo = ws.opener();
});
mui.init({
swipeBack: false,
pullRefresh: {
......@@ -37,10 +121,10 @@
}
}
});
// 刷新页面
/**
* 下拉刷新具体业务实现
*/
function pulldownRefresh() {
var self = this;
setTimeout(function() {
var table = document.body.querySelector('.mui-table-view');
var cells = document.body.querySelectorAll('.mui-table-view-cell');
......@@ -48,121 +132,42 @@
var li = document.createElement('li');
li.className = 'mui-table-view-cell';
li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
//下拉刷新，新纪录插到最前面；
table.insertBefore(li, table.firstChild);
}
if (mui.os.plus && mui.os.android) {
ws.endPullToRefresh();
wo.evalJS("pullReset()");
} else {
self.endPulldownToRefresh(); //refresh completed
}
}, 1000);
mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
}, 1500);
}
var count = 0;
/**
* 上拉加载具体业务实现
*/
function pullupRefresh() {
var self = this;
setTimeout(function() {
self.endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。
mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。
var table = document.body.querySelector('.mui-table-view');
var cells = document.body.querySelectorAll('.mui-table-view-cell');
for (var i = cells.length, len = i + 3; i < len; i++) {
for (var i = cells.length, len = i + 20; i < len; i++) {
var li = document.createElement('li');
li.className = 'mui-table-view-cell';
li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
table.appendChild(li);
}
}, 1000);
}, 1500);
}
</script>
</head>
<body>
<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 15
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 14
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 13
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 12
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 11
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 10
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 9
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 8
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 7
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 6
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 5
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 4
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 3
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 2
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 1
</a>
</li>
</ul>
</div>
</div>
if (mui.os.plus) {
mui.plusReady(function() {
setTimeout(function() {
mui('#pullrefresh').pullRefresh().pullupLoading();
}, 1000);
});
} else {
mui.ready(function() {
mui('#pullrefresh').pullRefresh().pullupLoading();
});
}
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/speech.html deleted 100644 → 0
View file @ bf7e9622
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,body {
background-color: #efeff4;
}
header.mui-bar{
display: none;
}
.mui-bar-nav~.mui-content{
padding: 0;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">语音助手</h1>
</header>
<div class="mui-content">
<h5 class="mui-content-padded" style="text-align: center;">长按进行语音输入(支持命令：列表，按钮)</h5>
</div>
<script>
(function($) {
var content = document.querySelector('.mui-content');
window.addEventListener('longtap', function() {
if (window.plus) {
plus.speech.startRecognize({
engine : 'iFly'
}, function(s) {
s = (s + '').replace(/[\ |\!|\;|\:|\,|\.|\?|\。|\，|\？|\！]/g, '').trim();
if (s) {
if (speechs.hasOwnProperty(s)) {
speechs[s]();
} else {
alert('命令"' + s + '"错误,支持语音命令：列表，按钮。');
}
} else {
alert('您好像没有说话哦');
}
plus.speech.stopRecognize();
}, function(e) {
});
} else {
alert('only for 5+');
}
event.preventDefault();
});
var speechs = {
'列表' : function() {
var div = document.createElement('div');
div.innerHTML = '<ul class="mui-table-view"><li class="mui-table-view-cell"><a class="mui-navigate-right">Item 1</a></li><li class="mui-table-view-cell"><a class="mui-navigate-right">Item 2</a></li><li class="mui-table-view-cell"><a class="mui-navigate-right">Item 3</a></li></ul>';
content.appendChild(div.firstElementChild);
},
'按钮' : function() {
var div = document.createElement('div');
div.innerHTML = '<button>按钮</button>';
content.appendChild(div.firstElementChild);
}
}
})(mui);
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/tab-with-segmented-control.html
View file @ 1685cf20
......@@ -12,13 +12,14 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,body {
html,
body {
background-color: #efeff4;
}
header.mui-bar{
header.mui-bar {
display: none;
}
.mui-bar-nav~.mui-content{
.mui-bar-nav~.mui-content {
padding: 0;
}
</style>
......@@ -29,123 +30,187 @@
<body>
<style>
/*.mui-bar-nav ~ .mui-content{padding-top:54px;}*/
.mui-card .mui-control-content {
padding: 10px;
}
.mui-segmented-control .mui-control-item {
padding: 10px 0;
}
</style>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">按钮式选项卡</h1>
</header>
<div class="mui-content">
<div style="padding: 10px 10px;">
<div id="segmentedControl" class="mui-segmented-control">
<a class="mui-control-item mui-active" href="#item1">
<style>
/*.mui-bar-nav ~ .mui-content{padding-top:54px;}*/
.mui-card .mui-control-content {
padding: 10px;
}
.mui-segmented-control .mui-control-item {
padding: 10px 0;
}
.mui-control-content {
height: 150px;
}
</style>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">按钮式选项卡</h1>
</header>
<div class="mui-content">
<div style="padding: 10px 10px;">
<div id="segmentedControl" class="mui-segmented-control">
<a class="mui-control-item mui-active" href="#item1">
待办公文（8）
</a>
<a class="mui-control-item" href="#item2">
<a class="mui-control-item" href="#item2">
已办公文
</a>
<a class="mui-control-item" href="#item3">
<a class="mui-control-item" href="#item3">
全部公文
</a>
</div>
</div>
<div>
<div id="item1" class="mui-control-content mui-active">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
第一个选项卡子项-1
</li>
<li class="mui-table-view-cell">
第一个选项卡子项-2
</li>
<li class="mui-table-view-cell">
第一个选项卡子项-3
</li>
</ul>
</div>
<div id="item2" class="mui-control-content">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
第二个选项卡子项-1
</li>
<li class="mui-table-view-cell">
第二个选项卡子项-2
</li>
<li class="mui-table-view-cell">
第二个选项卡子项-3
</li>
</ul>
</div>
<div id="item3" class="mui-control-content">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
第三个选项卡子项-1
</li>
<li class="mui-table-view-cell">
第三个选项卡子项-2
</li>
<li class="mui-table-view-cell">
第三个选项卡子项-3
</li>
</ul>
</div>
</div>
<h5 class="mui-content-padded">Style</h5>
<div class="mui-card">
<form class="mui-input-group">
<div class="mui-input-row mui-radio">
<label>按钮</label>
<input name="style" type="radio" checked value="">
</div>
</div>
<div class="mui-input-row mui-radio">
<label>文字</label>
<input name="style" type="radio" value="inverted">
<div>
<div id="item1" class="mui-control-content mui-active">
<div id="scroll" class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
第一个选项卡子项-1
</li>
<li class="mui-table-view-cell">
第一个选项卡子项-2
</li>
<li class="mui-table-view-cell">
第一个选项卡子项-3
</li>
<li class="mui-table-view-cell">
第一个选项卡子项-4
</li>
<li class="mui-table-view-cell">
第一个选项卡子项-5
</li>
<li class="mui-table-view-cell">
第一个选项卡子项-6
</li>
<li class="mui-table-view-cell">
第一个选项卡子项-7
</li>
<li class="mui-table-view-cell">
第一个选项卡子项-8
</li>
<li class="mui-table-view-cell">
第一个选项卡子项-9
</li>
<li class="mui-table-view-cell">
第一个选项卡子项-10
</li>
<li class="mui-table-view-cell">
第一个选项卡子项-11
</li>
<li class="mui-table-view-cell">
第一个选项卡子项-12
</li>
<li class="mui-table-view-cell">
第一个选项卡子项-13
</li>
<li class="mui-table-view-cell">
第一个选项卡子项-14
</li>
<li class="mui-table-view-cell">
第一个选项卡子项-15
</li>
<li class="mui-table-view-cell">
第一个选项卡子项-16
</li>
<li class="mui-table-view-cell">
第一个选项卡子项-17
</li>
<li class="mui-table-view-cell">
第一个选项卡子项-18
</li>
<li class="mui-table-view-cell">
第一个选项卡子项-19
</li>
<li class="mui-table-view-cell">
第一个选项卡子项-20
</li>
</ul>
</div>
</div>
</div>
<div id="item2" class="mui-control-content">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
第二个选项卡子项-1
</li>
<li class="mui-table-view-cell">
第二个选项卡子项-2
</li>
<li class="mui-table-view-cell">
第二个选项卡子项-3
</li>
</ul>
</div>
<div id="item3" class="mui-control-content">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
第三个选项卡子项-1
</li>
<li class="mui-table-view-cell">
第三个选项卡子项-2
</li>
<li class="mui-table-view-cell">
第三个选项卡子项-3
</li>
</ul>
</div>
</div>
</form>
</div>
<h5 class="mui-content-padded">Color</h5>
<div class="mui-card">
<form class="mui-input-group">
<div class="mui-input-row mui-radio">
<label><span class="mui-bg-primary" style="display:block;width:25px;height:25px;"></span></label>
<input name="color" type="radio" checked value="primary">
<h5 class="mui-content-padded">Style</h5>
<div class="mui-card">
<form class="mui-input-group">
<div class="mui-input-row mui-radio">
<label>按钮</label>
<input name="style" type="radio" checked value="">
</div>
<div class="mui-input-row mui-radio">
<label>文字</label>
<input name="style" type="radio" value="inverted">
</div>
</form>
</div>
<div class="mui-input-row mui-radio">
<label><span class="mui-bg-positive" style="display:block;width:25px;height:25px;"></span></label>
<input name="color" type="radio" value="positive">
<h5 class="mui-content-padded">Color</h5>
<div class="mui-card">
<form class="mui-input-group">
<div class="mui-input-row mui-radio">
<label><span class="mui-bg-primary" style="display:block;width:25px;height:25px;"></span>
</label>
<input name="color" type="radio" checked value="primary">
</div>
<div class="mui-input-row mui-radio">
<label><span class="mui-bg-positive" style="display:block;width:25px;height:25px;"></span>
</label>
<input name="color" type="radio" value="positive">
</div>
<div class="mui-input-row mui-radio">
<label><span class="mui-bg-negative" style="display:block;width:25px;height:25px;"></span>
</label>
<input name="color" type="radio" value="negative">
</div>
</form>
</div>
<div class="mui-input-row mui-radio">
<label><span class="mui-bg-negative" style="display:block;width:25px;height:25px;"></span></label>
<input name="color" type="radio" value="negative">
</div>
</form>
</div>
</div>
<script>
(function($) {
var segmentedControl = document.getElementById('segmentedControl');
$('.mui-input-group').on('change', 'input', function() {
if (this.checked) {
var styleEl = document.querySelector('input[name="style"]:checked');
var colorEl = document.querySelector('input[name="color"]:checked');
if (styleEl && colorEl) {
var style = styleEl.value;
var color = colorEl.value;
segmentedControl.className = 'mui-segmented-control' + ( style ? (' mui-segmented-control-' + style) : '') + ' mui-segmented-control-' + color;
}
}
});
})(mui);
</script>
</div>
<script>
(function($) {
$('#scroll').scroll({
indicators: true //是否显示滚动条
});
var segmentedControl = document.getElementById('segmentedControl');
$('.mui-input-group').on('change', 'input', function() {
if (this.checked) {
var styleEl = document.querySelector('input[name="style"]:checked');
var colorEl = document.querySelector('input[name="color"]:checked');
if (styleEl && colorEl) {
var style = styleEl.value;
var color = colorEl.value;
segmentedControl.className = 'mui-segmented-control' + (style ? (' mui-segmented-control-' + style) : '') + ' mui-segmented-control-' + color;
}
}
});
})(mui);
</script>
</body>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/tab-with-viewpagerindicator.html
View file @ 1685cf20
......@@ -12,13 +12,14 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,body {
html,
body {
background-color: #efeff4;
}
header.mui-bar{
header.mui-bar {
display: none;
}
.mui-bar-nav~.mui-content{
.mui-bar-nav~.mui-content {
padding: 0;
}
</style>
......@@ -29,146 +30,177 @@
<body>
<style>
.mui-control-content {
background-color: white;
min-height: 215px;
}
.mui-control-content .mui-loading {
margin-top: 50px;
}
</style>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">可拖动式选项卡</h1>
</header>
<div class="mui-content">
<div id="slider" class="mui-slider">
<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
<a class="mui-control-item" href="#item1mobile">
<style>
.mui-control-content {
background-color: white;
min-height: 215px;
}
.mui-control-content .mui-loading {
margin-top: 50px;
}
</style>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">可拖动式选项卡</h1>
</header>
<div class="mui-content">
<div id="slider" class="mui-slider">
<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
<a class="mui-control-item" href="#item1mobile">
待办公文
</a>
<a class="mui-control-item" href="#item2mobile">
<a class="mui-control-item" href="#item2mobile">
已办公文
</a>
<a class="mui-control-item" href="#item3mobile">
<a class="mui-control-item" href="#item3mobile">
全部公文
</a>
</div>
<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-4"></div>
<div class="mui-slider-group">
<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
第一个选项卡子项-1
</li>
<li class="mui-table-view-cell">
第一个选项卡子项-2
</li>
<li class="mui-table-view-cell">
第一个选项卡子项-3
</li>
<li class="mui-table-view-cell">
第一个选项卡子项-4
</li>
<li class="mui-table-view-cell">
第一个选项卡子项-5
</li>
</ul>
</div>
<div id="item2mobile" class="mui-slider-item mui-control-content">
<div class="mui-loading">
<div class="mui-spinner">
<div class="mui-spinner-indicator mui-spinner-indicator12"></div>
<div class="mui-spinner-indicator mui-spinner-indicator11"></div>
<div class="mui-spinner-indicator mui-spinner-indicator10"></div>
<div class="mui-spinner-indicator mui-spinner-indicator9"></div>
<div class="mui-spinner-indicator mui-spinner-indicator8"></div>
<div class="mui-spinner-indicator mui-spinner-indicator7"></div>
<div class="mui-spinner-indicator mui-spinner-indicator6"></div>
<div class="mui-spinner-indicator mui-spinner-indicator5"></div>
<div class="mui-spinner-indicator mui-spinner-indicator4"></div>
<div class="mui-spinner-indicator mui-spinner-indicator3"></div>
<div class="mui-spinner-indicator mui-spinner-indicator2"></div>
<div class="mui-spinner-indicator mui-spinner-indicator1"></div>
</div>
</div>
</div>
<div id="item3mobile" class="mui-slider-item mui-control-content">
<div class="mui-loading">
<div class="mui-spinner">
<div class="mui-spinner-indicator mui-spinner-indicator12"></div>
<div class="mui-spinner-indicator mui-spinner-indicator11"></div>
<div class="mui-spinner-indicator mui-spinner-indicator10"></div>
<div class="mui-spinner-indicator mui-spinner-indicator9"></div>
<div class="mui-spinner-indicator mui-spinner-indicator8"></div>
<div class="mui-spinner-indicator mui-spinner-indicator7"></div>
<div class="mui-spinner-indicator mui-spinner-indicator6"></div>
<div class="mui-spinner-indicator mui-spinner-indicator5"></div>
<div class="mui-spinner-indicator mui-spinner-indicator4"></div>
<div class="mui-spinner-indicator mui-spinner-indicator3"></div>
<div class="mui-spinner-indicator mui-spinner-indicator2"></div>
<div class="mui-spinner-indicator mui-spinner-indicator1"></div>
<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-4"></div>
<div class="mui-slider-group">
<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
<div id="scroll" class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
第一个选项卡子项-1
</li>
<li class="mui-table-view-cell">
第一个选项卡子项-2
</li>
<li class="mui-table-view-cell">
第一个选项卡子项-3
</li>
<li class="mui-table-view-cell">
第一个选项卡子项-4
</li>
<li class="mui-table-view-cell">
第一个选项卡子项-5
</li>
<li class="mui-table-view-cell">
第一个选项卡子项-6
</li>
<li class="mui-table-view-cell">
第一个选项卡子项-7
</li>
<li class="mui-table-view-cell">
第一个选项卡子项-8
</li>
<li class="mui-table-view-cell">
第一个选项卡子项-9
</li>
<li class="mui-table-view-cell">
第一个选项卡子项-10
</li>
<li class="mui-table-view-cell">
第一个选项卡子项-11
</li>
<li class="mui-table-view-cell">
第一个选项卡子项-12
</li>
<li class="mui-table-view-cell">
第一个选项卡子项-13
</li>
<li class="mui-table-view-cell">
第一个选项卡子项-14
</li>
<li class="mui-table-view-cell">
第一个选项卡子项-15
</li>
<li class="mui-table-view-cell">
第一个选项卡子项-16
</li>
<li class="mui-table-view-cell">
第一个选项卡子项-17
</li>
<li class="mui-table-view-cell">
第一个选项卡子项-18
</li>
<li class="mui-table-view-cell">
第一个选项卡子项-19
</li>
<li class="mui-table-view-cell">
第一个选项卡子项-20
</li>
</ul>
</div>
</div>
</div>
<div id="item2mobile" class="mui-slider-item mui-control-content">
<div class="mui-loading">
<div class="mui-spinner">
</div>
</div>
</div>
<div id="item3mobile" class="mui-slider-item mui-control-content">
<div class="mui-loading">
<div class="mui-spinner">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<h5 class="mui-content-padded">Color</h5>
<div class="mui-card">
<form class="mui-input-group">
<div class="mui-input-row mui-radio">
<label><span class="mui-bg-primary" style="display:block;width:25px;height:25px;"></span></label>
<input name="radio1" type="radio" checked value="primary">
</div>
<div class="mui-input-row mui-radio">
<label><span class="mui-bg-positive" style="display:block;width:25px;height:25px;"></span></label>
<input name="radio1" type="radio" value="positive">
</div>
<div class="mui-input-row mui-radio">
<label><span class="mui-bg-negative" style="display:block;width:25px;height:25px;"></span></label>
<input name="radio1" type="radio" value="negative">
<h5 class="mui-content-padded">Color</h5>
<div class="mui-card">
<form class="mui-input-group">
<div class="mui-input-row mui-radio">
<label><span class="mui-bg-primary" style="display:block;width:25px;height:25px;"></span>
</label>
<input name="radio1" type="radio" checked value="primary">
</div>
<div class="mui-input-row mui-radio">
<label><span class="mui-bg-positive" style="display:block;width:25px;height:25px;"></span>
</label>
<input name="radio1" type="radio" value="positive">
</div>
<div class="mui-input-row mui-radio">
<label><span class="mui-bg-negative" style="display:block;width:25px;height:25px;"></span>
</label>
<input name="radio1" type="radio" value="negative">
</div>
</form>
</div>
</form>
</div>
</div>
<script>
mui.init({
swipeBack : false
});
(function($) {
var html2 = '<ul class="mui-table-view"><li class="mui-table-view-cell">第二个选项卡子项-1</li><li class="mui-table-view-cell">第二个选项卡子项-2</li><li class="mui-table-view-cell">第二个选项卡子项-3</li><li class="mui-table-view-cell">第二个选项卡子项-4</li><li class="mui-table-view-cell">第二个选项卡子项-5</li></ul>';
var html3 = '<ul class="mui-table-view"><li class="mui-table-view-cell">第三个选项卡子项-1</li><li class="mui-table-view-cell">第三个选项卡子项-2</li><li class="mui-table-view-cell">第三个选项卡子项-3</li><li class="mui-table-view-cell">第三个选项卡子项-4</li><li class="mui-table-view-cell">第三个选项卡子项-5</li></ul>';
var item2 = document.getElementById('item2mobile');
var item3 = document.getElementById('item3mobile');
document.getElementById('slider').addEventListener('slide', function(e) {
if (e.detail.slideNumber === 1) {
if (item2.querySelector('.mui-loading')) {
setTimeout(function() {
item2.innerHTML = html2;
}, 1000);
}
} else if (e.detail.slideNumber === 2) {
if (item3.querySelector('.mui-loading')) {
setTimeout(function() {
item3.innerHTML = html3;
}, 1000);
}
}
});
var sliderSegmentedControl = document.getElementById('sliderSegmentedControl');
$('.mui-input-group').on('change', 'input', function() {
if (this.checked) {
sliderSegmentedControl.className = 'mui-slider-indicator mui-segmented-control mui-segmented-control-inverted mui-segmented-control-' + this.value;
//force repaint
sliderProgressBar.setAttribute('style', sliderProgressBar.getAttribute('style'));
}
});
})(mui);
</script>
</div>
<script>
mui.init({
swipeBack: false
});
(function($) {
$('#scroll').scroll({
indicators: true //是否显示滚动条
});
var html2 = '<ul class="mui-table-view"><li class="mui-table-view-cell">第二个选项卡子项-1</li><li class="mui-table-view-cell">第二个选项卡子项-2</li><li class="mui-table-view-cell">第二个选项卡子项-3</li><li class="mui-table-view-cell">第二个选项卡子项-4</li><li class="mui-table-view-cell">第二个选项卡子项-5</li></ul>';
var html3 = '<ul class="mui-table-view"><li class="mui-table-view-cell">第三个选项卡子项-1</li><li class="mui-table-view-cell">第三个选项卡子项-2</li><li class="mui-table-view-cell">第三个选项卡子项-3</li><li class="mui-table-view-cell">第三个选项卡子项-4</li><li class="mui-table-view-cell">第三个选项卡子项-5</li></ul>';
var item2 = document.getElementById('item2mobile');
var item3 = document.getElementById('item3mobile');
document.getElementById('slider').addEventListener('slide', function(e) {
if (e.detail.slideNumber === 1) {
if (item2.querySelector('.mui-loading')) {
setTimeout(function() {
item2.innerHTML = html2;
}, 1000);
}
} else if (e.detail.slideNumber === 2) {
if (item3.querySelector('.mui-loading')) {
setTimeout(function() {
item3.innerHTML = html3;
}, 1000);
}
}
});
var sliderSegmentedControl = document.getElementById('sliderSegmentedControl');
$('.mui-input-group').on('change', 'input', function() {
if (this.checked) {
sliderSegmentedControl.className = 'mui-slider-indicator mui-segmented-control mui-segmented-control-inverted mui-segmented-control-' + this.value;
//force repaint
sliderProgressBar.setAttribute('style', sliderProgressBar.getAttribute('style'));
}
});
})(mui);
</script>
</body>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/tabbar-with-submenus.html
View file @ 1685cf20
......@@ -12,13 +12,14 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,body {
html,
body {
background-color: #efeff4;
}
header.mui-bar{
header.mui-bar {
display: none;
}
.mui-bar-nav~.mui-content{
.mui-bar-nav~.mui-content {
padding: 0;
}
</style>
......@@ -28,37 +29,52 @@
</head>
<body>
<style>
.mui-bar-popover {
width: 30%;
}
</style>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">含二级菜单的选项卡</h1>
</header>
<nav class="mui-bar mui-bar-tab ">
<a class="mui-tab-item" href="#Popover_0">产品</a>
<a class="mui-tab-item" href="#Popover_1">方案</a>
<a class="mui-tab-item" href="#Popover_2">新闻</a>
</nav>
<div id="Popover_0" class="mui-popover mui-bar-popover">
<div class="mui-popover-arrow"></div>
<ul class="mui-table-view">
<li class="mui-table-view-cell"><a href="#">iOS</a>
</li>
<li class="mui-table-view-cell"><a href="#">Android</a>
</li>
<li class="mui-table-view-cell"><a href="#">HTML5</a>
</li>
</ul>
</div>
<div id="Popover_1" class="mui-popover mui-bar-popover">
<div class="mui-popover-arrow"></div>
<ul class="mui-table-view">
<li class="mui-table-view-cell"><a href="#">PC方案</a>
</li>
<li class="mui-table-view-cell"><a href="#">手机方案</a>
</li>
<li class="mui-table-view-cell"><a href="#">TV方案</a>
</li>
</ul>
</div>
<div id="Popover_2" class="mui-popover mui-bar-popover">
<div class="mui-popover-arrow"></div>
<ul class="mui-table-view">
<li class="mui-table-view-cell"><a href="#">公司新闻</a>
</li>
<li class="mui-table-view-cell"><a href="#">行业新闻</a>
</li>
</ul>
</div>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">含二级菜单的选项卡</h1>
</header>
<nav class="mui-bar mui-bar-tab ">
<a class="mui-tab-item" href="#Popover_0">产品</a>
<a class="mui-tab-item" href="#Popover_1">方案</a>
<a class="mui-tab-item" href="#Popover_2">新闻</a>
</nav>
<div id="Popover_0" class="mui-popover mui-bar-popover mui-popover-bottom">
<ul class="mui-table-view">
<li class="mui-table-view-cell"><a href="#">iOS</a></li>
<li class="mui-table-view-cell"><a href="#">Android</a></li>
<li class="mui-table-view-cell"><a href="#">HTML5</a></li>
</ul>
</div>
<div id="Popover_1" class="mui-popover mui-bar-popover mui-popover-bottom">
<ul class="mui-table-view">
<li class="mui-table-view-cell"><a href="#">PC方案</a></li>
<li class="mui-table-view-cell"><a href="#">手机方案</a></li>
<li class="mui-table-view-cell"><a href="#">TV方案</a></li>
</ul>
</div>
<div id="Popover_2" class="mui-popover mui-bar-popover mui-popover-bottom">
<ul class="mui-table-view">
<li class="mui-table-view-cell"><a href="#">公司新闻</a></li>
<li class="mui-table-view-cell"><a href="#">行业新闻</a></li>
</ul>
</div>
</body>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/tableview-image-right.html deleted 100644 → 0
View file @ bf7e9622
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,body {
background-color: #efeff4;
}
header.mui-bar{
display: none;
}
.mui-bar-nav~.mui-content{
padding: 0;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">缩略图居右</h1>
</header>
<div class="mui-content">
<div class="mui-card">
<ul class="mui-table-view">
<li class="mui-table-view-cell mui-hidden">cared
<div id="M_Toggle" class="mui-switch mui-active">
<div class="mui-switch-handle"></div>
</div>
</li>
<li class="mui-table-view-cell mui-media">
<a href="#">
<img class="mui-media-object mui-pull-right" src="../images/shuijiao.jpg">
<div class="mui-media-body">
幸福
<p class='mui-ellipsis'>能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a href="#">
<img class="mui-media-object mui-pull-right" src="../images/muwu.jpg">
<div class="mui-media-body">
木屋
<p class='mui-ellipsis'>想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a href="#">
<img class="mui-media-object mui-pull-right" src="../images/cbd.jpg">
<div class="mui-media-body">
CBD
<p class='mui-ellipsis'>烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a href="#">
<img class="mui-media-object mui-pull-right" src="../images/yuantiao.jpg">
<div class="mui-media-body">
远眺
<p class='mui-ellipsis'>静静的看这个世界，最后终于疯了</p>
</div>
</a>
</li>
</ul>
</div>
</div>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/tableview-with-images-and-chevrons.html deleted 100644 → 0
View file @ bf7e9622
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,body {
background-color: #efeff4;
}
header.mui-bar{
display: none;
}
.mui-bar-nav~.mui-content{
padding: 0;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">图文列表（左缩略图+右箭头）</h1>
</header>
<div class="mui-content">
<div class="mui-card">
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell mui-hidden">cared
<div id="M_Toggle" class="mui-switch mui-active">
<div class="mui-switch-handle"></div>
</div>
</li>
<li class="mui-table-view-cell mui-media">
<a class="mui-navigate-right">
<img class="mui-media-object mui-pull-left" src="../images/shuijiao.jpg">
<div class="mui-media-body">
幸福
<p class='mui-ellipsis'>能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a class="mui-navigate-right">
<img class="mui-media-object mui-pull-left" src="../images/muwu.jpg">
<div class="mui-media-body">
木屋
<p class='mui-ellipsis'>想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a class="mui-navigate-right">
<img class="mui-media-object mui-pull-left" src="../images/cbd.jpg">
<div class="mui-media-body">
CBD
<p class='mui-ellipsis'>烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a class='mui-navigate-right' href="#">
<img class="mui-media-object mui-pull-left" src="../images/yuantiao.jpg">
<div class="mui-media-body">
远眺
<p class='mui-ellipsis'>静静的看这个世界，最后终于疯了</p>
</div>
</a>
</li>
</ul>
</div>
</div>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/tableviews-with-badges.html
View file @ 1685cf20
......@@ -36,7 +36,7 @@
<div class="mui-content">
<div class="mui-card">
<ul class="mui-table-view">
<li class="mui-table-view-cell mui-hidden">cared
<li class="mui-table-view-cell">card（圆角列表）
<div id="M_Toggle" class="mui-switch mui-active">
<div class="mui-switch-handle"></div>
</div>
......
examples/hello-mui/examples/tableviews-with-collapses.html
View file @ 1685cf20
......@@ -37,7 +37,7 @@
<div class="mui-content">
<div class="mui-card">
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell mui-hidden">cared
<li class="mui-table-view-cell">card（圆角列表）
<div id="M_Toggle" class="mui-switch mui-active">
<div class="mui-switch-handle"></div>
</div>
......
examples/hello-mui/examples/tableviews-with-switches.html deleted 100644 → 0
View file @ bf7e9622
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,body {
background-color: #efeff4;
}
header.mui-bar{
display: none;
}
.mui-bar-nav~.mui-content{
padding: 0;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">右侧带开关</h1>
</header>
<div class="mui-content">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
Item 1
<div class="mui-switch mui-active">
<div class="mui-switch-handle"></div>
</div>
</li>
<li class="mui-table-view-cell">
Item 2
<div class="mui-switch">
<div class="mui-switch-handle"></div>
</div>
</li>
<li class="mui-table-view-cell">
Item 3
<div class="mui-switch mui-switch-mini">
<div class="mui-switch-handle"></div>
</div>
</li>
<li class="mui-table-view-cell">
Item 3
<div class="mui-switch mui-switch-blue mui-switch-mini mui-active">
<div class="mui-switch-handle"></div>
</div>
</li>
</ul>
</div>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/tableviews.html
View file @ 1685cf20
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
......@@ -21,6 +20,13 @@
.mui-bar-nav~.mui-content{
padding: 0;
}
.title{
margin: 20px 15px 10px;
color: #6d6d72;
font-size: 15px;
}
</style>
<script>
mui.init();
......@@ -29,41 +35,57 @@
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">默认列表</h1>
</header>
<div class="mui-content">
<h5></h5>
<div class="mui-card">
<ul class="mui-table-view">
<li class="mui-table-view-cell mui-hidden">cared
<div id="M_Toggle" class="mui-switch mui-active">
<div class="mui-switch-handle"></div>
</div>
</li>
<li class="mui-table-view-divider">右侧无导航箭头</li>
<li class="mui-table-view-cell">Item 1</li>
<li class="mui-table-view-cell">Item 2</li>
<li class="mui-table-view-cell">Item 3</li>
<li class="mui-table-view-divider">右侧有导航箭头</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 1
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 2
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 3
</a>
</li>
</ul>
</div>
<div class="title">
右侧无导航箭头
</div>
<ul class="mui-table-view">
<li class="mui-table-view-cell">Item 1</li>
<li class="mui-table-view-cell">Item 2</li>
<li class="mui-table-view-cell">Item 3</li>
</ul>
<div class="title">
右侧有导航箭头
</div>
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 1
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 2
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 3
</a>
</li>
</ul>
<div class="title">
card（圆角列表）
</div>
<div class="mui-card">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 1
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 2
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 3
</a>
</li>
</ul>
</div>
</div>
</body>
......
examples/hello-mui/examples/template.html
View file @ 1685cf20
......@@ -16,9 +16,16 @@
body {
background-color: #efeff4;
}
.mui-loader {
position: absolute;
top: 25%;
width: 100%;
height: 60%;
color: #888;
font-size: 14px;
text-align: center;
}
.mui-fadein {
/*-webkit-animation: fadein 0.1s;
animation: fadein 0.1s;*/
opacity: 1;
}
.mui-fadeout {
......@@ -62,28 +69,32 @@
<body>
<header class="mui-bar mui-bar-nav">
<a id="back" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<a id="menu" class="mui-action-menu mui-icon mui-icon-bars mui-pull-right" style="display: none;"></a>
<h1 id="title" class="mui-title"></h1>
</header>
<div class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<!--<div class="mui-loading">正在加载...</div>-->
</div>
</div>
<div class="mui-loader">加载中...</div>
</body>
<script>
// var title = document.getElementById("title");
// var subWebview = null;
// document.getElementById("back").addEventListener('touchend', function() {
// plus.webview.currentWebview().hide('auto');
// setTimeout(function () {
// title.className = 'mui-title mui-fadeout';
// if(subWebview==null){
// subWebview = plus.webview.getWebviewById("template_sub");
// }
// subWebview.hide("none");
// },200);
//
// });
<script type="text/javascript">
var titleElem = document.getElementById("title")
var menu = document.getElementById("menu")
window.addEventListener("updateHeader", function(e) {
var title = e.detail.title;
var showMenu = e.detail.showMenu;
titleElem.innerHTML = title;
titleElem.className = "mui-title mui-fadein";
var display = showMenu ? "" : "none";
if (showMenu) {
mui.options.keyEventBind.menubutton = true;
} else {
mui.options.keyEventBind.menubutton = false;
}
menu.style.display = display;
});
document.getElementById("menu").addEventListener('tap', function() {
plus.webview.currentWebview().children()[0].evalJS('mui("#topPopover").popover("toggle")');
});
</script>
</html>
\ No newline at end of file
examples/hello-mui/examples/template_pullrefresh.html 0 → 100644
View file @ 1685cf20
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
background-color: #efeff4;
}
.mui-loader {
position: absolute;
top: 25%;
width: 100%;
height: 60%;
color: #888;
text-align: center;
}
.mui-fadein {
/*-webkit-animation: fadein 0.1s;
animation: fadein 0.1s;*/
opacity: 1;
}
.mui-fadeout {
opacity: 0;
}
@keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-webkit-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeout {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@-webkit-keyframes fadeout {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a id="back" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 id="title" class="mui-title">下拉刷新</h1>
</header>
<div class="mui-content">
<div class="mui-loader"></div>
</div>
</body>
<script type="text/javascript">
var titleElem = document.getElementById("title");
window.addEventListener("updateHeader", function(e) {
var title = '下拉刷新';
titleElem.innerHTML = title;
titleElem.className = "mui-title mui-fadein";
});
</script>
</html>
\ No newline at end of file
examples/hello-mui/examples/test.html
View file @ 1685cf20
......@@ -30,6 +30,7 @@
</header>
<div id="scroll" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<button id="mask" class="mui-btn mui-btn-block">打开遮罩</button>
<div id="tableview"></div>
<div id="tableview_tpl"></div>
<div id="slider"></div>
......@@ -159,15 +160,27 @@
// grid: slider,
// });
// setTimeout(function() {
$('#scroll').pullRefresh({
down: {
callback: pulldownRefresh
},
up: {
callback: pullupRefresh
}
}).pullupLoading();
// $('#scroll').pullRefresh({
// down: {
// callback: pulldownRefresh
// },
// up: {
// callback: pullupRefresh
// }
// }).pullupLoading();
var pullRefreshApi = $('#scroll').scroll({
indicators: false
});
console.log(pullRefreshApi);
// setTimeout(function() {
// console.log('stopped is true');
// pullRefreshApi.setStopped(true);
// setTimeout(function() {
// console.log('stopped is false');
// pullRefreshApi.setStopped(false);
// }, 3000);
// }, 3000);
// // }, 2000);
//
function pulldownRefresh() {
......@@ -208,13 +221,24 @@
}, 2000);
}
});
document.querySelector(".mui-bar").addEventListener('dragleft',function(e){
document.querySelector(".mui-bar").addEventListener('dragleft', function(e) {
var detail = e.detail;
console.log(Math.abs(detail.deltaX));
if(Math.abs(detail.deltaX)>30){//deltaX=move.x-start.x;
if (Math.abs(detail.deltaX) > 30) { //deltaX=move.x-start.x;
//TODO
}
});
var mask = mui.createMask(function() {
alert(1);
});
document.getElementById("mask").addEventListener('tap', function() {
mask.show();
setTimeout(function() {
mask.close();
mask.close();
mask.close();
}, 2000);
});
})(mui);
</script>
</body>
......
examples/hello-mui/index-mask.html 0 → 100644
View file @ 1685cf20
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="css/mui.min.css">
<script src="js/mui.min.js"></script>
<style type="text/css">
html,body{
background-color: #000;
}
</style>
<script type="text/javascript" charset="utf-8">
var index = null;//主页面
function closeMenu () {
!index&&(index = mui.currentWebview.opener());
mui.fire(index,"menu:close");
}
window.addEventListener('tap',closeMenu);
window.addEventListener('swipeleft',closeMenu);
</script>
</head>
<body>
</body>
</html>
\ No newline at end of file
examples/hello-mui/index-menu.html 0 → 100644
View file @ 1685cf20
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="css/mui.min.css">
<script src="js/mui.min.js"></script>
<style type="text/css">
body,.mui-content{
background-color: #333;
color:#fff;
}
.title{
margin: 35px 15px 10px;
}
.title+.content{
margin: 10px 15px 35px;
color: #bbb;
text-indent: 1em;
font-size: 14px;
line-height: 24px;
}
.mui-table-view{
margin-bottom: 35px;
}
</style>
</head>
<body>
<div class="mui-content">
<div class="title">侧滑导航</div>
<div class="content">
这是首页侧滑导航示例，你可以在这里放置任何内容；关闭侧滑菜单有多种方式：
1.在手机屏幕任意位置快速向左滑动(swipe)；2.点击右侧主页面任意位置;
3.点击如下红色按钮<span id="android-only">；4.Android手机按back键；5.Android手机按menu键
</span>。
<p style="margin: 10px 15px;">
<button id="close-btn" class="mui-btn mui-btn-danger mui-btn-block" style="padding: 5px 20px;">关闭侧滑菜单</button>
</p>
</div>
<div class="title" style="margin-bottom: 25px;">mui典型控件</div>
<ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted" style="color: #ddd;">
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/buttons.html">
按钮（button）
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/slider-table-default.html">
图文表格（gallery table）
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" open-type="common" href="examples/inputs.html">
输入框（input）
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/tableview-image-left.html">
图文列表（media list）
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/popovers.html">
弹出菜单（popover）
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/switches.html">
开关（switch）
</a>
</li>
</ul>
</div>
<script type="text/javascript" charset="utf-8">
if(!mui.os.android){
document.getElementById("android-only").style.display = "none";
}
var subWebview=null,template=null,index=null;
mui.plusReady(function () {
//获得主页面webview引用；
index = plus.webview.currentWebview().opener();
})
mui('.mui-table-view').on('tap', 'a', function() {
var id = this.getAttribute("href");
var type = this.getAttribute("open-type");
if(type=="common"){
mui.openWindow({
id: id,
url: this.href,
waiting:{
autoShow:false
}
});
}else{
if (subWebview == null) {
template = plus.webview.getWebviewById("default-main");
subWebview = template.children()[0];
}
//判断是否显示右上角menu图标；
var showMenu = ~id.indexOf('popovers.html')?true:false;
var title = this.innerText;
mui.fire(template,'updateHeader',{title:title,showMenu:showMenu});
if(subWebview.getURL()==this.href){
subWebview.show();
}else{
subWebview.loadURL(this.href);
}
template.show('slide-in-right', 150);
}
});
/**
* 关闭侧滑菜单
*/
function close() {
mui.fire(mui.currentWebview.opener(),"menu:close");
}
//点击“关闭侧滑菜单”按钮处理逻辑
document.getElementById("close-btn").addEventListener("tap",close)
//监听左滑事件，若菜单已展开，左滑要关闭菜单；
window.addEventListener("swipeleft",close);
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/index.html
View file @ 1685cf20
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
......@@ -11,6 +12,7 @@
<script src="js/mui.min.js"></script>
<script src="js/update.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-icon mui-icon-bars mui-pull-left"></a>
......@@ -18,40 +20,27 @@
<h1 class="mui-title">Hello mui</h1>
</header>
<script>
var menu = null,list=null,mask = null;
var showMenu = false;
mui.init({
swipeBack : false,
subpages : [{
id : 'list',
url : 'list.html',
styles : {
top : '48px',
bottom : 0,
bounce :'vertical'
//scrollIndicator : "none"
swipeBack: false,
subpages: [{
id: 'list',
url: 'list.html',
styles: {
top: '48px',
bottom: 0,
bounce: 'vertical'
}
}]
});
var subWebview=null,template=null;
document.getElementById('info').addEventListener('tap', function() {
if(subWebview==null){
subWebview = plus.webview.getWebviewById("template_sub");
template = plus.webview.getWebviewById("demoTemplate");
}
subWebview.loadURL('examples/info.html');
var title = "关于";
template.evalJS("with(document.getElementById('title')){innerHTML='" + title + "';className='mui-title mui-fadein';};");
template.show('slide-in-right', 150);
});
var menu = null,showMenu = false;
mui.plusReady(function() {
//处理侧滑导航，为了避免和子页面初始化等竞争资源，延迟加载侧滑页面；
setTimeout(function () {
menu= mui.preload({
id: 'index-menu',
url: 'examples/index-menu.html',
url: 'index-menu.html',
styles: {
left: 0,
width: '70%',
......@@ -61,33 +50,119 @@
aniShow:'none'
}
});
mask = mui.preload({
id:"index-mask",
url:"index-mask.html",
styles:{
left:'70%',
width:'30%',
opacity:0.1
}
});
},500);
});
document.querySelector('.mui-icon-bars').addEventListener('tap', toggleMenu);
function toggleMenu(){
//控制侧滑菜单webview的显示、隐藏；
/**
* 显示侧滑菜单
*/
function openMenu(){
if(!showMenu){
//侧滑菜单处于隐藏状态，则立即显示出来；
menu.show();
//显示遮罩
setTimeout(function () {
mask.show('none');
},150);
//主窗体开始侧滑；
mui.currentWebview.setStyle({
left:'70%',
transition: {
duration: 150
}
});
showMenu = true;
}
}
/**
* 关闭菜单
*/
function closeMenu(){
if(showMenu){
//侧滑菜单已显示，则等主窗体移动完毕后，再隐藏自己；
//关闭遮罩；
mask.hide();
//主窗体开始侧滑；
mui.currentWebview.setStyle({
left: showMenu ? '0' : '70%',
transition: {
duration: 200
}
});
showMenu = false;
//等动画结束后，隐藏菜单webview，节省资源；
setTimeout(function () {
menu.hide();
},300);
},300);
}
}
//点击左上角侧滑图标，打开侧滑菜单；
document.querySelector('.mui-icon-bars').addEventListener('tap', openMenu);
//主界面向右滑动，若菜单未显示，则显示菜单；否则不做任何操作
window.addEventListener("swiperight",openMenu);
//主界面向左滑动，若菜单已显示，则关闭菜单；否则，不做任何操作；
window.addEventListener("swipeleft",closeMenu);
//侧滑菜单触发关闭菜单命令
window.addEventListener("menu:close",closeMenu);
window.addEventListener("menu:open",openMenu);
//重写mui.menu方法，Android版本menu按键按下可自动打开、关闭侧滑菜单；
mui.menu = function () {
if(showMenu){
closeMenu();
}else{
//侧滑菜单处于隐藏状态，则立即显示出来；
menu.show();
openMenu();
}
//主窗体开始侧滑；
mui.currentWebview.setStyle({
left: showMenu ? '0' : '70%',
transition: {
duration: 200
}
});
showMenu = !showMenu;
}
//处理右上角关于图标的点击事件；
var subWebview = null,template = null;
document.getElementById('info').addEventListener('tap', function() {
if (subWebview == null) {
//获取共用父窗体
template = plus.webview.getWebviewById("default-main");
subWebview = template.children()[0];
}
subWebview.loadURL('examples/info.html');
//修改共用父模板的标题
mui.fire(template,'updateHeader',{title:'关于',showMenu:false});
template.show('slide-in-right', 150);
});
//首页返回键处理
//处理逻辑：1秒内，连续两次按返回键，则退出应用；
var first = null;
mui.back = function() {
if(showMenu){
closeMenu();
}else{
//首次按键，提示‘再按一次退出应用’
if (!first) {
first = new Date().getTime();
mui.toast('再按一次退出应用');
setTimeout(function() {
first = null;
}, 1000);
} else {
if (new Date().getTime() - first < 1000) {
plus.runtime.quit();
}
}
}
};
</script>
</body>
</html>
</html>
\ No newline at end of file
examples/hello-mui/js/app.js
View file @ 1685cf20
(function($) {
//全局配置(通常所有页面引用该配置，特殊页面使用mui.init({})来覆盖全局配置)
$.initGlobal({
optimize: true,
swipeBack: true
});
var back = $.back;
var templateWebview = null;
var subWebview = null;
var getTemplateWebview = function() {
if (templateWebview == null) {
templateWebview = plus.webview.getWebviewById("demoTemplate");
}
return templateWebview;
}
var getSubWebview = function() {
if (subWebview == null) {
subWebview = plus.webview.getWebviewById("template_sub");
}
return subWebview;
}
$.back = function() {
var current = plus.webview.currentWebview();
if (current.id === 'demoTemplate') { //模板主页面
getTemplateWebview().hide('auto');
if (current.mType === 'main') { //模板主页面
current.hide('auto');
setTimeout(function() {
document.getElementById("title").className = 'mui-title mui-fadeout';
getSubWebview().hide("none");
current.children()[0].hide("none");
}, 200);
} else if (current.id === 'template_sub') {
getTemplateWebview().evalJS('mui.back();');
} else if (current.mType === 'sub') {
if ($.targets._popover) {
$($.targets._popover).popover('hide');
} else {
current.parent().evalJS('mui.back();');
}
} else {
back();
}
......
examples/hello-mui/js/mui.min.js
View file @ 1685cf20
This source diff could not be displayed because it is too large. You can view the blob instead.
examples/hello-mui/js/mui.tpl.js
View file @ 1685cf20
/*!
* =====================================================
* Mui v0.7.1 (https://github.com/dcloudio/mui)
* Mui v0.8.0 (https://github.com/dcloudio/mui)
* =====================================================
*/
/*!
......
examples/hello-mui/js/mui.tpl.min.js
View file @ 1685cf20
/*!
* =====================================================
* Mui v0.7.1 (https://github.com/dcloudio/mui)
* Mui v0.8.0 (https://github.com/dcloudio/mui)
* =====================================================
*/
!function(a,b){"function"==typeof define&&define.amd?define([],b):"object"==typeof exports?module.exports=b():a.Handlebars=a.Handlebars||b()}(this,function(){var a=function(){"use strict";function a(a){this.string=a}var b;return a.prototype.toString=function(){return""+this.string},b=a}(),b=function(a){"use strict";function b(a){return i[a]}function c(a){for(var b=1;b<arguments.length;b++)for(var c in arguments[b])Object.prototype.hasOwnProperty.call(arguments[b],c)&&(a[c]=arguments[b][c]);return a}function d(a){return a instanceof h?a.toString():null==a?"":a?(a=""+a,k.test(a)?a.replace(j,b):a):a+""}function e(a){return a||0===a?n(a)&&0===a.length?!0:!1:!0}function f(a,b){return(a?a+".":"")+b}var g={},h=a,i={"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#x27;","`":"&#x60;"},j=/[&<>"'`]/g,k=/[&<>"'`]/;g.extend=c;var l=Object.prototype.toString;g.toString=l;var m=function(a){return"function"==typeof a};m(/x/)&&(m=function(a){return"function"==typeof a&&"[object Function]"===l.call(a)});var m;g.isFunction=m;var n=Array.isArray||function(a){return a&&"object"==typeof a?"[object Array]"===l.call(a):!1};return g.isArray=n,g.escapeExpression=d,g.isEmpty=e,g.appendContextPath=f,g}(a),c=function(){"use strict";function a(a,b){var d;b&&b.firstLine&&(d=b.firstLine,a+=" - "+d+":"+b.firstColumn);for(var e=Error.prototype.constructor.call(this,a),f=0;f<c.length;f++)this[c[f]]=e[c[f]];d&&(this.lineNumber=d,this.column=b.firstColumn)}var b,c=["description","fileName","lineNumber","message","name","number","stack"];return a.prototype=new Error,b=a}(),d=function(a,b){"use strict";function c(a,b){this.helpers=a||{},this.partials=b||{},d(this)}function d(a){a.registerHelper("helperMissing",function(){if(1===arguments.length)return void 0;throw new g("Missing helper: '"+arguments[arguments.length-1].name+"'")}),a.registerHelper("blockHelperMissing",function(b,c){var d=c.inverse,e=c.fn;if(b===!0)return e(this);if(b===!1||null==b)return d(this);if(k(b))return b.length>0?(c.ids&&(c.ids=[c.name]),a.helpers.each(b,c)):d(this);if(c.data&&c.ids){var g=q(c.data);g.contextPath=f.appendContextPath(c.data.contextPath,c.name),c={data:g}}return e(b,c)}),a.registerHelper("each",function(a,b){if(!b)throw new g("Must pass iterator to #each");var c,d,e=b.fn,h=b.inverse,i=0,j="";if(b.data&&b.ids&&(d=f.appendContextPath(b.data.contextPath,b.ids[0])+"."),l(a)&&(a=a.call(this)),b.data&&(c=q(b.data)),a&&"object"==typeof a)if(k(a))for(var m=a.length;m>i;i++)c&&(c.index=i,c.first=0===i,c.last=i===a.length-1,d&&(c.contextPath=d+i)),j+=e(a[i],{data:c});else for(var n in a)a.hasOwnProperty(n)&&(c&&(c.key=n,c.index=i,c.first=0===i,d&&(c.contextPath=d+n)),j+=e(a[n],{data:c}),i++);return 0===i&&(j=h(this)),j}),a.registerHelper("if",function(a,b){return l(a)&&(a=a.call(this)),!b.hash.includeZero&&!a||f.isEmpty(a)?b.inverse(this):b.fn(this)}),a.registerHelper("unless",function(b,c){return a.helpers["if"].call(this,b,{fn:c.inverse,inverse:c.fn,hash:c.hash})}),a.registerHelper("with",function(a,b){l(a)&&(a=a.call(this));var c=b.fn;if(f.isEmpty(a))return b.inverse(this);if(b.data&&b.ids){var d=q(b.data);d.contextPath=f.appendContextPath(b.data.contextPath,b.ids[0]),b={data:d}}return c(a,b)}),a.registerHelper("log",function(b,c){var d=c.data&&null!=c.data.level?parseInt(c.data.level,10):1;a.log(d,b)}),a.registerHelper("lookup",function(a,b){return a&&a[b]})}var e={},f=a,g=b,h="2.0.0";e.VERSION=h;var i=6;e.COMPILER_REVISION=i;var j={1:"<= 1.0.rc.2",2:"== 1.0.0-rc.3",3:"== 1.0.0-rc.4",4:"== 1.x.x",5:"== 2.0.0-alpha.x",6:">= 2.0.0-beta.1"};e.REVISION_CHANGES=j;var k=f.isArray,l=f.isFunction,m=f.toString,n="[object Object]";e.HandlebarsEnvironment=c,c.prototype={constructor:c,logger:o,log:p,registerHelper:function(a,b){if(m.call(a)===n){if(b)throw new g("Arg not supported with multiple helpers");f.extend(this.helpers,a)}else this.helpers[a]=b},unregisterHelper:function(a){delete this.helpers[a]},registerPartial:function(a,b){m.call(a)===n?f.extend(this.partials,a):this.partials[a]=b},unregisterPartial:function(a){delete this.partials[a]}};var o={methodMap:{0:"debug",1:"info",2:"warn",3:"error"},DEBUG:0,INFO:1,WARN:2,ERROR:3,level:3,log:function(a,b){if(o.level<=a){var c=o.methodMap[a];"undefined"!=typeof console&&console[c]&&console[c].call(console,b)}}};e.logger=o;var p=o.log;e.log=p;var q=function(a){var b=f.extend({},a);return b._parent=a,b};return e.createFrame=q,e}(b,c),e=function(a,b,c){"use strict";function d(a){var b=a&&a[0]||1,c=m;if(b!==c){if(c>b){var d=n[c],e=n[b];throw new l("Template was precompiled with an older version of Handlebars than the current runtime. Please update your precompiler to a newer version ("+d+") or downgrade your runtime to an older version ("+e+").")}throw new l("Template was precompiled with a newer version of Handlebars than the current runtime. Please update your runtime to a newer version ("+a[1]+").")}}function e(a,b){if(!b)throw new l("No environment passed to template");if(!a||!a.main)throw new l("Unknown template object: "+typeof a);b.VM.checkRevision(a.compiler);var c=function(c,d,e,f,g,h,i,j,m){g&&(f=k.extend({},f,g));var n=b.VM.invokePartial.call(this,c,e,f,h,i,j,m);if(null==n&&b.compile){var o={helpers:h,partials:i,data:j,depths:m};i[e]=b.compile(c,{data:void 0!==j,compat:a.compat},b),n=i[e](f,o)}if(null!=n){if(d){for(var p=n.split("\n"),q=0,r=p.length;r>q&&(p[q]||q+1!==r);q++)p[q]=d+p[q];n=p.join("\n")}return n}throw new l("The partial "+e+" could not be compiled when running in runtime-only mode")},d={lookup:function(a,b){for(var c=a.length,d=0;c>d;d++)if(a[d]&&null!=a[d][b])return a[d][b]},lambda:function(a,b){return"function"==typeof a?a.call(b):a},escapeExpression:k.escapeExpression,invokePartial:c,fn:function(b){return a[b]},programs:[],program:function(a,b,c){var d=this.programs[a],e=this.fn(a);return b||c?d=f(this,a,e,b,c):d||(d=this.programs[a]=f(this,a,e)),d},data:function(a,b){for(;a&&b--;)a=a._parent;return a},merge:function(a,b){var c=a||b;return a&&b&&a!==b&&(c=k.extend({},b,a)),c},noop:b.VM.noop,compilerInfo:a.compiler},e=function(b,c){c=c||{};var f=c.data;e._setup(c),!c.partial&&a.useData&&(f=i(b,f));var g;return a.useDepths&&(g=c.depths?[b].concat(c.depths):[b]),a.main.call(d,b,d.helpers,d.partials,f,g)};return e.isTop=!0,e._setup=function(c){c.partial?(d.helpers=c.helpers,d.partials=c.partials):(d.helpers=d.merge(c.helpers,b.helpers),a.usePartial&&(d.partials=d.merge(c.partials,b.partials)))},e._child=function(b,c,e){if(a.useDepths&&!e)throw new l("must pass parent depths");return f(d,b,a[b],c,e)},e}function f(a,b,c,d,e){var f=function(b,f){return f=f||{},c.call(a,b,a.helpers,a.partials,f.data||d,e&&[b].concat(e))};return f.program=b,f.depth=e?e.length:0,f}function g(a,b,c,d,e,f,g){var h={partial:!0,helpers:d,partials:e,data:f,depths:g};if(void 0===a)throw new l("The partial "+b+" could not be found");return a instanceof Function?a(c,h):void 0}function h(){return""}function i(a,b){return b&&"root"in b||(b=b?o(b):{},b.root=a),b}var j={},k=a,l=b,m=c.COMPILER_REVISION,n=c.REVISION_CHANGES,o=c.createFrame;return j.checkRevision=d,j.template=e,j.program=f,j.invokePartial=g,j.noop=h,j}(b,c,d),f=function(a,b,c,d,e){"use strict";var f,g=a,h=b,i=c,j=d,k=e,l=function(){var a=new g.HandlebarsEnvironment;return j.extend(a,g),a.SafeString=h,a.Exception=i,a.Utils=j,a.escapeExpression=j.escapeExpression,a.VM=k,a.template=function(b){return k.template(b,a)},a},m=l();return m.create=l,m["default"]=m,f=m}(d,a,c,b,e),g=function(a){"use strict";function b(a){a=a||{},this.firstLine=a.first_line,this.firstColumn=a.first_column,this.lastColumn=a.last_column,this.lastLine=a.last_line}var c,d=a,e={ProgramNode:function(a,c,d){b.call(this,d),this.type="program",this.statements=a,this.strip=c},MustacheNode:function(a,c,d,f,g){if(b.call(this,g),this.type="mustache",this.strip=f,null!=d&&d.charAt){var h=d.charAt(3)||d.charAt(2);this.escaped="{"!==h&&"&"!==h}else this.escaped=!!d;this.sexpr=a instanceof e.SexprNode?a:new e.SexprNode(a,c),this.id=this.sexpr.id,this.params=this.sexpr.params,this.hash=this.sexpr.hash,this.eligibleHelper=this.sexpr.eligibleHelper,this.isHelper=this.sexpr.isHelper},SexprNode:function(a,c,d){b.call(this,d),this.type="sexpr",this.hash=c;var e=this.id=a[0],f=this.params=a.slice(1);this.isHelper=!(!f.length&&!c),this.eligibleHelper=this.isHelper||e.isSimple},PartialNode:function(a,c,d,e,f){b.call(this,f),this.type="partial",this.partialName=a,this.context=c,this.hash=d,this.strip=e,this.strip.inlineStandalone=!0},BlockNode:function(a,c,d,e,f){b.call(this,f),this.type="block",this.mustache=a,this.program=c,this.inverse=d,this.strip=e,d&&!c&&(this.isInverse=!0)},RawBlockNode:function(a,c,f,g){if(b.call(this,g),a.sexpr.id.original!==f)throw new d(a.sexpr.id.original+" doesn't match "+f,this);c=new e.ContentNode(c,g),this.type="block",this.mustache=a,this.program=new e.ProgramNode([c],{},g)},ContentNode:function(a,c){b.call(this,c),this.type="content",this.original=this.string=a},HashNode:function(a,c){b.call(this,c),this.type="hash",this.pairs=a},IdNode:function(a,c){b.call(this,c),this.type="ID";for(var e="",f=[],g=0,h="",i=0,j=a.length;j>i;i++){var k=a[i].part;if(e+=(a[i].separator||"")+k,".."===k||"."===k||"this"===k){if(f.length>0)throw new d("Invalid path: "+e,this);".."===k?(g++,h+="../"):this.isScoped=!0}else f.push(k)}this.original=e,this.parts=f,this.string=f.join("."),this.depth=g,this.idName=h+this.string,this.isSimple=1===a.length&&!this.isScoped&&0===g,this.stringModeValue=this.string},PartialNameNode:function(a,c){b.call(this,c),this.type="PARTIAL_NAME",this.name=a.original},DataNode:function(a,c){b.call(this,c),this.type="DATA",this.id=a,this.stringModeValue=a.stringModeValue,this.idName="@"+a.stringModeValue},StringNode:function(a,c){b.call(this,c),this.type="STRING",this.original=this.string=this.stringModeValue=a},NumberNode:function(a,c){b.call(this,c),this.type="NUMBER",this.original=this.number=a,this.stringModeValue=Number(a)},BooleanNode:function(a,c){b.call(this,c),this.type="BOOLEAN",this.bool=a,this.stringModeValue="true"===a},CommentNode:function(a,c){b.call(this,c),this.type="comment",this.comment=a,this.strip={inlineStandalone:!0}}};return c=e}(c),h=function(){"use strict";var a,b=function(){function a(){this.yy={}}var b={trace:function(){},yy:{},symbols_:{error:2,root:3,program:4,EOF:5,program_repetition0:6,statement:7,mustache:8,block:9,rawBlock:10,partial:11,CONTENT:12,COMMENT:13,openRawBlock:14,END_RAW_BLOCK:15,OPEN_RAW_BLOCK:16,sexpr:17,CLOSE_RAW_BLOCK:18,openBlock:19,block_option0:20,closeBlock:21,openInverse:22,block_option1:23,OPEN_BLOCK:24,CLOSE:25,OPEN_INVERSE:26,inverseAndProgram:27,INVERSE:28,OPEN_ENDBLOCK:29,path:30,OPEN:31,OPEN_UNESCAPED:32,CLOSE_UNESCAPED:33,OPEN_PARTIAL:34,partialName:35,param:36,partial_option0:37,partial_option1:38,sexpr_repetition0:39,sexpr_option0:40,dataName:41,STRING:42,NUMBER:43,BOOLEAN:44,OPEN_SEXPR:45,CLOSE_SEXPR:46,hash:47,hash_repetition_plus0:48,hashSegment:49,ID:50,EQUALS:51,DATA:52,pathSegments:53,SEP:54,$accept:0,$end:1},terminals_:{2:"error",5:"EOF",12:"CONTENT",13:"COMMENT",15:"END_RAW_BLOCK",16:"OPEN_RAW_BLOCK",18:"CLOSE_RAW_BLOCK",24:"OPEN_BLOCK",25:"CLOSE",26:"OPEN_INVERSE",28:"INVERSE",29:"OPEN_ENDBLOCK",31:"OPEN",32:"OPEN_UNESCAPED",33:"CLOSE_UNESCAPED",34:"OPEN_PARTIAL",42:"STRING",43:"NUMBER",44:"BOOLEAN",45:"OPEN_SEXPR",46:"CLOSE_SEXPR",50:"ID",51:"EQUALS",52:"DATA",54:"SEP"},productions_:[0,[3,2],[4,1],[7,1],[7,1],[7,1],[7,1],[7,1],[7,1],[10,3],[14,3],[9,4],[9,4],[19,3],[22,3],[27,2],[21,3],[8,3],[8,3],[11,5],[11,4],[17,3],[17,1],[36,1],[36,1],[36,1],[36,1],[36,1],[36,3],[47,1],[49,3],[35,1],[35,1],[35,1],[41,2],[30,1],[53,3],[53,1],[6,0],[6,2],[20,0],[20,1],[23,0],[23,1],[37,0],[37,1],[38,0],[38,1],[39,0],[39,2],[40,0],[40,1],[48,1],[48,2]],performAction:function(a,b,c,d,e,f){var g=f.length-1;switch(e){case 1:return d.prepareProgram(f[g-1].statements,!0),f[g-1];case 2:this.$=new d.ProgramNode(d.prepareProgram(f[g]),{},this._$);break;case 3:this.$=f[g];break;case 4:this.$=f[g];break;case 5:this.$=f[g];break;case 6:this.$=f[g];break;case 7:this.$=new d.ContentNode(f[g],this._$);break;case 8:this.$=new d.CommentNode(f[g],this._$);break;case 9:this.$=new d.RawBlockNode(f[g-2],f[g-1],f[g],this._$);break;case 10:this.$=new d.MustacheNode(f[g-1],null,"","",this._$);break;case 11:this.$=d.prepareBlock(f[g-3],f[g-2],f[g-1],f[g],!1,this._$);break;case 12:this.$=d.prepareBlock(f[g-3],f[g-2],f[g-1],f[g],!0,this._$);break;case 13:this.$=new d.MustacheNode(f[g-1],null,f[g-2],d.stripFlags(f[g-2],f[g]),this._$);break;case 14:this.$=new d.MustacheNode(f[g-1],null,f[g-2],d.stripFlags(f[g-2],f[g]),this._$);break;case 15:this.$={strip:d.stripFlags(f[g-1],f[g-1]),program:f[g]};break;case 16:this.$={path:f[g-1],strip:d.stripFlags(f[g-2],f[g])};break;case 17:this.$=new d.MustacheNode(f[g-1],null,f[g-2],d.stripFlags(f[g-2],f[g]),this._$);break;case 18:this.$=new d.MustacheNode(f[g-1],null,f[g-2],d.stripFlags(f[g-2],f[g]),this._$);break;case 19:this.$=new d.PartialNode(f[g-3],f[g-2],f[g-1],d.stripFlags(f[g-4],f[g]),this._$);break;case 20:this.$=new d.PartialNode(f[g-2],void 0,f[g-1],d.stripFlags(f[g-3],f[g]),this._$);break;case 21:this.$=new d.SexprNode([f[g-2]].concat(f[g-1]),f[g],this._$);break;case 22:this.$=new d.SexprNode([f[g]],null,this._$);break;case 23:this.$=f[g];break;case 24:this.$=new d.StringNode(f[g],this._$);break;case 25:this.$=new d.NumberNode(f[g],this._$);break;case 26:this.$=new d.BooleanNode(f[g],this._$);break;case 27:this.$=f[g];break;case 28:f[g-1].isHelper=!0,this.$=f[g-1];break;case 29:this.$=new d.HashNode(f[g],this._$);break;case 30:this.$=[f[g-2],f[g]];break;case 31:this.$=new d.PartialNameNode(f[g],this._$);break;case 32:this.$=new d.PartialNameNode(new d.StringNode(f[g],this._$),this._$);break;case 33:this.$=new d.PartialNameNode(new d.NumberNode(f[g],this._$));break;case 34:this.$=new d.DataNode(f[g],this._$);break;case 35:this.$=new d.IdNode(f[g],this._$);break;case 36:f[g-2].push({part:f[g],separator:f[g-1]}),this.$=f[g-2];break;case 37:this.$=[{part:f[g]}];break;case 38:this.$=[];break;case 39:f[g-1].push(f[g]);break;case 48:this.$=[];break;case 49:f[g-1].push(f[g]);break;case 52:this.$=[f[g]];break;case 53:f[g-1].push(f[g])}},table:[{3:1,4:2,5:[2,38],6:3,12:[2,38],13:[2,38],16:[2,38],24:[2,38],26:[2,38],31:[2,38],32:[2,38],34:[2,38]},{1:[3]},{5:[1,4]},{5:[2,2],7:5,8:6,9:7,10:8,11:9,12:[1,10],13:[1,11],14:16,16:[1,20],19:14,22:15,24:[1,18],26:[1,19],28:[2,2],29:[2,2],31:[1,12],32:[1,13],34:[1,17]},{1:[2,1]},{5:[2,39],12:[2,39],13:[2,39],16:[2,39],24:[2,39],26:[2,39],28:[2,39],29:[2,39],31:[2,39],32:[2,39],34:[2,39]},{5:[2,3],12:[2,3],13:[2,3],16:[2,3],24:[2,3],26:[2,3],28:[2,3],29:[2,3],31:[2,3],32:[2,3],34:[2,3]},{5:[2,4],12:[2,4],13:[2,4],16:[2,4],24:[2,4],26:[2,4],28:[2,4],29:[2,4],31:[2,4],32:[2,4],34:[2,4]},{5:[2,5],12:[2,5],13:[2,5],16:[2,5],24:[2,5],26:[2,5],28:[2,5],29:[2,5],31:[2,5],32:[2,5],34:[2,5]},{5:[2,6],12:[2,6],13:[2,6],16:[2,6],24:[2,6],26:[2,6],28:[2,6],29:[2,6],31:[2,6],32:[2,6],34:[2,6]},{5:[2,7],12:[2,7],13:[2,7],16:[2,7],24:[2,7],26:[2,7],28:[2,7],29:[2,7],31:[2,7],32:[2,7],34:[2,7]},{5:[2,8],12:[2,8],13:[2,8],16:[2,8],24:[2,8],26:[2,8],28:[2,8],29:[2,8],31:[2,8],32:[2,8],34:[2,8]},{17:21,30:22,41:23,50:[1,26],52:[1,25],53:24},{17:27,30:22,41:23,50:[1,26],52:[1,25],53:24},{4:28,6:3,12:[2,38],13:[2,38],16:[2,38],24:[2,38],26:[2,38],28:[2,38],29:[2,38],31:[2,38],32:[2,38],34:[2,38]},{4:29,6:3,12:[2,38],13:[2,38],16:[2,38],24:[2,38],26:[2,38],28:[2,38],29:[2,38],31:[2,38],32:[2,38],34:[2,38]},{12:[1,30]},{30:32,35:31,42:[1,33],43:[1,34],50:[1,26],53:24},{17:35,30:22,41:23,50:[1,26],52:[1,25],53:24},{17:36,30:22,41:23,50:[1,26],52:[1,25],53:24},{17:37,30:22,41:23,50:[1,26],52:[1,25],53:24},{25:[1,38]},{18:[2,48],25:[2,48],33:[2,48],39:39,42:[2,48],43:[2,48],44:[2,48],45:[2,48],46:[2,48],50:[2,48],52:[2,48]},{18:[2,22],25:[2,22],33:[2,22],46:[2,22]},{18:[2,35],25:[2,35],33:[2,35],42:[2,35],43:[2,35],44:[2,35],45:[2,35],46:[2,35],50:[2,35],52:[2,35],54:[1,40]},{30:41,50:[1,26],53:24},{18:[2,37],25:[2,37],33:[2,37],42:[2,37],43:[2,37],44:[2,37],45:[2,37],46:[2,37],50:[2,37],52:[2,37],54:[2,37]},{33:[1,42]},{20:43,27:44,28:[1,45],29:[2,40]},{23:46,27:47,28:[1,45],29:[2,42]},{15:[1,48]},{25:[2,46],30:51,36:49,38:50,41:55,42:[1,52],43:[1,53],44:[1,54],45:[1,56],47:57,48:58,49:60,50:[1,59],52:[1,25],53:24},{25:[2,31],42:[2,31],43:[2,31],44:[2,31],45:[2,31],50:[2,31],52:[2,31]},{25:[2,32],42:[2,32],43:[2,32],44:[2,32],45:[2,32],50:[2,32],52:[2,32]},{25:[2,33],42:[2,33],43:[2,33],44:[2,33],45:[2,33],50:[2,33],52:[2,33]},{25:[1,61]},{25:[1,62]},{18:[1,63]},{5:[2,17],12:[2,17],13:[2,17],16:[2,17],24:[2,17],26:[2,17],28:[2,17],29:[2,17],31:[2,17],32:[2,17],34:[2,17]},{18:[2,50],25:[2,50],30:51,33:[2,50],36:65,40:64,41:55,42:[1,52],43:[1,53],44:[1,54],45:[1,56],46:[2,50],47:66,48:58,49:60,50:[1,59],52:[1,25],53:24},{50:[1,67]},{18:[2,34],25:[2,34],33:[2,34],42:[2,34],43:[2,34],44:[2,34],45:[2,34],46:[2,34],50:[2,34],52:[2,34]},{5:[2,18],12:[2,18],13:[2,18],16:[2,18],24:[2,18],26:[2,18],28:[2,18],29:[2,18],31:[2,18],32:[2,18],34:[2,18]},{21:68,29:[1,69]},{29:[2,41]},{4:70,6:3,12:[2,38],13:[2,38],16:[2,38],24:[2,38],26:[2,38],29:[2,38],31:[2,38],32:[2,38],34:[2,38]},{21:71,29:[1,69]},{29:[2,43]},{5:[2,9],12:[2,9],13:[2,9],16:[2,9],24:[2,9],26:[2,9],28:[2,9],29:[2,9],31:[2,9],32:[2,9],34:[2,9]},{25:[2,44],37:72,47:73,48:58,49:60,50:[1,74]},{25:[1,75]},{18:[2,23],25:[2,23],33:[2,23],42:[2,23],43:[2,23],44:[2,23],45:[2,23],46:[2,23],50:[2,23],52:[2,23]},{18:[2,24],25:[2,24],33:[2,24],42:[2,24],43:[2,24],44:[2,24],45:[2,24],46:[2,24],50:[2,24],52:[2,24]},{18:[2,25],25:[2,25],33:[2,25],42:[2,25],43:[2,25],44:[2,25],45:[2,25],46:[2,25],50:[2,25],52:[2,25]},{18:[2,26],25:[2,26],33:[2,26],42:[2,26],43:[2,26],44:[2,26],45:[2,26],46:[2,26],50:[2,26],52:[2,26]},{18:[2,27],25:[2,27],33:[2,27],42:[2,27],43:[2,27],44:[2,27],45:[2,27],46:[2,27],50:[2,27],52:[2,27]},{17:76,30:22,41:23,50:[1,26],52:[1,25],53:24},{25:[2,47]},{18:[2,29],25:[2,29],33:[2,29],46:[2,29],49:77,50:[1,74]},{18:[2,37],25:[2,37],33:[2,37],42:[2,37],43:[2,37],44:[2,37],45:[2,37],46:[2,37],50:[2,37],51:[1,78],52:[2,37],54:[2,37]},{18:[2,52],25:[2,52],33:[2,52],46:[2,52],50:[2,52]},{12:[2,13],13:[2,13],16:[2,13],24:[2,13],26:[2,13],28:[2,13],29:[2,13],31:[2,13],32:[2,13],34:[2,13]},{12:[2,14],13:[2,14],16:[2,14],24:[2,14],26:[2,14],28:[2,14],29:[2,14],31:[2,14],32:[2,14],34:[2,14]},{12:[2,10]},{18:[2,21],25:[2,21],33:[2,21],46:[2,21]},{18:[2,49],25:[2,49],33:[2,49],42:[2,49],43:[2,49],44:[2,49],45:[2,49],46:[2,49],50:[2,49],52:[2,49]},{18:[2,51],25:[2,51],33:[2,51],46:[2,51]},{18:[2,36],25:[2,36],33:[2,36],42:[2,36],43:[2,36],44:[2,36],45:[2,36],46:[2,36],50:[2,36],52:[2,36],54:[2,36]},{5:[2,11],12:[2,11],13:[2,11],16:[2,11],24:[2,11],26:[2,11],28:[2,11],29:[2,11],31:[2,11],32:[2,11],34:[2,11]},{30:79,50:[1,26],53:24},{29:[2,15]},{5:[2,12],12:[2,12],13:[2,12],16:[2,12],24:[2,12],26:[2,12],28:[2,12],29:[2,12],31:[2,12],32:[2,12],34:[2,12]},{25:[1,80]},{25:[2,45]},{51:[1,78]},{5:[2,20],12:[2,20],13:[2,20],16:[2,20],24:[2,20],26:[2,20],28:[2,20],29:[2,20],31:[2,20],32:[2,20],34:[2,20]},{46:[1,81]},{18:[2,53],25:[2,53],33:[2,53],46:[2,53],50:[2,53]},{30:51,36:82,41:55,42:[1,52],43:[1,53],44:[1,54],45:[1,56],50:[1,26],52:[1,25],53:24},{25:[1,83]},{5:[2,19],12:[2,19],13:[2,19],16:[2,19],24:[2,19],26:[2,19],28:[2,19],29:[2,19],31:[2,19],32:[2,19],34:[2,19]},{18:[2,28],25:[2,28],33:[2,28],42:[2,28],43:[2,28],44:[2,28],45:[2,28],46:[2,28],50:[2,28],52:[2,28]},{18:[2,30],25:[2,30],33:[2,30],46:[2,30],50:[2,30]},{5:[2,16],12:[2,16],13:[2,16],16:[2,16],24:[2,16],26:[2,16],28:[2,16],29:[2,16],31:[2,16],32:[2,16],34:[2,16]}],defaultActions:{4:[2,1],44:[2,41],47:[2,43],57:[2,47],63:[2,10],70:[2,15],73:[2,45]},parseError:function(a){throw new Error(a)},parse:function(a){function b(){var a;return a=c.lexer.lex()||1,"number"!=typeof a&&(a=c.symbols_[a]||a),a}var c=this,d=[0],e=[null],f=[],g=this.table,h="",i=0,j=0,k=0;this.lexer.setInput(a),this.lexer.yy=this.yy,this.yy.lexer=this.lexer,this.yy.parser=this,"undefined"==typeof this.lexer.yylloc&&(this.lexer.yylloc={});var l=this.lexer.yylloc;f.push(l);var m=this.lexer.options&&this.lexer.options.ranges;"function"==typeof this.yy.parseError&&(this.parseError=this.yy.parseError);for(var n,o,p,q,r,s,t,u,v,w={};;){if(p=d[d.length-1],this.defaultActions[p]?q=this.defaultActions[p]:((null===n||"undefined"==typeof n)&&(n=b()),q=g[p]&&g[p][n]),"undefined"==typeof q||!q.length||!q[0]){var x="";if(!k){v=[];for(s in g[p])this.terminals_[s]&&s>2&&v.push("'"+this.terminals_[s]+"'");x=this.lexer.showPosition?"Parse error on line "+(i+1)+":\n"+this.lexer.showPosition()+"\nExpecting "+v.join(", ")+", got '"+(this.terminals_[n]||n)+"'":"Parse error on line "+(i+1)+": Unexpected "+(1==n?"end of input":"'"+(this.terminals_[n]||n)+"'"),this.parseError(x,{text:this.lexer.match,token:this.terminals_[n]||n,line:this.lexer.yylineno,loc:l,expected:v})}}if(q[0]instanceof Array&&q.length>1)throw new Error("Parse Error: multiple actions possible at state: "+p+", token: "+n);switch(q[0]){case 1:d.push(n),e.push(this.lexer.yytext),f.push(this.lexer.yylloc),d.push(q[1]),n=null,o?(n=o,o=null):(j=this.lexer.yyleng,h=this.lexer.yytext,i=this.lexer.yylineno,l=this.lexer.yylloc,k>0&&k--);break;case 2:if(t=this.productions_[q[1]][1],w.$=e[e.length-t],w._$={first_line:f[f.length-(t||1)].first_line,last_line:f[f.length-1].last_line,first_column:f[f.length-(t||1)].first_column,last_column:f[f.length-1].last_column},m&&(w._$.range=[f[f.length-(t||1)].range[0],f[f.length-1].range[1]]),r=this.performAction.call(w,h,j,i,this.yy,q[1],e,f),"undefined"!=typeof r)return r;t&&(d=d.slice(0,-1*t*2),e=e.slice(0,-1*t),f=f.slice(0,-1*t)),d.push(this.productions_[q[1]][0]),e.push(w.$),f.push(w._$),u=g[d[d.length-2]][d[d.length-1]],d.push(u);break;case 3:return!0}}return!0}},c=function(){var a={EOF:1,parseError:function(a,b){if(!this.yy.parser)throw new Error(a);this.yy.parser.parseError(a,b)},setInput:function(a){return this._input=a,this._more=this._less=this.done=!1,this.yylineno=this.yyleng=0,this.yytext=this.matched=this.match="",this.conditionStack=["INITIAL"],this.yylloc={first_line:1,first_column:0,last_line:1,last_column:0},this.options.ranges&&(this.yylloc.range=[0,0]),this.offset=0,this},input:function(){var a=this._input[0];this.yytext+=a,this.yyleng++,this.offset++,this.match+=a,this.matched+=a;var b=a.match(/(?:\r\n?|\n).*/g);return b?(this.yylineno++,this.yylloc.last_line++):this.yylloc.last_column++,this.options.ranges&&this.yylloc.range[1]++,this._input=this._input.slice(1),a},unput:function(a){var b=a.length,c=a.split(/(?:\r\n?|\n)/g);this._input=a+this._input,this.yytext=this.yytext.substr(0,this.yytext.length-b-1),this.offset-=b;var d=this.match.split(/(?:\r\n?|\n)/g);this.match=this.match.substr(0,this.match.length-1),this.matched=this.matched.substr(0,this.matched.length-1),c.length-1&&(this.yylineno-=c.length-1);var e=this.yylloc.range;return this.yylloc={first_line:this.yylloc.first_line,last_line:this.yylineno+1,first_column:this.yylloc.first_column,last_column:c?(c.length===d.length?this.yylloc.first_column:0)+d[d.length-c.length].length-c[0].length:this.yylloc.first_column-b},this.options.ranges&&(this.yylloc.range=[e[0],e[0]+this.yyleng-b]),this},more:function(){return this._more=!0,this},less:function(a){this.unput(this.match.slice(a))},pastInput:function(){var a=this.matched.substr(0,this.matched.length-this.match.length);return(a.length>20?"...":"")+a.substr(-20).replace(/\n/g,"")},upcomingInput:function(){var a=this.match;return a.length<20&&(a+=this._input.substr(0,20-a.length)),(a.substr(0,20)+(a.length>20?"...":"")).replace(/\n/g,"")},showPosition:function(){var a=this.pastInput(),b=new Array(a.length+1).join("-");return a+this.upcomingInput()+"\n"+b+"^"},next:function(){if(this.done)return this.EOF;this._input||(this.done=!0);var a,b,c,d,e;this._more||(this.yytext="",this.match="");for(var f=this._currentRules(),g=0;g<f.length&&(c=this._input.match(this.rules[f[g]]),!c||b&&!(c[0].length>b[0].length)||(b=c,d=g,this.options.flex));g++);return b?(e=b[0].match(/(?:\r\n?|\n).*/g),e&&(this.yylineno+=e.length),this.yylloc={first_line:this.yylloc.last_line,last_line:this.yylineno+1,first_column:this.yylloc.last_column,last_column:e?e[e.length-1].length-e[e.length-1].match(/\r?\n?/)[0].length:this.yylloc.last_column+b[0].length},this.yytext+=b[0],this.match+=b[0],this.matches=b,this.yyleng=this.yytext.length,this.options.ranges&&(this.yylloc.range=[this.offset,this.offset+=this.yyleng]),this._more=!1,this._input=this._input.slice(b[0].length),this.matched+=b[0],a=this.performAction.call(this,this.yy,this,f[d],this.conditionStack[this.conditionStack.length-1]),this.done&&this._input&&(this.done=!1),a?a:void 0):""===this._input?this.EOF:this.parseError("Lexical error on line "+(this.yylineno+1)+". Unrecognized text.\n"+this.showPosition(),{text:"",token:null,line:this.yylineno})},lex:function(){var a=this.next();return"undefined"!=typeof a?a:this.lex()},begin:function(a){this.conditionStack.push(a)},popState:function(){return this.conditionStack.pop()},_currentRules:function(){return this.conditions[this.conditionStack[this.conditionStack.length-1]].rules},topState:function(){return this.conditionStack[this.conditionStack.length-2]},pushState:function(a){this.begin(a)}};return a.options={},a.performAction=function(a,b,c,d){function e(a,c){return b.yytext=b.yytext.substr(a,b.yyleng-c)}switch(c){case 0:if("\\\\"===b.yytext.slice(-2)?(e(0,1),this.begin("mu")):"\\"===b.yytext.slice(-1)?(e(0,1),this.begin("emu")):this.begin("mu"),b.yytext)return 12;break;case 1:return 12;case 2:return this.popState(),12;case 3:return b.yytext=b.yytext.substr(5,b.yyleng-9),this.popState(),15;case 4:return 12;case 5:return e(0,4),this.popState(),13;case 6:return 45;case 7:return 46;case 8:return 16;case 9:return this.popState(),this.begin("raw"),18;case 10:return 34;case 11:return 24;case 12:return 29;case 13:return this.popState(),28;case 14:return this.popState(),28;case 15:return 26;case 16:return 26;case 17:return 32;case 18:return 31;case 19:this.popState(),this.begin("com");break;case 20:return e(3,5),this.popState(),13;case 21:return 31;case 22:return 51;case 23:return 50;case 24:return 50;case 25:return 54;case 26:break;case 27:return this.popState(),33;case 28:return this.popState(),25;case 29:return b.yytext=e(1,2).replace(/\\"/g,'"'),42;case 30:return b.yytext=e(1,2).replace(/\\'/g,"'"),42;case 31:return 52;case 32:return 44;case 33:return 44;case 34:return 43;case 35:return 50;case 36:return b.yytext=e(1,2),50;case 37:return"INVALID";case 38:return 5}},a.rules=[/^(?:[^\x00]*?(?=(\{\{)))/,/^(?:[^\x00]+)/,/^(?:[^\x00]{2,}?(?=(\{\{|\\\{\{|\\\\\{\{|$)))/,/^(?:\{\{\{\{\/[^\s!"#%-,\.\/;->@\[-\^`\{-~]+(?=[=}\s\/.])\}\}\}\})/,/^(?:[^\x00]*?(?=(\{\{\{\{\/)))/,/^(?:[\s\S]*?--\}\})/,/^(?:\()/,/^(?:\))/,/^(?:\{\{\{\{)/,/^(?:\}\}\}\})/,/^(?:\{\{(~)?>)/,/^(?:\{\{(~)?#)/,/^(?:\{\{(~)?\/)/,/^(?:\{\{(~)?\^\s*(~)?\}\})/,/^(?:\{\{(~)?\s*else\s*(~)?\}\})/,/^(?:\{\{(~)?\^)/,/^(?:\{\{(~)?\s*else\b)/,/^(?:\{\{(~)?\{)/,/^(?:\{\{(~)?&)/,/^(?:\{\{!--)/,/^(?:\{\{![\s\S]*?\}\})/,/^(?:\{\{(~)?)/,/^(?:=)/,/^(?:\.\.)/,/^(?:\.(?=([=~}\s\/.)])))/,/^(?:[\/.])/,/^(?:\s+)/,/^(?:\}(~)?\}\})/,/^(?:(~)?\}\})/,/^(?:"(\\["]|[^"])*")/,/^(?:'(\\[']|[^'])*')/,/^(?:@)/,/^(?:true(?=([~}\s)])))/,/^(?:false(?=([~}\s)])))/,/^(?:-?[0-9]+(?:\.[0-9]+)?(?=([~}\s)])))/,/^(?:([^\s!"#%-,\.\/;->@\[-\^`\{-~]+(?=([=~}\s\/.)]))))/,/^(?:\[[^\]]*\])/,/^(?:.)/,/^(?:$)/],a.conditions={mu:{rules:[6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38],inclusive:!1},emu:{rules:[2],inclusive:!1},com:{rules:[5],inclusive:!1},raw:{rules:[3,4],inclusive:!1},INITIAL:{rules:[0,1,38],inclusive:!0}},a}();return b.lexer=c,a.prototype=b,b.Parser=a,new a}();return a=b}(),i=function(a){"use strict";function b(a,b){return{left:"~"===a.charAt(2),right:"~"===b.charAt(b.length-3)}}function c(a,b,c,d,i,k){if(a.sexpr.id.original!==d.path.original)throw new j(a.sexpr.id.original+" doesn't match "+d.path.original,a);var l=c&&c.program,m={left:a.strip.left,right:d.strip.right,openStandalone:f(b.statements),closeStandalone:e((l||b).statements)};if(a.strip.right&&g(b.statements,null,!0),l){var n=c.strip;n.left&&h(b.statements,null,!0),n.right&&g(l.statements,null,!0),d.strip.left&&h(l.statements,null,!0),e(b.statements)&&f(l.statements)&&(h(b.statements),g(l.statements))}else d.strip.left&&h(b.statements,null,!0);return i?new this.BlockNode(a,l,b,m,k):new this.BlockNode(a,b,l,m,k)}function d(a,b){for(var c=0,d=a.length;d>c;c++){var i=a[c],j=i.strip;if(j){var k=e(a,c,b,"partial"===i.type),l=f(a,c,b),m=j.openStandalone&&k,n=j.closeStandalone&&l,o=j.inlineStandalone&&k&&l;j.right&&g(a,c,!0),j.left&&h(a,c,!0),o&&(g(a,c),h(a,c)&&"partial"===i.type&&(i.indent=/([ \t]+$)/.exec(a[c-1].original)?RegExp.$1:"")),m&&(g((i.program||i.inverse).statements),h(a,c)),n&&(g(a,c),h((i.inverse||i.program).statements))}}return a}function e(a,b,c){void 0===b&&(b=a.length);var d=a[b-1],e=a[b-2];return d?"content"===d.type?(e||!c?/\r?\n\s*?$/:/(^|\r?\n)\s*?$/).test(d.original):void 0:c}function f(a,b,c){void 0===b&&(b=-1);var d=a[b+1],e=a[b+2];return d?"content"===d.type?(e||!c?/^\s*?\r?\n/:/^\s*?(\r?\n|$)/).test(d.original):void 0:c}function g(a,b,c){var d=a[null==b?0:b+1];if(d&&"content"===d.type&&(c||!d.rightStripped)){var e=d.string;d.string=d.string.replace(c?/^\s+/:/^[ \t]*\r?\n?/,""),d.rightStripped=d.string!==e}}function h(a,b,c){var d=a[null==b?a.length-1:b-1];if(d&&"content"===d.type&&(c||!d.leftStripped)){var e=d.string;return d.string=d.string.replace(c?/\s+$/:/[ \t]+$/,""),d.leftStripped=d.string!==e,d.leftStripped}}var i={},j=a;return i.stripFlags=b,i.prepareBlock=c,i.prepareProgram=d,i}(c),j=function(a,b,c,d){"use strict";function e(a){return a.constructor===h.ProgramNode?a:(g.yy=k,g.parse(a))}var f={},g=a,h=b,i=c,j=d.extend;f.parser=g;var k={};return j(k,i,h),f.parse=e,f}(h,g,i,b),k=function(a,b){"use strict";function c(){}function d(a,b,c){if(null==a||"string"!=typeof a&&a.constructor!==c.AST.ProgramNode)throw new h("You must pass a string or Handlebars AST to Handlebars.precompile. You passed "+a);b=b||{},"data"in b||(b.data=!0),b.compat&&(b.useDepths=!0);var d=c.parse(a),e=(new c.Compiler).compile(d,b);return(new c.JavaScriptCompiler).compile(e,b)}function e(a,b,c){function d(){var d=c.parse(a),e=(new c.Compiler).compile(d,b),f=(new c.JavaScriptCompiler).compile(e,b,void 0,!0);return c.template(f)}if(null==a||"string"!=typeof a&&a.constructor!==c.AST.ProgramNode)throw new h("You must pass a string or Handlebars AST to Handlebars.compile. You passed "+a);b=b||{},"data"in b||(b.data=!0),b.compat&&(b.useDepths=!0);var e,f=function(a,b){return e||(e=d()),e.call(this,a,b)};return f._setup=function(a){return e||(e=d()),e._setup(a)},f._child=function(a,b,c){return e||(e=d()),e._child(a,b,c)},f}function f(a,b){if(a===b)return!0;if(i(a)&&i(b)&&a.length===b.length){for(var c=0;c<a.length;c++)if(!f(a[c],b[c]))return!1;return!0}}var g={},h=a,i=b.isArray,j=[].slice;return g.Compiler=c,c.prototype={compiler:c,equals:function(a){var b=this.opcodes.length;if(a.opcodes.length!==b)return!1;for(var c=0;b>c;c++){var d=this.opcodes[c],e=a.opcodes[c];if(d.opcode!==e.opcode||!f(d.args,e.args))return!1}for(b=this.children.length,c=0;b>c;c++)if(!this.children[c].equals(a.children[c]))return!1;return!0},guid:0,compile:function(a,b){this.opcodes=[],this.children=[],this.depths={list:[]},this.options=b,this.stringParams=b.stringParams,this.trackIds=b.trackIds;var c=this.options.knownHelpers;if(this.options.knownHelpers={helperMissing:!0,blockHelperMissing:!0,each:!0,"if":!0,unless:!0,"with":!0,log:!0,lookup:!0},c)for(var d in c)this.options.knownHelpers[d]=c[d];return this.accept(a)},accept:function(a){return this[a.type](a)},program:function(a){for(var b=a.statements,c=0,d=b.length;d>c;c++)this.accept(b[c]);return this.isSimple=1===d,this.depths.list=this.depths.list.sort(function(a,b){return a-b}),this},compileProgram:function(a){var b,c=(new this.compiler).compile(a,this.options),d=this.guid++;
......
examples/hello-mui/list.html
View file @ 1685cf20
......@@ -128,7 +128,7 @@
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/grid-pagination.html">
左右滑动分页样式
可左右滑动的9宫导航
</a>
</li>
<!--<li class="mui-table-view-cell">
......@@ -169,32 +169,11 @@
列表带input类控件
</a>
</li>
<!--<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/tableviews-with-switches.html">
右侧带开关
</a>
</li>-->
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/list-triplex-row.html">
三行列表
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/tableview-image-left.html">
图文列表（缩略图居左）
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/tableview-image-right.html">
图文列表（缩略图居右）
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/tableview-with-images-and-chevrons.html">
图文列表（左缩略图+右箭头）
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/tableviews-with-collapses.html">
......@@ -215,6 +194,11 @@
</ul>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/media-list.html">
media list（图文列表）
</a>
</li>
<li class="mui-table-view-cell mui-collapse">
<a class="mui-navigate-right" href="#">
nav bar（导航栏）
......@@ -225,11 +209,6 @@
默认样式
</a>
</li>
<!--<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/titlebar-with-search.html">
（待确认）导航条包含搜索框
</a>
</li>-->
<li class="mui-table-view-cell">
<a class="mui-navigate-right" open-type="common" href="examples/titlebar-with-buttons.html">
导航条包含按钮
......@@ -245,12 +224,6 @@
导航条同时包含文字和图标
</a>
</li>
<!--<li class="mui-table-view-cell"><a class="mui-navigate-right" href="examples/titlebar-with-webview-and-5+.html">Title bar with 5+(webview)</a></li>-->
<!--<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/titlebar-with-html5-and-5+.html">
5+创建的导航条
</a>
</li>-->
</ul>
</li>
<li class="mui-table-view-cell mui-collapse">
......@@ -259,12 +232,12 @@
</a>
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell">
<a class="mui-navigate-right" open-type="common" href="examples/offcanvas-left-plus-main.html">
<a class="mui-navigate-right" open-type="common" href="examples/offcanvas-drag-right-plus-main.html">
右滑菜单
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" open-type="common" href="examples/offcanvas-right-plus-main.html">
<a class="mui-navigate-right" open-type="common" href="examples/offcanvas-drag-left-plus-main.html">
左滑菜单
</a>
</li>
......@@ -295,27 +268,15 @@
popover
</a>
</li>
<!--<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/popovers-with-js-call.html">
popover with js call
</a>
</li>-->
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/popovers-with-actionsheet.html">
popover with action sheet
</a>
</li>
<!--<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/popovers-with-cross-webviews.html">
Popovers with cross webviews
</a>
</li>-->
</ul>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" open-type="common" href="examples/pullrefresh-main.html">
<a class="mui-navigate-right" href="examples/pullrefresh.html">
pull to refresh（下拉刷新&上拉加载）
</a>
</li>
......@@ -352,9 +313,6 @@
switch（开关）
</a>
</li>
<li class="mui-table-view-cell mui-collapse">
<a class="mui-navigate-right" href="#">
tab bar（选项卡）
......@@ -447,11 +405,7 @@
iscroll 4
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/speech.html">
语音助手
</a>
</li>-->
-->
<!--<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/demo.html">
预加载(模板)
......@@ -465,129 +419,159 @@
</ul>
</div>
<script>
(function($) {
mui.init({
preloadLimit: 3, //同时并存的预加载窗口数量
swipeBack: false,
});
$.plusReady(function() {
plus.navigator.closeSplashscreen();
//首页返回键处理
//处理逻辑：1秒内，连续两次按返回键，则退出应用；
var first = null;
plus.key.addEventListener('backbutton', function(){
//首次按键，提示‘再按一次退出应用’
if(!first){
first = new Date().getTime();
mui.toast('再按一次退出应用');
setTimeout(function(){
first = null;
},1000);
}else{
if(new Date().getTime()-first<1000){
plus.runtime.quit();
}
}
}, false);
//预加载下拉刷新
$.preload({
id:"examples/pullrefresh-main.html",
url:"examples/pullrefresh-main.html",
styles:{
popGesture:"hide"
}
});
//预加载共用父webview
var template = $.preload({
url:'examples/template.html',
id:'demoTemplate',
//只有ios支持的功能需要在Android平台隐藏；
if (mui.os.android) {
var list = document.querySelectorAll('.ios-only');
if (list) {
for (var i = 0; i < list.length; i++) {
list[i].style.display = 'none';
}
}
}
mui.init({
preloadLimit: 5, //同时并存的预加载窗口数量
swipeBack: false,
keyEventBind: {
backbutton: false
}
});
var templates = {};
var getTemplate = function(name, header, content, loading) {
var template = templates[name];
if (!template) {
//预加载共用父模板；
var headerWebview = mui.preload({
url:header,
id:name+"-main",
styles:{
popGesture:"hide"
},
extras:{
mType: 'main'
}
});
////预加载共用子webview
var subWebview = $.preload({
url:'examples/accordion.html',
id:'template_sub',
//预加载共用子webview
var subWebview = mui.preload({
url:!content?"":content,
id:name+"-sub",
styles:{
top: '48px',
bottom: '0px'
},
extras:{
mType: 'sub'
}
});
var waiting = null;
subWebview.addEventListener('loaded', function() {
setTimeout(function(){
subWebview.show();
},50);
setTimeout(function() {
subWebview.show();
}, 50);
});
subWebview.hide();
headerWebview.append(subWebview);
//iOS平台支持侧滑关闭，父窗体侧滑隐藏后，同时需要隐藏子窗体；
if($.os.ios){
template.addEventListener('hide',function () {
if (mui.os.ios) { //5+父窗体隐藏，子窗体还可以看到？不符合逻辑吧？
headerWebview.addEventListener('hide', function() {
subWebview.hide("none");
});
}
templates[name] = template = {
name: name,
header: headerWebview,
content: subWebview,
loaded: loading
};
}
return template;
};
template.append(subWebview);
if ($.os.android) {
var list = document.querySelectorAll('.ios-only');
if (list) {
for (var i = 0; i < list.length; i++) {
list[i].style.display = 'none';
var initTemplates = function() {
getTemplate('pullrefresh', 'examples/template_pullrefresh.html', 'examples/pullrefresh.html', true);
getTemplate('default', 'examples/template.html');
};
mui.plusReady(function() {
//关闭splash页面；
plus.navigator.closeSplashscreen();
//初始化模板
initTemplates(); //预加载所有模板
});
//主列表点击事件
mui('#list').on('tap', 'a', function() {
var id = this.getAttribute('href');
var type = this.getAttribute("open-type");
if (type == "common") {
if (~id.indexOf('offcanvas-')) {
var pop = ~id.indexOf('offcanvas-with-right') ? "close" : "none";
mui.openWindow({
id: id,
url: this.href,
styles: {
zindex: 9999,
popGesture: pop
},
waiting: {
autoShow: false
}
}
}
$('#list').on('tap', 'a', function() {
var id = this.getAttribute('href');
var type = this.getAttribute("open-type");
if(type=="common"){
if (~id.indexOf('offcanvas-')) {
var pop = ~id.indexOf('offcanvas-with-right')?"close":"none";
mui.openWindow({
id: id,
url: this.href,
styles: {
zindex: 9999,
popGesture:pop
},
waiting:{
autoShow:false
}
});
} else if(~id.indexOf('pullrefresh')){
mui.openWindow({
id: id,
url: id,
preload:true
});
}else{
mui.openWindow({
id: id,
url: this.href,
waiting:{
autoShow:false
}
});
});
} else {
mui.openWindow({
id: id,
url: this.href,
waiting: {
autoShow: false
}
}else{
if (id&&~id.indexOf('.html')) {
var title = this.innerText;
template.evalJS("with(document.getElementById('title')){innerHTML='" + title + "';className='mui-title mui-fadein';};");
if(subWebview.getURL()==this.href){
subWebview.show();
}else{
subWebview.loadURL(this.href);
}
template.show('slide-in-right', 150);
});
}
} else {
if (id && ~id.indexOf('.html')) {
var href = this.href;
//获得共用模板组
var template = ~href.indexOf('pullrefresh.html')?getTemplate('pullrefresh'):getTemplate('default');
//判断是否显示右上角menu图标；
var showMenu = ~href.indexOf('popovers.html')?true:false;
//获得共用父模板
var headerWebview = template.header;
//获得共用子webview
var contentWebview = template.content;
var title = this.innerText;
//通知模板修改标题，并显示隐藏右上角图标；
mui.fire(headerWebview,'updateHeader',{title:title,showMenu:showMenu});
var reload = true;
if (!template.loaded) {
if (contentWebview.getURL() != this.href) {
contentWebview.loadURL(this.href);
} else {
reload = false;
}
} else {
reload = false;
}
});
});
})(mui);
(!reload) && contentWebview.show();
headerWebview.show('slide-in-right', 150);
}
}
});
var index = null;//主页面
function openMenu () {
!index&&(index = mui.currentWebview.parent());
mui.fire(index,"menu:open");
}
//监听右滑事件，若侧滑菜单未显示，右滑要显示菜单；
window.addEventListener("swiperight",function (e) {
//默认滑动角度在-45度到45度之间，都会触发右滑菜单，为避免误操作，可自定义限制滑动角度；
if(Math.abs(e.detail.angle)<9){
openMenu();
}
});
</script>
</body>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment