Skip to content

M
mui
Commit 3b9754bc authored by hbcui1984's avatar hbcui1984
Browse files
Options

删除_site目录

parent 86f3bac6
Show whitespace changes
Inline Side-by-side
Showing with 0 additions and 15961 deletions
_site/LICENSE deleted 100644 → 0
View file @ 86f3bac6
The MIT License (MIT)
Copyright (c) 2014 connors and other contributors
Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
the Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
\ No newline at end of file
_site/README.md deleted 100644 → 0
View file @ 86f3bac6
mui
===
性能和体验的差距，一直是mobile app开发者放弃HTML5的首要原因。 浏览器天生的切页白屏、不忍直视的转页动画、浮动元素的抖动、无法流畅下拉刷新等问题，这些都让HTML5开发者倍感挫败，尤其拿到Android低端机运行，摔手机的心都有； 另一方面，浏览器默认控件样式又少又丑，制作一个漂亮的控件非常麻烦，也有一些制作简单的ui框架但性能低下。
mui框架有效的解决了这些问题，这是一个可以方便开发出高性能App的框架，也是目前最接近原生App效果的框架。
新手指南
--------
从<http://www.dcloud.io/hellomui>下载Hello MUI并安装，可直接在手机上体验MUI的控件UI及能力展示；
若想详细了解Hello MUI的源码及工作原理，可从<http://www.dcloud.io>下载Hbuilder，选择新建“移动APP”，并选择“Hello MUI”工程模板，创建工程；然后通过数据线将手机连接上电脑，点击运行，也可以在手机上体验MUI的各项能力。
若要使用MUI进行移动APP开发，可通过Hbuilder，新建“移动APP”，并选择“MUI”工程模板，该模板已内置MUI相关的资源文件。
License
-------
mui遵循MIT License；
_site/dist/css/mui.css deleted 100644 → 0
View file @ 86f3bac6
/*!
* =====================================================
* Mui v0.5.5 (https://github.com/dcloudio/mui)
* =====================================================
*/
/*! normalize.css v3.0.1 | MIT License | git.io/normalize */
html {
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body {
margin: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
display: block;
}
audio,
canvas,
progress,
video {
display: inline-block;
vertical-align: baseline;
}
audio:not([controls]) {
display: none;
height: 0;
}
[hidden],
template {
display: none;
}
a {
background: transparent;
}
a:active,
a:hover {
outline: 0;
}
abbr[title] {
border-bottom: 1px dotted;
}
b,
strong {
font-weight: bold;
}
dfn {
font-style: italic;
}
h1 {
margin: .67em 0;
font-size: 2em;
}
mark {
color: #000;
background: #ff0;
}
small {
font-size: 80%;
}
sub,
sup {
position: relative;
font-size: 75%;
line-height: 0;
vertical-align: baseline;
}
sup {
top: -.5em;
}
sub {
bottom: -.25em;
}
img {
border: 0;
}
svg:not(:root) {
overflow: hidden;
}
figure {
margin: 1em 40px;
}
hr {
height: 0;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
pre {
overflow: auto;
}
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
button,
input,
optgroup,
select,
textarea {
margin: 0;
font: inherit;
color: inherit;
}
button {
overflow: visible;
}
button,
select {
text-transform: none;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
cursor: pointer;
}
button[disabled],
html input[disabled] {
cursor: default;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
padding: 0;
border: 0;
}
input {
line-height: normal;
}
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box;
padding: 0;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto;
}
input[type="search"] {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
-webkit-appearance: textfield;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
fieldset {
padding: .35em .625em .75em;
margin: 0 2px;
border: 1px solid #c0c0c0;
}
legend {
padding: 0;
border: 0;
}
textarea {
overflow: auto;
}
optgroup {
font-weight: bold;
}
table {
border-spacing: 0;
border-collapse: collapse;
}
td,
th {
padding: 0;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-user-select: none;
-webkit-tap-highlight-color: transparent;
-webkit-tap-highlight-color: transparent;
}
body {
-webkit-overflow-scrolling: touch;
font-family: "Helvetica Neue", Helvetica, sans-serif;
font-size: 17px;
line-height: 21px;
color: #000;
background-color: #fff;
}
a {
color: #007aff;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
-webkit-tap-highlight-color: transparent;
}
a:active {
color: #0062cc;
}
.mui-content {
-webkit-overflow-scrolling: touch;
background-color: #efeff4;
}
.mui-bar-nav ~ .mui-content {
padding-top: 44px;
}
.mui-bar-header-secondary ~ .mui-content {
padding-top: 88px;
}
.mui-bar-footer ~ .mui-content {
padding-bottom: 44px;
}
.mui-bar-footer-secondary ~ .mui-content {
padding-bottom: 88px;
}
.mui-bar-tab ~ .mui-content {
padding-bottom: 50px;
}
.mui-bar-footer-secondary-tab ~ .mui-content {
padding-bottom: 94px;
}
.mui-hidden {
display: none !important;
}
.mui-inline {
display: inline-block;
vertical-align: top;
}
.mui-block {
display: block;
}
.mui-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mui-ellipsis-2 {
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal !important;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.mui-table {
display: table;
width: 100%;
table-layout: fixed;
}
.mui-table-cell {
position: relative;
display: table-cell;
}
.mui-text-left {
text-align: left !important;
}
.mui-text-center {
text-align: center !important;
}
.mui-text-justify {
text-align: justify !important;
}
.mui-text-right {
text-align: right !important;
}
.mui-pull-left {
float: left;
}
.mui-pull-right {
float: right;
}
.mui-list-unstyled {
padding-left: 0;
list-style: none;
}
.mui-list-inline {
padding-left: 0;
margin-left: -5px;
list-style: none;
}
.mui-list-inline > li {
display: inline-block;
padding-right: 5px;
padding-left: 5px;
}
.mui-clearfix:before, .mui-clearfix:after {
display: table;
content: " ";
}
.mui-clearfix:after {
clear: both;
}
.mui-bg-primary {
background-color: #007aff;
}
.mui-bg-positive {
background-color: #4cd964;
}
.mui-bg-negative {
background-color: #dd524d;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 5px;
margin-bottom: 5px;
line-height: 1;
}
h1, .mui-h1 {
font-size: 36px;
}
h2, .mui-h2 {
font-size: 30px;
}
h3, .mui-h3 {
font-size: 24px;
}
h4, .mui-h4 {
font-size: 18px;
}
h5, .mui-h5 {
font-size: 14px;
font-weight: normal;
color: #8f8f94;
}
h6, .mui-h6 {
font-size: 12px;
font-weight: normal;
color: #8f8f94;
}
p {
margin-top: 0;
margin-bottom: 10px;
font-size: 14px;
color: #8f8f94;
}
.mui-col-xs-12 {
width: 100%;
}
.mui-col-xs-11 {
width: 91.66666667%;
}
.mui-col-xs-10 {
width: 83.33333333%;
}
.mui-col-xs-9 {
width: 75%;
}
.mui-col-xs-8 {
width: 66.66666667%;
}
.mui-col-xs-7 {
width: 58.33333333%;
}
.mui-col-xs-6 {
width: 50%;
}
.mui-col-xs-5 {
width: 41.66666667%;
}
.mui-col-xs-4 {
width: 33.33333333%;
}
.mui-col-xs-3 {
width: 25%;
}
.mui-col-xs-2 {
width: 16.66666667%;
}
.mui-col-xs-1 {
width: 8.33333333%;
}
@media (min-width: 400px) {
.mui-col-sm-12 {
width: 100%;
}
.mui-col-sm-11 {
width: 91.66666667%;
}
.mui-col-sm-10 {
width: 83.33333333%;
}
.mui-col-sm-9 {
width: 75%;
}
.mui-col-sm-8 {
width: 66.66666667%;
}
.mui-col-sm-7 {
width: 58.33333333%;
}
.mui-col-sm-6 {
width: 50%;
}
.mui-col-sm-5 {
width: 41.66666667%;
}
.mui-col-sm-4 {
width: 33.33333333%;
}
.mui-col-sm-3 {
width: 25%;
}
.mui-col-sm-2 {
width: 16.66666667%;
}
.mui-col-sm-1 {
width: 8.33333333%;
}
}
.mui-iscroll-wrapper {
position: absolute;
top: 0;
bottom: 0;
left: 0;
z-index: 1;
width: 100%;
overflow: hidden;
}
.mui-bar-nav ~ .mui-iscroll-wrapper {
top: 44px;
padding: 0;
}
.mui-bar-header-secondary ~ .mui-iscroll-wrapper {
top: 88px;
}
.mui-bar-footer ~ .mui-iscroll-wrapper {
bottom: 44px;
padding: 0;
}
.mui-bar-footer-secondary ~ .mui-iscroll-wrapper {
bottom: 88px;
}
.mui-bar-tab ~ .mui-iscroll-wrapper {
bottom: 50px;
padding: 0;
}
.mui-bar-footer-secondary-tab ~ .mui-iscroll-wrapper {
bottom: 94px;
}
.mui-iscroll {
position: absolute;
z-index: 1;
width: 100%;
-webkit-text-size-adjust: none;
-webkit-user-select: none;
user-select: none;
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
text-size-adjust: none;
}
.mui-off-canvas-height-fixed {
height: 100% !important;
}
.mui-off-canvas-wrap {
position: relative;
width: 100%;
}
.mui-off-canvas-wrap .mui-inner-wrap {
position: relative;
width: 100%;
height: 100%;
-webkit-transition: -webkit-transform 400ms ease;
transition: transform 400ms ease;
}
.mui-off-canvas-wrap .mui-inner-wrap .mui-bar {
position: absolute;
}
.mui-off-canvas-wrap .mui-inner-wrap .mui-off-canvas-left {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
.mui-off-canvas-wrap .mui-inner-wrap .mui-off-canvas-right {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
.mui-off-canvas-wrap.mui-sliding, .mui-off-canvas-wrap.mui-left, .mui-off-canvas-wrap.mui-right {
height: 100%;
overflow: hidden;
}
.mui-off-canvas-wrap.mui-sliding .mui-off-canvas-left, .mui-off-canvas-wrap.mui-sliding .mui-off-canvas-right, .mui-off-canvas-wrap.mui-left .mui-off-canvas-left, .mui-off-canvas-wrap.mui-left .mui-off-canvas-right, .mui-off-canvas-wrap.mui-right .mui-off-canvas-left, .mui-off-canvas-wrap.mui-right .mui-off-canvas-right {
display: block;
}
.mui-off-canvas-wrap.mui-left .mui-off-canvas-backdrop, .mui-off-canvas-wrap.mui-right .mui-off-canvas-backdrop {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1002;
display: block;
background: rgba(255, 255, 255, .2);
box-shadow: -4px 0 4px rgba(0, 0, 0, .5), 4px 0 4px rgba(0, 0, 0, .5);
transition: background 300ms ease;
-webkit-backface-visibility: hidden;
-webkit-tap-highlight-color: transparent;
}
.mui-off-canvas-wrap.mui-left .mui-inner-wrap {
-webkit-transform: translate3d(-80%, 0, 0);
transform: translate3d(-80%, 0, 0);
}
.mui-off-canvas-wrap.mui-right .mui-inner-wrap {
-webkit-transform: translate3d(80%, 0, 0);
transform: translate3d(80%, 0, 0);
}
.mui-off-canvas-left, .mui-off-canvas-right {
position: absolute;
top: 0;
bottom: 0;
display: none;
width: 80%;
min-height: 100%;
box-sizing: content-box;
-webkit-overflow-scrolling: touch;
background: #333;
-webkit-backface-visibility: hidden;
}
.mui-off-canvas-left {
left: 0;
}
.mui-off-canvas-right {
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-spinner {
position: relative;
display: inline-block;
width: 24px;
height: 24px;
}
.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-indicator1 {
-webkit-transform: rotate(0) translate(0, -142%);
transform: rotate(0) translate(0, -142%);
-webkit-animation-delay: 0;
animation-delay: 0;
}
.mui-spinner-indicator2 {
-webkit-transform: rotate(30deg) translate(0, -142%);
transform: rotate(30deg) translate(0, -142%);
-webkit-animation-delay: -.9167s;
animation-delay: -.9167s;
}
.mui-spinner-indicator3 {
-webkit-transform: rotate(60deg) translate(0, -142%);
transform: rotate(60deg) translate(0, -142%);
-webkit-animation-delay: -.833s;
animation-delay: -.833s;
}
.mui-spinner-indicator4 {
-webkit-transform: rotate(90deg) translate(0, -142%);
transform: rotate(90deg) translate(0, -142%);
-webkit-animation-delay: -.75s;
animation-delay: -.75s;
}
.mui-spinner-indicator5 {
-webkit-transform: rotate(120deg) translate(0, -142%);
transform: rotate(120deg) translate(0, -142%);
-webkit-animation-delay: -.667s;
animation-delay: -.667s;
}
.mui-spinner-indicator6 {
-webkit-transform: rotate(150deg) translate(0, -142%);
transform: rotate(150deg) translate(0, -142%);
-webkit-animation-delay: -.5833s;
animation-delay: -.5833s;
}
.mui-spinner-indicator7 {
-webkit-transform: rotate(180deg) translate(0, -142%);
transform: rotate(180deg) translate(0, -142%);
-webkit-animation-delay: -.5s;
animation-delay: -.5s;
}
.mui-spinner-indicator8 {
-webkit-transform: rotate(210deg) translate(0, -142%);
transform: rotate(210deg) translate(0, -142%);
-webkit-animation-delay: -.41667s;
animation-delay: -.41667s;
}
.mui-spinner-indicator9 {
-webkit-transform: rotate(240deg) translate(0, -142%);
transform: rotate(240deg) translate(0, -142%);
-webkit-animation-delay: -.333s;
animation-delay: -.333s;
}
.mui-spinner-indicator10 {
-webkit-transform: rotate(270deg) translate(0, -142%);
transform: rotate(270deg) translate(0, -142%);
-webkit-animation-delay: -.25s;
animation-delay: -.25s;
}
.mui-spinner-indicator11 {
-webkit-transform: rotate(300deg) translate(0, -142%);
transform: rotate(300deg) translate(0, -142%);
-webkit-animation-delay: -.1667s;
animation-delay: -.1667s;
}
.mui-spinner-indicator12 {
-webkit-transform: rotate(330deg) translate(0, -142%);
transform: rotate(330deg) translate(0, -142%);
-webkit-animation-delay: -.0833s;
animation-delay: -.0833s;
}
@-webkit-keyframes fade {
from {
opacity: 1;
}
to {
opacity: .25;
}
}
@keyframes fade {
from {
opacity: 1;
}
to {
opacity: .25;
}
}
.mui-spin {
-webkit-transform-origin: 50% 54%;
transform-origin: 50% 54%;
-webkit-animation: spin 1s infinite linear;
animation: spin 1s infinite linear;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
input[type="button"],
input[type="submit"],
input[type="reset"],
button,
.mui-btn {
position: relative;
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: 400;
line-height: 1.42;
color: #333;
text-align: center;
white-space: nowrap;
vertical-align: top;
cursor: pointer;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 3px;
-webkit-transition: all;
transition: all;
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-duration: .2s;
transition-duration: .2s;
}
input[type="button"]:active, input[type="button"].mui-active,
input[type="submit"]:active,
input[type="submit"].mui-active,
input[type="reset"]:active,
input[type="reset"].mui-active,
button:active,
button.mui-active,
.mui-btn:active,
.mui-btn.mui-active {
color: #fff;
background-color: #929292;
}
input[type="button"]:disabled, input[type="button"].mui-disabled,
input[type="submit"]:disabled,
input[type="submit"].mui-disabled,
input[type="reset"]:disabled,
input[type="reset"].mui-disabled,
button:disabled,
button.mui-disabled,
.mui-btn:disabled,
.mui-btn.mui-disabled {
opacity: .6;
}
input[type="submit"],
.mui-btn-primary, .mui-btn-blue {
color: #fff;
background-color: #007aff;
border: 1px solid #007aff;
}
input[type="submit"]:active, input[type="submit"].mui-active,
.mui-btn-primary:active,
.mui-btn-primary.mui-active, .mui-btn-blue:active, .mui-btn-blue.mui-active {
color: #fff;
background-color: #0062cc;
border: 1px solid #0062cc;
}
.mui-btn-positive, .mui-btn-success, .mui-btn-green {
color: #fff;
background-color: #4cd964;
border: 1px solid #4cd964;
}
.mui-btn-positive:active, .mui-btn-positive.mui-active, .mui-btn-success:active, .mui-btn-success.mui-active, .mui-btn-green:active, .mui-btn-green.mui-active {
color: #fff;
background-color: #2ac845;
border: 1px solid #2ac845;
}
.mui-btn-warning, .mui-btn-yellow {
color: #fff;
background-color: #f0ad4e;
border: 1px solid #f0ad4e;
}
.mui-btn-warning:active, .mui-btn-warning.mui-active, .mui-btn-yellow:active, .mui-btn-yellow.mui-active {
color: #fff;
background-color: #ec971f;
border: 1px solid #ec971f;
}
.mui-btn-negative, .mui-btn-danger, .mui-btn-red {
color: #fff;
background-color: #dd524d;
border: 1px solid #dd524d;
}
.mui-btn-negative:active, .mui-btn-negative.mui-active, .mui-btn-danger:active, .mui-btn-danger.mui-active, .mui-btn-red:active, .mui-btn-red.mui-active {
color: #fff;
background-color: #cf2d28;
border: 1px solid #cf2d28;
}
.mui-btn-royal, .mui-btn-purple {
color: #fff;
background-color: #8a6de9;
border: 1px solid #8a6de9;
}
.mui-btn-royal:active, .mui-btn-royal.mui-active, .mui-btn-purple:active, .mui-btn-purple.mui-active {
color: #fff;
background-color: #6641e2;
border: 1px solid #6641e2;
}
.mui-btn-outlined {
background-color: transparent;
}
.mui-btn-outlined.mui-btn-primary, .mui-btn-outlined.mui-btn-blue {
color: #007aff;
}
.mui-btn-outlined.mui-btn-positive, .mui-btn-outlined.mui-btn-success, .mui-btn-outlined.mui-btn-green {
color: #4cd964;
}
.mui-btn-outlined.mui-btn-warning, .mui-btn-outlined.mui-btn-yellow {
color: #f0ad4e;
}
.mui-btn-outlined.mui-btn-negative, .mui-btn-outlined.mui-btn-danger, .mui-btn-outlined.mui-btn-red {
color: #dd524d;
}
.mui-btn-outlined.mui-btn-royal, .mui-btn-outlined.mui-btn-purple {
color: #8a6de9;
}
.mui-btn-outlined.mui-btn-primary:active, .mui-btn-outlined.mui-btn-blue:active, .mui-btn-outlined.mui-btn-positive:active, .mui-btn-outlined.mui-btn-success:active, .mui-btn-outlined.mui-btn-green:active, .mui-btn-outlined.mui-btn-warning:active, .mui-btn-outlined.mui-btn-yellow:active, .mui-btn-outlined.mui-btn-negative:active, .mui-btn-outlined.mui-btn-danger:active, .mui-btn-outlined.mui-btn-red:active, .mui-btn-outlined.mui-btn-royal:active, .mui-btn-outlined.mui-btn-purple:active {
color: #fff;
}
.mui-btn-link {
padding-top: 6px;
padding-bottom: 6px;
color: #007aff;
background-color: transparent;
border: 0;
}
.mui-btn-link:active, .mui-btn-link.mui-active {
color: #0062cc;
background-color: transparent;
}
.mui-btn-block {
display: block;
width: 100%;
padding: 15px 0;
margin-bottom: 10px;
font-size: 18px;
}
.mui-btn .mui-badge {
margin: -2px -4px -2px 4px;
font-size: 14px;
background-color: rgba(0, 0, 0, .15);
}
.mui-btn .mui-badge-inverted,
.mui-btn:active .mui-badge-inverted {
background-color: transparent;
}
.mui-btn-primary:active .mui-badge-inverted,
.mui-btn-positive:active .mui-badge-inverted,
.mui-btn-negative:active .mui-badge-inverted {
color: #fff;
}
.mui-btn-block .mui-badge {
position: absolute;
right: 0;
margin-right: 10px;
}
.mui-btn .mui-icon {
font-size: inherit;
}
.mui-btn.mui-icon {
font-size: 14px;
line-height: 1.42;
}
.mui-btn.mui-fab {
width: 56px;
height: 56px;
padding: 16px;
border-radius: 50%;
outline: none;
}
.mui-btn.mui-fab.mui-btn-mini {
width: 40px;
height: 40px;
padding: 8px;
}
.mui-btn.mui-fab .mui-icon {
width: 24px;
height: 24px;
font-size: 24px;
line-height: 24px;
}
.mui-bar {
position: fixed;
right: 0;
left: 0;
z-index: 10;
height: 44px;
padding-right: 10px;
padding-left: 10px;
background-color: rgba(247, 247, 247, .98);
border-bottom: 0;
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, .85);
box-shadow: 0 0 1px rgba(0, 0, 0, .85);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.mui-bar .mui-title {
right: 40px;
left: 40px;
width: auto;
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.mui-bar .mui-backdrop {
background: none;
}
.mui-bar-header-secondary {
top: 44px;
}
.mui-bar-footer {
bottom: 0;
}
.mui-bar-footer-secondary {
bottom: 44px;
}
.mui-bar-footer-secondary-tab {
bottom: 50px;
}
.mui-bar-footer,
.mui-bar-footer-secondary,
.mui-bar-footer-secondary-tab {
border-top: 0;
}
.mui-bar-nav {
top: 0;
-webkit-box-shadow: 0 1px 6px #ccc;
box-shadow: 0 1px 6px #ccc;
}
.mui-bar-nav ~ .mui-content .mui-anchor {
display: block;
height: 45px;
margin-top: -45px;
visibility: hidden;
}
.mui-bar-nav.mui-bar .mui-icon {
padding-right: 10px;
padding-left: 10px;
margin-right: -10px;
margin-left: -10px;
}
.mui-title {
position: absolute;
display: block;
width: 100%;
padding: 0;
margin: 0 -10px;
font-size: 17px;
font-weight: 500;
line-height: 44px;
color: #000;
text-align: center;
white-space: nowrap;
}
.mui-title a {
color: inherit;
}
.mui-bar-tab {
bottom: 0;
display: table;
width: 100%;
height: 50px;
padding: 0;
table-layout: fixed;
border-top: 0;
border-bottom: 0;
}
.mui-bar-tab .mui-tab-item {
display: table-cell;
width: 1%;
height: 50px;
overflow: hidden;
color: #929292;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
vertical-align: middle;
}
.mui-bar-tab .mui-tab-item.mui-active {
color: #007aff;
}
.mui-bar-tab .mui-tab-item .mui-icon {
top: 3px;
width: 24px;
height: 24px;
padding-top: 0;
padding-bottom: 0;
}
.mui-bar-tab .mui-tab-item .mui-icon ~ .mui-tab-label {
display: block;
overflow: hidden;
font-size: 11px;
text-overflow: ellipsis;
}
.mui-bar-tab .mui-tab-item .mui-icon:active {
background: none;
}
.mui-bar .mui-btn {
position: relative;
top: 7px;
z-index: 20;
padding: 6px 12px 7px;
margin-top: 0;
font-weight: 400;
}
.mui-bar .mui-btn.mui-pull-right {
margin-left: 10px;
}
.mui-bar .mui-btn.mui-pull-left {
margin-right: 10px;
}
.mui-bar .mui-btn-link {
top: 0;
padding: 0;
font-size: 16px;
line-height: 44px;
color: #007aff;
border: 0;
}
.mui-bar .mui-btn-link:active, .mui-bar .mui-btn-link.mui-active {
color: #0062cc;
}
.mui-bar .mui-btn-block {
top: 6px;
padding: 5px 0;
margin-bottom: 0;
font-size: 16px;
}
.mui-bar .mui-btn-nav.mui-pull-left {
margin-left: -5px;
}
.mui-bar .mui-btn-nav.mui-pull-left .mui-icon-left-nav {
margin-right: -3px;
}
.mui-bar .mui-btn-nav.mui-pull-right {
margin-right: -5px;
}
.mui-bar .mui-btn-nav.mui-pull-right .mui-icon-right-nav {
margin-left: -3px;
}
.mui-bar .mui-btn-nav:active {
opacity: .3;
}
.mui-bar .mui-icon {
position: relative;
z-index: 20;
padding-top: 10px;
padding-bottom: 10px;
font-size: 24px;
}
.mui-bar .mui-icon:active {
opacity: .3;
}
.mui-bar .mui-btn .mui-icon {
top: 3px;
padding: 0;
margin: 0;
}
.mui-bar .mui-title .mui-icon {
padding: 0;
margin: 0;
}
.mui-bar .mui-title .mui-icon.mui-icon-caret {
top: 4px;
margin-left: -5px;
}
.mui-bar input[type="search"] {
height: 29px;
margin: 6px 0;
}
.mui-bar .mui-segmented-control {
top: 7px;
width: auto;
margin: 0 auto;
}
.mui-badge {
display: inline-block;
padding: 3px 6px;
font-size: 12px;
line-height: 1;
color: #333;
background-color: rgba(0, 0, 0, .15);
border-radius: 100px;
}
.mui-badge.mui-badge-inverted {
padding: 0 5px 0 0;
color: #929292;
background-color: transparent;
}
.mui-badge-primary, .mui-badge-blue {
color: #fff;
background-color: #007aff;
}
.mui-badge-primary.mui-badge-inverted, .mui-badge-blue.mui-badge-inverted {
color: #007aff;
background-color: transparent;
}
.mui-badge-success, .mui-badge-green {
color: #fff;
background-color: #4cd964;
}
.mui-badge-success.mui-badge-inverted, .mui-badge-green.mui-badge-inverted {
color: #4cd964;
background-color: transparent;
}
.mui-badge-warning, .mui-badge-yellow {
color: #fff;
background-color: #f0ad4e;
}
.mui-badge-warning.mui-badge-inverted, .mui-badge-yellow.mui-badge-inverted {
color: #f0ad4e;
background-color: transparent;
}
.mui-badge-danger, .mui-badge-red {
color: #fff;
background-color: #dd524d;
}
.mui-badge-danger.mui-badge-inverted, .mui-badge-red.mui-badge-inverted {
color: #dd524d;
background-color: transparent;
}
.mui-badge-royal, .mui-badge-purple {
color: #fff;
background-color: #8a6de9;
}
.mui-badge-royal.mui-badge-inverted, .mui-badge-purple.mui-badge-inverted {
color: #8a6de9;
background-color: transparent;
}
.mui-table-view {
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-striped > li:nth-child(odd) {
background-color: #f9f9f9;
}
.mui-table-view-striped > li:nth-child(odd) > .mui-slider-cell > .mui-slider-left ~ .mui-slider-handle, .mui-table-view-striped > li:nth-child(odd) > .mui-slider-cell > .mui-slider-right ~ .mui-slider-handle {
background-color: #f9f9f9;
}
.mui-table-view-chevron .mui-table-view-cell {
padding-right: 65px;
}
.mui-table-view-chevron .mui-table-view-cell > a:not(.mui-btn) {
margin-right: -65px;
}
.mui-table-view-slider .mui-table-view-cell {
padding: 11px 0;
}
.mui-table-view-slider .mui-table-view-cell > a:not(.mui-btn) {
margin-right: 0;
}
.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 .mui-table-view-cell.mui-active {
background-color: #242424;
}
.mui-table-view-inverted .mui-table-view-cell > a:not(.mui-btn).mui-active {
background-color: #242424;
}
.mui-table-view-cell {
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.mui-radio input[type=radio], .mui-table-view-cell.mui-checkbox input[type=checkbox] {
top: 8px;
}
.mui-table-view-cell.mui-radio.mui-left, .mui-table-view-cell.mui-checkbox.mui-left {
padding-left: 58px;
}
.mui-table-view-cell.mui-active {
background-color: #eee;
}
.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 > a:not(.mui-btn) {
position: relative;
display: block;
padding: inherit;
margin: -11px -15px;
overflow: hidden;
color: inherit;
text-overflow: ellipsis;
white-space: nowrap;
/*&:active {
background-color: #eee;
}*/
}
.mui-table-view-cell > a:not(.mui-btn).mui-active {
background-color: #eee;
}
.mui-table-view-cell p {
margin-bottom: 0;
}
.mui-table-view-cell > .mui-slider-cell {
margin-top: 1px;
margin-bottom: 1px;
}
.mui-table-view-cell > .mui-slider-cell > .mui-slider-handle {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
-webkit-transform: translate3d(100%, 0px, 0px);
transform: translate3d(100%, 0px, 0px);
}
.mui-table-view-cell > .mui-slider-cell > .mui-slider-left ~ .mui-slider-handle, .mui-table-view-cell > .mui-slider-cell > .mui-slider-right ~ .mui-slider-handle {
position: relative;
top: auto;
right: auto;
bottom: auto;
left: auto;
z-index: 1;
padding-left: 15px;
background-color: #fff;
-webkit-transform: translate3d(0px, 0px, 0px);
transform: translate3d(0px, 0px, 0px);
}
.mui-table-view-cell > .mui-slider-cell > .mui-slider-left, .mui-table-view-cell > .mui-slider-cell > .mui-slider-right {
top: 1px;
bottom: 1px;
}
.mui-table-view-divider {
padding-top: 6px;
padding-bottom: 6px;
padding-left: 15px;
margin-top: -1px;
margin-left: 0;
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 .mui-media,
.mui-table-view .mui-media-body {
overflow: hidden;
}
.mui-table-view .mui-media-object {
max-width: 42px;
height: 42px;
}
.mui-table-view .mui-media-object.mui-pull-left {
margin-right: 10px;
}
.mui-table-view .mui-media-object.mui-pull-right {
margin-left: 10px;
}
.mui-table-view-cell > .mui-btn,
.mui-table-view-cell > .mui-badge,
.mui-table-view-cell > .mui-switch,
.mui-table-view-cell > a > .mui-btn,
.mui-table-view-cell > a > .mui-badge,
.mui-table-view-cell > a > .mui-switch {
position: absolute;
top: 50%;
right: 15px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.mui-table-view-cell .mui-navigate-left > .mui-btn,
.mui-table-view-cell .mui-navigate-left > .mui-badge,
.mui-table-view-cell .mui-navigate-left > .mui-switch,
.mui-table-view-cell .mui-navigate-right > .mui-btn,
.mui-table-view-cell .mui-navigate-right > .mui-badge,
.mui-table-view-cell .mui-navigate-right > .mui-switch,
.mui-table-view-cell .mui-push-left > .mui-btn,
.mui-table-view-cell .mui-push-left > .mui-badge,
.mui-table-view-cell .mui-push-left > .mui-switch,
.mui-table-view-cell .mui-push-right > .mui-btn,
.mui-table-view-cell .mui-push-right > .mui-badge,
.mui-table-view-cell .mui-push-right > .mui-switch,
.mui-table-view-cell > a .mui-navigate-left > .mui-btn,
.mui-table-view-cell > a .mui-navigate-left > .mui-badge,
.mui-table-view-cell > a .mui-navigate-left > .mui-switch,
.mui-table-view-cell > a .mui-navigate-right > .mui-btn,
.mui-table-view-cell > a .mui-navigate-right > .mui-badge,
.mui-table-view-cell > a .mui-navigate-right > .mui-switch,
.mui-table-view-cell > a .mui-push-left > .mui-btn,
.mui-table-view-cell > a .mui-push-left > .mui-badge,
.mui-table-view-cell > a .mui-push-left > .mui-switch,
.mui-table-view-cell > a .mui-push-right > .mui-btn,
.mui-table-view-cell > a .mui-push-right > .mui-badge,
.mui-table-view-cell > a .mui-push-right > .mui-switch {
right: 35px;
}
.mui-content > .mui-table-view:first-child {
margin-top: 15px;
}
.mui-table-view-cell.mui-collapse > .mui-navigate-right:after, .mui-table-view-cell.mui-collapse > .mui-push-right:after {
content: '\e662';
}
.mui-table-view-cell.mui-collapse.mui-active .mui-table-view {
display: block;
}
.mui-table-view-cell.mui-collapse.mui-active > .mui-navigate-right:after, .mui-table-view-cell.mui-collapse.mui-active > .mui-push-right:after {
content: '\e661';
}
.mui-table-view-cell.mui-collapse .mui-table-view {
display: none;
margin-top: 11px;
margin-right: -15px;
margin-bottom: -11px;
margin-left: -15px;
}
.mui-table-view-cell.mui-collapse .mui-table-view.mui-table-view-chevron {
margin-right: -65px;
}
.mui-table-view-cell.mui-collapse .mui-table-view .mui-table-view-cell {
padding-left: 31px;
background-position: 31px 100%;
}
.mui-table-view.mui-grid-view {
display: block;
width: 100%;
padding: 0 10px 10px 0;
font-size: 0;
white-space: normal;
}
.mui-table-view.mui-grid-view .mui-table-view-cell {
display: inline-block;
padding: 10px 0 0 14px;
margin-right: -4px;
font-size: 17px;
text-align: center;
vertical-align: middle;
background: none;
}
.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-object {
width: 100%;
max-width: 100%;
height: auto;
}
.mui-table-view.mui-grid-view .mui-table-view-cell > a:not(.mui-btn) {
margin: -10px 0 0 -14px;
}
.mui-table-view.mui-grid-view .mui-table-view-cell > a:not(.mui-btn):active, .mui-table-view.mui-grid-view .mui-table-view-cell > a:not(.mui-btn).mui-active {
background: none;
}
.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body {
display: block;
width: 100%;
height: 15px;
margin-top: 8px;
font-size: 15px;
line-height: 15px;
color: #333;
text-overflow: ellipsis;
}
.mui-grid-view.mui-grid-9 {
padding-right: 0;
background-color: #f2f2f2;
}
.mui-grid-view.mui-grid-9 .mui-table-view-cell {
vertical-align: top;
border-top: 1px solid #eee;
border-left: 1px solid #eee;
}
.mui-grid-view.mui-grid-9 .mui-table-view-cell > a:not(.mui-btn) {
padding: 15px;
}
.mui-grid-view.mui-grid-9 .mui-media {
color: #797979;
}
.mui-grid-view.mui-grid-9 .mui-media .mui-icon {
position: relative;
font-size: 3em;
}
.mui-grid-view.mui-grid-9 .mui-media .mui-icon .mui-badge {
position: absolute;
top: 1px;
right: 0;
color: white;
background: red;
opacity: .9;
}
.mui-slider-cell {
position: relative;
}
.mui-slider-cell > .mui-slider-handle {
z-index: 1;
}
.mui-slider-cell > .mui-slider-left, .mui-slider-cell > .mui-slider-right {
position: absolute;
top: 0;
bottom: 0;
z-index: 0;
}
.mui-slider-cell > .mui-slider-left {
left: 0;
}
.mui-slider-cell > .mui-slider-right {
right: 0;
}
input,
textarea,
select {
font-family: "Helvetica Neue", Helvetica, sans-serif;
font-size: 17px;
-webkit-tap-highlight-color: transparent;
-webkit-tap-highlight-color: transparent;
}
input:focus,
textarea:focus,
select:focus {
-webkit-tap-highlight-color: transparent;
-webkit-tap-highlight-color: transparent;
-webkit-user-modify: read-write-plaintext-only;
}
select,
textarea,
input[type="text"],
input[type="search"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="color"] {
width: 100%;
height: 40px;
-webkit-appearance: none;
padding: 10px 15px;
margin-bottom: 15px;
line-height: 21px;
-webkit-user-select: text;
background-color: #fff;
border: 1px solid rgba(0, 0, 0, .2);
border-radius: 3px;
outline: none;
}
input[type="search"] {
height: 34px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font-size: 16px;
text-align: center;
background-color: rgba(0, 0, 0, .1);
border: 0;
border-radius: 6px;
}
input[type="search"]:focus {
text-align: left;
}
textarea {
height: auto;
resize: none;
}
select {
height: auto;
margin-top: 1px;
font-size: 14px;
background-color: #fff;
border: 0 !important;
}
.mui-input-group {
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 input,
.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="search"] {
background: none;
}
.mui-input-group input:last-child {
background-image: none;
}
.mui-input-row {
overflow: hidden;
}
.mui-input-row select {
padding: 10px 15px 0 15px;
font-size: 17px;
}
.mui-input-row:last-child,
.mui-input-row label + input {
background-image: none;
}
.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-row label {
float: left;
width: 35%;
padding: 8px 15px;
font-family: "Helvetica Neue", Helvetica, sans-serif;
line-height: 1.1;
}
.mui-input-row label ~ input, .mui-input-row label ~ select, .mui-input-row label ~ textarea {
float: right;
width: 65%;
padding-left: 0;
margin-bottom: 0;
border: 0;
}
.mui-input-row {
position: relative;
}
.mui-input-row.mui-input-range {
padding-right: 20px;
overflow: visible;
}
.mui-input-row .mui-inline {
padding: 8px 0;
}
.mui-input-row .mui-input-clear ~ .mui-icon-clear, .mui-input-row .mui-input-speech ~ .mui-icon-speech {
position: absolute;
top: 10px;
right: 10px;
width: 28px;
height: 28px;
font-size: 20px;
color: #999;
text-align: center;
}
.mui-input-row .mui-input-speech ~ .mui-icon-speech {
top: 8px;
font-size: 24px;
}
.mui-input-row .mui-input-clear ~ .mui-icon-clear ~ .mui-icon-speech {
display: none;
}
.mui-input-row .mui-input-clear ~ .mui-icon-clear.mui-hidden ~ .mui-icon-speech {
display: inline-block;
}
.mui-input-row .mui-icon-speech ~ .mui-placeholder {
right: 38px;
}
.mui-input-row.mui-search .mui-icon-clear {
top: 7px;
}
.mui-input-row.mui-search .mui-icon-speech {
top: 5px;
}
.mui-radio, .mui-checkbox {
position: relative;
}
.mui-radio label, .mui-checkbox label {
display: inline-block;
float: none;
width: 100%;
}
.mui-radio.mui-left input[type="radio"], .mui-checkbox.mui-left input[type="checkbox"] {
left: 20px;
}
.mui-radio.mui-left label, .mui-checkbox.mui-left label {
padding-left: 58px;
}
.mui-radio input[type="radio"], .mui-checkbox input[type="checkbox"] {
position: absolute;
top: 4px;
right: 20px;
display: inline-block;
width: 28px;
height: 26px;
-webkit-appearance: none;
background-color: transparent;
border: 0;
outline: 0 !important;
}
.mui-radio input[type="radio"]:before, .mui-checkbox input[type="checkbox"]:before {
font-family: Muiicons;
font-size: 28px;
font-weight: normal;
line-height: 1;
color: rgba(170, 170, 170, .6);
text-decoration: none;
background: none;
border-radius: 0;
-webkit-font-smoothing: antialiased;
}
.mui-radio input[type="radio"]:checked:before, .mui-checkbox input[type="checkbox"]:checked:before {
color: #007aff;
}
.mui-radio input[type="radio"]:before {
content: "\e654";
}
.mui-radio input[type="radio"]:checked:before {
content: "\e655";
}
.mui-checkbox input[type="checkbox"]:before {
content: "\e656";
}
.mui-checkbox input[type="checkbox"]:checked:before {
content: "\e657";
}
.mui-checkbox-cycle input[type="checkbox"]:before {
content: "\e910";
}
.mui-checkbox-cycle input[type="checkbox"]:checked:before {
content: "\e911";
}
.mui-select {
position: relative;
}
.mui-select:before {
position: absolute;
top: 8px;
right: 21px;
font-family: Muiicons;
color: rgba(170, 170, 170, .6);
content: '\e651';
}
.mui-input-row .mui-switch {
float: right;
margin-top: 5px;
margin-right: 20px;
}
.mui-input-range {
/*input[type="range"] {
-webkit-appearance: none;
background: #999;
height: 36px;
border-radius: 1px;
overflow: hidden;
margin-top: 2px;
margin-bottom: 2px;
outline:none;
position:relative;
width:100%;
}*/
/*input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none!important;
opacity: 0.5;
height:28px;
width:28px;
border-radius: 50%;
background:#00b7fb;
position: relative;
pointer-events: none;
-webkit-box-sizing: border-box;
box-sizing: border-box;
&:before{
position: absolute;
top: 13px;
left: -2000px;
width: 2000px;
height: 2px;
background: #00b7fb;
content:' ';
}
}*/
}
.mui-input-range input[type="range"] {
position: relative;
width: 100%;
height: 2px;
-webkit-appearance: none !important;
padding: 0;
margin: 17px 0;
cursor: pointer;
background-color: #999;
border: 0;
border-radius: 3px;
outline: none;
}
.mui-input-range input[type='range']::-webkit-slider-thumb {
width: 28px;
height: 28px;
-webkit-appearance: none !important;
background-color: #007aff;
border-color: #0062cc;
border-radius: 50%;
}
.mui-input-range label ~ input[type="range"] {
width: 65%;
}
.mui-input-range .mui-tooltip {
position: absolute;
top: -70px;
z-index: 1;
width: 64px;
height: 64px;
font-size: 36px;
line-height: 64px;
color: #333;
text-align: center;
text-shadow: 0 1px 0 #f3f3f3;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 6px;
opacity: .8;
}
.mui-search {
position: relative;
}
.mui-search input[type="search"] {
padding-left: 30px;
}
.mui-search .mui-placeholder {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
display: inline-block;
height: 34px;
font-size: 16px;
line-height: 34px;
color: #999;
text-align: center;
background: none;
border: 0;
border-radius: 6px;
}
.mui-search .mui-placeholder .mui-icon {
font-size: 20px;
color: #333;
}
.mui-search:before {
position: absolute;
top: 50%;
right: 50%;
display: none;
margin-top: -18px;
margin-right: 31px;
font-family: Muiicons;
font-size: 20px;
font-weight: normal;
content: '\e607';
}
.mui-search.mui-active:before {
left: 5px;
display: block;
margin-right: 0;
font-size: 20px;
}
.mui-search.mui-active input[type="search"] {
text-align: left;
}
.mui-search.mui-active .mui-placeholder {
display: none;
}
.mui-segmented-control {
position: relative;
display: table;
width: 100%;
overflow: hidden;
font-size: 15px;
font-weight: 400;
table-layout: fixed;
background-color: transparent;
border: 1px solid #007aff;
border-radius: 3px;
}
.mui-segmented-control .mui-control-item {
display: table-cell;
width: 1%;
padding-top: 6px;
padding-bottom: 7px;
overflow: hidden;
line-height: 1;
color: #007aff;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
border-color: #007aff;
border-left: 1px solid #007aff;
-webkit-transition: background-color .1s linear;
transition: background-color .1s linear;
}
.mui-segmented-control .mui-control-item:first-child {
border-left-width: 0;
}
.mui-segmented-control .mui-control-item.mui-active {
color: #fff;
background-color: #007aff;
}
.mui-segmented-control.mui-segmented-control-inverted {
width: 100%;
border: 0;
border-radius: 0;
}
.mui-segmented-control.mui-segmented-control-inverted .mui-control-item {
color: inherit;
border: 0;
}
.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
color: #007aff;
background: none;
border-bottom: 2px solid #007aff;
}
.mui-segmented-control.mui-segmented-control-inverted ~ .mui-slider-progress-bar {
background-color: #007aff;
}
.mui-segmented-control-positive {
border: 1px solid #4cd964;
}
.mui-segmented-control-positive .mui-control-item {
color: #4cd964;
border-color: inherit;
}
.mui-segmented-control-positive .mui-control-item.mui-active {
color: #fff;
background-color: #4cd964;
}
.mui-segmented-control-positive.mui-segmented-control-inverted .mui-control-item.mui-active {
color: #4cd964;
background: none;
border-bottom: 2px solid #4cd964;
}
.mui-segmented-control-positive.mui-segmented-control-inverted ~ .mui-slider-progress-bar {
background-color: #4cd964;
}
.mui-segmented-control-negative {
border: 1px solid #dd524d;
}
.mui-segmented-control-negative .mui-control-item {
color: #dd524d;
border-color: inherit;
}
.mui-segmented-control-negative .mui-control-item.mui-active {
color: #fff;
background-color: #dd524d;
}
.mui-segmented-control-negative.mui-segmented-control-inverted .mui-control-item.mui-active {
color: #dd524d;
background: none;
border-bottom: 2px solid #dd524d;
}
.mui-segmented-control-negative.mui-segmented-control-inverted ~ .mui-slider-progress-bar {
background-color: #dd524d;
}
.mui-control-content {
display: none;
}
.mui-control-content.mui-active {
display: block;
}
.mui-popover {
position: fixed;
top: 55px;
left: 50%;
z-index: 20;
display: none;
width: 280px;
margin-left: -140px;
background-color: rgba(247, 247, 247, .98);
border-radius: 12px;
-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, .1);
box-shadow: 0 0 15px rgba(0, 0, 0, .1);
opacity: 0;
-webkit-transition: -webkit-transform .2s ease-in-out, opacity .2s ease-in-out;
transition: -webkit-transform .2s ease-in-out, opacity .2s ease-in-out;
-webkit-transform: translate3d(0, -15px, 0);
transform: translate3d(0, -15px, 0);
}
.mui-popover:before {
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;
}
.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-bottom:before {
top: auto;
bottom: -8px;
border-top: 8px solid rgba(247, 247, 247, .98);
border-bottom: 0;
}
.mui-popover.mui-popover-bottom.mui-popover-action {
top: auto;
right: 0;
bottom: 0;
left: 0;
width: 100%;
border-radius: 0;
-webkit-transition: -webkit-transform .25s, opacity 1ms .25s;
-moz-transition: -moz-transform .25s, opacity 1ms .25s;
transition: transform .25s, opacity 1ms .25s;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
.mui-popover.mui-popover-bottom.mui-popover-action.mui-active {
opacity: 1;
-webkit-transition: -webkit-transform .25s;
-moz-transition: -moz-transform .25s;
transition: transform .25s;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.mui-popover.mui-active {
display: block;
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.mui-popover .mui-bar ~ .mui-table-view {
padding-top: 44px;
}
.mui-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 15;
background-color: rgba(0, 0, 0, .3);
}
.mui-bar-backdrop.mui-backdrop {
bottom: 50px;
background: none;
}
.mui-backdrop-action.mui-backdrop {
bottom: 50px;
background-color: rgba(0, 0, 0, .3);
}
.mui-bar-backdrop.mui-backdrop, .mui-backdrop-action.mui-backdrop {
opacity: 0;
}
.mui-bar-backdrop.mui-backdrop.mui-active, .mui-backdrop-action.mui-backdrop.mui-active {
opacity: 1;
-webkit-transition: all .25s ease;
transition: all .25s ease;
}
.mui-popover .mui-btn-block {
margin-bottom: 5px;
}
.mui-popover .mui-btn-block:last-child {
margin-bottom: 0;
}
.mui-popover .mui-bar {
-webkit-box-shadow: none;
box-shadow: none;
}
.mui-popover .mui-bar-nav {
border-bottom: 1px solid rgba(0, 0, 0, .15);
border-top-left-radius: 12px;
border-top-right-radius: 12px;
-webkit-box-shadow: none;
box-shadow: none;
}
.mui-popover .mui-table-view {
max-height: 300px;
margin-bottom: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
background-color: rgba(247, 247, 247, .98);
background-image: none;
border-radius: 12px;
}
.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) {
border-top-left-radius: 12px;
border-top-right-radius: 12px;
}
.mui-popover .mui-table-view .mui-table-view-cell:last-child,
.mui-popover .mui-table-view .mui-table-view-cell:last-child > a:not(.mui-btn) {
border-bottom-right-radius: 12px;
border-bottom-left-radius: 12px;
}
.mui-popover.mui-bar-popover .mui-table-view {
width: 106px;
}
.mui-popover.mui-bar-popover .mui-table-view .mui-table-view-cell {
padding: 11px 15px 11px 15px;
background-position: 0 100%;
}
.mui-popover.mui-bar-popover .mui-table-view .mui-table-view-cell > a:not(.mui-btn) {
margin: -11px -15px -11px -15px;
}
.mui-pagination {
display: inline-block;
padding-left: 0;
margin: 0 auto;
border-radius: 6px;
}
.mui-pagination > li {
display: inline;
}
.mui-pagination > li > a,
.mui-pagination > li > span {
position: relative;
float: left;
padding: 6px 12px;
margin-left: -1px;
line-height: 1.428571429;
color: #007aff;
text-decoration: none;
background-color: #fff;
border: 1px solid #ddd;
}
.mui-pagination > li:first-child > a,
.mui-pagination > li:first-child > span {
margin-left: 0;
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
.mui-pagination > li:last-child > a,
.mui-pagination > li:last-child > span {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
.mui-pagination > li:active > a, .mui-pagination > li:active > a:active,
.mui-pagination > li:active > span,
.mui-pagination > li:active > span:active,
.mui-pagination > li.mui-active > a,
.mui-pagination > li.mui-active > a:active,
.mui-pagination > li.mui-active > span,
.mui-pagination > li.mui-active > span:active {
z-index: 2;
color: #fff;
cursor: default;
background-color: #007aff;
border-color: #007aff;
}
.mui-pagination > li.mui-disabled > span,
.mui-pagination > li.mui-disabled > span:active,
.mui-pagination > li.mui-disabled > a,
.mui-pagination > li.mui-disabled > a:active {
color: #777;
background-color: #fff;
border: 1px solid #ddd;
opacity: .6;
}
.mui-pagination-lg > li > a,
.mui-pagination-lg > li > span {
padding: 10px 16px;
font-size: 18px;
}
.mui-pagination-sm > li > a,
.mui-pagination-sm > li > span {
padding: 5px 10px;
font-size: 12px;
}
.mui-pager {
padding-left: 0;
text-align: center;
list-style: none;
}
.mui-pager:before, .mui-pager:after {
display: table;
content: " ";
}
.mui-pager:after {
clear: both;
}
.mui-pager li {
display: inline;
}
.mui-pager li > a,
.mui-pager li > span {
display: inline-block;
padding: 5px 14px;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 6px;
}
.mui-pager li:active > a, .mui-pager li:active > span, .mui-pager li.mui-active > a, .mui-pager li.mui-active > span {
color: #fff;
text-decoration: none;
cursor: default;
background-color: #007aff;
border-color: #007aff;
}
.mui-pager .mui-next > a,
.mui-pager .mui-next > span {
float: right;
}
.mui-pager .mui-previous > a,
.mui-pager .mui-previous > span {
float: left;
}
.mui-pager .mui-disabled > a,
.mui-pager .mui-disabled > a:active,
.mui-pager .mui-disabled > span,
.mui-pager .mui-disabled > span:active {
color: #777;
background-color: #fff;
border: 1px solid #ddd;
opacity: .6;
}
.mui-modal {
position: fixed;
top: 0;
z-index: 11;
width: 100%;
min-height: 100%;
overflow: hidden;
background-color: #fff;
opacity: 0;
-webkit-transition: -webkit-transform .25s, opacity 1ms .25s;
-moz-transition: -moz-transform .25s, opacity 1ms .25s;
transition: transform .25s, opacity 1ms .25s;
-webkit-transition-timing-function: cubic-bezier(.1, .5, .1, 1);
transition-timing-function: cubic-bezier(.1, .5, .1, 1);
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
.mui-modal.mui-active {
height: 100%;
opacity: 1;
-webkit-transition: -webkit-transform .25s;
-moz-transition: -moz-transform .25s;
transition: transform .25s;
-webkit-transition-timing-function: cubic-bezier(.1, .5, .1, 1);
transition-timing-function: cubic-bezier(.1, .5, .1, 1);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.mui-slider {
position: relative;
width: 100%;
overflow: hidden;
}
.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-slider-group {
position: relative;
font-size: 0;
white-space: nowrap;
-webkit-transition: all 0s linear;
transition: all 0s linear;
}
.mui-slider .mui-slider-group .mui-slider-item {
position: relative;
display: inline-block;
width: 100%;
height: 100%;
font-size: 14px;
vertical-align: top;
}
.mui-slider .mui-slider-group .mui-slider-item a {
position: relative;
display: block;
line-height: 0;
}
.mui-slider .mui-slider-group .mui-slider-item img {
width: 100%;
}
.mui-slider .mui-slider-group.mui-slider-loop .mui-slider-item:first-child {
margin-left: -100%;
}
.mui-slider .mui-slider-group.mui-slider-loop .mui-slider-item:last-child {
margin-right: -100%;
}
.mui-slider-title {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 30px;
margin: 0;
line-height: 30px;
text-align: left;
text-indent: 12px;
background-color: #000;
opacity: .8;
}
.mui-slider-indicator {
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
background: none;
}
.mui-slider-indicator.mui-segmented-control {
position: relative;
bottom: auto;
padding-top: 10px;
}
.mui-slider-indicator .mui-indicator {
display: inline-block;
width: 6px;
height: 6px;
margin: 1px 6px;
cursor: pointer;
background: #aaa;
border-radius: 50%;
-webkit-box-shadow: 0 0 1px 1px rgba(130, 130, 130, .7);
box-shadow: 0 0 1px 1px rgba(130, 130, 130, .7);
}
.mui-slider-indicator .mui-active.mui-indicator {
background: #fff;
}
.mui-slider-indicator .mui-icon {
width: 40px;
height: 30px;
margin: 3px;
font-size: 20px;
line-height: 30px;
text-align: center;
border: 1px solid #ddd;
}
.mui-slider-indicator .mui-number {
display: inline-block;
width: 58px;
line-height: 32px;
}
.mui-slider-indicator .mui-number span {
color: #ff5053;
}
.mui-slider-progress-bar {
z-index: 1;
height: 2px;
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
}
.mui-switch {
position: relative;
display: block;
width: 74px;
height: 30px;
background-color: #fff;
border: 2px solid #ddd;
border-radius: 20px;
-webkit-transition-duration: .2s;
transition-duration: .2s;
-webkit-transition-property: background-color, border;
transition-property: background-color, border;
}
.mui-switch .mui-switch-handle {
position: absolute;
top: -1px;
left: -1px;
z-index: 2;
width: 28px;
height: 28px;
background-color: #fff;
border-radius: 16px;
-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, .4);
box-shadow: 0 2px 5px rgba(0, 0, 0, .4);
-webkit-transition-duration: .2s;
transition-duration: .2s;
-webkit-transition-property: -webkit-transform, width;
transition-property: transform, width;
}
.mui-switch:before {
position: absolute;
top: 3px;
right: 11px;
font-size: 13px;
color: #999;
text-transform: uppercase;
content: "Off";
}
.mui-switch.mui-active {
background-color: #4cd964;
border-color: #4cd964;
}
.mui-switch.mui-active .mui-switch-handle {
-webkit-transform: translate3d(45px, 0, 0);
transform: translate3d(45px, 0, 0);
}
.mui-switch.mui-active:before {
right: auto;
left: 15px;
color: #fff;
content: "On";
}
.mui-switch input[type="checkbox"] {
display: none;
}
.mui-switch-mini {
width: 47px;
}
.mui-switch-mini:before {
display: none;
}
.mui-switch-mini.mui-active .mui-switch-handle {
-webkit-transform: translate3d(18px, 0, 0);
transform: translate3d(18px, 0, 0);
}
.mui-switch-blue.mui-active {
background-color: #007aff;
border: 2px solid #007aff;
}
.mui-content.mui-fade {
left: 0;
opacity: 0;
}
.mui-content.mui-fade.mui-in {
opacity: 1;
}
.mui-content.mui-sliding {
z-index: 2;
-webkit-transition: -webkit-transform .4s;
-moz-transition: -moz-transform .4s;
transition: transform .4s;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.mui-content.mui-sliding.mui-left {
z-index: 1;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
.mui-content.mui-sliding.mui-right {
z-index: 3;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
.mui-navigate-left:after,
.mui-navigate-right:after,
.mui-push-left:after,
.mui-push-right:after {
position: absolute;
top: 50%;
display: inline-block;
font-family: Muiicons;
font-size: inherit;
line-height: 1;
color: #bbb;
text-decoration: none;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-font-smoothing: antialiased;
}
.mui-navigate-left:after,
.mui-push-left:after {
left: 15px;
content: '\e664';
}
.mui-navigate-right:after,
.mui-push-right:after {
right: 15px;
content: '\e663';
}
.mui-pull-top-pocket, .mui-pull-bottom-pocket {
position: absolute;
left: 0;
display: block;
width: 100%;
height: 490px;
overflow: hidden;
background: #efeff4;
}
.mui-pull-top-pocket {
top: -490px;
}
.mui-pull-bottom-pocket {
position: static;
bottom: 0;
z-index: -1;
height: 40px;
}
.mui-pull-bottom-pocket .mui-pull-loading {
display: none;
}
.mui-pull-bottom-pocket .mui-pull-loading.mui-in {
display: inline-block;
}
.mui-pull {
position: absolute;
right: 0;
bottom: 10px;
left: 0;
font-weight: bold;
color: #777;
text-align: center;
}
.mui-pull-loading {
vertical-align: middle;
-webkit-transition-duration: 400ms;
transition-duration: 400ms;
}
.mui-pull-loading.mui-reverse {
-webkit-transform: translate(0, 0) rotate(180deg);
transform: translate(0, 0) rotate(180deg);
}
.mui-pull-caption {
position: relative;
display: inline-block;
margin-top: -5px;
margin-left: 10px;
overflow: visible;
font-size: 15px;
line-height: 24px;
vertical-align: middle;
}
.mui-pull-caption span {
display: none;
}
.mui-pull-caption span.mui-in {
display: inline;
}
.mui-toast-container {
position: fixed;
bottom: 50px;
width: 100%;
}
.mui-toast-message {
z-index: 99999;
width: 270px;
padding: 5px 5px 5px 5px;
margin: 5px auto 5px auto;
font-size: 14px;
color: #000;
text-align: center;
background-color: #d8d8d8;
border-radius: 7px;
}
@font-face {
font-family: Muiicons;
font-style: normal;
font-weight: normal;
src: url("../fonts/muiicons.ttf") format("truetype");
}
.mui-icon {
display: inline-block;
font-family: Muiicons;
font-size: 24px;
font-style: normal;
font-weight: normal;
line-height: 1;
text-decoration: none;
-webkit-font-smoothing: antialiased;
}
.mui-icon.mui-right:before {
float: right;
padding-left: .2em;
}
.mui-icon-spinner:before {
content: "\e600";
}
.mui-icon-weibo:before {
content: "\e601";
}
.mui-icon-pin:before {
content: "\e602";
}
.mui-icon-phone:before {
content: "\e603";
}
.mui-icon-map:before {
content: "\e604";
}
.mui-icon-sms:before {
content: "\e605";
}
.mui-icon-chat:before {
content: "\e606";
}
.mui-icon-search:before {
content: "\e607";
}
.mui-icon-close:before {
content: "\e608";
}
.mui-icon-reply:before {
content: "\e609";
}
.mui-icon-trash:before {
content: "\e610";
}
.mui-icon-edit:before {
content: "\e611";
}
.mui-icon-home:before {
content: "\e612";
}
.mui-icon-category:before {
content: "\e613";
}
.mui-icon-calendar:before {
content: "\e614";
}
.mui-icon-cog:before {
content: "\e615";
}
.mui-icon-speech:before {
content: "\e616";
}
.mui-icon-info:before {
content: "\e617";
}
.mui-icon-arrow-left:before {
content: "\e648";
}
.mui-icon-arrow-right:before {
content: "\e649";
}
.mui-icon-up-nav:before {
content: "\e650";
}
.mui-icon-down-nav:before {
content: "\e651";
}
.mui-icon-right-nav:before {
content: "\e652";
}
.mui-icon-left-nav:before {
content: "\e653";
}
.mui-icon-radio:before {
content: "\e654";
}
.mui-icon-radio-checked:before {
content: "\e655";
}
.mui-icon-checkbox:before {
content: "\e656";
}
.mui-icon-checkbox-checked:before {
content: "\e657";
}
.mui-icon-bars:before {
content: "\e658";
}
.mui-icon-plus:before {
content: "\e659";
}
.mui-icon-clear:before {
content: "\e660";
}
.mui-icon-up:before {
content: "\e661";
}
.mui-icon-down:before {
content: "\e662";
}
.mui-icon-right:before {
content: "\e663";
}
.mui-icon-left:before {
content: "\e664";
}
.mui-icon-pulldown:before {
content: "\e665";
}
.mui-icon-phone-solid:before {
content: "\e702";
}
.mui-icon-phone-filled:before {
content: "\e804";
}
.mui-icon-close-cycle:before {
content: "\e908";
}
.mui-icon-spinner-cycle:before {
content: "\e909";
}
.mui-icon-checkbox-cycle:before {
content: "\e910";
}
.mui-icon-checkbox-checked-cycle:before {
content: "\e911";
}
_site/dist/css/mui.min.css deleted 100644 → 0
View file @ 86f3bac6
/*!
* =====================================================
* Mui v0.5.5 (https://github.com/dcloudio/mui)
* =====================================================
*//*! normalize.css v3.0.1 | MIT License | git.io/normalize */html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background:0 0}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{margin:.67em 0}mark{color:#000;background:#ff0}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{height:0;-moz-box-sizing:content-box;box-sizing:content-box}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{margin:0;font:inherit;color:inherit}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{padding:.35em .625em .75em;margin:0 2px;border:1px solid silver}legend{padding:0;border:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-spacing:0;border-collapse:collapse}td,th{padding:0}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;-webkit-tap-highlight-color:transparent}body{-webkit-overflow-scrolling:touch;font-family:"Helvetica Neue",Helvetica,sans-serif;font-size:17px;line-height:21px;color:#000;background-color:#fff}a{color:#007aff;text-decoration:none;-webkit-tap-highlight-color:transparent;-webkit-tap-highlight-color:transparent}a:active{color:#0062cc}.mui-content{-webkit-overflow-scrolling:touch;background-color:#efeff4}.mui-bar-nav~.mui-content{padding-top:44px}.mui-bar-header-secondary~.mui-content{padding-top:88px}.mui-bar-footer~.mui-content{padding-bottom:44px}.mui-bar-footer-secondary~.mui-content{padding-bottom:88px}.mui-bar-tab~.mui-content{padding-bottom:50px}.mui-bar-footer-secondary-tab~.mui-content{padding-bottom:94px}.mui-hidden{display:none!important}.mui-inline{display:inline-block;vertical-align:top}.mui-block{display:block}.mui-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mui-ellipsis-2{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;white-space:normal!important;-webkit-line-clamp:2;-webkit-box-orient:vertical}.mui-table{display:table;width:100%;table-layout:fixed}.mui-table-cell{position:relative;display:table-cell}.mui-text-left{text-align:left!important}.mui-text-center{text-align:center!important}.mui-text-justify{text-align:justify!important}.mui-text-right{text-align:right!important}.mui-pull-left{float:left}.mui-pull-right{float:right}.mui-list-unstyled{padding-left:0;list-style:none}.mui-list-inline{padding-left:0;margin-left:-5px;list-style:none}.mui-list-inline>li{display:inline-block;padding-right:5px;padding-left:5px}.mui-clearfix:after,.mui-clearfix:before{display:table;content:" "}.mui-clearfix:after{clear:both}.mui-bg-primary{background-color:#007aff}.mui-bg-positive{background-color:#4cd964}.mui-bg-negative{background-color:#dd524d}h1,h2,h3,h4,h5,h6{margin-top:5px;margin-bottom:5px;line-height:1}.mui-h1,h1{font-size:36px}.mui-h2,h2{font-size:30px}.mui-h3,h3{font-size:24px}.mui-h4,h4{font-size:18px}.mui-h5,h5{font-size:14px;font-weight:400;color:#8f8f94}.mui-h6,h6{font-size:12px;font-weight:400;color:#8f8f94}p{margin-top:0;margin-bottom:10px;font-size:14px;color:#8f8f94}.mui-col-xs-12{width:100%}.mui-col-xs-11{width:91.66666667%}.mui-col-xs-10{width:83.33333333%}.mui-col-xs-9{width:75%}.mui-col-xs-8{width:66.66666667%}.mui-col-xs-7{width:58.33333333%}.mui-col-xs-6{width:50%}.mui-col-xs-5{width:41.66666667%}.mui-col-xs-4{width:33.33333333%}.mui-col-xs-3{width:25%}.mui-col-xs-2{width:16.66666667%}.mui-col-xs-1{width:8.33333333%}@media (min-width:400px){.mui-col-sm-12{width:100%}.mui-col-sm-11{width:91.66666667%}.mui-col-sm-10{width:83.33333333%}.mui-col-sm-9{width:75%}.mui-col-sm-8{width:66.66666667%}.mui-col-sm-7{width:58.33333333%}.mui-col-sm-6{width:50%}.mui-col-sm-5{width:41.66666667%}.mui-col-sm-4{width:33.33333333%}.mui-col-sm-3{width:25%}.mui-col-sm-2{width:16.66666667%}.mui-col-sm-1{width:8.33333333%}}.mui-iscroll-wrapper{position:absolute;top:0;bottom:0;left:0;z-index:1;width:100%;overflow:hidden}.mui-bar-nav~.mui-iscroll-wrapper{top:44px;padding:0}.mui-bar-header-secondary~.mui-iscroll-wrapper{top:88px}.mui-bar-footer~.mui-iscroll-wrapper{bottom:44px;padding:0}.mui-bar-footer-secondary~.mui-iscroll-wrapper{bottom:88px}.mui-bar-tab~.mui-iscroll-wrapper{bottom:50px;padding:0}.mui-bar-footer-secondary-tab~.mui-iscroll-wrapper{bottom:94px}.mui-iscroll{position:absolute;z-index:1;width:100%;-webkit-text-size-adjust:none;-webkit-user-select:none;user-select:none;-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;text-size-adjust:none}.mui-off-canvas-height-fixed{height:100%!important}.mui-off-canvas-wrap{position:relative;width:100%}.mui-off-canvas-wrap .mui-inner-wrap{position:relative;width:100%;height:100%;-webkit-transition:-webkit-transform 400ms ease;transition:transform 400ms ease}.mui-off-canvas-wrap .mui-inner-wrap .mui-bar{position:absolute}.mui-off-canvas-wrap .mui-inner-wrap .mui-off-canvas-left{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}.mui-off-canvas-wrap .mui-inner-wrap .mui-off-canvas-right{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}.mui-off-canvas-wrap.mui-left,.mui-off-canvas-wrap.mui-right,.mui-off-canvas-wrap.mui-sliding{height:100%;overflow:hidden}.mui-off-canvas-wrap.mui-left .mui-off-canvas-left,.mui-off-canvas-wrap.mui-left .mui-off-canvas-right,.mui-off-canvas-wrap.mui-right .mui-off-canvas-left,.mui-off-canvas-wrap.mui-right .mui-off-canvas-right,.mui-off-canvas-wrap.mui-sliding .mui-off-canvas-left,.mui-off-canvas-wrap.mui-sliding .mui-off-canvas-right{display:block}.mui-off-canvas-wrap.mui-left .mui-off-canvas-backdrop,.mui-off-canvas-wrap.mui-right .mui-off-canvas-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1002;display:block;background:rgba(255,255,255,.2);box-shadow:-4px 0 4px rgba(0,0,0,.5),4px 0 4px rgba(0,0,0,.5);transition:background 300ms ease;-webkit-backface-visibility:hidden;-webkit-tap-highlight-color:transparent}.mui-off-canvas-wrap.mui-left .mui-inner-wrap{-webkit-transform:translate3d(-80%,0,0);transform:translate3d(-80%,0,0)}.mui-off-canvas-wrap.mui-right .mui-inner-wrap{-webkit-transform:translate3d(80%,0,0);transform:translate3d(80%,0,0)}.mui-off-canvas-left,.mui-off-canvas-right{position:absolute;top:0;bottom:0;display:none;width:80%;min-height:100%;box-sizing:content-box;-webkit-overflow-scrolling:touch;background:#333;-webkit-backface-visibility:hidden}.mui-off-canvas-left{left:0}.mui-off-canvas-right{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-spinner{position:relative;display:inline-block;width:24px;height:24px}.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-indicator1{-webkit-transform:rotate(0) translate(0,-142%);transform:rotate(0) translate(0,-142%);-webkit-animation-delay:0;animation-delay:0}.mui-spinner-indicator2{-webkit-transform:rotate(30deg) translate(0,-142%);transform:rotate(30deg) translate(0,-142%);-webkit-animation-delay:-.9167s;animation-delay:-.9167s}.mui-spinner-indicator3{-webkit-transform:rotate(60deg) translate(0,-142%);transform:rotate(60deg) translate(0,-142%);-webkit-animation-delay:-.833s;animation-delay:-.833s}.mui-spinner-indicator4{-webkit-transform:rotate(90deg) translate(0,-142%);transform:rotate(90deg) translate(0,-142%);-webkit-animation-delay:-.75s;animation-delay:-.75s}.mui-spinner-indicator5{-webkit-transform:rotate(120deg) translate(0,-142%);transform:rotate(120deg) translate(0,-142%);-webkit-animation-delay:-.667s;animation-delay:-.667s}.mui-spinner-indicator6{-webkit-transform:rotate(150deg) translate(0,-142%);transform:rotate(150deg) translate(0,-142%);-webkit-animation-delay:-.5833s;animation-delay:-.5833s}.mui-spinner-indicator7{-webkit-transform:rotate(180deg) translate(0,-142%);transform:rotate(180deg) translate(0,-142%);-webkit-animation-delay:-.5s;animation-delay:-.5s}.mui-spinner-indicator8{-webkit-transform:rotate(210deg) translate(0,-142%);transform:rotate(210deg) translate(0,-142%);-webkit-animation-delay:-.41667s;animation-delay:-.41667s}.mui-spinner-indicator9{-webkit-transform:rotate(240deg) translate(0,-142%);transform:rotate(240deg) translate(0,-142%);-webkit-animation-delay:-.333s;animation-delay:-.333s}.mui-spinner-indicator10{-webkit-transform:rotate(270deg) translate(0,-142%);transform:rotate(270deg) translate(0,-142%);-webkit-animation-delay:-.25s;animation-delay:-.25s}.mui-spinner-indicator11{-webkit-transform:rotate(300deg) translate(0,-142%);transform:rotate(300deg) translate(0,-142%);-webkit-animation-delay:-.1667s;animation-delay:-.1667s}.mui-spinner-indicator12{-webkit-transform:rotate(330deg) translate(0,-142%);transform:rotate(330deg) translate(0,-142%);-webkit-animation-delay:-.0833s;animation-delay:-.0833s}@-webkit-keyframes fade{from{opacity:1}to{opacity:.25}}@keyframes fade{from{opacity:1}to{opacity:.25}}.mui-spin{-webkit-transform-origin:50% 54%;transform-origin:50% 54%;-webkit-animation:spin 1s infinite linear;animation:spin 1s infinite linear}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.mui-btn,button,input[type=button],input[type=reset],input[type=submit]{position:relative;display:inline-block;padding:6px 12px;margin-bottom:0;font-size:14px;font-weight:400;line-height:1.42;color:#333;text-align:center;white-space:nowrap;vertical-align:top;cursor:pointer;background-color:#fff;border:1px solid #ccc;border-radius:3px;-webkit-transition:all;transition:all;-webkit-transition-timing-function:linear;transition-timing-function:linear;-webkit-transition-duration:.2s;transition-duration:.2s}.mui-btn.mui-active,.mui-btn:active,button.mui-active,button:active,input[type=button].mui-active,input[type=button]:active,input[type=reset].mui-active,input[type=reset]:active,input[type=submit].mui-active,input[type=submit]:active{color:#fff;background-color:#929292}.mui-btn.mui-disabled,.mui-btn:disabled,button.mui-disabled,button:disabled,input[type=button].mui-disabled,input[type=button]:disabled,input[type=reset].mui-disabled,input[type=reset]:disabled,input[type=submit].mui-disabled,input[type=submit]:disabled{opacity:.6}.mui-btn-blue,.mui-btn-primary,input[type=submit]{color:#fff;background-color:#007aff;border:1px solid #007aff}.mui-btn-blue.mui-active,.mui-btn-blue:active,.mui-btn-primary.mui-active,.mui-btn-primary:active,input[type=submit].mui-active,input[type=submit]:active{color:#fff;background-color:#0062cc;border:1px solid #0062cc}.mui-btn-green,.mui-btn-positive,.mui-btn-success{color:#fff;background-color:#4cd964;border:1px solid #4cd964}.mui-btn-green.mui-active,.mui-btn-green:active,.mui-btn-positive.mui-active,.mui-btn-positive:active,.mui-btn-success.mui-active,.mui-btn-success:active{color:#fff;background-color:#2ac845;border:1px solid #2ac845}.mui-btn-warning,.mui-btn-yellow{color:#fff;background-color:#f0ad4e;border:1px solid #f0ad4e}.mui-btn-warning.mui-active,.mui-btn-warning:active,.mui-btn-yellow.mui-active,.mui-btn-yellow:active{color:#fff;background-color:#ec971f;border:1px solid #ec971f}.mui-btn-danger,.mui-btn-negative,.mui-btn-red{color:#fff;background-color:#dd524d;border:1px solid #dd524d}.mui-btn-danger.mui-active,.mui-btn-danger:active,.mui-btn-negative.mui-active,.mui-btn-negative:active,.mui-btn-red.mui-active,.mui-btn-red:active{color:#fff;background-color:#cf2d28;border:1px solid #cf2d28}.mui-btn-purple,.mui-btn-royal{color:#fff;background-color:#8a6de9;border:1px solid #8a6de9}.mui-btn-purple.mui-active,.mui-btn-purple:active,.mui-btn-royal.mui-active,.mui-btn-royal:active{color:#fff;background-color:#6641e2;border:1px solid #6641e2}.mui-btn-outlined{background-color:transparent}.mui-btn-outlined.mui-btn-blue,.mui-btn-outlined.mui-btn-primary{color:#007aff}.mui-btn-outlined.mui-btn-green,.mui-btn-outlined.mui-btn-positive,.mui-btn-outlined.mui-btn-success{color:#4cd964}.mui-btn-outlined.mui-btn-warning,.mui-btn-outlined.mui-btn-yellow{color:#f0ad4e}.mui-btn-outlined.mui-btn-danger,.mui-btn-outlined.mui-btn-negative,.mui-btn-outlined.mui-btn-red{color:#dd524d}.mui-btn-outlined.mui-btn-purple,.mui-btn-outlined.mui-btn-royal{color:#8a6de9}.mui-btn-outlined.mui-btn-blue:active,.mui-btn-outlined.mui-btn-danger:active,.mui-btn-outlined.mui-btn-green:active,.mui-btn-outlined.mui-btn-negative:active,.mui-btn-outlined.mui-btn-positive:active,.mui-btn-outlined.mui-btn-primary:active,.mui-btn-outlined.mui-btn-purple:active,.mui-btn-outlined.mui-btn-red:active,.mui-btn-outlined.mui-btn-royal:active,.mui-btn-outlined.mui-btn-success:active,.mui-btn-outlined.mui-btn-warning:active,.mui-btn-outlined.mui-btn-yellow:active{color:#fff}.mui-btn-link{padding-top:6px;padding-bottom:6px;color:#007aff;background-color:transparent;border:0}.mui-btn-link.mui-active,.mui-btn-link:active{color:#0062cc;background-color:transparent}.mui-btn-block{display:block;width:100%;padding:15px 0;margin-bottom:10px;font-size:18px}.mui-btn .mui-badge{margin:-2px -4px -2px 4px;font-size:14px;background-color:rgba(0,0,0,.15)}.mui-btn .mui-badge-inverted,.mui-btn:active .mui-badge-inverted{background-color:transparent}.mui-btn-negative:active .mui-badge-inverted,.mui-btn-positive:active .mui-badge-inverted,.mui-btn-primary:active .mui-badge-inverted{color:#fff}.mui-btn-block .mui-badge{position:absolute;right:0;margin-right:10px}.mui-btn .mui-icon{font-size:inherit}.mui-btn.mui-icon{font-size:14px;line-height:1.42}.mui-btn.mui-fab{width:56px;height:56px;padding:16px;border-radius:50%;outline:0}.mui-btn.mui-fab.mui-btn-mini{width:40px;height:40px;padding:8px}.mui-btn.mui-fab .mui-icon{width:24px;height:24px;font-size:24px;line-height:24px}.mui-bar{position:fixed;right:0;left:0;z-index:10;height:44px;padding-right:10px;padding-left:10px;background-color:rgba(247,247,247,.98);border-bottom:0;-webkit-box-shadow:0 0 1px rgba(0,0,0,.85);box-shadow:0 0 1px rgba(0,0,0,.85);-webkit-backface-visibility:hidden;backface-visibility:hidden}.mui-bar .mui-title{right:40px;left:40px;width:auto;margin:0;overflow:hidden;text-overflow:ellipsis}.mui-bar .mui-backdrop{background:0 0}.mui-bar-header-secondary{top:44px}.mui-bar-footer{bottom:0}.mui-bar-footer-secondary{bottom:44px}.mui-bar-footer-secondary-tab{bottom:50px}.mui-bar-footer,.mui-bar-footer-secondary,.mui-bar-footer-secondary-tab{border-top:0}.mui-bar-nav{top:0;-webkit-box-shadow:0 1px 6px #ccc;box-shadow:0 1px 6px #ccc}.mui-bar-nav~.mui-content .mui-anchor{display:block;height:45px;margin-top:-45px;visibility:hidden}.mui-bar-nav.mui-bar .mui-icon{padding-right:10px;padding-left:10px;margin-right:-10px;margin-left:-10px}.mui-title{position:absolute;display:block;width:100%;padding:0;margin:0 -10px;font-size:17px;font-weight:500;line-height:44px;color:#000;text-align:center;white-space:nowrap}.mui-title a{color:inherit}.mui-bar-tab{bottom:0;display:table;width:100%;height:50px;padding:0;table-layout:fixed;border-top:0;border-bottom:0}.mui-bar-tab .mui-tab-item{display:table-cell;width:1%;height:50px;overflow:hidden;color:#929292;text-align:center;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}.mui-bar-tab .mui-tab-item.mui-active{color:#007aff}.mui-bar-tab .mui-tab-item .mui-icon{top:3px;width:24px;height:24px;padding-top:0;padding-bottom:0}.mui-bar-tab .mui-tab-item .mui-icon~.mui-tab-label{display:block;overflow:hidden;font-size:11px;text-overflow:ellipsis}.mui-bar-tab .mui-tab-item .mui-icon:active{background:0 0}.mui-bar .mui-btn{position:relative;top:7px;z-index:20;padding:6px 12px 7px;margin-top:0;font-weight:400}.mui-bar .mui-btn.mui-pull-right{margin-left:10px}.mui-bar .mui-btn.mui-pull-left{margin-right:10px}.mui-bar .mui-btn-link{top:0;padding:0;font-size:16px;line-height:44px;color:#007aff;border:0}.mui-bar .mui-btn-link.mui-active,.mui-bar .mui-btn-link:active{color:#0062cc}.mui-bar .mui-btn-block{top:6px;padding:5px 0;margin-bottom:0;font-size:16px}.mui-bar .mui-btn-nav.mui-pull-left{margin-left:-5px}.mui-bar .mui-btn-nav.mui-pull-left .mui-icon-left-nav{margin-right:-3px}.mui-bar .mui-btn-nav.mui-pull-right{margin-right:-5px}.mui-bar .mui-btn-nav.mui-pull-right .mui-icon-right-nav{margin-left:-3px}.mui-bar .mui-btn-nav:active{opacity:.3}.mui-bar .mui-icon{position:relative;z-index:20;padding-top:10px;padding-bottom:10px;font-size:24px}.mui-bar .mui-icon:active{opacity:.3}.mui-bar .mui-btn .mui-icon{top:3px;padding:0;margin:0}.mui-bar .mui-title .mui-icon{padding:0;margin:0}.mui-bar .mui-title .mui-icon.mui-icon-caret{top:4px;margin-left:-5px}.mui-bar input[type=search]{height:29px;margin:6px 0}.mui-bar .mui-segmented-control{top:7px;width:auto;margin:0 auto}.mui-badge{display:inline-block;padding:3px 6px;font-size:12px;line-height:1;color:#333;background-color:rgba(0,0,0,.15);border-radius:100px}.mui-badge.mui-badge-inverted{padding:0 5px 0 0;color:#929292;background-color:transparent}.mui-badge-blue,.mui-badge-primary{color:#fff;background-color:#007aff}.mui-badge-blue.mui-badge-inverted,.mui-badge-primary.mui-badge-inverted{color:#007aff;background-color:transparent}.mui-badge-green,.mui-badge-success{color:#fff;background-color:#4cd964}.mui-badge-green.mui-badge-inverted,.mui-badge-success.mui-badge-inverted{color:#4cd964;background-color:transparent}.mui-badge-warning,.mui-badge-yellow{color:#fff;background-color:#f0ad4e}.mui-badge-warning.mui-badge-inverted,.mui-badge-yellow.mui-badge-inverted{color:#f0ad4e;background-color:transparent}.mui-badge-danger,.mui-badge-red{color:#fff;background-color:#dd524d}.mui-badge-danger.mui-badge-inverted,.mui-badge-red.mui-badge-inverted{color:#dd524d;background-color:transparent}.mui-badge-purple,.mui-badge-royal{color:#fff;background-color:#8a6de9}.mui-badge-purple.mui-badge-inverted,.mui-badge-royal.mui-badge-inverted{color:#8a6de9;background-color:transparent}.mui-table-view{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-striped>li:nth-child(odd),.mui-table-view-striped>li:nth-child(odd)>.mui-slider-cell>.mui-slider-left~.mui-slider-handle,.mui-table-view-striped>li:nth-child(odd)>.mui-slider-cell>.mui-slider-right~.mui-slider-handle{background-color:#f9f9f9}.mui-table-view-chevron .mui-table-view-cell{padding-right:65px}.mui-table-view-chevron .mui-table-view-cell>a:not(.mui-btn){margin-right:-65px}.mui-table-view-slider .mui-table-view-cell{padding:11px 0}.mui-table-view-slider .mui-table-view-cell>a:not(.mui-btn){margin-right:0}.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 .mui-table-view-cell.mui-active,.mui-table-view-inverted .mui-table-view-cell>a:not(.mui-btn).mui-active{background-color:#242424}.mui-table-view-cell{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.mui-checkbox input[type=checkbox],.mui-table-view-cell.mui-radio input[type=radio]{top:8px}.mui-table-view-cell.mui-checkbox.mui-left,.mui-table-view-cell.mui-radio.mui-left{padding-left:58px}.mui-table-view-cell.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>a:not(.mui-btn){position:relative;display:block;padding:inherit;margin:-11px -15px;overflow:hidden;color:inherit;text-overflow:ellipsis;white-space:nowrap}.mui-table-view-cell>a:not(.mui-btn).mui-active{background-color:#eee}.mui-table-view-cell p{margin-bottom:0}.mui-table-view-cell>.mui-slider-cell{margin-top:1px;margin-bottom:1px}.mui-table-view-cell>.mui-slider-cell>.mui-slider-handle{position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}.mui-table-view-cell>.mui-slider-cell>.mui-slider-left~.mui-slider-handle,.mui-table-view-cell>.mui-slider-cell>.mui-slider-right~.mui-slider-handle{position:relative;top:auto;right:auto;bottom:auto;left:auto;z-index:1;padding-left:15px;background-color:#fff;-webkit-transform:translate3d(0px,0,0);transform:translate3d(0px,0,0)}.mui-table-view-cell>.mui-slider-cell>.mui-slider-left,.mui-table-view-cell>.mui-slider-cell>.mui-slider-right{top:1px;bottom:1px}.mui-table-view-divider{padding-top:6px;padding-bottom:6px;padding-left:15px;margin-top:-1px;margin-left:0;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 .mui-media,.mui-table-view .mui-media-body{overflow:hidden}.mui-table-view .mui-media-object{max-width:42px;height:42px}.mui-table-view .mui-media-object.mui-pull-left{margin-right:10px}.mui-table-view .mui-media-object.mui-pull-right{margin-left:10px}.mui-table-view-cell>.mui-badge,.mui-table-view-cell>.mui-btn,.mui-table-view-cell>.mui-switch,.mui-table-view-cell>a>.mui-badge,.mui-table-view-cell>a>.mui-btn,.mui-table-view-cell>a>.mui-switch{position:absolute;top:50%;right:15px;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.mui-table-view-cell .mui-navigate-left>.mui-badge,.mui-table-view-cell .mui-navigate-left>.mui-btn,.mui-table-view-cell .mui-navigate-left>.mui-switch,.mui-table-view-cell .mui-navigate-right>.mui-badge,.mui-table-view-cell .mui-navigate-right>.mui-btn,.mui-table-view-cell .mui-navigate-right>.mui-switch,.mui-table-view-cell .mui-push-left>.mui-badge,.mui-table-view-cell .mui-push-left>.mui-btn,.mui-table-view-cell .mui-push-left>.mui-switch,.mui-table-view-cell .mui-push-right>.mui-badge,.mui-table-view-cell .mui-push-right>.mui-btn,.mui-table-view-cell .mui-push-right>.mui-switch,.mui-table-view-cell>a .mui-navigate-left>.mui-badge,.mui-table-view-cell>a .mui-navigate-left>.mui-btn,.mui-table-view-cell>a .mui-navigate-left>.mui-switch,.mui-table-view-cell>a .mui-navigate-right>.mui-badge,.mui-table-view-cell>a .mui-navigate-right>.mui-btn,.mui-table-view-cell>a .mui-navigate-right>.mui-switch,.mui-table-view-cell>a .mui-push-left>.mui-badge,.mui-table-view-cell>a .mui-push-left>.mui-btn,.mui-table-view-cell>a .mui-push-left>.mui-switch,.mui-table-view-cell>a .mui-push-right>.mui-badge,.mui-table-view-cell>a .mui-push-right>.mui-btn,.mui-table-view-cell>a .mui-push-right>.mui-switch{right:35px}.mui-content>.mui-table-view:first-child{margin-top:15px}.mui-table-view-cell.mui-collapse>.mui-navigate-right:after,.mui-table-view-cell.mui-collapse>.mui-push-right:after{content:'\e662'}.mui-table-view-cell.mui-collapse.mui-active .mui-table-view{display:block}.mui-table-view-cell.mui-collapse.mui-active>.mui-navigate-right:after,.mui-table-view-cell.mui-collapse.mui-active>.mui-push-right:after{content:'\e661'}.mui-table-view-cell.mui-collapse .mui-table-view{display:none;margin-top:11px;margin-right:-15px;margin-bottom:-11px;margin-left:-15px}.mui-table-view-cell.mui-collapse .mui-table-view.mui-table-view-chevron{margin-right:-65px}.mui-table-view-cell.mui-collapse .mui-table-view .mui-table-view-cell{padding-left:31px;background-position:31px 100%}.mui-table-view.mui-grid-view{display:block;width:100%;padding:0 10px 10px 0;font-size:0;white-space:normal}.mui-table-view.mui-grid-view .mui-table-view-cell{display:inline-block;padding:10px 0 0 14px;margin-right:-4px;font-size:17px;text-align:center;vertical-align:middle;background:0 0}.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-object{width:100%;max-width:100%;height:auto}.mui-table-view.mui-grid-view .mui-table-view-cell>a:not(.mui-btn){margin:-10px 0 0 -14px}.mui-table-view.mui-grid-view .mui-table-view-cell>a:not(.mui-btn).mui-active,.mui-table-view.mui-grid-view .mui-table-view-cell>a:not(.mui-btn):active{background:0 0}.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body{display:block;width:100%;height:15px;margin-top:8px;font-size:15px;line-height:15px;color:#333;text-overflow:ellipsis}.mui-grid-view.mui-grid-9{padding-right:0;background-color:#f2f2f2}.mui-grid-view.mui-grid-9 .mui-table-view-cell{vertical-align:top;border-top:1px solid #eee;border-left:1px solid #eee}.mui-grid-view.mui-grid-9 .mui-table-view-cell>a:not(.mui-btn){padding:15px}.mui-grid-view.mui-grid-9 .mui-media{color:#797979}.mui-grid-view.mui-grid-9 .mui-media .mui-icon{position:relative;font-size:3em}.mui-grid-view.mui-grid-9 .mui-media .mui-icon .mui-badge{position:absolute;top:1px;right:0;color:#fff;background:red;opacity:.9}.mui-slider-cell{position:relative}.mui-slider-cell>.mui-slider-handle{z-index:1}.mui-slider-cell>.mui-slider-left,.mui-slider-cell>.mui-slider-right{position:absolute;top:0;bottom:0;z-index:0}.mui-slider-cell>.mui-slider-left{left:0}.mui-slider-cell>.mui-slider-right{right:0}input,select,textarea{font-family:"Helvetica Neue",Helvetica,sans-serif;font-size:17px;-webkit-tap-highlight-color:transparent;-webkit-tap-highlight-color:transparent}input:focus,select:focus,textarea:focus{-webkit-tap-highlight-color:transparent;-webkit-tap-highlight-color:transparent;-webkit-user-modify:read-write-plaintext-only}input[type=color],input[type=date],input[type=datetime-local],input[type=datetime],input[type=email],input[type=month],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],input[type=week],select,textarea{width:100%;height:40px;-webkit-appearance:none;padding:10px 15px;margin-bottom:15px;line-height:21px;-webkit-user-select:text;background-color:#fff;border:1px solid rgba(0,0,0,.2);border-radius:3px;outline:0}input[type=search]{height:34px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;font-size:16px;text-align:center;background-color:rgba(0,0,0,.1);border:0;border-radius:6px}input[type=search]:focus{text-align:left}textarea{height:auto;resize:none}select{height:auto;margin-top:1px;font-size:14px;background-color:#fff;border:0!important}.mui-input-group{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 input,.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=search]{background:0 0}.mui-input-group input:last-child{background-image:none}.mui-input-row{overflow:hidden}.mui-input-row select{padding:10px 15px 0;font-size:17px}.mui-input-row label+input,.mui-input-row:last-child{background-image:none}.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-row label{float:left;width:35%;padding:8px 15px;font-family:"Helvetica Neue",Helvetica,sans-serif;line-height:1.1}.mui-input-row label~input,.mui-input-row label~select,.mui-input-row label~textarea{float:right;width:65%;padding-left:0;margin-bottom:0;border:0}.mui-input-row{position:relative}.mui-input-row.mui-input-range{padding-right:20px;overflow:visible}.mui-input-row .mui-inline{padding:8px 0}.mui-input-row .mui-input-clear~.mui-icon-clear,.mui-input-row .mui-input-speech~.mui-icon-speech{position:absolute;top:10px;right:10px;width:28px;height:28px;font-size:20px;color:#999;text-align:center}.mui-input-row .mui-input-speech~.mui-icon-speech{top:8px;font-size:24px}.mui-input-row .mui-input-clear~.mui-icon-clear~.mui-icon-speech{display:none}.mui-input-row .mui-input-clear~.mui-icon-clear.mui-hidden~.mui-icon-speech{display:inline-block}.mui-input-row .mui-icon-speech~.mui-placeholder{right:38px}.mui-input-row.mui-search .mui-icon-clear{top:7px}.mui-input-row.mui-search .mui-icon-speech{top:5px}.mui-checkbox,.mui-radio{position:relative}.mui-checkbox label,.mui-radio label{display:inline-block;float:none;width:100%}.mui-checkbox.mui-left input[type=checkbox],.mui-radio.mui-left input[type=radio]{left:20px}.mui-checkbox.mui-left label,.mui-radio.mui-left label{padding-left:58px}.mui-checkbox input[type=checkbox],.mui-radio input[type=radio]{position:absolute;top:4px;right:20px;display:inline-block;width:28px;height:26px;-webkit-appearance:none;background-color:transparent;border:0;outline:0!important}.mui-checkbox input[type=checkbox]:before,.mui-radio input[type=radio]:before{font-family:Muiicons;font-size:28px;font-weight:400;line-height:1;color:rgba(170,170,170,.6);text-decoration:none;background:0 0;border-radius:0;-webkit-font-smoothing:antialiased}.mui-checkbox input[type=checkbox]:checked:before,.mui-radio input[type=radio]:checked:before{color:#007aff}.mui-radio input[type=radio]:before{content:"\e654"}.mui-radio input[type=radio]:checked:before{content:"\e655"}.mui-checkbox input[type=checkbox]:before{content:"\e656"}.mui-checkbox input[type=checkbox]:checked:before{content:"\e657"}.mui-checkbox-cycle input[type=checkbox]:before{content:"\e910"}.mui-checkbox-cycle input[type=checkbox]:checked:before{content:"\e911"}.mui-select{position:relative}.mui-select:before{position:absolute;top:8px;right:21px;font-family:Muiicons;color:rgba(170,170,170,.6);content:'\e651'}.mui-input-row .mui-switch{float:right;margin-top:5px;margin-right:20px}.mui-input-range input[type=range]{position:relative;width:100%;height:2px;-webkit-appearance:none!important;padding:0;margin:17px 0;cursor:pointer;background-color:#999;border:0;border-radius:3px;outline:0}.mui-input-range input[type=range]::-webkit-slider-thumb{width:28px;height:28px;-webkit-appearance:none!important;background-color:#007aff;border-color:#0062cc;border-radius:50%}.mui-input-range label~input[type=range]{width:65%}.mui-input-range .mui-tooltip{position:absolute;top:-70px;z-index:1;width:64px;height:64px;font-size:36px;line-height:64px;color:#333;text-align:center;text-shadow:0 1px 0 #f3f3f3;background-color:#fff;border:1px solid #ddd;border-radius:6px;opacity:.8}.mui-search{position:relative}.mui-search input[type=search]{padding-left:30px}.mui-search .mui-placeholder{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;display:inline-block;height:34px;font-size:16px;line-height:34px;color:#999;text-align:center;background:0 0;border:0;border-radius:6px}.mui-search .mui-placeholder .mui-icon{font-size:20px;color:#333}.mui-search:before{position:absolute;top:50%;right:50%;display:none;margin-top:-18px;margin-right:31px;font-family:Muiicons;font-size:20px;font-weight:400;content:'\e607'}.mui-search.mui-active:before{left:5px;display:block;margin-right:0;font-size:20px}.mui-search.mui-active input[type=search]{text-align:left}.mui-search.mui-active .mui-placeholder{display:none}.mui-segmented-control{position:relative;display:table;width:100%;overflow:hidden;font-size:15px;font-weight:400;table-layout:fixed;background-color:transparent;border:1px solid #007aff;border-radius:3px}.mui-segmented-control .mui-control-item{display:table-cell;width:1%;padding-top:6px;padding-bottom:7px;overflow:hidden;line-height:1;color:#007aff;text-align:center;text-overflow:ellipsis;white-space:nowrap;border-color:#007aff;border-left:1px solid #007aff;-webkit-transition:background-color .1s linear;transition:background-color .1s linear}.mui-segmented-control .mui-control-item:first-child{border-left-width:0}.mui-segmented-control .mui-control-item.mui-active{color:#fff;background-color:#007aff}.mui-segmented-control.mui-segmented-control-inverted{width:100%;border:0;border-radius:0}.mui-segmented-control.mui-segmented-control-inverted .mui-control-item{color:inherit;border:0}.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active{color:#007aff;background:0 0;border-bottom:2px solid #007aff}.mui-segmented-control.mui-segmented-control-inverted~.mui-slider-progress-bar{background-color:#007aff}.mui-segmented-control-positive{border:1px solid #4cd964}.mui-segmented-control-positive .mui-control-item{color:#4cd964;border-color:inherit}.mui-segmented-control-positive .mui-control-item.mui-active{color:#fff;background-color:#4cd964}.mui-segmented-control-positive.mui-segmented-control-inverted .mui-control-item.mui-active{color:#4cd964;background:0 0;border-bottom:2px solid #4cd964}.mui-segmented-control-positive.mui-segmented-control-inverted~.mui-slider-progress-bar{background-color:#4cd964}.mui-segmented-control-negative{border:1px solid #dd524d}.mui-segmented-control-negative .mui-control-item{color:#dd524d;border-color:inherit}.mui-segmented-control-negative .mui-control-item.mui-active{color:#fff;background-color:#dd524d}.mui-segmented-control-negative.mui-segmented-control-inverted .mui-control-item.mui-active{color:#dd524d;background:0 0;border-bottom:2px solid #dd524d}.mui-segmented-control-negative.mui-segmented-control-inverted~.mui-slider-progress-bar{background-color:#dd524d}.mui-control-content{display:none}.mui-control-content.mui-active{display:block}.mui-popover{position:fixed;top:55px;left:50%;z-index:20;display:none;width:280px;margin-left:-140px;background-color:rgba(247,247,247,.98);border-radius:12px;-webkit-box-shadow:0 0 15px rgba(0,0,0,.1);box-shadow:0 0 15px rgba(0,0,0,.1);opacity:0;-webkit-transition:-webkit-transform .2s ease-in-out,opacity .2s ease-in-out;transition:-webkit-transform .2s ease-in-out,opacity .2s ease-in-out;-webkit-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0)}.mui-popover:before{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}.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-bottom:before{top:auto;bottom:-8px;border-top:8px solid rgba(247,247,247,.98);border-bottom:0}.mui-popover.mui-popover-bottom.mui-popover-action{top:auto;right:0;bottom:0;left:0;width:100%;border-radius:0;-webkit-transition:-webkit-transform .25s,opacity 1ms .25s;-moz-transition:-moz-transform .25s,opacity 1ms .25s;transition:transform .25s,opacity 1ms .25s;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}.mui-popover.mui-popover-bottom.mui-popover-action.mui-active{opacity:1;-webkit-transition:-webkit-transform .25s;-moz-transition:-moz-transform .25s;transition:transform .25s;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.mui-popover.mui-active{display:block;opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.mui-popover .mui-bar~.mui-table-view{padding-top:44px}.mui-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:15;background-color:rgba(0,0,0,.3)}.mui-bar-backdrop.mui-backdrop{bottom:50px;background:0 0}.mui-backdrop-action.mui-backdrop{bottom:50px;background-color:rgba(0,0,0,.3)}.mui-backdrop-action.mui-backdrop,.mui-bar-backdrop.mui-backdrop{opacity:0}.mui-backdrop-action.mui-backdrop.mui-active,.mui-bar-backdrop.mui-backdrop.mui-active{opacity:1;-webkit-transition:all .25s ease;transition:all .25s ease}.mui-popover .mui-btn-block{margin-bottom:5px}.mui-popover .mui-btn-block:last-child{margin-bottom:0}.mui-popover .mui-bar{-webkit-box-shadow:none;box-shadow:none}.mui-popover .mui-bar-nav{border-bottom:1px solid rgba(0,0,0,.15);border-top-left-radius:12px;border-top-right-radius:12px;-webkit-box-shadow:none;box-shadow:none}.mui-popover .mui-table-view{max-height:300px;margin-bottom:0;overflow:auto;-webkit-overflow-scrolling:touch;background-color:rgba(247,247,247,.98);background-image:none;border-radius:12px}.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){border-top-left-radius:12px;border-top-right-radius:12px}.mui-popover .mui-table-view .mui-table-view-cell:last-child,.mui-popover .mui-table-view .mui-table-view-cell:last-child>a:not(.mui-btn){border-bottom-right-radius:12px;border-bottom-left-radius:12px}.mui-popover.mui-bar-popover .mui-table-view{width:106px}.mui-popover.mui-bar-popover .mui-table-view .mui-table-view-cell{padding:11px 15px;background-position:0 100%}.mui-popover.mui-bar-popover .mui-table-view .mui-table-view-cell>a:not(.mui-btn){margin:-11px -15px -11px -15px}.mui-pagination{display:inline-block;padding-left:0;margin:0 auto;border-radius:6px}.mui-pagination>li{display:inline}.mui-pagination>li>a,.mui-pagination>li>span{position:relative;float:left;padding:6px 12px;margin-left:-1px;line-height:1.428571429;color:#007aff;text-decoration:none;background-color:#fff;border:1px solid #ddd}.mui-pagination>li:first-child>a,.mui-pagination>li:first-child>span{margin-left:0;border-top-left-radius:6px;border-bottom-left-radius:6px}.mui-pagination>li:last-child>a,.mui-pagination>li:last-child>span{border-top-right-radius:6px;border-bottom-right-radius:6px}.mui-pagination>li.mui-active>a,.mui-pagination>li.mui-active>a:active,.mui-pagination>li.mui-active>span,.mui-pagination>li.mui-active>span:active,.mui-pagination>li:active>a,.mui-pagination>li:active>a:active,.mui-pagination>li:active>span,.mui-pagination>li:active>span:active{z-index:2;color:#fff;cursor:default;background-color:#007aff;border-color:#007aff}.mui-pagination>li.mui-disabled>a,.mui-pagination>li.mui-disabled>a:active,.mui-pagination>li.mui-disabled>span,.mui-pagination>li.mui-disabled>span:active{color:#777;background-color:#fff;border:1px solid #ddd;opacity:.6}.mui-pagination-lg>li>a,.mui-pagination-lg>li>span{padding:10px 16px;font-size:18px}.mui-pagination-sm>li>a,.mui-pagination-sm>li>span{padding:5px 10px;font-size:12px}.mui-pager{padding-left:0;text-align:center;list-style:none}.mui-pager:after,.mui-pager:before{display:table;content:" "}.mui-pager:after{clear:both}.mui-pager li{display:inline}.mui-pager li>a,.mui-pager li>span{display:inline-block;padding:5px 14px;background-color:#fff;border:1px solid #ddd;border-radius:6px}.mui-pager li.mui-active>a,.mui-pager li.mui-active>span,.mui-pager li:active>a,.mui-pager li:active>span{color:#fff;text-decoration:none;cursor:default;background-color:#007aff;border-color:#007aff}.mui-pager .mui-next>a,.mui-pager .mui-next>span{float:right}.mui-pager .mui-previous>a,.mui-pager .mui-previous>span{float:left}.mui-pager .mui-disabled>a,.mui-pager .mui-disabled>a:active,.mui-pager .mui-disabled>span,.mui-pager .mui-disabled>span:active{color:#777;background-color:#fff;border:1px solid #ddd;opacity:.6}.mui-modal{position:fixed;top:0;z-index:11;width:100%;min-height:100%;overflow:hidden;background-color:#fff;opacity:0;-webkit-transition:-webkit-transform .25s,opacity 1ms .25s;-moz-transition:-moz-transform .25s,opacity 1ms .25s;transition:transform .25s,opacity 1ms .25s;-webkit-transition-timing-function:cubic-bezier(.1,.5,.1,1);transition-timing-function:cubic-bezier(.1,.5,.1,1);-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}.mui-modal.mui-active{height:100%;opacity:1;-webkit-transition:-webkit-transform .25s;-moz-transition:-moz-transform .25s;transition:transform .25s;-webkit-transition-timing-function:cubic-bezier(.1,.5,.1,1);transition-timing-function:cubic-bezier(.1,.5,.1,1);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.mui-slider{position:relative;width:100%;overflow:hidden}.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-slider-group{position:relative;font-size:0;white-space:nowrap;-webkit-transition:all 0s linear;transition:all 0s linear}.mui-slider .mui-slider-group .mui-slider-item{position:relative;display:inline-block;width:100%;height:100%;font-size:14px;vertical-align:top}.mui-slider .mui-slider-group .mui-slider-item a{position:relative;display:block;line-height:0}.mui-slider .mui-slider-group .mui-slider-item img{width:100%}.mui-slider .mui-slider-group.mui-slider-loop .mui-slider-item:first-child{margin-left:-100%}.mui-slider .mui-slider-group.mui-slider-loop .mui-slider-item:last-child{margin-right:-100%}.mui-slider-title{position:absolute;bottom:0;left:0;width:100%;height:30px;margin:0;line-height:30px;text-align:left;text-indent:12px;background-color:#000;opacity:.8}.mui-slider-indicator{position:absolute;bottom:8px;width:100%;text-align:center;background:0 0}.mui-slider-indicator.mui-segmented-control{position:relative;bottom:auto;padding-top:10px}.mui-slider-indicator .mui-indicator{display:inline-block;width:6px;height:6px;margin:1px 6px;cursor:pointer;background:#aaa;border-radius:50%;-webkit-box-shadow:0 0 1px 1px rgba(130,130,130,.7);box-shadow:0 0 1px 1px rgba(130,130,130,.7)}.mui-slider-indicator .mui-active.mui-indicator{background:#fff}.mui-slider-indicator .mui-icon{width:40px;height:30px;margin:3px;font-size:20px;line-height:30px;text-align:center;border:1px solid #ddd}.mui-slider-indicator .mui-number{display:inline-block;width:58px;line-height:32px}.mui-slider-indicator .mui-number span{color:#ff5053}.mui-slider-progress-bar{z-index:1;height:2px;-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-backface-visibility:hidden}.mui-switch{position:relative;display:block;width:74px;height:30px;background-color:#fff;border:2px solid #ddd;border-radius:20px;-webkit-transition-duration:.2s;transition-duration:.2s;-webkit-transition-property:background-color,border;transition-property:background-color,border}.mui-switch .mui-switch-handle{position:absolute;top:-1px;left:-1px;z-index:2;width:28px;height:28px;background-color:#fff;border-radius:16px;-webkit-box-shadow:0 2px 5px rgba(0,0,0,.4);box-shadow:0 2px 5px rgba(0,0,0,.4);-webkit-transition-duration:.2s;transition-duration:.2s;-webkit-transition-property:-webkit-transform,width;transition-property:transform,width}.mui-switch:before{position:absolute;top:3px;right:11px;font-size:13px;color:#999;text-transform:uppercase;content:"Off"}.mui-switch.mui-active{background-color:#4cd964;border-color:#4cd964}.mui-switch.mui-active .mui-switch-handle{-webkit-transform:translate3d(45px,0,0);transform:translate3d(45px,0,0)}.mui-switch.mui-active:before{right:auto;left:15px;color:#fff;content:"On"}.mui-switch input[type=checkbox]{display:none}.mui-switch-mini{width:47px}.mui-switch-mini:before{display:none}.mui-switch-mini.mui-active .mui-switch-handle{-webkit-transform:translate3d(18px,0,0);transform:translate3d(18px,0,0)}.mui-switch-blue.mui-active{background-color:#007aff;border:2px solid #007aff}.mui-content.mui-fade{left:0;opacity:0}.mui-content.mui-fade.mui-in{opacity:1}.mui-content.mui-sliding{z-index:2;-webkit-transition:-webkit-transform .4s;-moz-transition:-moz-transform .4s;transition:transform .4s;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.mui-content.mui-sliding.mui-left{z-index:1;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}.mui-content.mui-sliding.mui-right{z-index:3;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}.mui-navigate-left:after,.mui-navigate-right:after,.mui-push-left:after,.mui-push-right:after{position:absolute;top:50%;display:inline-block;font-family:Muiicons;font-size:inherit;line-height:1;color:#bbb;text-decoration:none;-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-font-smoothing:antialiased}.mui-navigate-left:after,.mui-push-left:after{left:15px;content:'\e664'}.mui-navigate-right:after,.mui-push-right:after{right:15px;content:'\e663'}.mui-pull-bottom-pocket,.mui-pull-top-pocket{position:absolute;left:0;display:block;width:100%;height:490px;overflow:hidden;background:#efeff4}.mui-pull-top-pocket{top:-490px}.mui-pull-bottom-pocket{position:static;bottom:0;z-index:-1;height:40px}.mui-pull-bottom-pocket .mui-pull-loading{display:none}.mui-pull-bottom-pocket .mui-pull-loading.mui-in{display:inline-block}.mui-pull{position:absolute;right:0;bottom:10px;left:0;font-weight:700;color:#777;text-align:center}.mui-pull-loading{vertical-align:middle;-webkit-transition-duration:400ms;transition-duration:400ms}.mui-pull-loading.mui-reverse{-webkit-transform:translate(0,0) rotate(180deg);transform:translate(0,0) rotate(180deg)}.mui-pull-caption{position:relative;display:inline-block;margin-top:-5px;margin-left:10px;overflow:visible;font-size:15px;line-height:24px;vertical-align:middle}.mui-pull-caption span{display:none}.mui-pull-caption span.mui-in{display:inline}.mui-toast-container{position:fixed;bottom:50px;width:100%}.mui-toast-message{z-index:99999;width:270px;padding:5px;margin:5px auto;font-size:14px;color:#000;text-align:center;background-color:#d8d8d8;border-radius:7px}@font-face{font-family:Muiicons;font-style:normal;font-weight:400;src:url(../fonts/muiicons.ttf) format("truetype")}.mui-icon{display:inline-block;font-family:Muiicons;font-size:24px;font-style:normal;font-weight:400;line-height:1;text-decoration:none;-webkit-font-smoothing:antialiased}.mui-icon.mui-right:before{float:right;padding-left:.2em}.mui-icon-spinner:before{content:"\e600"}.mui-icon-weibo:before{content:"\e601"}.mui-icon-pin:before{content:"\e602"}.mui-icon-phone:before{content:"\e603"}.mui-icon-map:before{content:"\e604"}.mui-icon-sms:before{content:"\e605"}.mui-icon-chat:before{content:"\e606"}.mui-icon-search:before{content:"\e607"}.mui-icon-close:before{content:"\e608"}.mui-icon-reply:before{content:"\e609"}.mui-icon-trash:before{content:"\e610"}.mui-icon-edit:before{content:"\e611"}.mui-icon-home:before{content:"\e612"}.mui-icon-category:before{content:"\e613"}.mui-icon-calendar:before{content:"\e614"}.mui-icon-cog:before{content:"\e615"}.mui-icon-speech:before{content:"\e616"}.mui-icon-info:before{content:"\e617"}.mui-icon-arrow-left:before{content:"\e648"}.mui-icon-arrow-right:before{content:"\e649"}.mui-icon-up-nav:before{content:"\e650"}.mui-icon-down-nav:before{content:"\e651"}.mui-icon-right-nav:before{content:"\e652"}.mui-icon-left-nav:before{content:"\e653"}.mui-icon-radio:before{content:"\e654"}.mui-icon-radio-checked:before{content:"\e655"}.mui-icon-checkbox:before{content:"\e656"}.mui-icon-checkbox-checked:before{content:"\e657"}.mui-icon-bars:before{content:"\e658"}.mui-icon-plus:before{content:"\e659"}.mui-icon-clear:before{content:"\e660"}.mui-icon-up:before{content:"\e661"}.mui-icon-down:before{content:"\e662"}.mui-icon-right:before{content:"\e663"}.mui-icon-left:before{content:"\e664"}.mui-icon-pulldown:before{content:"\e665"}.mui-icon-phone-solid:before{content:"\e702"}.mui-icon-phone-filled:before{content:"\e804"}.mui-icon-close-cycle:before{content:"\e908"}.mui-icon-spinner-cycle:before{content:"\e909"}.mui-icon-checkbox-cycle:before{content:"\e910"}.mui-icon-checkbox-checked-cycle:before{content:"\e911"}
\ No newline at end of file
_site/dist/js/mui.js deleted 100644 → 0
View file @ 86f3bac6
This source diff could not be displayed because it is too large. You can view the blob instead.
_site/dist/js/mui.min.js deleted 100644 → 0
View file @ 86f3bac6
/*!
* =====================================================
* Mui v0.5.5 (https://github.com/dcloudio/mui)
* =====================================================
*/
var mui=function(a,b){var c=/complete|loaded|interactive/,d=/^#([\w-]*)$/,e=/^\.([\w-]+)$/,f=/^[\w-]+$/,g=/translate(?:3d)?\((.+?)\)/,h=/matrix(3d)?\((.+?)\)/,i=function(b,c){if(c=c||a,!b)return j();if("object"==typeof b)return j([b],null);try{if(d.test(b)){var e=c.getElementById(RegExp.$1);return j(e?[e]:[])}return j(i.qsa(b,c),b)}catch(f){}return j()},j=function(a,b){return a=a||[],a.__proto__=i.fn,a.selector=b||"",a};return i.uuid=0,i.data={},i.extend=function(a,c,d){a||(a={}),c||(c={});for(var e in c)c[e]!==b&&(d&&"object"==typeof a[e]?i.extend(a[e],c[e],d):a[e]=c[e]);return a},i.slice=[].slice,i.qsa=function(b,c){return c=c||a,i.slice.call(e.test(b)?c.getElementsByClassName(RegExp.$1):f.test(b)?c.getElementsByTagName(b):c.querySelectorAll(b))},i.ready=function(b){return c.test(a.readyState)?b(i):a.addEventListener("DOMContentLoaded",function(){b(i)},!1),this},i.each=function(a,b){return[].every.call(a,function(a,c){return b.call(a,c,a)!==!1}),this},i.trigger=function(a,b,c){return a.dispatchEvent(new CustomEvent(b,{detail:c,bubbles:!0,cancelable:!0})),this},i.getStyles=function(a,b){var c=a.ownerDocument.defaultView.getComputedStyle(a,null);return b?c.getPropertyValue(b)||c[b]:c},i.parseTranslate=function(a,b){var c=a.match(g||"");return c&&c[1]||(c=["","0,0,0"]),c=c[1].split(","),c={x:parseFloat(c[0]),y:parseFloat(c[1]),z:parseFloat(c[2])},b&&c.hasOwnProperty(b)?c[b]:c},i.parseTranslateMatrix=function(a,b){var c=a.match(h),d=c&&c[1];c?(c=c[2].split(","),"3d"===d?c=c.slice(12,15):(c.push(0),c=c.slice(4,7))):c=[0,0,0];var e={x:parseFloat(c[0]),y:parseFloat(c[1]),z:parseFloat(c[2])};return b&&e.hasOwnProperty(b)?e[b]:e},i.fn={each:function(a){return[].every.call(this,function(b,c){return a.call(b,c,b)!==!1}),this}},i}(document);window.mui=mui,"$"in window||(window.$=mui),function(a,b,c){a.targets={},a.targetHandles=[],a.registerTarget=function(b){return b.index=b.index||1e3,a.targetHandles.push(b),a.targetHandles.sort(function(a,b){return a.index-b.index}),a.targetHandles},b.addEventListener("touchstart",function(b){for(var d=b.target,e={};d&&d!==c;d=d.parentNode){var f=!1;if(a.each(a.targetHandles,function(c,g){var h=g.name;f||e[h]||!g.hasOwnProperty("handle")?e[h]||g.isReset!==!1&&(a.targets[h]=!1):(a.targets[h]=g.handle(b,d),a.targets[h]&&(e[h]=!0,g.isContinue!==!0&&(f=!0)))}),f)break}})}(mui,window,document),function(a){String.prototype.trim===a&&(String.prototype.trim=function(){return this.replace(/^\s+|\s+$/g,"")})}(),function(){function a(a,b){b=b||{bubbles:!1,cancelable:!1,detail:void 0};var c=document.createEvent("Events"),d=!0;if(b)for(var e in b)"bubbles"===e?d=!!b[e]:c[e]=b[e];return c.initEvent(a,d,!0),c}"undefined"==typeof window.CustomEvent&&(a.prototype=window.Event.prototype,window.CustomEvent=a)}(),function(a){"classList"in a.documentElement||!Object.defineProperty||"undefined"==typeof HTMLElement||Object.defineProperty(HTMLElement.prototype,"classList",{get:function(){function a(a){return function(c){var d=b.className.split(/\s+/),e=d.indexOf(c);a(d,e,c),b.className=d.join(" ")}}var b=this,c={add:a(function(a,b,c){~b||a.push(c)}),remove:a(function(a,b){~b&&a.splice(b,1)}),toggle:a(function(a,b,c){~b?a.splice(b,1):a.push(c)}),contains:function(a){return!!~b.className.split(/\s+/).indexOf(a)},item:function(a){return b.className.split(/\s+/)[a]||null}};return Object.defineProperty(c,"length",{get:function(){return b.className.split(/\s+/).length}}),c}})}(document),function(a){var b=0;a.requestAnimationFrame||(a.requestAnimationFrame=a.webkitRequestAnimationFrame,a.cancelAnimationFrame=a.webkitCancelAnimationFrame||a.webkitCancelRequestAnimationFrame),a.requestAnimationFrame||(a.requestAnimationFrame=function(c){var d=(new Date).getTime(),e=Math.max(0,16.7-(d-b)),f=a.setTimeout(function(){c(d+e)},e);return b=d+e,f}),a.cancelAnimationFrame||(a.cancelAnimationFrame=function(a){clearTimeout(a)})}(window),function(a,b,c){if(!b.FastClick){var d=function(a,b){return!b.type||"radio"!==b.type&&"checkbox"!==b.type?!1:b};a.registerTarget({name:c,index:40,handle:d,target:!1});var e=function(c){var d=a.targets.click;if(d){var e,f;document.activeElement&&document.activeElement!==d&&document.activeElement.blur(),f=c.detail.gesture.changedTouches[0],e=document.createEvent("MouseEvents"),e.initMouseEvent("click",!0,!0,b,1,f.screenX,f.screenY,f.clientX,f.clientY,!1,!1,!1,!1,0,null),e.forwardedTouchEvent=!0,d.dispatchEvent(e)}};b.addEventListener("tap",e),b.addEventListener("doubletap",e),b.addEventListener("click",function(b){return a.targets.click&&!b.forwardedTouchEvent?(b.stopImmediatePropagation?b.stopImmediatePropagation():b.propagationStopped=!0,b.stopPropagation(),b.preventDefault(),!1):void 0},!0)}}(mui,window,"click"),function(a){a.namespace="mui",a.classNamePrefix=a.namespace+"-",a.classSelectorPrefix="."+a.classNamePrefix,a.className=function(b){return a.classNamePrefix+b},a.classSelector=function(b){return b.replace(/\./g,a.classSelectorPrefix)},a.eventName=function(b,c){return b+(a.namespace?"."+a.namespace:"")+(c?"."+c:"")}}(mui),function(a,b){a.EVENT_START="touchstart",a.EVENT_MOVE="touchmove",a.EVENT_END="touchend",a.EVENT_CANCEL="touchcancel",a.EVENT_CLICK="click",a.preventDefault=function(a){a.preventDefault()},a.stopPropagation=function(a){a.stopPropagation()},a.gestures=[],a.registerGesture=function(b){return b.index=b.index||1e3,a.gestures.push(b),a.gestures.sort(function(a,b){return a.index-b.index}),a.gestures};var c=function(a,b){var c=b.x-a.x,d=b.y-a.y;return Math.sqrt(c*c+d*d)},d=function(a,b){return 180*Math.atan2(b.y-a.y,b.x-a.x)/Math.PI},e=function(a){return-45>a&&a>-135?"up":a>=45&&135>a?"down":a>=135||-135>=a?"left":a>=-45&&45>=a?"right":null},f=function(b,c){a.gestures.stoped||a.each(a.gestures,function(d,e){a.gestures.stoped||a.options.gestureConfig[e.name]&&e.hasOwnProperty("handle")&&e.handle(b,c)})},g={},h=function(b){a.gestures.stoped=!1,g={target:b.target,lastTarget:g.lastTarget?g.lastTarget:null,startTime:Date.now(),touchTime:0,lastTapTime:g.lastTapTime?g.lastTapTime:0,start:{x:b.touches[0].pageX,y:b.touches[0].pageY},move:{x:0,y:0},deltaX:0,deltaY:0,lastDeltaX:0,lastDeltaY:0,angle:"",direction:"",distance:0,drag:!1,swipe:!1,gesture:b},f(b,g)},i=function(b){a.gestures.stoped||(g.touchTime=Date.now()-g.startTime,g.move={x:b.touches[0].pageX,y:b.touches[0].pageY},g.distance=c(g.start,g.move),g.angle=d(g.start,g.move),g.direction=e(g.angle),g.lastDeltaX=g.deltaX,g.lastDeltaY=g.deltaY,g.deltaX=g.move.x-g.start.x,g.deltaY=g.move.y-g.start.y,g.gesture=b,f(b,g))},j=function(b){a.gestures.stoped||(g.touchTime=Date.now()-g.startTime,g.gesture=b,f(b,g))};b.addEventListener(a.EVENT_START,h),b.addEventListener(a.EVENT_MOVE,i),b.addEventListener(a.EVENT_END,j),b.addEventListener(a.EVENT_CANCEL,j),a.fn.on=function(b,c,d){this.each(function(){var e=this;e.addEventListener(b,function(b){var f=a.qsa(c,e),g=b.target;if(f&&f.length>0)for(;g&&g!==document&&g!==e;g=g.parentNode)g&&~f.indexOf(g)&&(b.detail?b.detail.currentTarget=g:b.detail={currentTarget:g},d.call(g,b))}),e.removeEventListener(a.EVENT_CLICK,k),e.addEventListener(a.EVENT_CLICK,k)})};var k=function(a){a.target&&"INPUT"!==a.target.tagName&&a.preventDefault()}}(mui,window),function(a,b){var c=function(c,d){if(c.type===a.EVENT_END||c.type===a.EVENT_CANCEL){var e=this.options;d.direction&&e.swipeMaxTime>d.touchTime&&d.distance>e.swipeMinDistince&&"range"!==c.target.type&&(d.swipe=!0,a.trigger(c.target,b+d.direction,d))}};a.registerGesture({name:b,index:10,handle:c,options:{swipeMaxTime:300,swipeMinDistince:18}})}(mui,"swipe"),function(a,b){var c=function(c,d){switch(c.type){case a.EVENT_MOVE:d.direction&&(d.drag||(d.drag=!0,a.trigger(c.target,b+"start",d)),a.trigger(c.target,b,d),a.trigger(c.target,b+d.direction,d));break;case a.EVENT_END:case a.EVENT_CANCEL:d.drag&&a.trigger(c.target,b+"end",d)}};a.registerGesture({name:b,index:20,handle:c,options:{}})}(mui,"drag"),function(a,b){var c=function(c,d){if(c.type===a.EVENT_END||c.type===a.EVENT_CANCEL){var e=this.options;if(d.distance<e.tabMaxDistance&&d.touchTime<e.tapMaxTime){if(a.options.gestureConfig.doubletap&&d.lastTarget&&d.lastTarget===c.target&&d.lastTapTime&&d.startTime-d.lastTapTime<e.tabMaxInterval)return a.trigger(c.target,"doubletap",d),d.lastTapTime=Date.now(),void(d.lastTarget=c.target);a.trigger(c.target,b,d),d.lastTapTime=Date.now(),d.lastTarget=c.target}}};a.registerGesture({name:b,index:30,handle:c,options:{tabMaxInterval:300,tabMaxDistance:5,tapMaxTime:250}})}(mui,"tap"),function(a,b){var c,d=function(d,e){var f=this.options;switch(d.type){case a.EVENT_START:clearTimeout(c),c=setTimeout(function(){e.drag||a.trigger(d.target,b,e)},f.holdTimeout);break;case a.EVENT_MOVE:e.distance>f.holdThreshold&&clearTimeout(c);break;case a.EVENT_END:case a.EVENT_CANCEL:clearTimeout(c)}};a.registerGesture({name:b,index:10,handle:d,options:{holdTimeout:500,holdThreshold:2}})}(mui,"longtap"),function(a){function b(b){this.os={};var c=[function(){var a=b.match(/(Android);?[\s\/]+([\d.]+)?/);return a&&(this.os.android=!0,this.os.version=a[2]),this.os.android===!0},function(){var a=b.match(/(iPhone\sOS)\s([\d_]+)/);if(a)this.os.ios=this.os.iphone=!0,this.os.version=a[2].replace(/_/g,".");else{var c=b.match(/(iPad).*OS\s([\d_]+)/);c&&(this.os.ios=this.os.ipad=!0,this.os.version=c[2].replace(/_/g,"."))}return this.os.ios===!0}];[].every.call(c,function(b){return!b.call(a)})}b.call(a,navigator.userAgent)}(mui),function(a){function b(a){this.os=this.os||{};var b=a.match(/Html5Plus/i);b&&(this.os.plus=!0)}b.call(a,navigator.userAgent)}(mui),function(a){var b=[];a.global=a.options={gestureConfig:{tap:!0,doubletap:!0,longtap:!0,swipe:!0,drag:!0}},a.initGlobal=function(b){return a.options=a.extend(a.global,b,!0),this},a.init=function(c){return a.options=a.extend(a.global,c||{},!0),a.ready(function(){for(var c=0,d=b.length;d>c;c++)b[c].call(a)}),this},a.init.add=function(a){b.push(a)}}(mui),function(a){var b={optimize:!0,swipeBack:!1,preloadPages:[],preloadLimit:10},c={duration:a.os.ios?200:100,aniShow:"slide-in-right"};a.options.show&&(c=a.extend(c,a.options.show,!0)),a.currentWebview=null,a.isHomePage=!1,a.extend(a.global,b),a.extend(a.options,b),a.waitingOptions=function(b){return a.extend({},b)},a.showOptions=function(b){return a.extend(c,b)},a.windowOptions=function(b){return a.extend({scalable:!1,bounce:""},b)},a.plusReady=function(a){return window.plus?a():document.addEventListener("plusready",function(){a()},!1),this},a.fire=function(a,b,c){a&&a.evalJS("mui&&mui.receive('"+b+"','"+JSON.stringify(c||{})+"')")},a.receive=function(b,c){b&&(c=JSON.parse(c),a.trigger(document,b,c))};var d=function(b){if(!b.preloaded){a.fire(b,"preload");for(var c=b.children(),d=0;d<c.length;d++)a.fire(c[d],"preload");b.preloaded=!0}},e=function(b,c,d){if(d){if(!b[c+"ed"]){a.fire(b,c);for(var e=b.children(),f=0;f<e.length;f++)a.fire(e[f],c);b[c+"ed"]=!0}}else{a.fire(b,c);for(var e=b.children(),f=0;f<e.length;f++)a.fire(e[f],c)}};a.openWindow=function(b,c,f){if(window.plus){"object"==typeof b?(f=b,b=f.url,c=f.id||b):"object"==typeof c?(f=c,c=b):c=c||b,f=f||{};var g,h,i=f.params||{};if(a.webviews[c]){var j=a.webviews[c];if(j.preload)return g=j.webview,g&&g.getURL()||(f=a.extend(f,{id:c,url:b,showAfterLoad:f.showAfterLoad===!1?!1:!0,preload:!0}),g=a.createWindow(f)),h=j.show,h=f.show?a.extend(h,f.show):h,g.show(h.aniShow,h.duration,function(){d(g),e(g,"pagebeforeshow",!1)}),j.afterShowMethodName&&g.evalJS(j.afterShowMethodName+"('"+JSON.stringify(i)+"')"),this;f=a.extend(j,a.extend(f,{id:c,url:b,showAfterLoad:f.showAfterLoad===!1?!1:!0})),g=a.createWindow(f)}else f=a.extend(f,{id:c,url:b,showAfterLoad:f.showAfterLoad===!1?!1:!0}),g=a.createWindow(f);if(f.showAfterLoad){var k=a.waitingOptions(f.waiting),l=plus.nativeUI.showWaiting(k.title||"",k.options);h=a.showOptions(f.show),g.addEventListener("loaded",function(){l.close(),g.show(h.aniShow,h.duration,function(){d(g),e(g,"pagebeforeshow",!1)}),g.showed=!0,f.afterShowMethodName&&g.evalJS(f.afterShowMethodName+"('"+JSON.stringify(i)+"')")},!1)}return g}},a.createWindow=function(b,c){if(window.plus){var d,e=b.id||b.url;if(b.preload){a.webviews[e]&&a.webviews[e].webview.getURL()?d=a.webviews[e].webview:(d=plus.webview.create(b.url,e,a.windowOptions(b.styles),{preload:!0}),b.subpages&&a.each(b.subpages,function(b,c){var e=plus.webview.create(c.url,c.id||c.url,a.windowOptions(c.styles),{preload:!0});d.append(e)})),a.webviews[e]={webview:d,preload:!0,show:a.showOptions(b.show),afterShowMethodName:b.afterShowMethodName};var f=a.data.preloads,g=f.indexOf(e);if(~g&&f.splice(g,1),f.push(e),f.length>a.options.preloadLimit){var h=a.data.preloads.shift(),i=a.webviews[h];i&&i.webview&&a.closeAll(i.webview),delete a.webviews[h]}}else c!==!1&&(d=plus.webview.create(b.url,e,a.windowOptions(b.styles)),b.subpages&&a.each(b.subpages,function(b,c){var e=plus.webview.create(c.url,c.id||c.url,a.windowOptions(c.styles));d.append(e)}));return d}},a.closeOpened=function(b){var c=b.opened();if(c)for(var d=0,e=c.length;e>d;d++){var f=c[d],g=f.opened();g&&g.length>0?a.closeOpened(f):f.parent()!==b&&f.close("none")}},a.closeAll=function(b,c){a.closeOpened(b),c?b.close(c):b.close()},a.createWindows=function(b){a.each(b,function(b,c){a.createWindow(c,!1)})},a.appendWebview=function(b){if(window.plus){var c,d=b.id||b.url;return a.webviews[d]||(c=plus.webview.create(b.url,d,b.styles),c.addEventListener("loaded",function(){a.currentWebview.append(c)}),a.webviews[d]=b),c}},a.webviews={},a.data.preloads=[],a.init.add(function(){var b=a.options,c=b.subpages||[];a.plusReady(function(){a.currentWebview=plus.webview.currentWebview(),a.each(c,function(b,c){a.appendWebview(c)}),a.currentWebview==plus.webview.getWebviewById(plus.runtime.appid)&&(a.isHomePage=!0,setTimeout(function(){d(a.currentWebview)},300))})}),window.addEventListener("preload",function(){var b=a.options.preloadPages||[];a.plusReady(function(){a.each(b,function(b,c){a.createWindow(a.extend(c,{preload:!0}))})})})}(mui),function(a){a.init.add(function(){var b=a.options;b.titleBar&&a.titleBar(b.titleBar),a.os.ios&&a.plusReady(function(){var b=a.options.statusBarBackground?a.options.statusBarBackground:"#f7f7f7";plus.navigator.setStatusBarBackground(b)})})}(mui),function(a){a.init.add(function(){var b=a.options,c=b.pullRefresh||{};if(a.os.plus&&a.os.android)c.down&&a.plus_pulldownRefresh(c.down);else{var d=c.container;if(d){var e=a(d);1===e.length&&e.pullRefresh(c)}}})}(mui),function(a,b,c){a.titleBar=function(b){return b=a.extend({template:"top.html",height:"48px"},b),a.options.optimize&&a.os.plus?a.plusReady(function(){var c=plus.webview.create(b.template,null,{scalable:!1,position:"dock",dock:"top",height:b.height});c.addEventListener("loaded",function(){c.evalJS('document.querySelector(".mui-title").innerHTML="'+b.title+'"')});var d=b.pulldownRefresh||{},e=d.container;e?c.append(a.currentWebview):a.currentWebview.append(c)}):a.get(b.template,function(a){var d=a.match(/<body[^>]*>([\s\S.]*)<\/body>/i)[0],e=c.createElement("div");for(e.innerHTML=d;e.firstChild;)c.body.insertBefore(e.firstChild,c.body.firstChild);if(b.title){var f=c.body.querySelector(".mui-bar .mui-title");f&&(f.innerHTML=b.title)}}),this}}(mui,window,document),function(a){a.get=function(a,c,d){b("GET",a,c,d)},a.post=function(a,c,d){b("POST",a,c,d)};var b=function(a,b,c,d){var e=new XMLHttpRequest,f=/^([\w-]+:)\/\//.test(b)?RegExp.$1:window.location.protocol;e.onreadystatechange=function(){4===e.readyState&&(e.status>=200&&e.status<300||304===e.status||0===e.status&&"file:"===f?c&&c(e.responseText):d&&d())},e.open(a,b,!0),e.send()}}(mui),function(a,b,c){a.offset=function(a){var d={top:0,left:0};return typeof a.getBoundingClientRect!==c&&(d=a.getBoundingClientRect()),{top:d.top+b.pageYOffset-a.clientTop,left:d.left+b.pageXOffset-a.clientLeft}}}(mui,window),function(a,b){a.scrollTo=function(a,c,d){c=c||1e3;var e=function(c){if(0>=c)return void(d&&d());var f=a-b.scrollY;setTimeout(function(){b.scrollTo(0,b.scrollY+f/c*10),e(c-10)},16.7)};e(c)}}(mui,window),function(a,b,c){var d="mui-pull-top-pocket",e="mui-pull-bottom-pocket",f="mui-pull",g="mui-pull-loading",h="mui-pull-caption",i=h+"-down",j=h+"-over",k=h+"-refresh",l="mui-icon",m="mui-icon-spinner",n="mui-icon-pulldown",o="mui-spin",p="mui-in",q="mui-reverse",r=g+" "+l+" "+n+" "+q,s=g+" "+l+" "+n,t=g+" "+l+" "+m+" "+o,u={down:{height:50,contentdown:"下拉可以刷新",contentover:"释放立即刷新",contentrefresh:"正在刷新..."},up:{height:50,contentdown:"上拉显示更多",contentover:"释放立即刷新",contentrefresh:"正在刷新...",duration:300}},v=['<div class="'+f+'">','<div class="'+s+'"></div>','<div class="'+h+'">','<span class="'+i+" "+p+'">{downCaption}</span>','<span class="'+j+'">{overCaption}</span>','<span class="'+k+'">{refreshCaption}</span>',"</div>","</div>"],w=function(b,c){this.element=b,this.options=a.extend(u,c,!0),this.options.up.height=-this.options.up.height,this.pullOptions=null,this.init()};w.prototype.init=function(){this.element.style.webkitTransform="translate3d(0,0,0)",this.element.style.position="relative",this.element.style["-webkit-backface-visibility"]="hidden",this.translateY=0,this.lastTranslateY=0,this.initPocket(),this.initEvent()},w.prototype.initPocket=function(){var a=this.options;a.down&&a.down.hasOwnProperty("callback")&&(this.topPocket=this.element.querySelector("."+d),this.topPocket||(this.topPocket=this.createPocket(d,a.down),this.element.insertBefore(this.topPocket,this.element.firstChild))),a.up&&a.up.hasOwnProperty("callback")&&(this.bottomPocket=this.element.querySelector("."+e),this.bottomPocket||(this.bottomPocket=this.createPocket(e,a.up),this.element.appendChild(this.bottomPocket)))},w.prototype.createPocket=function(a,b){var d=c.createElement("div");return d.className=a,d.innerHTML=v.join("").replace("{downCaption}",b.contentdown).replace("{overCaption}",b.contentover).replace("{refreshCaption}",b.contentrefresh),d},w.prototype.initEvent=function(){var a=this;a.bottomPocket&&a.element.addEventListener("dragup",function(b){a.dragUp(b)}),a.topPocket&&a.element.addEventListener("dragdown",function(b){a.dragDown(b)}),(a.bottomPocket||a.topPocket)&&(a.element.addEventListener("dragstart",function(b){a.dragStart(b)}),a.element.addEventListener("drag",function(b){var c=b.detail.direction;a.dragDirection&&"up"!==c&&"down"!==c&&a.pullOptions&&(a.pullOptions.height>0?a.dragDown(b):a.dragUp(b))}),a.element.addEventListener("dragend",function(b){a.dragEnd(b)}))},w.prototype.dragStart=function(a){var b=a.detail;("up"===b.direction||"down"===b.direction)&&(this.element.style.webkitTransitionDuration="0s",this.isLoading=this.dragDirection=!1)},w.prototype.dragUp=function(a){var d=this;if(!d.isLoading&&"down"!==d.dragDirection){var e=c.body.scrollHeight;!d.dragDirection&&b.innerHeight+b.scrollY+40<e||(b.scrollTo(0,e),d.pullOptions=d.options.up,d.loading=d.bottomPocket.querySelector("."+g),d.drag(a))}},w.prototype.dragDown=function(a){var c=this;if(!c.isLoading&&"up"!==c.dragDirection){var d=b.scrollY;!c.dragDirection&&d>5||(0!==d&&b.scrollTo(0,0),c.pullOptions=c.options.down,c.loading=c.topPocket.querySelector("."+g),c.drag(a))}},w.prototype.drag=function(a){this.pullOptions&&(this.pullOptions.height>0&&a.detail.deltaY<0||(this.dragDirection=this.pullOptions.height>0?"down":"up",this.requestAnimationFrame||this.updateTranslate(),a.detail.gesture.preventDefault(),this.translateY=.4*a.detail.deltaY))},w.prototype.dragEnd=function(b){var c=this;c.pullOptions&&(cancelAnimationFrame(c.requestAnimationFrame),Math.abs(.4*b.detail.deltaY)>=Math.abs(c.pullOptions.height)?c.load():this.hide(),a.gestures.stoped=!0)},w.prototype.hide=function(){this.translateY=0,this.requestAnimationFrame&&(cancelAnimationFrame(this.requestAnimationFrame),this.requestAnimationFrame=null),this.element.style.webkitTransitionDuration="0.5s",this.setTranslate(0),this.setCaption(i),this.pullOptions.height>0&&this.loading.classList.remove(q),this.pullOptions=null},w.prototype.updateTranslate=function(){var a=this;a.translateY!==a.lastTranslateY&&(a.translateY=Math.abs(a.translateY)<2?0:a.translateY,a.setTranslate(a.translateY),Math.abs(a.translateY)>=Math.abs(a.pullOptions.height)?a.showLoading(j):a.hideLoading(i),a.lastTranslateY=a.translateY),a.requestAnimationFrame=requestAnimationFrame(function(){a.updateTranslate()})},w.prototype.setTranslate=function(a){this.element.style.webkitTransform="translate3d(0,"+a+"px,0)",this.bottomPocket&&(0>a?this.bottomPocket.style.bottom=(a>this.pullOptions.height?a:this.pullOptions.height)+"px":0===a&&this.bottomPocket.setAttribute("style",""))},w.prototype.load=function(){var d=this;d.isLoading=!0,d.showLoading(k),d.setTranslate(d.pullOptions.height);var e=d.pullOptions.callback;e&&e(function(){if(d.pullOptions&&d.pullOptions.height<0){var e=Math.min(1e3,d.pullOptions.duration);setTimeout(function(){a.scrollTo(c.body.scrollHeight-b.innerHeight,e,function(){d.isLoading=!1})},100)}else d.isLoading=!1;d.hide()})},w.prototype.showLoading=function(a){this.setCaption(a)},w.prototype.hideLoading=function(a){this.setCaption(a)},w.prototype.setCaption=function(a){var b=this.pullOptions&&this.pullOptions.height>0?this.topPocket:this.bottomPocket;if(b){var c=b.querySelector("."+h),d=c.querySelector("."+p);d&&d.classList.remove(p);var e=c.querySelector("."+a);e&&e.classList.add(p),this.loading.className=this.pullOptions&&this.pullOptions.height>0?a===k?t:a===j?r:s:t}},a.fn.pullRefresh=function(b){this.each(function(){var c=this.getAttribute("data-pullrefresh");if(!c){var d=++a.uuid;a.data[d]=new w(this,b),this.setAttribute("data-pullrefresh",d)}})}}(mui,window,document),function(a){var b={height:50,contentdown:"下拉可以刷新",contentover:"释放立即刷新",contentrefresh:"正在刷新..."};a.plus_pulldownRefresh=function(c){c=a.extend(b,c,!0),a.plusReady(function(){var b=document.body,d=b.getAttribute("data-pullrefresh-plus");if(!d){d=++a.uuid,b.setAttribute("data-pullrefresh-plus",d);var e=a.currentWebview;e.setPullToRefresh({support:!0,height:c.height+"px",range:"200px",contentdown:{caption:c.contentdown},contentover:{caption:c.contentover},contentrefresh:{caption:c.contentrefresh}},function(){c.callback&&c.callback(function(){e.endPullToRefresh()})})}})}}(mui),function(a,b,c,d){var e="mui-off-canvas-left",f="mui-off-canvas-right",g="mui-off-canvas-backdrop",h="mui-off-canvas-wrap",i="mui-off-canvas-height-fixed",j="mui-left",k="mui-right",l="mui-sliding",m=".mui-inner-wrap",n=function(a){if(parentNode=a.parentNode){if(parentNode.classList.contains(h))return parentNode;if(parentNode=parentNode.parentNode,parentNode.classList.contains(h))return parentNode}},o=function(b,d){if(d.classList&&d.classList.contains(g)){var e=n(d);if(e)return a.targets._container=e,d}else if("A"===d.tagName&&d.hash){var f=c.getElementById(d.hash.replace("#",""));if(f){var e=n(f);if(e)return a.targets._container=e,f}}return!1};a.registerTarget({name:d,index:60,handle:o,target:!1,isReset:!1,isContinue:!0});var p=function(a,b){var d=a.querySelector(".mui-content"),e=c.getElementsByTagName("html")[0],f=c.body;b?(e.classList.add(i),f.classList.add(i),d&&d.classList.add(i)):(e.classList.remove(i),f.classList.remove(i),d&&d.classList.remove(i))},q=function(){var a=this.parentNode;a.classList.remove(l),this.removeEventListener("webkitTransitionEnd",q),a.classList.contains(k)||a.classList.contains(j)||p(a,!1)},r=function(a,b){if(a&&b){var c=b.classList;a.querySelector(m).addEventListener("webkitTransitionEnd",q),a.classList.contains(k)||a.classList.contains(j)||p(a,!0),c.contains(e)?a.classList.toggle(k):c.contains(f)?a.classList.toggle(j):c.contains(g)&&(a.classList.remove(k),a.classList.remove(j)),a.classList.add(l)}};b.addEventListener("tap",function(){a.targets.offcanvas&&r(a.targets._container,a.targets.offcanvas)}),a.fn.offCanvas=function(){var a=arguments;this.each(function(){if("show"===a[0]||"hide"===a[0]||"toggle"===a[0]){var b=this.classList;if(b.contains(e)||b.contains(f)){var c=n(this);c&&r(c,this)}}})}}(mui,window,document,"offcanvas"),function(a,b,c){if(!a.os.android){var d,e,f,g,h="mui-slider",i="mui-switch",j="mui-table-view-cell",k="mui-slider-handle",l="mui-off-canvas-left",m="mui-off-canvas-right",n="mui-off-canvas-wrap",o="mui-off-canvas-height-fixed",p="mui-left",q="mui-right",r="mui-sliding",s="mui-draggable",t=".mui-inner-wrap",u="."+l,v="."+m,w=!1,x=1,y=0,z=0,A=0,B=0,C=function(){y!==z&&(e.style["-webkit-transition-duration"]="0s","right"===g&&y>0?(y=Math.min(y,B),0>A?D(e,A+y):D(e,y)):"left"===g&&0>y&&(y=Math.max(y,-B),A>0?D(e,A+y):D(e,y)),z=y),f=requestAnimationFrame(function(){C()})},D=function(a,b){a&&(a.style.webkitTransform="translate3d("+b+"px,0,0)")},E=function(a,b){var d=a.querySelector(".mui-content"),e=c.getElementsByTagName("html")[0],f=c.body;b?(e.classList.add(o),f.classList.add(o),d&&d.classList.add(o)):(e.classList.remove(o),f.classList.remove(o),d&&d.classList.remove(o))},F=function(){var a=this.parentNode,b=a.classList;b.remove(r),this.removeEventListener("webkitTransitionEnd",F),b.contains(q)||b.contains(p)||E(a,!1)};b.addEventListener("touchstart",function(a){var b=a.target;for(w=!1,d=e=null;b&&b!==c;b=b.parentNode){var f=b.classList;if(f){if(f.contains(i))break;if(f.contains(j)&&b.querySelector("."+k))break;if(f.contains(h))break;if(f.contains(n)&&f.contains(s)){if(d=b,e=d.querySelector(t),!e)return;break}}}}),b.addEventListener("dragstart",function(b){if(d){var c=b.detail;if("left"===c.direction?d.classList.contains(q)?w=!0:d.querySelector(v)&&!d.classList.contains(p)&&(w=!0):"right"===c.direction&&(d.classList.contains(p)?w=!0:d.querySelector(u)&&!d.classList.contains(q)&&(w=!0)),w){g=c.direction,B=.8*d.offsetWidth;var f=a.getStyles(e,"webkitTransform"),h=a.parseTranslateMatrix(f);A=y=h?h.x:0;var i=d.classList;i.add(r),i.contains(q)||i.contains(p)||E(d,!0),c.gesture.preventDefault()}}}),b.addEventListener("drag",function(a){if(w){var b=a.detail;f||C(),y=b.deltaX*x}}),b.addEventListener("dragend",function(){if(w){f&&(cancelAnimationFrame(f),f=null),e.setAttribute("style",""),e.addEventListener("webkitTransitionEnd",F);var a,b=d.classList,c=["add","remove"];"right"===g&&y>0?(a=q,0>A&&(c.reverse(),a=p),y>B/2?b[c[0]](a):b[c[1]](a)):"left"===g&&0>y&&(a=p,A>0&&(c.reverse(),a=q),-y>B/2?b[c[0]](a):b[c[1]](a))}})}}(mui,window,document,"offcanvas"),function(a,b,c,d){var e="mui-action",f=function(a,b){return b.className&&~b.className.indexOf(e)?b:!1};a.registerTarget({name:d,index:50,handle:f,target:!1})}(mui,window,document,"action"),function(a,b,c,d){var e="mui-modal",f=function(a,b){if("A"===b.tagName&&b.hash){var d=c.getElementById(b.hash.replace("#",""));if(d&&d.classList.contains(e))return d}return!1};a.registerTarget({name:d,index:50,handle:f,target:!1,isReset:!1,isContinue:!0}),b.addEventListener("tap",function(){a.targets.modal&&a.targets.modal.classList.toggle("mui-active")})}(mui,window,document,"modal"),function(a,b,c,d){var e="mui-popover",f="mui-bar-popover",g="mui-popover-action",h="mui-backdrop",i="mui-bar-backdrop",j="mui-backdrop-action",k="mui-active",l=function(b,d){return"A"===d.tagName&&d.hash&&(a.targets._popover=c.getElementById(d.hash.replace("#","")),a.targets._popover&&a.targets._popover.classList.contains(e))?d:!1};a.registerTarget({name:d,index:60,handle:l,target:!1,isReset:!1,isContinue:!0});var m=function(a){a?c.body.setAttribute("style","position:fixed;width:100%;height:100%;overflow:hidden;"):c.body.setAttribute("style","")},n=function(){this.style.display="none",this.removeEventListener("webkitTransitionEnd",n),m(!1)},o=function(){var b=c.createElement("div");return b.classList.add(h),b.addEventListener("tap",function(){var b=a.targets._popover;b&&(b.addEventListener("webkitTransitionEnd",n),b.classList.remove(k),b.parentNode.removeChild(o))}),b}();b.addEventListener("tap",function(){a.targets.popover&&p(a.targets._popover,a.targets.popover)});var p=function(a,d){o.classList.remove(i),o.classList.remove(j);var e=c.querySelector(".mui-popover.mui-active");if(!e||(e.style.display="none",e.classList.remove(k),e.removeEventListener("webkitTransitionEnd",n),m(!1),e.parentNode.removeChild(o),a!==e)){if(a.classList.contains(f)||a.classList.contains(g))if(a.classList.contains(g))o.classList.add(j);else if(o.classList.add(i),d&&d.parentNode){var h=d.offsetWidth,l=d.offsetLeft,p=b.innerWidth;a.style.left=Math.min(Math.max(l,5),p-h-5)+"px"}a.style.display="block",a.offsetHeight,a.classList.add(k),a.parentNode.appendChild(o),m(!0),o.classList.add(k)}};a.fn.popover=function(){var b=arguments;this.each(function(){a.targets._popover=this,("show"===b[0]||"hide"===b[0]||"toggle"===b[0])&&p(this,b[1])})}}(mui,window,document,"popover"),function(a,b,c,d){var e="mui-control-item",f="mui-control-content",g="mui-tab-item",h=function(a,b){return b.classList&&(b.classList.contains(e)||b.classList.contains(g))?b:!1};a.registerTarget({name:d,index:80,handle:h,target:!1}),b.addEventListener("tap",function(){var b=a.targets.tab;if(b){var e,g,h,i="mui-active",j="."+i;e=b.parentNode.querySelector(j),e&&e.classList.remove(i);var k=b===e;if(b&&b.classList.add(i),b.hash&&(h=c.getElementById(b.hash.replace("#","")))){if(!h.classList.contains(f))return void b.classList[k?"remove":"add"](i);if(!k){g=h.parentNode.getElementsByClassName(i);for(var l=0;l<g.length;l++)g[l].classList.remove(i);h.classList.add(i);var m=h.parentNode.querySelectorAll("."+f);a.trigger(h,a.eventName("shown",d),{tabNumber:Array.prototype.indexOf.call(m,h)})}}}})}(mui,window,document,"tab"),function(a,b){var c="mui-slider",d="mui-slider-group",e="mui-slider-loop",f="mui-slider-indicator",g="mui-action-previous",h="mui-action-next",i="mui-slider-item",j="."+i,k="."+f,l=".mui-slider-progress-bar",m=function(b,c){this.element=b,this.options=a.extend({slideshowDelay:0,factor:1},c),this.init()};m.prototype.init=function(){this.initEvent(),this.initTimer()},m.prototype.refresh=function(b){var c=a.extend({slideshowDelay:0,factor:1},b);this.options.slideshowDelay!=c.slideshowDelay&&(this.options.slideshowDelay=c.slideshowDelay,this.options.slideshowDelay&&this.nextItem())},m.prototype.initEvent=function(){var b=this,c=b.element,d=c.parentNode;b.translateX=0,b.sliderWidth=c.offsetWidth,b.isLoop=c.classList.contains(e),b.sliderLength=c.querySelectorAll(j).length,b.progressBarWidth=0,b.progressBar=d.querySelector(l),b.progressBar&&(b.progressBarWidth=b.progressBar.offsetWidth);var f=!1;b.isSwipeable=!1,d.addEventListener("dragstart",function(a){var d=a.detail,g=d.direction;("left"==g||"right"==g)&&(f=!0,b.translateX=b.lastTranslateX=0,b.scrollX=b.getScroll(),b.sliderWidth=c.offsetWidth,b.isLoop=c.classList.contains(e),b.sliderLength=c.querySelectorAll(j).length,b.progressBar&&(b.progressBarWidth=b.progressBar.offsetWidth),b.maxTranslateX=(b.sliderLength-1)*b.sliderWidth,a.detail.gesture.preventDefault())}),d.addEventListener("drag",function(a){f&&b.dragItem(a)}),d.addEventListener("dragend",function(){f&&(b.gotoItem(b.getSlideNumber()),f=b.isSwipeable=!1)}),d.addEventListener("swipeleft",function(c){b.isSwipeable&&(a.gestures.stoped=!0,b.nextItem(),f=b.isSwipeable=!1,c.stopImmediatePropagation())}),d.addEventListener("swiperight",function(c){b.isSwipeable&&(a.gestures.stoped=!0,b.prevItem(),f=b.isSwipeable=!1,c.stopImmediatePropagation())}),d.addEventListener("slide",function(a){var b=a.detail;b.slideNumber=b.slideNumber||0;var c=d.querySelector(".mui-slider-indicator .mui-number span");c&&(c.innerText=b.slideNumber+1);for(var e=d.querySelectorAll(".mui-slider-indicator .mui-indicator"),f=0,g=e.length;g>f;f++)e[f].classList[f===b.slideNumber?"add":"remove"]("mui-active");for(var h=d.querySelectorAll(".mui-control-item"),f=0,g=h.length;g>f;f++)h[f].classList[f===b.slideNumber?"add":"remove"]("mui-active")}),d.addEventListener(a.eventName("shown","tab"),function(a){b.gotoItem(-(a.detail.tabNumber||0))});var i=c.parentNode.querySelector(k);i&&i.addEventListener("tap",function(a){var c=a.target;(c.classList.contains(g)||c.classList.contains(h))&&(b[c.classList.contains(g)?"prevItem":"nextItem"](),a.stopPropagation())})},m.prototype.dragItem=function(a){var b=this,c=a.detail;if(c.deltaX!==c.lastDeltaX){var d=c.deltaX*b.options.factor+b.scrollX;
b.element.style["-webkit-transition-duration"]="0";var e=0,f=-b.maxTranslateX;if(b.isLoop&&(e=b.sliderWidth,f+=e),d>e||f>d)return void(b.isSwipeable=!1);b.requestAnimationFrame||b.updateTranslate(),b.isSwipeable=!0,b.translateX=d}b.timer&&clearTimeout(b.timer),b.timer=setTimeout(function(){b.initTimer()},100)},m.prototype.updateTranslate=function(){var a=this;a.lastTranslateX!==a.translateX&&(a.setTranslate(a.translateX),a.lastTranslateX=a.translateX),a.requestAnimationFrame=requestAnimationFrame(function(){a.updateTranslate()})},m.prototype.setTranslate=function(a){this.element.style.webkitTransform="translate3d("+a+"px,0,0)",this.updateProcess(a)},m.prototype.updateProcess=function(a){var b=this.progressBarWidth;b&&(a=Math.abs(a),this.setProcess(a*(b/this.sliderWidth)))},m.prototype.setProcess=function(a){var b=this.progressBar;b&&(b.style.webkitTransform="translate3d("+a+"px,0,0)")},m.prototype.nextItem=function(){this.gotoItem(this.getCurrentSlideNumber("next")-1)},m.prototype.prevItem=function(){this.gotoItem(this.getCurrentSlideNumber("prev")+1)},m.prototype.gotoItem=function(b){var c=this,d=c.element,e=c.sliderLength;c.isLoop?e-=2:(e-=1,b=Math.min(0,b),b=Math.max(b,-e)),c.requestAnimationFrame&&(cancelAnimationFrame(c.requestAnimationFrame),c.requestAnimationFrame=null);var f=Math.max(b,-e)*d.offsetWidth;d.style["-webkit-transition-duration"]=".2s",c.setTranslate(f);var g=function(){d.style["-webkit-transition-duration"]="0",d.style.webkitTransform="translate3d("+b*d.offsetWidth+"px,0,0)",d.removeEventListener("webkitTransitionEnd",g)};d.removeEventListener("webkitTransitionEnd",g),c.isLoop&&(1===b||b===-e)&&(b=1===b?-e+1:0,d.addEventListener("webkitTransitionEnd",g)),a.trigger(d.parentNode,"slide",{slideNumber:Math.abs(b)}),this.initTimer()},m.prototype.getSlideNumber=function(){return Math.round(this.getScroll()/this.sliderWidth)},m.prototype.getCurrentSlideNumber=function(a){return Math["next"===a?"ceil":"floor"](this.getScroll()/this.sliderWidth)},m.prototype.getScroll=function(){var b=this.element,c=0;if("webkitTransform"in b.style){var d=a.parseTranslate(b.style.webkitTransform);c=d?d.x:0}return c},m.prototype.initTimer=function(){var a=this,c=a.options.slideshowDelay;if(c){var d=a.element,e=d.getAttribute("data-slidershowTimer");e&&b.clearTimeout(e),e=b.setTimeout(function(){d&&((d.offsetWidth||d.offsetHeight)&&a.nextItem(),a.initTimer())},c),d.setAttribute("data-slidershowTimer",e)}},a.fn.slider=function(b){this.each(function(){var e=this;this.classList.contains(c)&&(e=this.querySelector("."+d));var f=e.getAttribute("data-slider");if(f){var g=a.data[f];g&&g.refresh(b)}else f=++a.uuid,a.data[f]=new m(e,b),e.setAttribute("data-slider",f)})},a.ready(function(){a(".mui-slider-group").slider()})}(mui,window),function(a,b,c,d){var e="mui-switch",f="mui-switch-handle",g="mui-active",h="."+f,i=function(a,b){return b.classList&&b.classList.contains(e)?b:!1};a.registerTarget({name:d,index:100,handle:i,target:!1});var j,i,k,l,m,n=function(b){if(j){var c=b.detail;a.gestures.stoped=!0;var d=!c.drag&&!j.classList.contains(g)||c.drag&&c.deltaX>k/2-l/2;i.style["-webkit-transition-duration"]=".2s",d?(i.style.webkitTransform="translate3d("+m+"px,0,0)",j.classList.add(g)):(i.style.webkitTransform="translate3d(0,0,0)",j.classList.remove(g)),a.trigger(j,"toggle",{isActive:d})}},o=function(a){if(j){var b=a.detail.deltaX;if(0>b)return i.style.webkitTransform="translate3d(0,0,0)";if(b>m)return i.style.webkitTransform="translate3d("+m+"px,0,0)";i.style["-webkit-transition-duration"]="0s",i.style.webkitTransform="translate3d("+b+"px,0,0)",j.classList[b>k/2-l/2?"add":"remove"](g)}};b.addEventListener(a.EVENT_START,function(b){j=a.targets.toggle,j&&(i=j.querySelector(h),k=j.clientWidth,l=i.clientWidth,m=k-l+3,b.preventDefault())}),b.addEventListener("tap",n),b.addEventListener("drag",o),b.addEventListener("dragend",n)}(mui,window,document,"toggle"),function(a,b,c){var d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u="mui-active",v="mui-selected",w="mui-table-view-cell",x="mui-disabled",y="mui-switch",z="mui-btn",A="mui-slider-cell",B="mui-slider-handle",C="mui-slider-left",D="mui-slider-right",E="mui-bounce",F="."+A,G="."+B,H="."+C,I="."+D,J=.4,K=1,L=1,M=function(a){a?e?e.classList.add(u):d&&d.classList.add(u):e?e.classList.remove(u):d&&d.classList.remove(u)},N=function(){s!==t&&(k||n?(k&&n?0===h?O(g,s):O(g,h+s):k?0===h?O(g,Math.max(s,0)):O(g,Math.max(h+s,0)):n&&(0===h?O(g,Math.min(s,0)):O(g,Math.min(h+s,0))),k&&(0===h?s>m&&(f.style.backgroundColor=l,O(k,Math.max(s-m,0))):(f.style.backgroundColor=s>0?l:"",O(k,Math.max(s,0)))),n&&(0===h?-s>p&&(f.style.backgroundColor=o,O(n,Math.min(-(-s-p),0))):(f.style.backgroundColor=s>0&&!k?"":o,O(n,Math.min(s,0))))):g&&(0===h&&s>0||h===i&&0>s)&&Math.abs(s)<=i&&O(g,h+s),t=s),r=requestAnimationFrame(function(){N()})},O=function(a,b){a&&(a.style.webkitTransform="translate3d("+b+"px,0,0)")},P=function(b,c){k&&(k.setAttribute("style",""),n&&n.setAttribute("style",""),b?(O(g,m),c&&a.trigger(g,"slideright"),d.classList.add(v)):(O(g,0),d.classList.remove(v)))},Q=function(b,c){n&&(n.setAttribute("style",""),k&&k.setAttribute("style",""),b?(O(g,-p),c&&a.trigger(g,"slideleft"),d.classList.add(v)):(O(g,0),d.classList.remove(v)))},R=function(a){g&&(a?(O(g,0),d.classList.add(v)):(O(g,i),d.classList.remove(v)))},S=function(b,c){q=!1,r&&(cancelAnimationFrame(r),r=null),f.setAttribute("style","");var d=Math.abs(s);if(b||!k&&!n)k||n||R(0===h?!(d>i/2):d>i/2);else if(s>0){var e=m/2;if(0!==h&&n&&(Q(!(d>=p/2),!1),e=m/2+p),k){var j=d>=e;k.classList.contains(E)?(k.setAttribute("style",""),O(g,0),j&&!c.swipe&&a.trigger(g,"slideright")):P(j,!0)}}else{var e=m/2;if(0!==h&&k&&(P(!(d>=m/2),!1),e=p/2+m),n){var j=d>=e;n.classList.contains(E)?(n.setAttribute("style",""),O(g,0),j&&!c.swipe&&a.trigger(g,"slideleft")):Q(j,!0)}}};b.addEventListener("touchstart",function(b){d=e=g=k=n=q=r=!1,s=t=h=i=m=p=0,l=o="";for(var u=b.target,A=!1;u&&u!==c;u=u.parentNode)if(u.classList){var B=u.classList;if(("INPUT"===u.tagName&&"radio"!==u.type&&"checkbox"!==u.type||"BUTTON"===u.tagName||B.contains(y)||B.contains(z)||B.contains(x))&&(A=!0),B.contains(w)){d=u;var C=d.parentNode.querySelector("."+v);if(C&&C!=d){C.classList.remove(v);var D=C.querySelector(G);if(D){var E=C.querySelector(H);E&&E.setAttribute("style","");var N=C.querySelector(I);N&&N.setAttribute("style",""),E||N?O(D,0):O(D,D.offsetWidth)}}var P=d.querySelector("a");if(P&&P.parentNode===d&&(e=P),f=d.querySelector(F),f&&f.parentNode===d){var Q=f.querySelector(G);if(Q){g=Q,i=g.offsetWidth,j=a.getStyles(g,"margin-left"),L=K;var R=f.querySelector(H);R&&(k=R,l=a.getStyles(R,"background-color"),m=R.offsetWidth);var S=f.querySelector(I);S&&(n=S,o=a.getStyles(S,"background-color"),p=S.offsetWidth),(k||n)&&(L=J);var T=a.getStyles(g,"webkitTransform"),U=a.parseTranslateMatrix(T);h=U?U.x:0}}A||M(!0);break}}}),b.addEventListener("touchmove",function(){M(!1)}),b.addEventListener("dragstart",function(a){if(g){var b=a.detail,c=b.direction,d=b.angle;if("left"===c){if((n||g)&&(d>150||-150>d)){if(!n&&k&&0===h)return;if(g&&!n&&!k&&0===h)return;q=!0}}else if("right"===c&&(k||g)&&d>-30&&30>d){if(!k&&n&&0===h)return;if(g&&!n&&!k&&h===i)return;q=!0}}}),b.addEventListener("drag",function(a){q&&(r||N(),s=a.detail.deltaX*L,a.detail.gesture.preventDefault())}),b.addEventListener("dragend",function(a){q&&S(!1,a.detail)}),b.addEventListener("swiperight",function(b){if(g){var c=!1;k&&!k.classList.contains(E)&&0===h?(P(!0,!0),c=!0):n&&0>h?(Q(!1,!1),c=!0):k||n||(c=!0),c&&(a.gestures.stoped=!0,b.stopImmediatePropagation(),S(!0,b.detail))}}),b.addEventListener("swipeleft",function(b){if(g){var c=!1;n&&!n.classList.contains(E)&&0===h?(Q(!0,!0),c=!0):k&&h>0?(P(!1,!1),c=!0):k||n||(c=!0),c&&(a.gestures.stoped=!0,b.stopImmediatePropagation(),S(!0,b.detail))}}),b.addEventListener("touchend",function(){d&&M(!1)}),b.addEventListener("touchcancel",function(){d&&M(!1)});var T=function(){var a=d.classList;if(a.contains("mui-radio")){var b=d.querySelector("input[type=radio]");b&&b.click()}else if(a.contains("mui-checkbox")){var b=d.querySelector("input[type=checkbox]");b&&b.click()}};b.addEventListener("doubletap",function(){d&&T()}),b.addEventListener("tap",function(){if(d){var b=!1,c=d.classList;if(c.contains("mui-collapse")){if(!c.contains(u)){var e=d.parentNode.querySelector(".mui-collapse.mui-active");e&&e.classList.remove(u),b=!0}c.toggle(u),b&&a.trigger(d,"expand")}T()}})}(mui,window,document),function(a,b){a.alert=function(c,d,e,f){if(a.os.plus){if(void 0===typeof c)return;"function"==typeof d?(f=d,d=null,e="确定"):"function"==typeof e&&(f=e,e=null),plus.nativeUI.alert(c,f,d,e)}else b.alert(c)}}(mui,window),function(a,b){a.confirm=function(c,d,e,f){if(a.os.plus){if(void 0===typeof c)return;"function"==typeof d?(f=d,d=null,e=null):"function"==typeof e&&(f=e,e=null),plus.nativeUI.confirm(c,f,d,e)}else b.confirm(c)}}(mui,window),function(a,b){a.prompt=function(c,d,e,f,g){if(a.os.plus){if(void 0===typeof message)return;"function"==typeof d?(g=d,d=null,e=null,f=null):"function"==typeof e?(g=e,e=null,f=null):"function"==typeof f&&(g=f,f=null),plus.nativeUI.prompt(c,g,e,d,f)}else b.prompt(c)}}(mui,window),function(a){a.toast=function(b){if(a.os.plus&&a.os.android)plus.nativeUI.toast(b,{verticalAlign:"bottom"});else{var c=document.createElement("div");c.classList.add("mui-toast-container"),c.innerHTML='<div class="mui-toast-message">'+b+"</div>",document.body.appendChild(c),setTimeout(function(){document.body.removeChild(c)},2e3)}}}(mui,window),function(a,b,c){var d="mui-icon",e="mui-icon-clear",f="mui-icon-speech",g="mui-icon-search",h="mui-input-row",i="mui-placeholder",j="mui-tooltip",k="mui-hidden",l="."+e,m="."+f,n="."+i,o="."+j,p=function(a){for(;a&&a!==c;a=a.parentNode)if(a.classList&&a.classList.contains(h))return a;return null},q=function(a,b){this.element=a,this.options=b||{actions:"clear"},~this.options.actions.indexOf("slider")?(this.sliderActionClass=j+" "+k,this.sliderActionSelector=o):(~this.options.actions.indexOf("clear")&&(this.clearActionClass=d+" "+e+(a.value?"":" "+k),this.clearActionSelector=l),~this.options.actions.indexOf("speech")&&(this.speechActionClass=d+" "+f,this.speechActionSelector=m),~this.options.actions.indexOf("search")&&(this.searchActionClass=i,this.searchActionSelector=n)),this.init()};q.prototype.init=function(){this.initAction(),this.initElementEvent()},q.prototype.initAction=function(){var a=this,b=a.element.parentNode;b&&(a.sliderActionClass?a.sliderAction=a.createAction(b,a.sliderActionClass,a.sliderActionSelector):(a.searchActionClass&&(a.searchAction=a.createAction(b,a.searchActionClass,a.searchActionSelector),a.searchAction.addEventListener("tap",function(){setTimeout(function(){a.element.focus()},0)})),a.speechActionClass&&(a.speechAction=a.createAction(b,a.speechActionClass,a.speechActionSelector),a.speechAction.addEventListener("click",function(a){a.stopPropagation()}),a.speechAction.addEventListener("tap",function(b){a.speechActionClick(b)})),a.clearActionClass&&(a.clearAction=a.createAction(b,a.clearActionClass,a.clearActionSelector),a.clearAction.addEventListener("tap",function(b){a.clearActionClick(b)}))))},q.prototype.createAction=function(a,b,e){var f=a.querySelector(e);if(!f){var f=c.createElement("span");f.className=b,b===this.searchActionClass&&(f.innerHTML='<span class="'+d+" "+g+'"></span>'+this.element.getAttribute("placeholder"),this.element.setAttribute("placeholder","")),a.insertBefore(f,this.element.nextSibling)}return f},q.prototype.initElementEvent=function(){var b=this.element;if(this.sliderActionClass){var c=this.sliderAction,d=b.offsetLeft,e=b.offsetWidth-28,f=c.offsetWidth,g=Math.abs(b.max-b.min),h=null,i=function(){c.classList.remove(k),f=f||c.offsetWidth;var a=Math.abs(b.value)/g*e;c.style.left=14+d+a-f/2+"px",c.innerText=b.value,h&&clearTimeout(h),h=setTimeout(function(){c.classList.add(k)},1e3)};b.addEventListener("input",i),b.addEventListener("tap",i)}else{if(this.clearActionClass){var j=this.clearAction;if(!j)return;a.each(["keyup","change","input","focus","blur","cut","paste"],function(a,c){!function(a){b.addEventListener(a,function(){j.classList[b.value.trim()?"remove":"add"](k)})}(c)})}this.searchActionClass&&(b.addEventListener("focus",function(){b.parentNode.classList.add("mui-active")}),b.addEventListener("blur",function(){b.value.trim()||b.parentNode.classList.remove("mui-active")}))}},q.prototype.clearActionClick=function(a){this.element.value="",this.element.focus(),this.clearAction.classList.add(k),a.preventDefault()},q.prototype.speechActionClick=function(a){if(b.plus){var c=this;c.element.value="",plus.speech.startRecognize({engine:"iFly"},function(a){c.element.value+=a,setTimeout(function(){c.element.focus()},0),plus.speech.stopRecognize()},function(){})}else alert("only for 5+");a.preventDefault()},a.fn.input=function(){this.each(function(){var b=[],c=p(this.parentNode);if("range"===this.type&&c.classList.contains("mui-input-range"))b.push("slider");else{var d=this.classList;d.contains("mui-input-clear")&&b.push("clear"),d.contains("mui-input-speech")&&b.push("speech"),"search"===this.type&&c.classList.contains("mui-search")&&b.push("search")}var e=this.getAttribute("data-input-"+b[0]);if(!e){e=++a.uuid,a.data[e]=new q(this,{actions:b.join(",")});for(var f=0,g=b.length;g>f;f++)this.setAttribute("data-input-"+b[f],e)}})},a.ready(function(){a(".mui-input-row input").input()})}(mui,window,document),function(a,b){a.back=function(){b.history.length>1&&("function"==typeof a.options.back?a.options.back()!==!1&&b.history.back():b.history.back())},b.addEventListener("tap",function(){var b=a.targets.action;b&&b.classList.contains("mui-action-back")&&a.back()}),b.addEventListener("swiperight",function(b){var c=b.detail;c.angle>-15&&c.angle<15&&a.options.swipeBack===!0&&a.back()})}(mui,window),function(a,b){a.back=function(){var c=!0,d=!1;if("function"==typeof a.options.back&&(d=a.options.back(),d===!1&&(c=!1)),c)if(b.plus){var e=a.currentWebview,f=e.parent();f&&(e=f),e.canBack(function(){var b=e.opener();b&&(e.preload?e.hide("auto"):a.closeAll(e))})}else b.history.length>1?b.history.back():b.close()},a.menu=function(){var c=document.querySelector(".mui-action-menu");if(c)a.trigger(c,"tap");else if(b.plus){var d=a.currentWebview,e=d.parent();e&&e.evalJS("mui&&mui.menu();")}},a.plusReady(function(){plus.key.addEventListener("backbutton",function(){a.back()},!1),plus.key.addEventListener("menubutton",function(){a.menu()},!1)})}(mui,window);
\ No newline at end of file
_site/examples/hello-mui/css/mui.min.css deleted 100644 → 0
View file @ 86f3bac6
/*!
* =====================================================
* Mui v0.5.5 (https://github.com/dcloudio/mui)
* =====================================================
*//*! normalize.css v3.0.1 | MIT License | git.io/normalize */html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background:0 0}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{margin:.67em 0}mark{color:#000;background:#ff0}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{height:0;-moz-box-sizing:content-box;box-sizing:content-box}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{margin:0;font:inherit;color:inherit}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{padding:.35em .625em .75em;margin:0 2px;border:1px solid silver}legend{padding:0;border:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-spacing:0;border-collapse:collapse}td,th{padding:0}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;-webkit-tap-highlight-color:transparent}body{-webkit-overflow-scrolling:touch;font-family:"Helvetica Neue",Helvetica,sans-serif;font-size:17px;line-height:21px;color:#000;background-color:#fff}a{color:#007aff;text-decoration:none;-webkit-tap-highlight-color:transparent;-webkit-tap-highlight-color:transparent}a:active{color:#0062cc}.mui-content{-webkit-overflow-scrolling:touch;background-color:#efeff4}.mui-bar-nav~.mui-content{padding-top:44px}.mui-bar-header-secondary~.mui-content{padding-top:88px}.mui-bar-footer~.mui-content{padding-bottom:44px}.mui-bar-footer-secondary~.mui-content{padding-bottom:88px}.mui-bar-tab~.mui-content{padding-bottom:50px}.mui-bar-footer-secondary-tab~.mui-content{padding-bottom:94px}.mui-hidden{display:none!important}.mui-inline{display:inline-block;vertical-align:top}.mui-block{display:block}.mui-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mui-ellipsis-2{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;white-space:normal!important;-webkit-line-clamp:2;-webkit-box-orient:vertical}.mui-table{display:table;width:100%;table-layout:fixed}.mui-table-cell{position:relative;display:table-cell}.mui-text-left{text-align:left!important}.mui-text-center{text-align:center!important}.mui-text-justify{text-align:justify!important}.mui-text-right{text-align:right!important}.mui-pull-left{float:left}.mui-pull-right{float:right}.mui-list-unstyled{padding-left:0;list-style:none}.mui-list-inline{padding-left:0;margin-left:-5px;list-style:none}.mui-list-inline>li{display:inline-block;padding-right:5px;padding-left:5px}.mui-clearfix:after,.mui-clearfix:before{display:table;content:" "}.mui-clearfix:after{clear:both}.mui-bg-primary{background-color:#007aff}.mui-bg-positive{background-color:#4cd964}.mui-bg-negative{background-color:#dd524d}h1,h2,h3,h4,h5,h6{margin-top:5px;margin-bottom:5px;line-height:1}.mui-h1,h1{font-size:36px}.mui-h2,h2{font-size:30px}.mui-h3,h3{font-size:24px}.mui-h4,h4{font-size:18px}.mui-h5,h5{font-size:14px;font-weight:400;color:#8f8f94}.mui-h6,h6{font-size:12px;font-weight:400;color:#8f8f94}p{margin-top:0;margin-bottom:10px;font-size:14px;color:#8f8f94}.mui-col-xs-12{width:100%}.mui-col-xs-11{width:91.66666667%}.mui-col-xs-10{width:83.33333333%}.mui-col-xs-9{width:75%}.mui-col-xs-8{width:66.66666667%}.mui-col-xs-7{width:58.33333333%}.mui-col-xs-6{width:50%}.mui-col-xs-5{width:41.66666667%}.mui-col-xs-4{width:33.33333333%}.mui-col-xs-3{width:25%}.mui-col-xs-2{width:16.66666667%}.mui-col-xs-1{width:8.33333333%}@media (min-width:400px){.mui-col-sm-12{width:100%}.mui-col-sm-11{width:91.66666667%}.mui-col-sm-10{width:83.33333333%}.mui-col-sm-9{width:75%}.mui-col-sm-8{width:66.66666667%}.mui-col-sm-7{width:58.33333333%}.mui-col-sm-6{width:50%}.mui-col-sm-5{width:41.66666667%}.mui-col-sm-4{width:33.33333333%}.mui-col-sm-3{width:25%}.mui-col-sm-2{width:16.66666667%}.mui-col-sm-1{width:8.33333333%}}.mui-iscroll-wrapper{position:absolute;top:0;bottom:0;left:0;z-index:1;width:100%;overflow:hidden}.mui-bar-nav~.mui-iscroll-wrapper{top:44px;padding:0}.mui-bar-header-secondary~.mui-iscroll-wrapper{top:88px}.mui-bar-footer~.mui-iscroll-wrapper{bottom:44px;padding:0}.mui-bar-footer-secondary~.mui-iscroll-wrapper{bottom:88px}.mui-bar-tab~.mui-iscroll-wrapper{bottom:50px;padding:0}.mui-bar-footer-secondary-tab~.mui-iscroll-wrapper{bottom:94px}.mui-iscroll{position:absolute;z-index:1;width:100%;-webkit-text-size-adjust:none;-webkit-user-select:none;user-select:none;-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;text-size-adjust:none}.mui-off-canvas-height-fixed{height:100%!important}.mui-off-canvas-wrap{position:relative;width:100%}.mui-off-canvas-wrap .mui-inner-wrap{position:relative;width:100%;height:100%;-webkit-transition:-webkit-transform 400ms ease;transition:transform 400ms ease}.mui-off-canvas-wrap .mui-inner-wrap .mui-bar{position:absolute}.mui-off-canvas-wrap .mui-inner-wrap .mui-off-canvas-left{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}.mui-off-canvas-wrap .mui-inner-wrap .mui-off-canvas-right{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}.mui-off-canvas-wrap.mui-left,.mui-off-canvas-wrap.mui-right,.mui-off-canvas-wrap.mui-sliding{height:100%;overflow:hidden}.mui-off-canvas-wrap.mui-left .mui-off-canvas-left,.mui-off-canvas-wrap.mui-left .mui-off-canvas-right,.mui-off-canvas-wrap.mui-right .mui-off-canvas-left,.mui-off-canvas-wrap.mui-right .mui-off-canvas-right,.mui-off-canvas-wrap.mui-sliding .mui-off-canvas-left,.mui-off-canvas-wrap.mui-sliding .mui-off-canvas-right{display:block}.mui-off-canvas-wrap.mui-left .mui-off-canvas-backdrop,.mui-off-canvas-wrap.mui-right .mui-off-canvas-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1002;display:block;background:rgba(255,255,255,.2);box-shadow:-4px 0 4px rgba(0,0,0,.5),4px 0 4px rgba(0,0,0,.5);transition:background 300ms ease;-webkit-backface-visibility:hidden;-webkit-tap-highlight-color:transparent}.mui-off-canvas-wrap.mui-left .mui-inner-wrap{-webkit-transform:translate3d(-80%,0,0);transform:translate3d(-80%,0,0)}.mui-off-canvas-wrap.mui-right .mui-inner-wrap{-webkit-transform:translate3d(80%,0,0);transform:translate3d(80%,0,0)}.mui-off-canvas-left,.mui-off-canvas-right{position:absolute;top:0;bottom:0;display:none;width:80%;min-height:100%;box-sizing:content-box;-webkit-overflow-scrolling:touch;background:#333;-webkit-backface-visibility:hidden}.mui-off-canvas-left{left:0}.mui-off-canvas-right{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-spinner{position:relative;display:inline-block;width:24px;height:24px}.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-indicator1{-webkit-transform:rotate(0) translate(0,-142%);transform:rotate(0) translate(0,-142%);-webkit-animation-delay:0;animation-delay:0}.mui-spinner-indicator2{-webkit-transform:rotate(30deg) translate(0,-142%);transform:rotate(30deg) translate(0,-142%);-webkit-animation-delay:-.9167s;animation-delay:-.9167s}.mui-spinner-indicator3{-webkit-transform:rotate(60deg) translate(0,-142%);transform:rotate(60deg) translate(0,-142%);-webkit-animation-delay:-.833s;animation-delay:-.833s}.mui-spinner-indicator4{-webkit-transform:rotate(90deg) translate(0,-142%);transform:rotate(90deg) translate(0,-142%);-webkit-animation-delay:-.75s;animation-delay:-.75s}.mui-spinner-indicator5{-webkit-transform:rotate(120deg) translate(0,-142%);transform:rotate(120deg) translate(0,-142%);-webkit-animation-delay:-.667s;animation-delay:-.667s}.mui-spinner-indicator6{-webkit-transform:rotate(150deg) translate(0,-142%);transform:rotate(150deg) translate(0,-142%);-webkit-animation-delay:-.5833s;animation-delay:-.5833s}.mui-spinner-indicator7{-webkit-transform:rotate(180deg) translate(0,-142%);transform:rotate(180deg) translate(0,-142%);-webkit-animation-delay:-.5s;animation-delay:-.5s}.mui-spinner-indicator8{-webkit-transform:rotate(210deg) translate(0,-142%);transform:rotate(210deg) translate(0,-142%);-webkit-animation-delay:-.41667s;animation-delay:-.41667s}.mui-spinner-indicator9{-webkit-transform:rotate(240deg) translate(0,-142%);transform:rotate(240deg) translate(0,-142%);-webkit-animation-delay:-.333s;animation-delay:-.333s}.mui-spinner-indicator10{-webkit-transform:rotate(270deg) translate(0,-142%);transform:rotate(270deg) translate(0,-142%);-webkit-animation-delay:-.25s;animation-delay:-.25s}.mui-spinner-indicator11{-webkit-transform:rotate(300deg) translate(0,-142%);transform:rotate(300deg) translate(0,-142%);-webkit-animation-delay:-.1667s;animation-delay:-.1667s}.mui-spinner-indicator12{-webkit-transform:rotate(330deg) translate(0,-142%);transform:rotate(330deg) translate(0,-142%);-webkit-animation-delay:-.0833s;animation-delay:-.0833s}@-webkit-keyframes fade{from{opacity:1}to{opacity:.25}}@keyframes fade{from{opacity:1}to{opacity:.25}}.mui-spin{-webkit-transform-origin:50% 54%;transform-origin:50% 54%;-webkit-animation:spin 1s infinite linear;animation:spin 1s infinite linear}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.mui-btn,button,input[type=button],input[type=reset],input[type=submit]{position:relative;display:inline-block;padding:6px 12px;margin-bottom:0;font-size:14px;font-weight:400;line-height:1.42;color:#333;text-align:center;white-space:nowrap;vertical-align:top;cursor:pointer;background-color:#fff;border:1px solid #ccc;border-radius:3px;-webkit-transition:all;transition:all;-webkit-transition-timing-function:linear;transition-timing-function:linear;-webkit-transition-duration:.2s;transition-duration:.2s}.mui-btn.mui-active,.mui-btn:active,button.mui-active,button:active,input[type=button].mui-active,input[type=button]:active,input[type=reset].mui-active,input[type=reset]:active,input[type=submit].mui-active,input[type=submit]:active{color:#fff;background-color:#929292}.mui-btn.mui-disabled,.mui-btn:disabled,button.mui-disabled,button:disabled,input[type=button].mui-disabled,input[type=button]:disabled,input[type=reset].mui-disabled,input[type=reset]:disabled,input[type=submit].mui-disabled,input[type=submit]:disabled{opacity:.6}.mui-btn-blue,.mui-btn-primary,input[type=submit]{color:#fff;background-color:#007aff;border:1px solid #007aff}.mui-btn-blue.mui-active,.mui-btn-blue:active,.mui-btn-primary.mui-active,.mui-btn-primary:active,input[type=submit].mui-active,input[type=submit]:active{color:#fff;background-color:#0062cc;border:1px solid #0062cc}.mui-btn-green,.mui-btn-positive,.mui-btn-success{color:#fff;background-color:#4cd964;border:1px solid #4cd964}.mui-btn-green.mui-active,.mui-btn-green:active,.mui-btn-positive.mui-active,.mui-btn-positive:active,.mui-btn-success.mui-active,.mui-btn-success:active{color:#fff;background-color:#2ac845;border:1px solid #2ac845}.mui-btn-warning,.mui-btn-yellow{color:#fff;background-color:#f0ad4e;border:1px solid #f0ad4e}.mui-btn-warning.mui-active,.mui-btn-warning:active,.mui-btn-yellow.mui-active,.mui-btn-yellow:active{color:#fff;background-color:#ec971f;border:1px solid #ec971f}.mui-btn-danger,.mui-btn-negative,.mui-btn-red{color:#fff;background-color:#dd524d;border:1px solid #dd524d}.mui-btn-danger.mui-active,.mui-btn-danger:active,.mui-btn-negative.mui-active,.mui-btn-negative:active,.mui-btn-red.mui-active,.mui-btn-red:active{color:#fff;background-color:#cf2d28;border:1px solid #cf2d28}.mui-btn-purple,.mui-btn-royal{color:#fff;background-color:#8a6de9;border:1px solid #8a6de9}.mui-btn-purple.mui-active,.mui-btn-purple:active,.mui-btn-royal.mui-active,.mui-btn-royal:active{color:#fff;background-color:#6641e2;border:1px solid #6641e2}.mui-btn-outlined{background-color:transparent}.mui-btn-outlined.mui-btn-blue,.mui-btn-outlined.mui-btn-primary{color:#007aff}.mui-btn-outlined.mui-btn-green,.mui-btn-outlined.mui-btn-positive,.mui-btn-outlined.mui-btn-success{color:#4cd964}.mui-btn-outlined.mui-btn-warning,.mui-btn-outlined.mui-btn-yellow{color:#f0ad4e}.mui-btn-outlined.mui-btn-danger,.mui-btn-outlined.mui-btn-negative,.mui-btn-outlined.mui-btn-red{color:#dd524d}.mui-btn-outlined.mui-btn-purple,.mui-btn-outlined.mui-btn-royal{color:#8a6de9}.mui-btn-outlined.mui-btn-blue:active,.mui-btn-outlined.mui-btn-danger:active,.mui-btn-outlined.mui-btn-green:active,.mui-btn-outlined.mui-btn-negative:active,.mui-btn-outlined.mui-btn-positive:active,.mui-btn-outlined.mui-btn-primary:active,.mui-btn-outlined.mui-btn-purple:active,.mui-btn-outlined.mui-btn-red:active,.mui-btn-outlined.mui-btn-royal:active,.mui-btn-outlined.mui-btn-success:active,.mui-btn-outlined.mui-btn-warning:active,.mui-btn-outlined.mui-btn-yellow:active{color:#fff}.mui-btn-link{padding-top:6px;padding-bottom:6px;color:#007aff;background-color:transparent;border:0}.mui-btn-link.mui-active,.mui-btn-link:active{color:#0062cc;background-color:transparent}.mui-btn-block{display:block;width:100%;padding:15px 0;margin-bottom:10px;font-size:18px}.mui-btn .mui-badge{margin:-2px -4px -2px 4px;font-size:14px;background-color:rgba(0,0,0,.15)}.mui-btn .mui-badge-inverted,.mui-btn:active .mui-badge-inverted{background-color:transparent}.mui-btn-negative:active .mui-badge-inverted,.mui-btn-positive:active .mui-badge-inverted,.mui-btn-primary:active .mui-badge-inverted{color:#fff}.mui-btn-block .mui-badge{position:absolute;right:0;margin-right:10px}.mui-btn .mui-icon{font-size:inherit}.mui-btn.mui-icon{font-size:14px;line-height:1.42}.mui-btn.mui-fab{width:56px;height:56px;padding:16px;border-radius:50%;outline:0}.mui-btn.mui-fab.mui-btn-mini{width:40px;height:40px;padding:8px}.mui-btn.mui-fab .mui-icon{width:24px;height:24px;font-size:24px;line-height:24px}.mui-bar{position:fixed;right:0;left:0;z-index:10;height:44px;padding-right:10px;padding-left:10px;background-color:rgba(247,247,247,.98);border-bottom:0;-webkit-box-shadow:0 0 1px rgba(0,0,0,.85);box-shadow:0 0 1px rgba(0,0,0,.85);-webkit-backface-visibility:hidden;backface-visibility:hidden}.mui-bar .mui-title{right:40px;left:40px;width:auto;margin:0;overflow:hidden;text-overflow:ellipsis}.mui-bar .mui-backdrop{background:0 0}.mui-bar-header-secondary{top:44px}.mui-bar-footer{bottom:0}.mui-bar-footer-secondary{bottom:44px}.mui-bar-footer-secondary-tab{bottom:50px}.mui-bar-footer,.mui-bar-footer-secondary,.mui-bar-footer-secondary-tab{border-top:0}.mui-bar-nav{top:0;-webkit-box-shadow:0 1px 6px #ccc;box-shadow:0 1px 6px #ccc}.mui-bar-nav~.mui-content .mui-anchor{display:block;height:45px;margin-top:-45px;visibility:hidden}.mui-bar-nav.mui-bar .mui-icon{padding-right:10px;padding-left:10px;margin-right:-10px;margin-left:-10px}.mui-title{position:absolute;display:block;width:100%;padding:0;margin:0 -10px;font-size:17px;font-weight:500;line-height:44px;color:#000;text-align:center;white-space:nowrap}.mui-title a{color:inherit}.mui-bar-tab{bottom:0;display:table;width:100%;height:50px;padding:0;table-layout:fixed;border-top:0;border-bottom:0}.mui-bar-tab .mui-tab-item{display:table-cell;width:1%;height:50px;overflow:hidden;color:#929292;text-align:center;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}.mui-bar-tab .mui-tab-item.mui-active{color:#007aff}.mui-bar-tab .mui-tab-item .mui-icon{top:3px;width:24px;height:24px;padding-top:0;padding-bottom:0}.mui-bar-tab .mui-tab-item .mui-icon~.mui-tab-label{display:block;overflow:hidden;font-size:11px;text-overflow:ellipsis}.mui-bar-tab .mui-tab-item .mui-icon:active{background:0 0}.mui-bar .mui-btn{position:relative;top:7px;z-index:20;padding:6px 12px 7px;margin-top:0;font-weight:400}.mui-bar .mui-btn.mui-pull-right{margin-left:10px}.mui-bar .mui-btn.mui-pull-left{margin-right:10px}.mui-bar .mui-btn-link{top:0;padding:0;font-size:16px;line-height:44px;color:#007aff;border:0}.mui-bar .mui-btn-link.mui-active,.mui-bar .mui-btn-link:active{color:#0062cc}.mui-bar .mui-btn-block{top:6px;padding:5px 0;margin-bottom:0;font-size:16px}.mui-bar .mui-btn-nav.mui-pull-left{margin-left:-5px}.mui-bar .mui-btn-nav.mui-pull-left .mui-icon-left-nav{margin-right:-3px}.mui-bar .mui-btn-nav.mui-pull-right{margin-right:-5px}.mui-bar .mui-btn-nav.mui-pull-right .mui-icon-right-nav{margin-left:-3px}.mui-bar .mui-btn-nav:active{opacity:.3}.mui-bar .mui-icon{position:relative;z-index:20;padding-top:10px;padding-bottom:10px;font-size:24px}.mui-bar .mui-icon:active{opacity:.3}.mui-bar .mui-btn .mui-icon{top:3px;padding:0;margin:0}.mui-bar .mui-title .mui-icon{padding:0;margin:0}.mui-bar .mui-title .mui-icon.mui-icon-caret{top:4px;margin-left:-5px}.mui-bar input[type=search]{height:29px;margin:6px 0}.mui-bar .mui-segmented-control{top:7px;width:auto;margin:0 auto}.mui-badge{display:inline-block;padding:3px 6px;font-size:12px;line-height:1;color:#333;background-color:rgba(0,0,0,.15);border-radius:100px}.mui-badge.mui-badge-inverted{padding:0 5px 0 0;color:#929292;background-color:transparent}.mui-badge-blue,.mui-badge-primary{color:#fff;background-color:#007aff}.mui-badge-blue.mui-badge-inverted,.mui-badge-primary.mui-badge-inverted{color:#007aff;background-color:transparent}.mui-badge-green,.mui-badge-success{color:#fff;background-color:#4cd964}.mui-badge-green.mui-badge-inverted,.mui-badge-success.mui-badge-inverted{color:#4cd964;background-color:transparent}.mui-badge-warning,.mui-badge-yellow{color:#fff;background-color:#f0ad4e}.mui-badge-warning.mui-badge-inverted,.mui-badge-yellow.mui-badge-inverted{color:#f0ad4e;background-color:transparent}.mui-badge-danger,.mui-badge-red{color:#fff;background-color:#dd524d}.mui-badge-danger.mui-badge-inverted,.mui-badge-red.mui-badge-inverted{color:#dd524d;background-color:transparent}.mui-badge-purple,.mui-badge-royal{color:#fff;background-color:#8a6de9}.mui-badge-purple.mui-badge-inverted,.mui-badge-royal.mui-badge-inverted{color:#8a6de9;background-color:transparent}.mui-table-view{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-striped>li:nth-child(odd),.mui-table-view-striped>li:nth-child(odd)>.mui-slider-cell>.mui-slider-left~.mui-slider-handle,.mui-table-view-striped>li:nth-child(odd)>.mui-slider-cell>.mui-slider-right~.mui-slider-handle{background-color:#f9f9f9}.mui-table-view-chevron .mui-table-view-cell{padding-right:65px}.mui-table-view-chevron .mui-table-view-cell>a:not(.mui-btn){margin-right:-65px}.mui-table-view-slider .mui-table-view-cell{padding:11px 0}.mui-table-view-slider .mui-table-view-cell>a:not(.mui-btn){margin-right:0}.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 .mui-table-view-cell.mui-active,.mui-table-view-inverted .mui-table-view-cell>a:not(.mui-btn).mui-active{background-color:#242424}.mui-table-view-cell{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.mui-checkbox input[type=checkbox],.mui-table-view-cell.mui-radio input[type=radio]{top:8px}.mui-table-view-cell.mui-checkbox.mui-left,.mui-table-view-cell.mui-radio.mui-left{padding-left:58px}.mui-table-view-cell.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>a:not(.mui-btn){position:relative;display:block;padding:inherit;margin:-11px -15px;overflow:hidden;color:inherit;text-overflow:ellipsis;white-space:nowrap}.mui-table-view-cell>a:not(.mui-btn).mui-active{background-color:#eee}.mui-table-view-cell p{margin-bottom:0}.mui-table-view-cell>.mui-slider-cell{margin-top:1px;margin-bottom:1px}.mui-table-view-cell>.mui-slider-cell>.mui-slider-handle{position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}.mui-table-view-cell>.mui-slider-cell>.mui-slider-left~.mui-slider-handle,.mui-table-view-cell>.mui-slider-cell>.mui-slider-right~.mui-slider-handle{position:relative;top:auto;right:auto;bottom:auto;left:auto;z-index:1;padding-left:15px;background-color:#fff;-webkit-transform:translate3d(0px,0,0);transform:translate3d(0px,0,0)}.mui-table-view-cell>.mui-slider-cell>.mui-slider-left,.mui-table-view-cell>.mui-slider-cell>.mui-slider-right{top:1px;bottom:1px}.mui-table-view-divider{padding-top:6px;padding-bottom:6px;padding-left:15px;margin-top:-1px;margin-left:0;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 .mui-media,.mui-table-view .mui-media-body{overflow:hidden}.mui-table-view .mui-media-object{max-width:42px;height:42px}.mui-table-view .mui-media-object.mui-pull-left{margin-right:10px}.mui-table-view .mui-media-object.mui-pull-right{margin-left:10px}.mui-table-view-cell>.mui-badge,.mui-table-view-cell>.mui-btn,.mui-table-view-cell>.mui-switch,.mui-table-view-cell>a>.mui-badge,.mui-table-view-cell>a>.mui-btn,.mui-table-view-cell>a>.mui-switch{position:absolute;top:50%;right:15px;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.mui-table-view-cell .mui-navigate-left>.mui-badge,.mui-table-view-cell .mui-navigate-left>.mui-btn,.mui-table-view-cell .mui-navigate-left>.mui-switch,.mui-table-view-cell .mui-navigate-right>.mui-badge,.mui-table-view-cell .mui-navigate-right>.mui-btn,.mui-table-view-cell .mui-navigate-right>.mui-switch,.mui-table-view-cell .mui-push-left>.mui-badge,.mui-table-view-cell .mui-push-left>.mui-btn,.mui-table-view-cell .mui-push-left>.mui-switch,.mui-table-view-cell .mui-push-right>.mui-badge,.mui-table-view-cell .mui-push-right>.mui-btn,.mui-table-view-cell .mui-push-right>.mui-switch,.mui-table-view-cell>a .mui-navigate-left>.mui-badge,.mui-table-view-cell>a .mui-navigate-left>.mui-btn,.mui-table-view-cell>a .mui-navigate-left>.mui-switch,.mui-table-view-cell>a .mui-navigate-right>.mui-badge,.mui-table-view-cell>a .mui-navigate-right>.mui-btn,.mui-table-view-cell>a .mui-navigate-right>.mui-switch,.mui-table-view-cell>a .mui-push-left>.mui-badge,.mui-table-view-cell>a .mui-push-left>.mui-btn,.mui-table-view-cell>a .mui-push-left>.mui-switch,.mui-table-view-cell>a .mui-push-right>.mui-badge,.mui-table-view-cell>a .mui-push-right>.mui-btn,.mui-table-view-cell>a .mui-push-right>.mui-switch{right:35px}.mui-content>.mui-table-view:first-child{margin-top:15px}.mui-table-view-cell.mui-collapse>.mui-navigate-right:after,.mui-table-view-cell.mui-collapse>.mui-push-right:after{content:'\e662'}.mui-table-view-cell.mui-collapse.mui-active .mui-table-view{display:block}.mui-table-view-cell.mui-collapse.mui-active>.mui-navigate-right:after,.mui-table-view-cell.mui-collapse.mui-active>.mui-push-right:after{content:'\e661'}.mui-table-view-cell.mui-collapse .mui-table-view{display:none;margin-top:11px;margin-right:-15px;margin-bottom:-11px;margin-left:-15px}.mui-table-view-cell.mui-collapse .mui-table-view.mui-table-view-chevron{margin-right:-65px}.mui-table-view-cell.mui-collapse .mui-table-view .mui-table-view-cell{padding-left:31px;background-position:31px 100%}.mui-table-view.mui-grid-view{display:block;width:100%;padding:0 10px 10px 0;font-size:0;white-space:normal}.mui-table-view.mui-grid-view .mui-table-view-cell{display:inline-block;padding:10px 0 0 14px;margin-right:-4px;font-size:17px;text-align:center;vertical-align:middle;background:0 0}.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-object{width:100%;max-width:100%;height:auto}.mui-table-view.mui-grid-view .mui-table-view-cell>a:not(.mui-btn){margin:-10px 0 0 -14px}.mui-table-view.mui-grid-view .mui-table-view-cell>a:not(.mui-btn).mui-active,.mui-table-view.mui-grid-view .mui-table-view-cell>a:not(.mui-btn):active{background:0 0}.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body{display:block;width:100%;height:15px;margin-top:8px;font-size:15px;line-height:15px;color:#333;text-overflow:ellipsis}.mui-grid-view.mui-grid-9{padding-right:0;background-color:#f2f2f2}.mui-grid-view.mui-grid-9 .mui-table-view-cell{vertical-align:top;border-top:1px solid #eee;border-left:1px solid #eee}.mui-grid-view.mui-grid-9 .mui-table-view-cell>a:not(.mui-btn){padding:15px}.mui-grid-view.mui-grid-9 .mui-media{color:#797979}.mui-grid-view.mui-grid-9 .mui-media .mui-icon{position:relative;font-size:3em}.mui-grid-view.mui-grid-9 .mui-media .mui-icon .mui-badge{position:absolute;top:1px;right:0;color:#fff;background:red;opacity:.9}.mui-slider-cell{position:relative}.mui-slider-cell>.mui-slider-handle{z-index:1}.mui-slider-cell>.mui-slider-left,.mui-slider-cell>.mui-slider-right{position:absolute;top:0;bottom:0;z-index:0}.mui-slider-cell>.mui-slider-left{left:0}.mui-slider-cell>.mui-slider-right{right:0}input,select,textarea{font-family:"Helvetica Neue",Helvetica,sans-serif;font-size:17px;-webkit-tap-highlight-color:transparent;-webkit-tap-highlight-color:transparent}input:focus,select:focus,textarea:focus{-webkit-tap-highlight-color:transparent;-webkit-tap-highlight-color:transparent;-webkit-user-modify:read-write-plaintext-only}input[type=color],input[type=date],input[type=datetime-local],input[type=datetime],input[type=email],input[type=month],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],input[type=week],select,textarea{width:100%;height:40px;-webkit-appearance:none;padding:10px 15px;margin-bottom:15px;line-height:21px;-webkit-user-select:text;background-color:#fff;border:1px solid rgba(0,0,0,.2);border-radius:3px;outline:0}input[type=search]{height:34px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;font-size:16px;text-align:center;background-color:rgba(0,0,0,.1);border:0;border-radius:6px}input[type=search]:focus{text-align:left}textarea{height:auto;resize:none}select{height:auto;margin-top:1px;font-size:14px;background-color:#fff;border:0!important}.mui-input-group{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 input,.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=search]{background:0 0}.mui-input-group input:last-child{background-image:none}.mui-input-row{overflow:hidden}.mui-input-row select{padding:10px 15px 0;font-size:17px}.mui-input-row label+input,.mui-input-row:last-child{background-image:none}.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-row label{float:left;width:35%;padding:8px 15px;font-family:"Helvetica Neue",Helvetica,sans-serif;line-height:1.1}.mui-input-row label~input,.mui-input-row label~select,.mui-input-row label~textarea{float:right;width:65%;padding-left:0;margin-bottom:0;border:0}.mui-input-row{position:relative}.mui-input-row.mui-input-range{padding-right:20px;overflow:visible}.mui-input-row .mui-inline{padding:8px 0}.mui-input-row .mui-input-clear~.mui-icon-clear,.mui-input-row .mui-input-speech~.mui-icon-speech{position:absolute;top:10px;right:10px;width:28px;height:28px;font-size:20px;color:#999;text-align:center}.mui-input-row .mui-input-speech~.mui-icon-speech{top:8px;font-size:24px}.mui-input-row .mui-input-clear~.mui-icon-clear~.mui-icon-speech{display:none}.mui-input-row .mui-input-clear~.mui-icon-clear.mui-hidden~.mui-icon-speech{display:inline-block}.mui-input-row .mui-icon-speech~.mui-placeholder{right:38px}.mui-input-row.mui-search .mui-icon-clear{top:7px}.mui-input-row.mui-search .mui-icon-speech{top:5px}.mui-checkbox,.mui-radio{position:relative}.mui-checkbox label,.mui-radio label{display:inline-block;float:none;width:100%}.mui-checkbox.mui-left input[type=checkbox],.mui-radio.mui-left input[type=radio]{left:20px}.mui-checkbox.mui-left label,.mui-radio.mui-left label{padding-left:58px}.mui-checkbox input[type=checkbox],.mui-radio input[type=radio]{position:absolute;top:4px;right:20px;display:inline-block;width:28px;height:26px;-webkit-appearance:none;background-color:transparent;border:0;outline:0!important}.mui-checkbox input[type=checkbox]:before,.mui-radio input[type=radio]:before{font-family:Muiicons;font-size:28px;font-weight:400;line-height:1;color:rgba(170,170,170,.6);text-decoration:none;background:0 0;border-radius:0;-webkit-font-smoothing:antialiased}.mui-checkbox input[type=checkbox]:checked:before,.mui-radio input[type=radio]:checked:before{color:#007aff}.mui-radio input[type=radio]:before{content:"\e654"}.mui-radio input[type=radio]:checked:before{content:"\e655"}.mui-checkbox input[type=checkbox]:before{content:"\e656"}.mui-checkbox input[type=checkbox]:checked:before{content:"\e657"}.mui-checkbox-cycle input[type=checkbox]:before{content:"\e910"}.mui-checkbox-cycle input[type=checkbox]:checked:before{content:"\e911"}.mui-select{position:relative}.mui-select:before{position:absolute;top:8px;right:21px;font-family:Muiicons;color:rgba(170,170,170,.6);content:'\e651'}.mui-input-row .mui-switch{float:right;margin-top:5px;margin-right:20px}.mui-input-range input[type=range]{position:relative;width:100%;height:2px;-webkit-appearance:none!important;padding:0;margin:17px 0;cursor:pointer;background-color:#999;border:0;border-radius:3px;outline:0}.mui-input-range input[type=range]::-webkit-slider-thumb{width:28px;height:28px;-webkit-appearance:none!important;background-color:#007aff;border-color:#0062cc;border-radius:50%}.mui-input-range label~input[type=range]{width:65%}.mui-input-range .mui-tooltip{position:absolute;top:-70px;z-index:1;width:64px;height:64px;font-size:36px;line-height:64px;color:#333;text-align:center;text-shadow:0 1px 0 #f3f3f3;background-color:#fff;border:1px solid #ddd;border-radius:6px;opacity:.8}.mui-search{position:relative}.mui-search input[type=search]{padding-left:30px}.mui-search .mui-placeholder{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;display:inline-block;height:34px;font-size:16px;line-height:34px;color:#999;text-align:center;background:0 0;border:0;border-radius:6px}.mui-search .mui-placeholder .mui-icon{font-size:20px;color:#333}.mui-search:before{position:absolute;top:50%;right:50%;display:none;margin-top:-18px;margin-right:31px;font-family:Muiicons;font-size:20px;font-weight:400;content:'\e607'}.mui-search.mui-active:before{left:5px;display:block;margin-right:0;font-size:20px}.mui-search.mui-active input[type=search]{text-align:left}.mui-search.mui-active .mui-placeholder{display:none}.mui-segmented-control{position:relative;display:table;width:100%;overflow:hidden;font-size:15px;font-weight:400;table-layout:fixed;background-color:transparent;border:1px solid #007aff;border-radius:3px}.mui-segmented-control .mui-control-item{display:table-cell;width:1%;padding-top:6px;padding-bottom:7px;overflow:hidden;line-height:1;color:#007aff;text-align:center;text-overflow:ellipsis;white-space:nowrap;border-color:#007aff;border-left:1px solid #007aff;-webkit-transition:background-color .1s linear;transition:background-color .1s linear}.mui-segmented-control .mui-control-item:first-child{border-left-width:0}.mui-segmented-control .mui-control-item.mui-active{color:#fff;background-color:#007aff}.mui-segmented-control.mui-segmented-control-inverted{width:100%;border:0;border-radius:0}.mui-segmented-control.mui-segmented-control-inverted .mui-control-item{color:inherit;border:0}.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active{color:#007aff;background:0 0;border-bottom:2px solid #007aff}.mui-segmented-control.mui-segmented-control-inverted~.mui-slider-progress-bar{background-color:#007aff}.mui-segmented-control-positive{border:1px solid #4cd964}.mui-segmented-control-positive .mui-control-item{color:#4cd964;border-color:inherit}.mui-segmented-control-positive .mui-control-item.mui-active{color:#fff;background-color:#4cd964}.mui-segmented-control-positive.mui-segmented-control-inverted .mui-control-item.mui-active{color:#4cd964;background:0 0;border-bottom:2px solid #4cd964}.mui-segmented-control-positive.mui-segmented-control-inverted~.mui-slider-progress-bar{background-color:#4cd964}.mui-segmented-control-negative{border:1px solid #dd524d}.mui-segmented-control-negative .mui-control-item{color:#dd524d;border-color:inherit}.mui-segmented-control-negative .mui-control-item.mui-active{color:#fff;background-color:#dd524d}.mui-segmented-control-negative.mui-segmented-control-inverted .mui-control-item.mui-active{color:#dd524d;background:0 0;border-bottom:2px solid #dd524d}.mui-segmented-control-negative.mui-segmented-control-inverted~.mui-slider-progress-bar{background-color:#dd524d}.mui-control-content{display:none}.mui-control-content.mui-active{display:block}.mui-popover{position:fixed;top:55px;left:50%;z-index:20;display:none;width:280px;margin-left:-140px;background-color:rgba(247,247,247,.98);border-radius:12px;-webkit-box-shadow:0 0 15px rgba(0,0,0,.1);box-shadow:0 0 15px rgba(0,0,0,.1);opacity:0;-webkit-transition:-webkit-transform .2s ease-in-out,opacity .2s ease-in-out;transition:-webkit-transform .2s ease-in-out,opacity .2s ease-in-out;-webkit-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0)}.mui-popover:before{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}.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-bottom:before{top:auto;bottom:-8px;border-top:8px solid rgba(247,247,247,.98);border-bottom:0}.mui-popover.mui-popover-bottom.mui-popover-action{top:auto;right:0;bottom:0;left:0;width:100%;border-radius:0;-webkit-transition:-webkit-transform .25s,opacity 1ms .25s;-moz-transition:-moz-transform .25s,opacity 1ms .25s;transition:transform .25s,opacity 1ms .25s;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}.mui-popover.mui-popover-bottom.mui-popover-action.mui-active{opacity:1;-webkit-transition:-webkit-transform .25s;-moz-transition:-moz-transform .25s;transition:transform .25s;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.mui-popover.mui-active{display:block;opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.mui-popover .mui-bar~.mui-table-view{padding-top:44px}.mui-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:15;background-color:rgba(0,0,0,.3)}.mui-bar-backdrop.mui-backdrop{bottom:50px;background:0 0}.mui-backdrop-action.mui-backdrop{bottom:50px;background-color:rgba(0,0,0,.3)}.mui-backdrop-action.mui-backdrop,.mui-bar-backdrop.mui-backdrop{opacity:0}.mui-backdrop-action.mui-backdrop.mui-active,.mui-bar-backdrop.mui-backdrop.mui-active{opacity:1;-webkit-transition:all .25s ease;transition:all .25s ease}.mui-popover .mui-btn-block{margin-bottom:5px}.mui-popover .mui-btn-block:last-child{margin-bottom:0}.mui-popover .mui-bar{-webkit-box-shadow:none;box-shadow:none}.mui-popover .mui-bar-nav{border-bottom:1px solid rgba(0,0,0,.15);border-top-left-radius:12px;border-top-right-radius:12px;-webkit-box-shadow:none;box-shadow:none}.mui-popover .mui-table-view{max-height:300px;margin-bottom:0;overflow:auto;-webkit-overflow-scrolling:touch;background-color:rgba(247,247,247,.98);background-image:none;border-radius:12px}.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){border-top-left-radius:12px;border-top-right-radius:12px}.mui-popover .mui-table-view .mui-table-view-cell:last-child,.mui-popover .mui-table-view .mui-table-view-cell:last-child>a:not(.mui-btn){border-bottom-right-radius:12px;border-bottom-left-radius:12px}.mui-popover.mui-bar-popover .mui-table-view{width:106px}.mui-popover.mui-bar-popover .mui-table-view .mui-table-view-cell{padding:11px 15px;background-position:0 100%}.mui-popover.mui-bar-popover .mui-table-view .mui-table-view-cell>a:not(.mui-btn){margin:-11px -15px -11px -15px}.mui-pagination{display:inline-block;padding-left:0;margin:0 auto;border-radius:6px}.mui-pagination>li{display:inline}.mui-pagination>li>a,.mui-pagination>li>span{position:relative;float:left;padding:6px 12px;margin-left:-1px;line-height:1.428571429;color:#007aff;text-decoration:none;background-color:#fff;border:1px solid #ddd}.mui-pagination>li:first-child>a,.mui-pagination>li:first-child>span{margin-left:0;border-top-left-radius:6px;border-bottom-left-radius:6px}.mui-pagination>li:last-child>a,.mui-pagination>li:last-child>span{border-top-right-radius:6px;border-bottom-right-radius:6px}.mui-pagination>li.mui-active>a,.mui-pagination>li.mui-active>a:active,.mui-pagination>li.mui-active>span,.mui-pagination>li.mui-active>span:active,.mui-pagination>li:active>a,.mui-pagination>li:active>a:active,.mui-pagination>li:active>span,.mui-pagination>li:active>span:active{z-index:2;color:#fff;cursor:default;background-color:#007aff;border-color:#007aff}.mui-pagination>li.mui-disabled>a,.mui-pagination>li.mui-disabled>a:active,.mui-pagination>li.mui-disabled>span,.mui-pagination>li.mui-disabled>span:active{color:#777;background-color:#fff;border:1px solid #ddd;opacity:.6}.mui-pagination-lg>li>a,.mui-pagination-lg>li>span{padding:10px 16px;font-size:18px}.mui-pagination-sm>li>a,.mui-pagination-sm>li>span{padding:5px 10px;font-size:12px}.mui-pager{padding-left:0;text-align:center;list-style:none}.mui-pager:after,.mui-pager:before{display:table;content:" "}.mui-pager:after{clear:both}.mui-pager li{display:inline}.mui-pager li>a,.mui-pager li>span{display:inline-block;padding:5px 14px;background-color:#fff;border:1px solid #ddd;border-radius:6px}.mui-pager li.mui-active>a,.mui-pager li.mui-active>span,.mui-pager li:active>a,.mui-pager li:active>span{color:#fff;text-decoration:none;cursor:default;background-color:#007aff;border-color:#007aff}.mui-pager .mui-next>a,.mui-pager .mui-next>span{float:right}.mui-pager .mui-previous>a,.mui-pager .mui-previous>span{float:left}.mui-pager .mui-disabled>a,.mui-pager .mui-disabled>a:active,.mui-pager .mui-disabled>span,.mui-pager .mui-disabled>span:active{color:#777;background-color:#fff;border:1px solid #ddd;opacity:.6}.mui-modal{position:fixed;top:0;z-index:11;width:100%;min-height:100%;overflow:hidden;background-color:#fff;opacity:0;-webkit-transition:-webkit-transform .25s,opacity 1ms .25s;-moz-transition:-moz-transform .25s,opacity 1ms .25s;transition:transform .25s,opacity 1ms .25s;-webkit-transition-timing-function:cubic-bezier(.1,.5,.1,1);transition-timing-function:cubic-bezier(.1,.5,.1,1);-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}.mui-modal.mui-active{height:100%;opacity:1;-webkit-transition:-webkit-transform .25s;-moz-transition:-moz-transform .25s;transition:transform .25s;-webkit-transition-timing-function:cubic-bezier(.1,.5,.1,1);transition-timing-function:cubic-bezier(.1,.5,.1,1);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.mui-slider{position:relative;width:100%;overflow:hidden}.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-slider-group{position:relative;font-size:0;white-space:nowrap;-webkit-transition:all 0s linear;transition:all 0s linear}.mui-slider .mui-slider-group .mui-slider-item{position:relative;display:inline-block;width:100%;height:100%;font-size:14px;vertical-align:top}.mui-slider .mui-slider-group .mui-slider-item a{position:relative;display:block;line-height:0}.mui-slider .mui-slider-group .mui-slider-item img{width:100%}.mui-slider .mui-slider-group.mui-slider-loop .mui-slider-item:first-child{margin-left:-100%}.mui-slider .mui-slider-group.mui-slider-loop .mui-slider-item:last-child{margin-right:-100%}.mui-slider-title{position:absolute;bottom:0;left:0;width:100%;height:30px;margin:0;line-height:30px;text-align:left;text-indent:12px;background-color:#000;opacity:.8}.mui-slider-indicator{position:absolute;bottom:8px;width:100%;text-align:center;background:0 0}.mui-slider-indicator.mui-segmented-control{position:relative;bottom:auto;padding-top:10px}.mui-slider-indicator .mui-indicator{display:inline-block;width:6px;height:6px;margin:1px 6px;cursor:pointer;background:#aaa;border-radius:50%;-webkit-box-shadow:0 0 1px 1px rgba(130,130,130,.7);box-shadow:0 0 1px 1px rgba(130,130,130,.7)}.mui-slider-indicator .mui-active.mui-indicator{background:#fff}.mui-slider-indicator .mui-icon{width:40px;height:30px;margin:3px;font-size:20px;line-height:30px;text-align:center;border:1px solid #ddd}.mui-slider-indicator .mui-number{display:inline-block;width:58px;line-height:32px}.mui-slider-indicator .mui-number span{color:#ff5053}.mui-slider-progress-bar{z-index:1;height:2px;-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-backface-visibility:hidden}.mui-switch{position:relative;display:block;width:74px;height:30px;background-color:#fff;border:2px solid #ddd;border-radius:20px;-webkit-transition-duration:.2s;transition-duration:.2s;-webkit-transition-property:background-color,border;transition-property:background-color,border}.mui-switch .mui-switch-handle{position:absolute;top:-1px;left:-1px;z-index:2;width:28px;height:28px;background-color:#fff;border-radius:16px;-webkit-box-shadow:0 2px 5px rgba(0,0,0,.4);box-shadow:0 2px 5px rgba(0,0,0,.4);-webkit-transition-duration:.2s;transition-duration:.2s;-webkit-transition-property:-webkit-transform,width;transition-property:transform,width}.mui-switch:before{position:absolute;top:3px;right:11px;font-size:13px;color:#999;text-transform:uppercase;content:"Off"}.mui-switch.mui-active{background-color:#4cd964;border-color:#4cd964}.mui-switch.mui-active .mui-switch-handle{-webkit-transform:translate3d(45px,0,0);transform:translate3d(45px,0,0)}.mui-switch.mui-active:before{right:auto;left:15px;color:#fff;content:"On"}.mui-switch input[type=checkbox]{display:none}.mui-switch-mini{width:47px}.mui-switch-mini:before{display:none}.mui-switch-mini.mui-active .mui-switch-handle{-webkit-transform:translate3d(18px,0,0);transform:translate3d(18px,0,0)}.mui-switch-blue.mui-active{background-color:#007aff;border:2px solid #007aff}.mui-content.mui-fade{left:0;opacity:0}.mui-content.mui-fade.mui-in{opacity:1}.mui-content.mui-sliding{z-index:2;-webkit-transition:-webkit-transform .4s;-moz-transition:-moz-transform .4s;transition:transform .4s;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.mui-content.mui-sliding.mui-left{z-index:1;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}.mui-content.mui-sliding.mui-right{z-index:3;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}.mui-navigate-left:after,.mui-navigate-right:after,.mui-push-left:after,.mui-push-right:after{position:absolute;top:50%;display:inline-block;font-family:Muiicons;font-size:inherit;line-height:1;color:#bbb;text-decoration:none;-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-font-smoothing:antialiased}.mui-navigate-left:after,.mui-push-left:after{left:15px;content:'\e664'}.mui-navigate-right:after,.mui-push-right:after{right:15px;content:'\e663'}.mui-pull-bottom-pocket,.mui-pull-top-pocket{position:absolute;left:0;display:block;width:100%;height:490px;overflow:hidden;background:#efeff4}.mui-pull-top-pocket{top:-490px}.mui-pull-bottom-pocket{position:static;bottom:0;z-index:-1;height:40px}.mui-pull-bottom-pocket .mui-pull-loading{display:none}.mui-pull-bottom-pocket .mui-pull-loading.mui-in{display:inline-block}.mui-pull{position:absolute;right:0;bottom:10px;left:0;font-weight:700;color:#777;text-align:center}.mui-pull-loading{vertical-align:middle;-webkit-transition-duration:400ms;transition-duration:400ms}.mui-pull-loading.mui-reverse{-webkit-transform:translate(0,0) rotate(180deg);transform:translate(0,0) rotate(180deg)}.mui-pull-caption{position:relative;display:inline-block;margin-top:-5px;margin-left:10px;overflow:visible;font-size:15px;line-height:24px;vertical-align:middle}.mui-pull-caption span{display:none}.mui-pull-caption span.mui-in{display:inline}.mui-toast-container{position:fixed;bottom:50px;width:100%}.mui-toast-message{z-index:99999;width:270px;padding:5px;margin:5px auto;font-size:14px;color:#000;text-align:center;background-color:#d8d8d8;border-radius:7px}@font-face{font-family:Muiicons;font-style:normal;font-weight:400;src:url(../fonts/muiicons.ttf) format("truetype")}.mui-icon{display:inline-block;font-family:Muiicons;font-size:24px;font-style:normal;font-weight:400;line-height:1;text-decoration:none;-webkit-font-smoothing:antialiased}.mui-icon.mui-right:before{float:right;padding-left:.2em}.mui-icon-spinner:before{content:"\e600"}.mui-icon-weibo:before{content:"\e601"}.mui-icon-pin:before{content:"\e602"}.mui-icon-phone:before{content:"\e603"}.mui-icon-map:before{content:"\e604"}.mui-icon-sms:before{content:"\e605"}.mui-icon-chat:before{content:"\e606"}.mui-icon-search:before{content:"\e607"}.mui-icon-close:before{content:"\e608"}.mui-icon-reply:before{content:"\e609"}.mui-icon-trash:before{content:"\e610"}.mui-icon-edit:before{content:"\e611"}.mui-icon-home:before{content:"\e612"}.mui-icon-category:before{content:"\e613"}.mui-icon-calendar:before{content:"\e614"}.mui-icon-cog:before{content:"\e615"}.mui-icon-speech:before{content:"\e616"}.mui-icon-info:before{content:"\e617"}.mui-icon-arrow-left:before{content:"\e648"}.mui-icon-arrow-right:before{content:"\e649"}.mui-icon-up-nav:before{content:"\e650"}.mui-icon-down-nav:before{content:"\e651"}.mui-icon-right-nav:before{content:"\e652"}.mui-icon-left-nav:before{content:"\e653"}.mui-icon-radio:before{content:"\e654"}.mui-icon-radio-checked:before{content:"\e655"}.mui-icon-checkbox:before{content:"\e656"}.mui-icon-checkbox-checked:before{content:"\e657"}.mui-icon-bars:before{content:"\e658"}.mui-icon-plus:before{content:"\e659"}.mui-icon-clear:before{content:"\e660"}.mui-icon-up:before{content:"\e661"}.mui-icon-down:before{content:"\e662"}.mui-icon-right:before{content:"\e663"}.mui-icon-left:before{content:"\e664"}.mui-icon-pulldown:before{content:"\e665"}.mui-icon-phone-solid:before{content:"\e702"}.mui-icon-phone-filled:before{content:"\e804"}.mui-icon-close-cycle:before{content:"\e908"}.mui-icon-spinner-cycle:before{content:"\e909"}.mui-icon-checkbox-cycle:before{content:"\e910"}.mui-icon-checkbox-checked-cycle:before{content:"\e911"}
\ No newline at end of file
_site/examples/hello-mui/css/oa.css deleted 100644 → 0
View file @ 86f3bac6
@font-face {
font-family: OAicons;
font-style: normal;
font-weight: normal;
src: url("../fonts/ratchicons.eot");
src: url("../fonts/ratchicons.eot?#iefix") format("embedded-opentype"), url("../fonts/ratchicons.woff") format("woff"), url("../fonts/ratchicons.ttf") format("truetype"), url("../fonts/ratchicons.svg#svgFontName") format("svg");
}
.oa-icon{
display: inline-block;
font-family: OAicons;
font-size: 24px;
line-height: 1;
text-decoration: none;
-webkit-font-smoothing: antialiased;
}
.oa-icon-back:before {
content: '\e80a';
}
.oa-icon-bars:before {
content: '\e80e';
}
.oa-icon-caret:before {
content: '\e80f';
}
.oa-icon-check:before {
content: '\e810';
}
.oa-icon-close:before {
content: '\e811';
}
.oa-icon-code:before {
content: '\e812';
}
.oa-icon-compose:before {
content: '\e813';
}
.oa-icon-download:before {
content: '\e815';
}
.oa-icon-edit:before {
content: '\e829';
}
.oa-icon-forward:before {
content: '\e82a';
}
.oa-icon-gear:before {
content: '\e821';
}
.oa-icon-home:before {
content: '\e82b';
}
.oa-icon-info:before {
content: '\e82c';
}
.oa-icon-list:before {
content: '\e823';
}
.oa-icon-more-vertical:before {
content: '\e82e';
}
.oa-icon-more:before {
content: '\e82f';
}
.oa-icon-pages:before {
content: '\e824';
}
.oa-icon-pause:before {
content: '\e830';
}
.oa-icon-person:before {
content: '\e832';
}
.oa-icon-play:before {
content: '\e816';
}
.oa-icon-plus:before {
content: '\e817';
}
.oa-icon-refresh:before {
content: '\e825';
}
.oa-icon-search:before {
content: '\e819';
}
.oa-icon-share:before {
content: '\e81a';
}
.oa-icon-sound:before {
content: '\e827';
}
.oa-icon-sound2:before {
content: '\e828';
}
.oa-icon-sound3:before {
content: '\e80b';
}
.oa-icon-sound4:before {
content: '\e80c';
}
.oa-icon-star-filled:before {
content: '\e81b';
}
.oa-icon-star:before {
content: '\e81c';
}
.oa-icon-stop:before {
content: '\e81d';
}
.oa-icon-trash:before {
content: '\e81e';
}
.oa-icon-up-nav:before {
content: '\e81f';
}
.oa-icon-up:before {
content: '\e80d';
}
.oa-icon-right-nav:before {
content: '\e818';
}
.oa-icon-right:before {
content: '\e826';
}
.oa-icon-down-nav:before {
content: '\e814';
}
.oa-icon-down:before {
content: '\e820';
}
.oa-icon-left-nav:before {
content: '\e82d';
}
.oa-icon-left:before {
content: '\e822';
}
\ No newline at end of file
_site/examples/hello-mui/examples/badges.html deleted 100644 → 0
View file @ 86f3bac6
<!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>
<style>
h5 {
margin: 10px;
}
.mui-badge {
margin: 10px;
}
</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">数字角标（Badges）</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded">
<h5>有底色</h5>
<span class="mui-badge">1</span>
<span class="mui-badge mui-badge-primary">12</span>
<span class="mui-badge mui-badge-success">123</span>
<span class="mui-badge mui-badge-warning">3</span>
<span class="mui-badge mui-badge-danger">45</span>
<span class="mui-badge mui-badge-purple">456</span>
<h5>无底色（使用父元素背景色）</h5>
<span class="mui-badge mui-badge-inverted">1</span>
<span class="mui-badge mui-badge-primary mui-badge-inverted">2</span>
<span class="mui-badge mui-badge-success mui-badge-inverted">3</span>
<span class="mui-badge mui-badge-warning mui-badge-inverted">4</span>
<span class="mui-badge mui-badge-danger mui-badge-inverted">5</span>
<span class="mui-badge mui-badge-royal mui-badge-inverted">6</span>
</div>
</div>
</body>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/buttons-with-badges.html deleted 100644 → 0
View file @ 86f3bac6
<!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>
<style>
.mui-btn{
margin-top: 10px;
margin-right: 100px;
margin-left: 10px;
}
</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 class="mui-content-padded">
<button class="mui-btn">Badge button <span class="mui-badge">1</span></button>
<button class="mui-btn mui-btn-primary">Badge button <span class="mui-badge mui-badge-primary">2</span></button>
<button class="mui-btn mui-btn-success">Badge button <span class="mui-badge mui-badge-success">12</span></button>
<button class="mui-btn mui-btn-warning">Badge button <span class="mui-badge mui-badge-warning">121</span></button>
<button class="mui-btn mui-btn-danger">Badge button <span class="mui-badge mui-badge-danger">999</span></button>
<button class="mui-btn mui-btn-royal">Badge button <span class="mui-badge mui-badge-royal">999</span></button>
</div>
</div>
</body>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/buttons-with-block.html deleted 100644 → 0
View file @ 86f3bac6
<!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-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">块级按钮</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded">
<button class="mui-btn mui-btn-block">Block button</button>
<button class="mui-btn mui-btn-primary mui-btn-block">Block button</button>
<button class="mui-btn mui-btn-success mui-btn-block">Block button</button>
<button class="mui-btn mui-btn-warning mui-btn-block">Block button</button>
<button class="mui-btn mui-btn-danger mui-btn-block">Block button</button>
<button class="mui-btn mui-btn-royal mui-btn-block">Block button</button>
<button class="mui-btn mui-btn-block mui-btn-outlined">Block button</button>
<button class="mui-btn mui-btn-primary mui-btn-block mui-btn-outlined">Block button</button>
<button class="mui-btn mui-btn-success mui-btn-block mui-btn-outlined">Block button</button>
<button class="mui-btn mui-btn-warning mui-btn-block mui-btn-outlined">Block button</button>
<button class="mui-btn mui-btn-danger mui-btn-block mui-btn-outlined">Block button</button>
<button class="mui-btn mui-btn-royal mui-btn-block mui-btn-outlined">Block button</button>
</div>
</div>
<style type="text/css">
.mui-content-padded{
margin: 10px;
}
</style>
</body>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/buttons-with-fabs.html deleted 100644 → 0
View file @ 86f3bac6
<!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>
<style>
.mui-btn{
margin-top: 10px;
margin-right: 10px;
margin-left: 5px;
}
.mui-btn.mui-btn-mini{
margin-left: 13px;
margin-right: 18px;
}
</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 class="mui-content-padded">
<button class="mui-btn mui-fab mui-btn-mini">
<span class="mui-icon mui-icon-search"></span>
</button>
<button class="mui-btn mui-fab mui-btn-mini mui-btn-primary">
<span class="mui-icon mui-icon-plus"></span>
</button>
<button class="mui-btn mui-fab mui-btn-mini mui-btn-success">
<span class="mui-icon mui-icon-sms"></span>
</button>
<button class="mui-btn mui-fab mui-btn-mini mui-btn-danger">
<span class="mui-icon mui-icon-category"></span>
</button>
<button class="mui-btn mui-fab mui-btn-mini mui-btn-outlined">
<span class="mui-icon mui-icon-search"></span>
</button>
<button class="mui-btn mui-fab mui-btn-mini mui-btn-primary mui-btn-outlined">
<span class="mui-icon mui-icon-plus"></span>
</button>
<button class="mui-btn mui-fab mui-btn-mini mui-btn-success mui-btn-outlined">
<span class="mui-icon mui-icon-sms"></span>
</button>
<button class="mui-btn mui-fab mui-btn-mini mui-btn-danger mui-btn-outlined">
<span class="mui-icon mui-icon-category"></span>
</button>
</div>
<div class="mui-content-padded">
<button class="mui-btn mui-fab">
<span class="mui-icon mui-icon-search"></span>
</button>
<button class="mui-btn mui-fab mui-btn-primary">
<span class="mui-icon mui-icon-plus"></span>
</button>
<button class="mui-btn mui-fab mui-btn-success">
<span class="mui-icon mui-icon-sms"></span>
</button>
<button class="mui-btn mui-fab mui-btn-danger">
<span class="mui-icon mui-icon-category"></span>
</button>
<button class="mui-btn mui-fab mui-btn-outlined">
<span class="mui-icon mui-icon-search"></span>
</button>
<button class="mui-btn mui-fab mui-btn-primary mui-btn-outlined">
<span class="mui-icon mui-icon-plus"></span>
</button>
<button class="mui-btn mui-fab mui-btn-success mui-btn-outlined">
<span class="mui-icon mui-icon-sms"></span>
</button>
<button class="mui-btn mui-fab mui-btn-danger mui-btn-outlined">
<span class="mui-icon mui-icon-category"></span>
</button>
</div>
</div>
</body>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/buttons-with-icons.html deleted 100644 → 0
View file @ 86f3bac6
<!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>
<style>
.mui-btn{
margin-top: 10px;
margin-left: 10px;
}
</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 class="mui-content-padded">
<h5>图标居左：</h5>
<button class="mui-btn mui-icon mui-icon-home">
首页
</button>
<button class="mui-btn mui-btn-primary mui-icon mui-icon-search">
搜索
</button>
<button class="mui-btn mui-btn-success mui-icon mui-icon-plus">添加</button>
<button class="mui-btn mui-btn-danger mui-btn-outlined">
<span class="mui-icon mui-icon-trash"></span>
删除
</button>
<button class="mui-btn mui-btn-outlined">
<span class="mui-icon mui-icon-calendar"></span>
日程
</button>
<button class="mui-btn mui-btn-link">
<span class="mui-icon mui-icon-left-nav"></span>
返回
</button>
<h5>图标居右：</h5>
<button class="mui-btn mui-icon mui-icon-home mui-right">
首页
</button>
<button class="mui-btn mui-btn-primary mui-icon mui-icon-search mui-right">
搜索
</button>
<button class="mui-btn mui-btn-success mui-icon mui-icon-plus mui-right">添加</button>
<button class="mui-btn mui-btn-danger mui-btn-outlined">
删除
<span class="mui-icon mui-icon-trash"></span>
</button>
<button class="mui-btn mui-btn-outlined">
日程
<span class="mui-icon mui-icon-calendar"></span>
</button>
<button class="mui-btn mui-btn-link">
下一步
<span class="mui-icon mui-icon-right"></span>
</button>
</div>
</div>
</body>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/buttons.html deleted 100644 → 0
View file @ 86f3bac6
<!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>
<style>
input, button, .mui-btn {
margin-top: 10px;
margin-left: 10px;
}
</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">按钮（Button）</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded">
<h5>有底色按钮：</h5>
<button class="mui-btn">
默认
</button>
<div class="mui-btn mui-btn-primary">
蓝色
</div>
<span class="mui-btn mui-btn-success">
绿色
</span>
<button class="mui-btn mui-btn-warning">
黄色
</button>
<button class="mui-btn mui-btn-danger">
红色
</button>
<button class="mui-btn mui-btn-royal">
紫色
</button>
<h5 style="margin-top: 10px;">无底色按钮（使用父元素的背景色）：</h5>
<button class="mui-btn mui-btn-outlined">
默认
</button>
<button class="mui-btn mui-btn-primary mui-btn-outlined">
操作
</button>
<button class="mui-btn mui-btn-success mui-btn-outlined">
成功
</button>
<button class="mui-btn mui-btn-warning mui-btn-outlined">
警告
</button>
<button class="mui-btn mui-btn-danger mui-btn-outlined">
危险
</button>
<button class="mui-btn mui-btn-royal mui-btn-outlined">
高贵
</button>
<h5 style="margin-top: 15px;">链接按钮：</h5>
<button class="mui-btn mui-btn-link">
添加
</button>
<h5 style="margin-top: 10px;">默认input标签样式：</h5>
<input type="button" value="type=button" />
<input type="reset" value="type=reset" />
<input type="submit" value="type=submit" />
<h5 style="margin-top: 10px;">默认button标签样式：</h5>
<button>按钮</button>
</div>
</div>
</body>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/cards.html deleted 100644 → 0
View file @ 86f3bac6
<!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-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">Cards</h1>
</header>
<div class="mui-content">
<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>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/checkbox.html deleted 100644 → 0
View file @ 86f3bac6
<!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-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">复选框（checkbox）</h1>
</header>
<div class="mui-content">
<h5 class="mui-content-padded">图标左对齐</h5>
<div class="mui-card">
<form class="mui-input-group">
<div class="mui-input-row mui-checkbox mui-left">
<label>Checkbox</label>
<input name="checkbox" type="checkbox" >
</div>
<div class="mui-input-row mui-checkbox mui-left">
<label>Checkbox</label>
<input name="checkbox" type="checkbox" checked>
</div>
<div class="mui-input-row mui-checkbox mui-checkbox-cycle mui-left">
<label>Checkbox</label>
<input name="checkbox" type="checkbox" >
</div>
<div class="mui-input-row mui-checkbox mui-checkbox-cycle mui-left mui-checked">
<label>Checkbox</label>
<input name="checkbox" type="checkbox" checked>
</div>
</form>
</div>
<h5 class="mui-content-padded">图标右对齐</h5>
<div class="mui-card">
<form class="mui-input-group">
<div class="mui-input-row mui-checkbox">
<label>Checkbox</label>
<input name="checkbox1" type="checkbox" >
</div>
<div class="mui-input-row mui-checkbox">
<label>Checkbox</label>
<input name="checkbox1" type="checkbox" checked>
</div>
<div class="mui-input-row mui-checkbox mui-checkbox-cycle">
<label>Checkbox</label>
<input name="checkbox1" type="checkbox" >
</div>
<div class="mui-input-row mui-checkbox mui-checkbox-cycle">
<label>Checkbox</label>
<input name="checkbox1" type="checkbox" checked>
</div>
</form>
</div>
</div>
</body>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/dialog.html deleted 100644 → 0
View file @ 86f3bac6
<!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-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">消息框（dialog）</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded" style="margin: 5px;text-align: center;">
<button id='alertBtn' class="mui-btn mui-btn-blue mui-btn-outlined">警告消息框</button>
<button id='confirmBtn' class="mui-btn mui-btn-blue mui-btn-outlined">确认消息框</button>
<button id='promptBtn' class="mui-btn mui-btn-blue mui-btn-outlined">输入对话框</button>
<button id='toastBtn' class="mui-btn mui-btn-blue mui-btn-outlined">自动消失提示框</button>
<div id="info">
</div>
</div>
</div>
<script type="text/javascript" charset="utf-8">
var info = document.getElementById("info");
document.getElementById("alertBtn").addEventListener('tap',function(){
mui.alert('欢迎使用Hello MUI','Hello MUI',function(){
info.innerText = '你刚关闭了警告框';
});
});
document.getElementById("confirmBtn").addEventListener('tap',function(){
var btnArray = ['是','否'];
mui.confirm('MUI是个好框架，确认？','Hello MUI',btnArray,function(e){
if(e.index==0){
info.innerText = '你刚确认MUI是个好框架';
}else{
info.innerText = 'MUI没有得到你的认可，继续加油'
}
})
});
document.getElementById("promptBtn").addEventListener('tap',function(){
var btnArray = ['确定','取消'];
mui.prompt('请输入你对MUI的评语：','性能好',btnArray,function(e){
if(e.index==0){
info.innerText = '谢谢你的评语：'+e.value;
}else{
info.innerText = '你点了取消按钮';
}
})
});
document.getElementById("toastBtn").addEventListener('tap',function(){
mui.toast('欢迎体验Hello MUI');
});
</script>
<style type="text/css">
.mui-btn{
display: block;
width: 120px;
margin: 10px auto;
}
#info{
padding: 20px 10px ;
}
</style>
</body>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/forms-with-group-and-labels.html deleted 100644 → 0
View file @ 86f3bac6
<!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-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">Form with input group and labels</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded">
<form class="mui-input-group">
<div class="mui-input-row mui-radio">
<label>Radio</label>
<input name="radio" type="radio">
</div>
<div class="mui-input-row mui-radio">
<label>Radio</label>
<input name="radio" type="radio" checked>
</div>
<div class="mui-input-row mui-checkbox">
<label>Checkbox</label>
<input name="checkbox" type="checkbox" >
</div>
<div class="mui-input-row mui-checkbox">
<label>Checkbox</label>
<input name="checkbox" type="checkbox" checked>
</div>
<div class="mui-input-row mui-select">
<label>Select</label>
<select><option>选项1</option><option>选项2</option><option>选项3</option><option>选项4</option><option>选项5</option></select>
</div>
<div class="mui-input-row mui-input-range">
<label>Slider</label>
<input type="range" value="60" min="0" max="100">
</div>
<div class="mui-input-row">
<label>Input</label>
<input type="text" class="mui-input-clear" placeholder="placeholder">
</div>
</form>
</div>
</div>
</body>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/forms-with-group.html deleted 100644 → 0
View file @ 86f3bac6
<!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-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">Form with input group</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded">
<form class="mui-input-group">
<div class="mui-input-row">
<input type="text" class="mui-input-clear" placeholder="Full name">
</div>
<div class="mui-input-row">
<input type="email" class="mui-input-speech" placeholder="Email">
</div>
<div class="mui-input-row">
<input type="text" class="mui-input-clear" placeholder="Username">
</div>
</form>
</div>
</div>
</body>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/forms.html deleted 100644 → 0
View file @ 86f3bac6
<!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-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">Forms</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded">
<form>
<div class="mui-input-row">
<input type="text" class="mui-input-clear" placeholder="Full name">
</div>
<div class="mui-input-row mui-search">
<input type="search" class="mui-input-speech mui-input-clear" placeholder="search">
</div>
<div class="mui-input-row">
<input type="text" class="mui-input-speech mui-input-clear" placeholder="speech">
</div>
<div class="mui-input-row mui-input-range">
<input type="range" value="60" min="0" max="100">
</div>
<div class="mui-input-row">
<textarea rows="5"></textarea>
</div>
<div class="mui-input-row">
<button class="mui-btn mui-btn-positive mui-btn-block">Choose existing</button>
</div>
</form>
</div>
</div>
</body>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/grid-default.html deleted 100644 → 0
View file @ 86f3bac6
<!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-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">9宫格默认样式</h1>
</header>
<div class="mui-content">
<ul class="mui-table-view mui-hidden" style="margin-bottom:15px;">
<li class="mui-table-view-cell">cared
<div id="M_Toggle_Grid_Carded" class="mui-switch mui-active">
<div class="mui-switch-handle"></div>
</div>
</li>
</ul>
<div class="mui-card">
<ul class="mui-table-view mui-grid-view mui-grid-9">
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
<span class="mui-icon mui-icon-home"></span>
<div class="mui-media-body">Home</div></a></li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
<span class="mui-icon mui-icon-sms"><span class="mui-badge">5</span></span>
<div class="mui-media-body">Email</div></a></li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
<span class="mui-icon mui-icon-calendar"></span>
<div class="mui-media-body">Calendar</div></a></li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
<span class="mui-icon mui-icon-chat"></span>
<div class="mui-media-body">Chat</div></a></li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
<span class="mui-icon mui-icon-category"></span>
<div class="mui-media-body">Sort</div></a></li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
<span class="mui-icon mui-icon-map"></span>
<div class="mui-media-body">Map</div></a></li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
<span class="mui-icon mui-icon-search"></span>
<div class="mui-media-body">Search</div></a></li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
<span class="mui-icon mui-icon-phone"></span>
<div class="mui-media-body">Phone</div></a></li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
<span class="mui-icon mui-icon-cog"></span>
<div class="mui-media-body">Setting</div></a></li>
</ul>
</div>
</div>
<script>
var content = document.querySelector('.mui-content');
var toggle = document.getElementById('M_Toggle_Grid_Carded');
var card = document.querySelector('.mui-card');
var grid = document.querySelector('.mui-grid-view');
toggle.addEventListener('toggle', function(event) {
var isActive = event.detail.isActive;
if (isActive) {
card.appendChild(grid);
card.style.display = '';
} else {
content.appendChild(grid);
card.style.display = 'none';
}
});
</script>
</body>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/grid-pagination.html deleted 100644 → 0
View file @ 86f3bac6
<!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>
<style>
.mui-slider-indicator {
bottom: 0;
}
.mui-slider{
background-color:#f2f2f2;
}
</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">左右拖动分页9宫</h1>
</header>
<div class="mui-content">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
循环
<div id="Gallery_Toggle" class="mui-switch">
<div class="mui-switch-handle"></div>
</div>
</li>
</ul>
<div id="Gallery" class="mui-slider" style="margin-top:15px;">
<div class="mui-slider-group">
<div class="mui-slider-item">
<ul class="mui-table-view mui-grid-view mui-grid-9">
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-home"><span class="mui-badge">5</span></span>
<div class="mui-media-body">
Home
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-sms"></span>
<div class="mui-media-body">
Email
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-calendar"></span>
<div class="mui-media-body">
Calendar
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-chat"></span>
<div class="mui-media-body">
Chat
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-category"></span>
<div class="mui-media-body">
Sort
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-map"></span>
<div class="mui-media-body">
Map
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-search"></span>
<div class="mui-media-body">
Search
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-phone"></span>
<div class="mui-media-body">
Phone
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-cog"></span>
<div class="mui-media-body">
Setting
</div>
</a>
</li>
</ul>
</div>
<div class="mui-slider-item">
<ul class="mui-table-view mui-grid-view mui-grid-9">
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-home"></span>
<div class="mui-media-body">
Home
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-sms"><span class="mui-badge">6</span></span>
<div class="mui-media-body">
Email
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-calendar"></span>
<div class="mui-media-body">
Calendar
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-chat"></span>
<div class="mui-media-body">
Chat
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-category"></span>
<div class="mui-media-body">
Sort
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-map"></span>
<div class="mui-media-body">
Map
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-search"></span>
<div class="mui-media-body">
Search
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-phone"></span>
<div class="mui-media-body">
Phone
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-cog"></span>
<div class="mui-media-body">
Setting
</div>
</a>
</li>
</ul>
</div>
<div class="mui-slider-item">
<ul class="mui-table-view mui-grid-view mui-grid-9">
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-home"></span>
<div class="mui-media-body">
Home
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-sms"></span>
<div class="mui-media-body">
Email
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-calendar"><span class="mui-badge">7</span></span>
<div class="mui-media-body">
Calendar
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-chat"></span>
<div class="mui-media-body">
Chat
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-category"></span>
<div class="mui-media-body">
Sort
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-map"></span>
<div class="mui-media-body">
Map
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-search"></span>
<div class="mui-media-body">
Search
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-phone"></span>
<div class="mui-media-body">
Phone
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-cog"></span>
<div class="mui-media-body">
Setting
</div>
</a>
</li>
</ul>
</div>
</div>
<div class="mui-slider-indicator">
<div class="mui-indicator mui-active"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
</div>
</div>
</div>
<script>
$.init({
swipeBack : false,
});
$.ready(function() {
var slider = document.getElementById('Gallery');
var group = slider.querySelector('.mui-slider-group');
var items = $('.mui-slider-item', group);
var first = items[0].cloneNode(true);
first.classList.add('mui-slider-item-duplicate');
var last = items[items.length - 1].cloneNode(true);
last.classList.add('mui-slider-item-duplicate');
function toggleLoop(toggle) {
if (toggle) {
group.classList.add('mui-slider-loop');
group.insertBefore(last, group.firstChild);
group.appendChild(first);
} else {
group.classList.remove('mui-slider-loop');
group.removeChild(first);
group.removeChild(last);
}
}
document.getElementById('Gallery_Toggle').addEventListener('toggle', function(e) {
var detail = e.detail;
toggleLoop(detail.isActive);
});
});
</script>
</body>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/icons.html deleted 100644 → 0
View file @ 86f3bac6
<!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>
<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
}
.mui-spinner-indicator {
background: #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">
<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>
<span class="mui-icon mui-icon-weibo"></span>
</a>
<a>
<span class="mui-icon mui-icon-pin"></span>
</a>
<!--电话-->
<a><span class="mui-icon mui-icon-phone"></span></a>
<a><span class="mui-icon mui-icon-phone-solid"></span></a>
<a><span class="mui-icon mui-icon-phone-filled"></span></a>
<a>
<span class="mui-icon mui-icon-map"></span>
</a>
<a>
<span class="mui-icon mui-icon-sms"></span>
</a>
<a>
<span class="mui-icon mui-icon-chat"></span>
</a>
<a>
<span class="mui-icon mui-icon-search"></span>
</a>
<a><span class="mui-icon mui-icon-close"></span></a>
<a><span class="mui-icon mui-icon-close-cycle"></span></a>
<a><span class="mui-icon mui-icon-clear"></span></a>
<a>
<span class="mui-icon mui-icon-reply"></span>
</a>
<a>
<span class="mui-icon mui-icon-trash"></span>
</a>
<a>
<span class="mui-icon mui-icon-edit"></span>
</a>
<a>
<span class="mui-icon mui-icon-home"></span>
</a>
<a><span class="mui-icon mui-icon-category"></span></a>
<a><span class="mui-icon mui-icon-bars"></span></a>
<a>
<span class="mui-icon mui-icon-calendar"></span>
</a>
<a>
<span class="mui-icon mui-icon-cog"></span>
</a>
<a>
<span class="mui-icon mui-icon-speech"></span>
</a>
<a><span class="mui-icon mui-icon-pulldown"></span></a>
<a><span class="mui-icon mui-icon-arrow-left"></span></a>
<a><span class="mui-icon mui-icon-arrow-right"></span></a>
<!--较粗的箭头-->
<a><span class="mui-icon mui-icon-up"></span></a>
<a><span class="mui-icon mui-icon-down"></span></a>
<a><span class="mui-icon mui-icon-left"></span></a>
<a><span class="mui-icon mui-icon-right"></span></a>
<!--导航箭头-->
<a><span class="mui-icon mui-icon-up-nav"></span></a>
<a><span class="mui-icon mui-icon-down-nav"></span></a>
<a><span class="mui-icon mui-icon-left-nav"></span></a>
<a><span class="mui-icon mui-icon-right-nav"></span></a>
<a><span class="mui-icon mui-icon-radio"></span></a>
<a><span class="mui-icon mui-icon-radio-checked"></span></a>
<a><span class="mui-icon mui-icon-checkbox"></span></a>
<a><span class="mui-icon mui-icon-checkbox-checked"></span></a>
<a><span class="mui-icon mui-icon-checkbox-checked-cycle"></span></a>
<a><span class="mui-icon mui-icon-bars"></span></a>
<a><span class="mui-icon mui-icon-plus"></span></a>
</div>
</div>
</body>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/info.html deleted 100644 → 0
View file @ 86f3bac6
<!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-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">关于</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded">
<h4 style="margin-top:10px;">mui</h4>
<p >
性能和体验的差距，一直是mobile app开发者放弃HTML5的首要原因。 浏览器天生的切页白屏、不忍直视的转页动画、浮动元素的抖动、无法流畅下拉刷新等问题，这些都让HTML5开发者倍感挫败
； 另一方面，浏览器默认控件样式又少又丑，制作一个漂亮的控件非常麻烦，也有一些制作简单的ui框架但性能低下。
</p>
<p >
mui框架有效的解决了这些问题，这是一个可以方便开发出高性能App的框架，也是目前最接近原生App效果的框架。
</p>
<h4>新手指南</h4>
<p>
若想详细了解Hello MUI的源码及工作原理，可从<a href="http://www.dcloud.io">Dcloud官网</a>下载Hbuilder，选择新建“移动APP”，并选择“Hello MUI”工程模板，创建工程；然后通过数据线将手机连接上电脑，点击运行，就可以在手机上体验MUI的各项能力。
</p><p>
若要使用MUI进行移动APP开发，可通过Hbuilder，新建“移动APP”，并选择“MUI”工程模板，该模板已内置MUI相关的资源文件。
</p>
<p>更多详细介绍，请到<a href="http://dcloudio.github.io/mui">mui官网</a>查看；</p>
<h4>版本介绍</h4>
<p>当前版本为0.5.5，可到<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>;
</p>
</div>
</div>
<style type="text/css">
p{
text-indent: 22px;
padding: 5px 8px;
}
html,body,.mui-content{
background-color: #fff;
}
h4{
margin-left: 5px;
}
</style>
<script type="text/javascript" charset="utf-8">
//处理点击事件，需要打开原生浏览器
$('body').on('tap', 'a', function(e) {
var href = this.getAttribute('href');
if (href) {
if(window.plus){
plus.runtime.openURL(href);
}else{
location.href = href;
}
}
});
</script>
</body>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/inputs.html deleted 100644 → 0
View file @ 86f3bac6
<!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-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 type="search" class="mui-input-speech mui-input-clear" placeholder="带语音识别的搜索框">
</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>
<div class="mui-input-row">
<label>Input</label>
<input type="text" class="mui-input-speech mui-input-clear" placeholder="语音输入">
</div>
</form>
<div class="mui-input-row" style="margin: 10px 5px;">
<textarea rows="5" placeholder="多行文本框"></textarea>
</div>
</div>
</div>
<style type="text/css">
h5{
margin: 5px 7px;
}
</style>
</body>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/iscroll.html deleted 100644 → 0
View file @ 86f3bac6
<!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>
<style>
body {
overflow: hidden; /* this is important to prevent the whole page to bounce */
}
</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">iscroll 4</h1>
</header>
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active" href="#">
<span class="mui-icon mui-icon-phone"></span>
<span class="mui-tab-label">Phone</span>
</a>
<a class="mui-tab-item" href="#">
<span class="mui-icon mui-icon-chat"></span>
<span class="mui-tab-label">Chat</span>
</a>
<a class="mui-tab-item" href="#">
<span class="mui-icon mui-icon-sms"></span>
<span class="mui-tab-label">SMS</span>
</a>
<a class="mui-tab-item" href="#">
<span class="mui-icon mui-icon-map"></span>
<span class="mui-tab-label">Map</span>
</a>
</nav>
<div class="mui-bar mui-bar-standard mui-bar-header-secondary">
<button id="addRow" class="mui-btn mui-btn-primary mui-btn-block">
增加50个列表项
</button>
</div>
<div id="wrapper" class="mui-content mui-iscroll-wrapper">
<div class="mui-iscroll">
<ul class="mui-table-view mui-table-view-chevron"></ul>
</div>
</div>
<script src="../js/iscroll.js"></script>
<script>
(function($) {
$.ready(function() {
document.addEventListener('touchmove', function(e) {
e.preventDefault();
}, false);
var myScroll = new iScroll('wrapper', {
hScroll : false,
bounce : false,
lockDirection : true,
useTransform : true,
useTransition : false,
checkDOMChanges : false,
onBeforeScrollStart : function(e) {
var target = e.target;
while (target.nodeType != 1) {
target = target.parentNode;
if (target.tagName != 'SELECT' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA') {
e.preventDefault();
}
}
}
});
var table = document.body.querySelector('.mui-table-view');
function addRows(count) {
var cells = document.body.querySelectorAll('.mui-table-view-cell');
var frag = document.createDocumentFragment();
for (var i = cells.length, len = i + count; 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>';
frag.appendChild(li);
}
table.appendChild(frag);
//refresh
myScroll.refresh();
}
addRows(100);
document.getElementById('addRow').addEventListener('tap', function() {
addRows(50);
alert('增加成功，共计' + document.body.querySelectorAll('.mui-table-view-cell').length + '个列表项');
});
});
})(mui);
</script>
</body>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/list-triplex-row.html deleted 100644 → 0
View file @ 86f3bac6
<!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>
<link rel="stylesheet" href="../css/oa.css">
<style>
.mui-table h4,.mui-table h5,.mui-table .mui-h5,.mui-table .mui-h6,.mui-table p{
margin-top: 0;
}
.mui-table h4{
line-height: 21px;
font-weight: 500;
}
.mui-table .oa-icon{
position: absolute;
right:0;
bottom: 0;
}
.mui-table .oa-icon-star-filled{
color:#f14e41;
}
</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">
<ul class="mui-table-view mui-table-view-striped mui-table-view-condensed">
<li class="mui-table-view-cell">
<div class="mui-table">
<div class="mui-table-cell mui-col-xs-10">
<h4 class="mui-ellipsis">信息化推进办公室张彦合同付款信息化</h4>
<h5>申请人：李四</h5>
<p class="mui-h6 mui-ellipsis">Hi，李明明，申请交行信息卡，100元等你拿，李明明，申请交行信息卡，100元等你拿，</p>
</div>
<div class="mui-table-cell mui-col-xs-2 mui-text-right">
<span class="mui-h5">12:25</span>
</div>
</div>
</li>
<li class="mui-table-view-cell">
<div class="mui-table">
<div class="mui-table-cell mui-col-xs-10">
<h4 class="mui-ellipsis-2">信息化推进办公室张彦合同付款信息化推进办公室张彦合同付款信息化推进办公室张彦合同付款</h4>
<h5>申请人：李四</h5>
<p class="mui-h6 mui-ellipsis">Hi，李明明，申请交行信息卡，100元等你拿，李明明，申请交行信息卡，100元等你拿，</p>
</div>
<div class="mui-table-cell mui-col-xs-2 mui-text-right">
<span class="mui-h5">12:25</span>
</div>
</div>
</li>
<li class="mui-table-view-cell">
<div class="mui-table">
<div class="mui-table-cell mui-col-xs-10">
<h4 class="mui-ellipsis-2">信息化推进办公室张彦合同付款信息化推进办公室张彦合同付款信息化推进办公室张彦合同付款</h4>
<h5>申请人：李四</h5>
<p class="mui-h6 mui-ellipsis">Hi，李明明，申请交行信息卡，100元等你拿，李明明，申请交行信息卡，100元等你拿，</p>
</div>
<div class="mui-table-cell mui-col-xs-2 mui-text-right">
<span class="mui-h5">12:25</span>
</div>
</div>
</li>
<li class="mui-table-view-cell">
<div class="mui-table">
<div class="mui-table-cell mui-col-xs-10">
<h4 class="mui-ellipsis-2">信息化推进办公室张彦合同付款信息化推进办公室张彦合同付款信息化推进办公室张彦合同付款</h4>
<h5>申请人：李四</h5>
<p class="mui-h6 mui-ellipsis">Hi，李明明，申请交行信息卡，100元等你拿，李明明，申请交行信息卡，100元等你拿，</p>
</div>
<div class="mui-table-cell mui-col-xs-2 mui-text-right">
<span class="mui-h5">12:25</span>
</div>
</div>
</li>
<li class="mui-table-view-cell">
<div class="mui-table">
<div class="mui-table-cell mui-col-xs-10">
<h4 class="mui-ellipsis-2">信息化推进办公室张彦合同付款信息化推进办公室张彦合同付款信息化推进办公室张彦合同付款</h4>
<h5>申请人：李四</h5>
<p class="mui-h6 mui-ellipsis">Hi，李明明，申请交行信息卡，100元等你拿，李明明，申请交行信息卡，100元等你拿，</p>
</div>
<div class="mui-table-cell mui-col-xs-2 mui-text-right">
<span class="mui-h5">12:25</span>
</div>
</div>
</li>
</ul>
</div>
</body>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/list-with-input.html deleted 100644 → 0
View file @ 86f3bac6
<!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-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-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">
Item 1
<button class="mui-btn">
Button
</button>
</li>
<li class="mui-table-view-cell">
Item 2
<button class="mui-btn mui-btn-primary">
Button
</button>
</li>
<li class="mui-table-view-cell">
Item 3
<div class="mui-switch mui-active">
<div class="mui-switch-handle"></div>
</div>
</li>
<li class="mui-table-view-cell">
Item 4
<div class="mui-switch mui-switch-blue mui-switch-mini mui-active">
<div class="mui-switch-handle"></div>
</div>
</li>
<li class="mui-table-view-cell mui-radio mui-left">
<input name="radio" type="radio">Item 5
</li>
<li class="mui-table-view-cell mui-radio mui-left">
<input name="radio" type="radio">Item 6
</li>
<li class="mui-table-view-cell mui-checkbox mui-left">
<input name="checkbox" type="checkbox">Item 7
</li>
<li class="mui-table-view-cell mui-checkbox mui-left">
<input name="checkbox" type="checkbox">Item 8
</li>
</ul>
</div>
</div>
</body>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/modals.html deleted 100644 → 0
View file @ 86f3bac6
<!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-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">Modals</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded">
<a href="#modal" class="mui-btn mui-btn-primary mui-btn-block">Click</a>
</div>
<div id="modal" class="mui-modal">
<header class="mui-bar mui-bar-nav">
<a class="mui-icon mui-icon-close mui-pull-right" href="#modal"></a>
<h1 class="mui-title">Modal</h1>
</header>
<div class="mui-content">
<p class="mui-content-padded">The contents of my modal go here. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/oa-contact-list.html deleted 100644 → 0
View file @ 86f3bac6
<!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>
<style type="text/css">
.mui-content > .mui-table-view:first-child {
margin-top: 0px;
}
</style>
<div class="mui-content">
<ul class="mui-table-view">
<li class="mui-table-view-cell"><a href="#">姓名1</a></li>
<li class="mui-table-view-cell"><a href="#">姓名2</a></li>
<li class="mui-table-view-cell"><a href="#">姓名3</a></li>
<li class="mui-table-view-cell"><a href="#">姓名4</a></li>
<li class="mui-table-view-cell"><a href="#">姓名5</a></li>
<li class="mui-table-view-cell"><a href="#">姓名6</a></li>
<li class="mui-table-view-cell"><a href="#">姓名7</a></li>
<li class="mui-table-view-cell"><a href="#">姓名8</a></li>
<li class="mui-table-view-cell"><a href="#">姓名9</a></li>
<li class="mui-table-view-cell"><a href="#">姓名10</a></li>
<li class="mui-table-view-cell"><a href="#">姓名11</a></li>
<li class="mui-table-view-cell"><a href="#">姓名12</a></li>
<li class="mui-table-view-cell"><a href="#">姓名13</a></li>
<li class="mui-table-view-cell"><a href="#">姓名14</a></li>
<li class="mui-table-view-cell"><a href="#">姓名15</a></li>
<li class="mui-table-view-cell"><a href="#">姓名16</a></li>
<li class="mui-table-view-cell"><a href="#">姓名17</a></li>
<li class="mui-table-view-cell"><a href="#">姓名18</a></li>
<li class="mui-table-view-cell"><a href="#">姓名19</a></li>
<li class="mui-table-view-cell"><a href="#">姓名20</a></li>
</ul>
</div>
<script type="text/javascript" charset="utf-8">
mui.init({optimize:false,swipeBack: true});
</script>
</body>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/oa-contact-main.html deleted 100644 → 0
View file @ 86f3bac6
<!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>
<link rel="stylesheet" href="../css/oa.css">
<style>
.mui-table h4, .mui-table h5, .mui-table .mui-h5, .mui-table .mui-h6, .mui-table p {
margin-top: 0;
}
.mui-table h4 {
line-height: 21px;
font-weight: 500;
}
.mui-table .oa-icon {
position: absolute;
right: 0;
bottom: 0;
}
.mui-table .oa-icon-star-filled {
color: #f14e41;
}
</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 mui-active" href="tabbar.html">
<span class="mui-icon mui-icon-phone"></span>
<span class="mui-tab-label">Phone</span>
</a>
<a class="mui-tab-item" href="tabbar-with-chat.html">
<span class="mui-icon mui-icon-chat"></span>
<span class="mui-tab-label">Chat</span>
</a>
<a class="mui-tab-item" href="tabbar-with-sms.html">
<span class="mui-icon mui-icon-sms"></span>
<span class="mui-tab-label">SMS</span>
</a>
<a class="mui-tab-item" href="tabbar-with-map.html">
<span class="mui-icon mui-icon-map"></span>
<span class="mui-tab-label">Map</span>
</a>
</nav>
<script type="text/javascript">
mui.plusReady(function(){
var webview = plus.webview.currentWebview();
var list = plus.webview.create('oa-contact-list.html', 'oa-list', {top:'45px',bottom:'50px'});
webview.append(list);
});
mui.init({optimize:false,swipeBack: false});
</script>
</body>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/oa-grid.html deleted 100644 → 0
View file @ 86f3bac6
<!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>
<style>
/**grid 自适应代码**/
html, body, .mui-content {
height: 100%;
}
.mui-content > .mui-table-view:first-child {
margin-top: 0px;
}
.mui-content {
position: relative;
}
.mui-grid-view {
position: absolute;
top: 184px;
bottom: 0;
min-height: 330px;
}
.mui-table-view.mui-grid-view .mui-table-view-cell {
height: 33.33333333%;
}
.mui-table-view.mui-grid-view .mui-table-view-cell > a:not(.mui-btn) {
position: absolute;
top: 50%;
margin-top: -50px;
left: 50%;
margin-left: -40px;
}
</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">自适应9宫图</h1>
</header>
<div class="mui-content">
<div style="height:140px;width:100%;background-image:url(../images/muwu.jpg);background-position:center center;"></div>
<ul class="mui-table-view mui-grid-view mui-grid-9">
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-home"></span>
<div class="mui-media-body">
Home
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-sms"><span class="mui-badge">5</span></span>
<div class="mui-media-body">
Email
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-calendar"></span>
<div class="mui-media-body">
Calendar
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-chat"></span>
<div class="mui-media-body">
Chat
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-category"></span>
<div class="mui-media-body">
Sort
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-map"></span>
<div class="mui-media-body">
Map
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-search"></span>
<div class="mui-media-body">
Search
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-phone"></span>
<div class="mui-media-body">
Phone
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-cog"></span>
<div class="mui-media-body">
Setting
</div>
</a>
</li>
</ul>
</div>
</body>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/oa-missives-detail.html deleted 100644 → 0
View file @ 86f3bac6
<!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>
<link rel="stylesheet" href="../css/oa.css">
<style>
.mui-segmented-control{
background-color: #f6f6f6;
border: 0;
}
.mui-segmented-control .mui-control-item{
border: 0;
}
.mui-segmented-control .mui-control-item:active,.mui-segmented-control .mui-control-item.mui-active{
background-color: #f6f6f6;
}
.mui-segmented-control .mui-control-item.mui-active .mui-btn{
color: #fff;
background-color: #ee574f;
border-color: #ee574f;
}
.mui-segmented-control .mui-control-item .mui-block{
color:#a7a7a7;
margin-top: 5px;
}
.mui-h5,.mui-h6{
margin-top: 0;
}
.mui-input-row label{
width: 45%;
}
.oa-mute{
color:#8f8f94;
}
.mui-control-item .mui-block{
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
</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 class="mui-segmented-control">
<a class="mui-control-item mui-active" href="#item1mobile">
<button class="mui-btn mui-fab mui-btn-mini">
<span class="oa-icon oa-icon-pages"></span>
</button>
<span class="mui-block">正文</span>
</a>
<a class="mui-control-item" href="#item2mobile">
<span class="mui-btn mui-fab mui-btn-mini">
<span class="mui-icon mui-icon-search"></span>
</span>
<span class="mui-block">搜索</span>
</a>
<a class="mui-control-item" href="#item3mobile">
<span class="mui-btn mui-fab mui-btn-mini">
<span class="oa-icon oa-icon-gear"></span>
</span>
<span class="mui-block">流程跟踪</span>
</a>
<a class="mui-control-item" href="#item4mobile">
<span class="mui-btn mui-fab mui-btn-mini">
<span class="oa-icon oa-icon-list"></span>
</span>
<span class="mui-block">意见列表</span>
</a>
</div>
<div class="mui-content-padded">
<span id="item1mobile" class="mui-control-content mui-active">Item 1</span>
<span id="item2mobile" class="mui-control-content">Item 2</span>
<span id="item3mobile" class="mui-control-content">Item 3</span>
<span id="item4mobile" class="mui-control-content">Item 4</span>
</div>
</div>
</body>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/offcanvas-left-plus-main.html deleted 100644 → 0
View file @ 86f3bac6
<!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>
<div class="mui-off-canvas-wrap mui-draggable">
<div class="mui-inner-wrap">
<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-icon mui-icon-close 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>
<!-- off-canvas backdrop -->
<div class="mui-off-canvas-backdrop"></div>
</div>
</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.createWindow({
id: 'offcanvas-plus-menu',
url: 'offcanvas-plus-menu.html',
styles: {
left: left,
width: '70%',
zindex: 9998
}
});
if (menu) {
menu.show('none');
}
mui.currentWebview.setStyle({
left: 0
});
});
document.querySelector('.mui-icon-bars').addEventListener('tap', function() {
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
_site/examples/hello-mui/examples/offcanvas-plus-menu.html deleted 100644 → 0
View file @ 86f3bac6
<!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>
<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>
<style type="text/css">
html,body{
background-color: #333;
}
</style>
<script type="text/javascript" charset="utf-8">
mui.init({
swipeBack:false
});
</script>
</body>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/offcanvas-right-plus-main.html deleted 100644 → 0
View file @ 86f3bac6
<!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>
<div class="mui-off-canvas-wrap mui-draggable">
<div class="mui-inner-wrap">
<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-close 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>
</div>
</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.createWindow({
id: 'offcanvas-plus-menu',
url: 'offcanvas-plus-menu.html',
styles: {
left: '30%',
width:'70%',
zindex: 9998
}
});
menu.show('none');
mui.currentWebview.setStyle({left:0});
});
//点击侧滑按钮
document.querySelector('.mui-action-menu').addEventListener('tap', function() {
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
_site/examples/hello-mui/examples/offcanvas-with-left.html deleted 100644 → 0
View file @ 86f3bac6
<!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>
<div class="mui-off-canvas-wrap mui-draggable">
<div class="mui-inner-wrap">
<header class="mui-bar mui-bar-nav">
<a href="#offCanvas" class="mui-icon mui-icon-bars mui-pull-left"></a>
<a class="mui-action-back mui-icon mui-icon-close mui-pull-right"></a>
<h1 class="mui-title">Container with slide menu</h1>
</header>
<aside id="offCanvas" class="mui-off-canvas-left">
<button id="offCanvasHide" class="mui-btn mui-btn-primary mui-btn-block">
关闭侧滑菜单(js call)
</button>
<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>
</ul>
</aside>
<div class="mui-content">
<button id="offCanvasShow" class="mui-btn mui-btn-primary mui-btn-block">
显示侧滑菜单(js call)
</button>
<ul class="mui-table-view mui-table-view-chevron">
<li id="switch" class="mui-table-view-cell">
整体滑动
<div class="mui-switch mui-active">
<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 class="mui-slider">
<div class="mui-slider-group mui-slider-loop">
<div class="mui-slider-item">
<a href="#">
<img src="../images/yuantiao.jpg">
</a>
</div>
<div class="mui-slider-item">
<a href="#">
<img src="../images/shuijiao.jpg">
</a>
</div>
<div class="mui-slider-item">
<a href="#">
<img src="../images/muwu.jpg">
</a>
</div>
<div class="mui-slider-item">
<a href="#">
<img src="../images/cbd.jpg">
</a>
</div>
<div class="mui-slider-item">
<a href="#">
<img src="../images/yuantiao.jpg">
</a>
</div>
<div class="mui-slider-item">
<a href="#">
<img src="../images/shuijiao.jpg">
</a>
</div>
</div>
<div class="mui-slider-indicator">
<div class="mui-indicator mui-active"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
</div>
</div>
</div>
<!-- off-canvas backdrop -->
<div class="mui-off-canvas-backdrop"></div>
</div>
</div>
<script>
mui.init({
swipeBack: false,
});
var offCanvasContainer = document.querySelector('.mui-off-canvas-wrap');
var offCanvasInnerContainer = offCanvasContainer.querySelector('.mui-inner-wrap');
var offCanvas = mui('#offCanvas');
document.getElementById('switch').addEventListener('toggle', function(event) {
if (event.detail.isActive) { //整体滑动时，侧滑菜单在inner-wrap内
offCanvasInnerContainer.insertBefore(offCanvas[0], offCanvasInnerContainer.firstElementChild);
} else { //仅主内容滑动时，侧滑菜单在off-canvas-wrap内
offCanvasContainer.insertBefore(offCanvas[0], offCanvasContainer.firstElementChild)
}
});
document.getElementById('offCanvasShow').addEventListener('tap', function() {
//offCanvas.offCanvas('toggle')//toggle or show;
offCanvas.offCanvas('show');
});
document.getElementById('offCanvasHide').addEventListener('tap', function() {
//offCanvas.offCanvas('toggle')//toggle or hide;
offCanvas.offCanvas('hide');
});
</script>
</body>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/offcanvas-with-right.html deleted 100644 → 0
View file @ 86f3bac6
<!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>
<div class="mui-off-canvas-wrap mui-draggable">
<div class="mui-inner-wrap">
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<a href="#offCanvas" class="mui-icon mui-icon-bars mui-pull-right"></a>
<h1 class="mui-title">Container with slide menu(right)</h1>
</header>
<aside id="offCanvas" class="mui-off-canvas-right">
<button id="offCanvasHide" class="mui-btn mui-btn-primary mui-btn-block">
关闭侧滑菜单(js call)
</button>
<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>
</ul>
</aside>
<div class="mui-content">
<button id="offCanvasShow" class="mui-btn mui-btn-primary mui-btn-block">
显示侧滑菜单(js call)
</button>
<ul class="mui-table-view mui-table-view-chevron">
<li id="switch" class="mui-table-view-cell">
整体滑动
<div 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/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>
<!-- off-canvas backdrop -->
<div class="mui-off-canvas-backdrop"></div>
</div>
</div>
<script>
mui.init({
swipeBack : false,
});
var offCanvasContainer = document.querySelector('.mui-off-canvas-wrap');
var offCanvasInnerContainer = offCanvasContainer.querySelector('.mui-inner-wrap');
var offCanvas = mui('#offCanvas');
document.getElementById('switch').addEventListener('toggle', function(event) {
if (event.detail.isActive) {//整体滑动时，侧滑菜单在inner-wrap内
offCanvasInnerContainer.insertBefore(offCanvas[0], offCanvasInnerContainer.firstElementChild);
} else {//仅主内容滑动时，侧滑菜单在off-canvas-wrap内
offCanvasContainer.insertBefore(offCanvas[0], offCanvasContainer.firstElementChild)
}
});
document.getElementById('offCanvasShow').addEventListener('tap', function() {
//offCanvas.offCanvas('toggle')//toggle or show;
offCanvas.offCanvas('show');
});
document.getElementById('offCanvasHide').addEventListener('tap', function() {
//offCanvas.offCanvas('toggle')//toggle or hide;
offCanvas.offCanvas('hide');
});
</script>
</body>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/pagination.html deleted 100644 → 0
View file @ 86f3bac6
<!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-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">Pagination</h1>
</header>
<div class="mui-content">
<h5 class="mui-content-padded">分页(默认尺寸)</h5>
<div class="mui-content-padded">
<ul class="mui-pagination">
<li class="mui-previous mui-disabled">
<a href="#">
&laquo;
</a>
</li>
<li class="mui-active">
<a href="#">
1
</a>
</li>
<li>
<a href="#">
2
</a>
</li>
<li>
<a href="#">
3
</a>
</li>
<li>
<a href="#">
4
</a>
</li>
<li>
<a href="#">
5
</a>
</li>
<li class="mui-next">
<a href="#">
&raquo;
</a>
</li>
</ul>
</div>
<h5 class="mui-content-padded">分页(大尺寸)</h5>
<div class="mui-content-padded">
<ul class="mui-pagination mui-pagination-lg">
<li class="mui-previous">
<a href="#">
&laquo;
</a>
</li>
<li>
<a href="#">
1
</a>
</li>
<li>
<a href="#">
2
</a>
</li>
<li>
<a href="#">
3
</a>
</li>
<li>
<a href="#">
4
</a>
</li>
<li class="mui-active">
<a href="#">
5
</a>
</li>
<li class="mui-next mui-disabled">
<a href="#">
&raquo;
</a>
</li>
</ul>
</div>
<h5 class="mui-content-padded">分页(小尺寸)</h5>
<div class="mui-content-padded">
<ul class="mui-pagination mui-pagination-sm">
<li class="mui-previous">
<a href="#">
&laquo;
</a>
</li>
<li>
<a href="#">
1
</a>
</li>
<li>
<a href="#">
2
</a>
</li>
<li class="mui-active">
<a href="#">
3
</a>
</li>
<li>
<a href="#">
4
</a>
</li>
<li>
<a href="#">
5
</a>
</li>
<li class="mui-next">
<a href="#">
&raquo;
</a>
</li>
</ul>
</div>
<h5 class="mui-content-padded">翻页(默认)</h5>
<div class="mui-content-padded">
<ul class="mui-pager">
<li>
<a href="#">
上一页
</a>
</li>
<li>
<a href="#">
下一页
</a>
</li>
</ul>
</div>
<h5 class="mui-content-padded">翻页(对齐)</h5>
<div class="mui-content-padded">
<ul class="mui-pager">
<li class="mui-previous">
<a href="#">
上一页
</a>
</li>
<li class="mui-next">
<a href="#">
下一页
</a>
</li>
</ul>
</div>
<h5 class="mui-content-padded">翻页(禁用)</h5>
<div class="mui-content-padded">
<ul class="mui-pager">
<li class="mui-disabled">
<span> 上一页 </span>
</li>
<li>
<a href="#">
下一页
</a>
</li>
</ul>
</div>
</div>
<script>
(function($) {
$('.mui-pagination').on('tap', 'a', function() {
var li = this.parentNode;
var classList = li.classList;
if (!classList.contains('mui-active') && !classList.contains('mui-disabled')) {
var active = li.parentNode.querySelector('.mui-active');
if (classList.contains('mui-previous')) {//previous
if (active) {
var previous = active.previousElementSibling;
console.log('previous', previous);
if (previous && !previous.classList.contains('mui-previous')) {
$.trigger(previous.querySelector('a'), 'tap');
} else {
classList.add('mui-disabled');
}
}
} else if (classList.contains('mui-next')) {//next
if (active) {
var next = active.nextElementSibling;
if (next && !next.classList.contains('mui-next')) {
$.trigger(next.querySelector('a'), 'tap');
} else {
classList.add('mui-disabled');
}
}
} else {//page
active.classList.remove('mui-active');
classList.add('mui-active');
var page = parseInt(this.innerText);
var previousPageElement = li.parentNode.querySelector('.mui-previous');
var nextPageElement = li.parentNode.querySelector('.mui-next');
previousPageElement.classList.remove('mui-disabled');
nextPageElement.classList.remove('mui-disabled');
if (page <= 1) {
previousPageElement.classList.add('mui-disabled');
} else if (page >= 5) {
nextPageElement.classList.add('mui-disabled');
}
}
}
});
})(mui);
</script>
<style type="text/css">
.mui-content{
padding: 10px;
}
</style>
</body>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/popovers-with-actionsheet.html deleted 100644 → 0
View file @ 86f3bac6
<!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-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">Popovers with action sheet</h1>
</header>
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item" href="#mark">
Mark
</a>
<a class="mui-tab-item" href="#flagged">
Flagged
</a>
<a class="mui-tab-item" href="#">
</a>
<a class="mui-tab-item" href="#">
</a>
</nav>
<div id="mark" class="mui-popover mui-popover-action mui-popover-bottom">
<div class="mui-content-padded">
<button class="mui-btn mui-btn-primary mui-btn-block">As Read</button>
<button class="mui-btn mui-btn-positive mui-btn-block">As Unread</button>
<button class="mui-btn mui-btn-negative mui-btn-block">As Junk Mail</button>
<a class="mui-btn mui-btn-block" href="#mark">Cancel</a>
</div>
</div>
<div id="flagged" class="mui-popover mui-popover-action mui-popover-bottom">
<ul class="mui-table-view">
<li class="mui-table-view-cell"><a href="#">Red</a></li>
<li class="mui-table-view-cell"><a href="#">Orange</a></li>
<li class="mui-table-view-cell"><a href="#">Yellow</a></li>
<li class="mui-table-view-cell"><a href="#">Green</a></li>
<li class="mui-table-view-cell"><a href="#">Blue</a></li>
<li class="mui-table-view-cell"><a href="#">Purple</a></li>
<li class="mui-table-view-cell"><a href="#">Gray</a></li>
</ul>
</div>
</body>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/popovers-with-cross-webviews-popover.html deleted 100644 → 0
View file @ 86f3bac6
<!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>
<div class="mui-content">
<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>
<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>
mui.init({
back : function() {
var webview = plus.webview.currentWebview();
var parent = webview.parent();
if (parent) {
parent.hide('auto');
return false;
}
}
})
document.addEventListener('plus:togglePopover', function() {
$('#popover').popover('toggle');
});
</script>
</body>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/popovers-with-cross-webviews.html deleted 100644 → 0
View file @ 86f3bac6
<!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-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
$.fire(popover, 'plus:togglePopover');
});
});
</script>
</body>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/popovers-with-js-call.html deleted 100644 → 0
View file @ 86f3bac6
<!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>
<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() {
$('#popover').popover('show', {left: 100, right: 200});
//$('#popover').popover('toggle');//也可以直接调用toggle。该方法自动识别是显示还是隐藏
});
document.getElementById('closePopover').addEventListener('tap', function() {
$('#popover').popover('hide');
//$('#popover').popover('toggle');//也可以直接调用toggle。该方法自动识别是显示还是隐藏
});
</script>
</body>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/popovers.html deleted 100644 → 0
View file @ 86f3bac6
<!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>
<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 href="#popover" class="mui-btn mui-btn-primary mui-btn-block">Click</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>
</body>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/preload-mixwebview-content.html deleted 100644 → 0
View file @ 86f3bac6
<!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>
<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">
Item 1 <span class="mui-badge">14</span>
</li>
<li class="mui-table-view-cell">
Item 2 <span class="mui-badge">1</span>
</li>
<li class="mui-table-view-cell">
Item 3 <span class="mui-badge">5</span>
</li>
</ul>
</div>
</div>
<script>
mui.init({
back : function() {//建议5+可以在创建窗体时，允许传进去自定义参数，然后获取该窗体可以访问该参数，这样mui就可以识别出是lazyload窗口。而不用自己写了
if (window.plus) {
return {
preload : true
};
}
}
});
</script>
</body>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/preload-mixwebview-main.html deleted 100644 → 0
View file @ 86f3bac6
<!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-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">Preload MixWebview</h1>
</header>
<script>
mui.init({
back : function() {//建议5+可以在创建窗体时，允许传进去自定义参数，然后获取该窗体可以访问该参数，这样mui就可以识别出是lazyload窗口。而不用自己写了
if (window.plus) {
return {
preload : true
};
}
}
});
</script>
</body>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/preload-webview-with-openwindow.html deleted 100644 → 0
View file @ 86f3bac6
<!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-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">Preload Webview with openWindow</h1>
</header>
<div class="mui-content"></div>
<script>
mui.init({
back : function() {//建议5+可以在创建窗体时，允许传进去自定义参数，然后获取该窗体可以访问该参数，这样mui就可以识别出是lazyload窗口。而不用自己写了
if (window.plus) {
content.innerHTML = '';
//隐藏后清空内容区
return {
preload : true
};
}
}
});
var content = document.querySelector('.mui-content');
function preload_webview(params) {
params = JSON.parse(params || JSON.stringify({
count : 10
}));
var nWaiting;
if (plus) {
//TODO 5+没有提供show动画之后的callback。所以这里暂时延迟400ms来显示动画
setTimeout(function() {
nWaiting = plus.nativeUI.showWaiting();
}, 400);
}
setTimeout(function() {
var html = [];
html.push('<div class="mui-card"><ul class="mui-table-view">');
for (var i = 0; i < params.count; i++) {
html.push('<li class="mui-table-view-cell"><a class="mui-navigate-right">Item ' + (i + 1) + '</a></li>');
}
html.push('</ul></div>');
content.innerHTML = html.join('');
if (nWaiting) {
nWaiting.close();
}
}, 2000);
}
</script>
</body>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/preload-webview.html deleted 100644 → 0
View file @ 86f3bac6
<!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-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">Preload Webview with init</h1>
</header>
<div class="mui-content"></div>
<script>
mui.init({
back : function() {//建议5+可以在创建窗体时，允许传进去自定义参数，然后获取该窗体可以访问该参数，这样mui就可以识别出是lazyload窗口。而不用自己写了
if (window.plus) {
content.innerHTML = '';
//隐藏后清空内容区
return {
preload : true
};
}
}
});
var content = document.querySelector('.mui-content');
function preload_webview(params) {
params = JSON.parse(params || JSON.stringify({
count : 10
}));
var nWaiting;
if (plus) {
//TODO 5+没有提供show动画之后的callback。所以这里暂时延迟400ms来显示动画
setTimeout(function() {
nWaiting = plus.nativeUI.showWaiting();
}, 400);
}
setTimeout(function() {
var html = [];
html.push('<div class="mui-card"><ul class="mui-table-view">');
for (var i = 0; i < params.count; i++) {
html.push('<li class="mui-table-view-cell"><a class="mui-navigate-right">Item ' + (i + 1) + '</a></li>');
}
html.push('</ul></div>');
content.innerHTML = html.join('');
if (nWaiting) {
nWaiting.close();
}
}, 2000);
}
</script>
</body>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/preload.html deleted 100644 → 0
View file @ 86f3bac6
<!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-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">预加载</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded">
<a id="M_Init" class="mui-btn mui-btn-primary mui-btn-block">
mui.init webviews
</a>
<a id="M_OpenWindowByOptions" class="mui-btn mui-btn-primary mui-btn-block">
mui.openWindow webviews
</a>
<a id="M_InitMix" class="mui-btn mui-btn-primary mui-btn-block">
mui.init mixwebviews
</a>
</div>
</div>
<script>
//通过init传递当前页面要打开的窗口配置(支持预加载窗口和非预加载窗口，后续只需openWindow传递该窗口id即可)
mui.init({
preloadLimit : 10, //预加载窗口的数量限制(默认为10，超出数量后，先进先出，始终仅保持10个隐藏状态的预加载窗口)
preloadPages : [//指定webview列表
{
//两个webview合成的预加载
id : 'preloadMixWebview', //可选ID，未设置的话使用URL作为窗口ID
url : 'preload-mixwebview-main.html',
subpages : [{
id : 'preloadMixWebviewContent',
url : 'preload-mixwebview-content.html',
styles : {
top : '45px'
},
}]
}, {
id : 'preloadWebview', //可选ID，未设置的话使用URL作为窗口ID
url : 'preload-webview.html',
styles : {
},
afterShowMethodName : 'preload_webview', //跨webview的js call,不应该有这种东西，应该5+触发afterShow，预加载窗口监听实现
}]
});
//点击打开mix窗口(两个webview合成的预加载窗口)
document.getElementById('M_InitMix').addEventListener('tap', function() {
//直接根据窗口ID，打开之前已经设置了的窗口
$.openWindow('preloadMixWebview', {
params : {
count : 10
}
});
});
//点击打开窗口
document.getElementById('M_Init').addEventListener('tap', function() {
//直接根据窗口ID，打开之前已经设置了的窗口
$.openWindow('preloadWebview', {
params : {
count : 10
}
});
});
document.getElementById('M_OpenWindowByOptions').addEventListener('tap', function() {
//通过openWindow传递要打开的窗口参数(
//非预加载窗口打开,会自动缓存该页面的配置信息,后续可直接使用ID打开
//预加载窗口,本次打开非预加载，以后打开为预加载
$.openWindow({
id : 'preloadWebviewByOpenWindow',
url : 'preload-webview-with-openwindow.html',
preload : true,
styles : {
},
params : {
count : 10
},
afterShowMethodName : 'preload_webview'//跨webview的js call,不应该有这种东西，应该5+触发afterShow，预加载窗口监听实现
});
});
</script>
</body>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/pull-refresh-content-custom.html deleted 100644 → 0
View file @ 86f3bac6
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</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, .mui-content {
background-color: #efeff4;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="HandheldFriendly" content="true"/>
<meta name="MobileOptimized" content="320"/>
<title>Hello H5+</title>
<script type="text/javascript" charset="utf-8">
var ws=null,wo=null;
// 扩展API加载完毕，现在可以正常调用扩展API
function plusReady(){
// 获取自身窗口
ws=plus.webview.currentWebview();
wo=ws.opener();
}
// 判断扩展API是否准备，否则监听"plusready"事件
if(window.plus){
plusReady();
}else{
document.addEventListener("plusready",plusReady,false);
}
// DOM构建完成获取列表元素
var list=null;
document.addEventListener("DOMContentLoaded",function(){
list=document.getElementById("list");
});
// 刷新页面
function onRefresh(){
setTimeout(function(){
if(list){
var item=document.createElement("li");
item.innerHTML="<span>New Item "+(new Date())+"</span>";
list.insertBefore(item,list.firstChild);
}
ws.endPullToRefresh();
wo.evalJS("pullReset()");
},2000);
}
</script>
<link rel="stylesheet" href="../css/common.css" type="text/css" charset="utf-8"/>
<style type="text/css">
li {
padding: 1em;
border-bottom: 1px solid #eaeaea;
}
li:active {
background: #f4f4f4;
}
</style>
</head>
<body>
<ul id="list" style="list-style:none;margin:0;padding:0;">
<li><span onclick="alert('ok');">Initializ List Item 1</span></li>
<li><span>Initializ List Item 2</span></li>
<li><span>Initializ List Item 3</span></li>
<li><span>Initializ List Item 4</span></li>
<li><span>Initializ List Item 5</span></li>
<li><span>Initializ List Item 6</span></li>
<li><span>Initializ List Item 7</span></li>
<li><span>Initializ List Item 8</span></li>
<li><span>Initializ List Item 9</span></li>
<li><span>Initializ List Item 10</span></li>
</ul>
</body>
</html>
</body>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/pulldown-and-pullup.html deleted 100644 → 0
View file @ 86f3bac6
<!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-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">Pulldown and pullup</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded">
<ul class="mui-table-view mui-table-view-chevron">
<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>
mui.init({
swipeBack:false,
optimize: false,
pullRefresh: {
container: '.mui-content-padded',
down: {
contentdown: '下拉可以刷新',
contentover: '释放立即刷新',
contentrefresh: '正在刷新...',
callback:pulldownRefresh
},
up: {
contentdown: '上拉显示更多',
contentover: '释放立即刷新',
contentrefresh: '正在刷新...',
callback: pullupRefresh
}
}
});
/**
* 下拉刷新具体业务实现
*/
function pulldownRefresh(callback){
setTimeout(function() {
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++) {
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);
}
callback(); //refresh completed
}, 1000);
}
/**
* 上拉加载具体业务实现
*/
function pullupRefresh(callback){
setTimeout(function() {
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++) {
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);
}
callback(); //refresh completed
}, 1000);
}
</script>
</body>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/pulldown-with-plus-content-custom.html deleted 100644 → 0
View file @ 86f3bac6
<!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>
<script type="text/javascript" charset="utf-8">
var ws = null,
wo = null;
// 扩展API加载完毕，现在可以正常调用扩展API
function plusReady() {
// 获取自身窗口
ws = plus.webview.currentWebview();
wo = ws.opener();
}
// 判断扩展API是否准备，否则监听"plusready"事件
if (window.plus) {
plusReady();
} else {
document.addEventListener("plusready", plusReady, false);
}
// DOM构建完成获取列表元素
var list = null;
document.addEventListener("DOMContentLoaded", function() {
list = document.getElementById("list");
});
// 刷新页面
function onRefresh() {
setTimeout(function() {
if (list) {
var item = document.createElement("li");
item.innerHTML = "<span>New Item " + (new Date()) + "</span>";
list.insertBefore(item, list.firstChild);
}
ws.endPullToRefresh();
wo.evalJS("pullReset()");
}, 2000);
setTimeout(function() {
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++) {
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);
}
ws.endPullToRefresh();
wo.evalJS("pullReset()");
}, 1000);
}
</script>
<div class="mui-content">
<div class="mui-content-padded">
<ul class="mui-table-view mui-table-view-chevron">
<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>
</body>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/pulldown-with-plus-main-custom.html deleted 100644 → 0
View file @ 86f3bac6
<!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>
<script type="text/javascript" charset="utf-8">
var list;
// 扩展API加载完毕，现在可以正常调用扩展API
function init() {
list = plus.webview.create("pulldown-with-plus-content-custom.html", "pulldown-with-plus-content-custom.html", {
top: "48px",
bottom: "0px",
bounce: "vertical"
});
plus.webview.currentWebview().append(list);
// 实现列表可下拉刷新
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("onRefresh();");
pull3();
break;
default:
break;
}
}
function pull1() {
etext.textContent = "下拉可刷新";
eicon.style.webkitTransition = "all 0.3s ease-in";
eicon.style.webkitTransform = "rotate(0deg)";
}
function pull2() {
etext.textContent = "松开可刷新";
eicon.style.webkitTransition = "all 0.3s ease-in";
eicon.style.webkitTransform = "rotate(180deg)";
}
function pull3() {
etext.textContent = "正在刷新...";
eicon.src = "../images/pull_fresh.png";
eicon.style.webkitAnimation = "spin 1s infinite linear";
}
function pullReset() {
etext.textContent = "下拉可刷新";
eicon.src = "../images/pull_arrow.png";
eicon.style.webkitTransition = "";
eicon.style.webkitTransform = "";
eicon.style.webkitAnimation = "";
}
</script>
<style type="text/css">
#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>
<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="text-align:center;height:44px;line-height:44px;">
<div id="pull">
<img id="icon" src="../images/pull_arrow.png" />
</div><font id="text">下拉可刷新</font>
</div>
</div>
</body>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/pullrefresh-down-content.html deleted 100644 → 0
View file @ 86f3bac6
<!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>
<div class="mui-content">
<div class="mui-content-padded">
<ul id='list' class="mui-table-view mui-table-view-chevron">
<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>
mui.init({
pullRefresh : {
container: '#list',
down : {
callback :pulldownRefresh
}
}
});
function pulldownRefresh(callback) {
setTimeout(function() {
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++) {
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);
}
//refresh completed 这行代码必须调用
callback();
}, 1000);
}
</script>
</body>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/pullrefresh-down-main.html deleted 100644 → 0
View file @ 86f3bac6
<!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-back mui-icon mui-icon-left mui-pull-left"></a>
<h1 class="mui-title">下拉刷新</h1>
</header>
<script>
mui.init({
subpages : [{
id : 'pullrefresh-down-content',
url : 'pullrefresh-down-content.html',
styles : {
top : '48px'
}
}]
});
</script>
</body>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/pullup.html deleted 100644 → 0
View file @ 86f3bac6
<!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-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">Pullup</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded">
<ul class="mui-table-view mui-table-view-chevron">
<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>
</ul>
</div>
</div>
<script>
mui.init({
swipeBack: false,
pullRefresh: {
container: '.mui-content-padded',
up: {
contentdown: '上拉显示更多',
contentover: '释放立即刷新',
contentrefresh: '正在刷新...',
callback: pullupRefresh
}
}
});
/**
* 上拉加载具体业务实现
*/
function pullupRefresh(callback) {
setTimeout(function() {
callback(); //refresh completed
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++) {
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);
}
</script>
</body>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/radio.html deleted 100644 → 0
View file @ 86f3bac6
<!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-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">单选框（Radio）</h1>
</header>
<div class="mui-content">
<h5 class="mui-content-padded">图标左对齐</h5>
<div class="mui-card">
<form class="mui-input-group">
<div class="mui-input-row mui-radio mui-left">
<label>Radio</label>
<input name="radio1" type="radio">
</div>
<div class="mui-input-row mui-radio mui-left">
<label>Radio</label>
<input name="radio1" type="radio" checked>
</div>
</form>
</div>
<h5 class="mui-content-padded">图标右对齐</h5>
<div class="mui-card">
<form class="mui-input-group">
<div class="mui-input-row mui-radio">
<label>Radio</label>
<input name="radio1" type="radio">
</div>
<div class="mui-input-row mui-radio">
<label>Radio</label>
<input name="radio1" type="radio" checked>
</div>
</form>
</div>
</div>
</body>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/range.html deleted 100644 → 0
View file @ 86f3bac6
<!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>
<style>
h5{
padding-top: 15px;
}
.field-contain label{
width: auto;
padding-right: 0;
}
.field-contain input[type='text']{
width: 40px;
height: 30px;
padding: 5px 0;
float: none;
text-align: center;
}
</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">滑块（range）</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded">
<h5 style='margin-top:35px;'>label+输入框+滑块：</h5>
<div class="mui-input-row mui-input-range field-contain">
<div style="float:left">
<label >滑块：</label>
<input type="text" id='field-range-input' value='60'>
</div>
<div style="margin-left:121px;">
<input type="range" id='field-range' value="60" min="0" max="100" />
</div>
</div>
<h5>label+滑块：<span id='inline-range-val'>20</span></h5>
<div class="mui-input-row mui-input-range">
<label>滑块：</label>
<input type="range" id='inline-range' value="20" min="0" max="100" >
</div>
<h5>整行滑块：<span id='block-range-val'>50</span></h5>
<div class="mui-input-row mui-input-range">
<input type="range" id='block-range' value="50" min="0" max="100" >
</div>
</div>
</div>
<script>
//监听input事件，获取range的value值，也可以直接element.value获取该range的值
var rangeList = document.querySelectorAll('input[type="range"]');
for(var i=0,len=rangeList.length;i<len;i++){
rangeList[i].addEventListener('input',function(){
if(this.id.indexOf('field')>=0){
document.getElementById(this.id+'-input').value = this.value;
}else{
document.getElementById(this.id+'-val').innerHTML = this.value;
}
});
}
document.getElementById('field-range-input').addEventListener('input',function(){
document.getElementById('field-range').value = this.value;
});
</script>
</body>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/slider-default.html deleted 100644 → 0
View file @ 86f3bac6
<!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-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 mui-table-view-chevron">
<li id="switch" class="mui-table-view-cell">
定时轮播
<div class="mui-switch">
<div class="mui-switch-handle"></div>
</div>
</li>
</ul>
<div id="slider" class="mui-slider">
<div class="mui-slider-group mui-slider-loop">
<div class="mui-slider-item">
<a href="#">
<img src="../images/yuantiao.jpg">
</a>
</div>
<div class="mui-slider-item">
<a href="#">
<img src="../images/shuijiao.jpg">
</a>
</div>
<div class="mui-slider-item">
<a href="#">
<img src="../images/muwu.jpg">
</a>
</div>
<div class="mui-slider-item">
<a href="#">
<img src="../images/cbd.jpg">
</a>
</div>
<div class="mui-slider-item">
<a href="#">
<img src="../images/yuantiao.jpg">
</a>
</div>
<div class="mui-slider-item">
<a href="#">
<img src="../images/shuijiao.jpg">
</a>
</div>
</div>
<div class="mui-slider-indicator">
<div class="mui-indicator mui-active"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
</div>
</div>
</div>
<script type="text/javascript" charset="utf-8">
var slider = mui("#slider");
document.getElementById("switch").addEventListener('toggle', function(e) {
if (e.detail.isActive) {
slider.slider({
slideshowDelay: 5000
});
} else {
slider.slider({
slideshowDelay: 0
});
}
});
</script>
</body>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/slider-table-default.html deleted 100644 → 0
View file @ 86f3bac6
<!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-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">图文表格</h1>
</header>
<div class="mui-content" style="background-color:#fff">
<h5 style="background-color:#efeff4">慢生活</h5>
<ul class="mui-table-view mui-grid-view">
<li class="mui-table-view-cell mui-media mui-col-xs-6">
<a href="#">
<img class="mui-media-object" src="../images/shuijiao.jpg">
<div class="mui-media-body">幸福就是可以一起睡觉</div></a></li>
<li class="mui-table-view-cell mui-media mui-col-xs-6">
<a href="#">
<img class="mui-media-object" src="../images/muwu.jpg">
<div class="mui-media-body">想要一间这样的木屋，静静的喝咖啡</div></a></li>
<li class="mui-table-view-cell mui-media mui-col-xs-6">
<a href="#"><img class="mui-media-object" src="../images/cbd.jpg">
<div class="mui-media-body">Color of SIP CBD</div></a></li>
<li class="mui-table-view-cell mui-media mui-col-xs-6">
<a href="#">
<img class="mui-media-object" src="../images/yuantiao.jpg">
<div class="mui-media-body">静静看这世界</div></a></li>
</ul>
</div>
<style>
h5{
padding-top: 8px;
padding-bottom: 8px;
text-indent: 12px;
}
.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body{
font-size: 15px;
margin-top:8px;
color: #333;
</style>
</style>
</body>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/slider-table-pagination.html deleted 100644 → 0
View file @ 86f3bac6
<!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-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">左右滑动分页</h1>
</header>
<div class="mui-content">
<div class="mui-slider">
<div class="mui-slider-group mui-slider-loop">
<div class="mui-slider-item">
<ul class="mui-table-view mui-grid-view">
<li class="mui-table-view-cell mui-media mui-col-xs-6"><a href="#"><img class="mui-media-object" src="../images/cbd.jpg">
<div class="mui-media-body">Color of SIP CBD</div></a></li>
<li class="mui-table-view-cell mui-media mui-col-xs-6"><a href="#"><img class="mui-media-object" src="../images/yuantiao.jpg">
<div class="mui-media-body">静静看这世界</div></a></li>
</ul>
</div>
<div class="mui-slider-item">
<ul class="mui-table-view mui-grid-view">
<li class="mui-table-view-cell mui-media mui-col-xs-6"><a href="#"><img class="mui-media-object" src="../images/shuijiao.jpg">
<div class="mui-media-body">幸福就是可以一起睡觉</div></a></li>
<li class="mui-table-view-cell mui-media mui-col-xs-6"><a href="#"><img class="mui-media-object" src="../images/muwu.jpg">
<div class="mui-media-body">想要一间这样的木屋，静静的喝咖啡</div></a></li>
</ul>
</div>
<div class="mui-slider-item">
<ul class="mui-table-view mui-grid-view">
<li class="mui-table-view-cell mui-media mui-col-xs-6"><a href="#"><img class="mui-media-object" src="../images/cbd.jpg">
<div class="mui-media-body">Color of SIP CBD</div></a></li>
<li class="mui-table-view-cell mui-media mui-col-xs-6"><a href="#"><img class="mui-media-object" src="../images/yuantiao.jpg">
<div class="mui-media-body">静静看这世界</div></a></li>
</ul>
</div>
<div class="mui-slider-item">
<ul class="mui-table-view mui-grid-view">
<li class="mui-table-view-cell mui-media mui-col-xs-6"><a href="#"><img class="mui-media-object" src="../images/shuijiao.jpg">
<div class="mui-media-body">幸福就是可以一起睡觉</div></a></li>
<li class="mui-table-view-cell mui-media mui-col-xs-6"><a href="#"><img class="mui-media-object" src="../images/muwu.jpg">
<div class="mui-media-body">想要一间这样的木屋，静静的喝咖啡</div></a></li>
</ul>
</div>
</div>
<div class="mui-slider-indicator" style="position: static;background-color: #fff;">
<span class="mui-action mui-action-previous mui-icon mui-icon-left-nav"></span>
<div class="mui-number">
<span>1</span> / 2
</div>
<span class="mui-action mui-action-next mui-icon mui-icon-right"></span>
</div>
</div>
</div>
<script>
mui.init({
swipeBack : false
});
</script>
</body>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/slider-with-title.html deleted 100644 → 0
View file @ 86f3bac6
<!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-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 mui-table-view-chevron">
<li id="switch" class="mui-table-view-cell">
定时轮播
<div class="mui-switch">
<div class="mui-switch-handle"></div>
</div>
</li>
</ul>
<div id="slider" class="mui-slider">
<div class="mui-slider-group mui-slider-loop">
<div class="mui-slider-item">
<a href="#">
<img src="../images/yuantiao.jpg">
<p class="mui-slider-title">静静看这世界</p>
</a>
</div>
<div class="mui-slider-item">
<a href="#">
<img src="../images/shuijiao.jpg">
<p class="mui-slider-title">幸福就是可以一起睡觉</p>
</a>
</div>
<div class="mui-slider-item">
<a href="#">
<img src="../images/muwu.jpg">
<p class="mui-slider-title">想要一间这样的木屋，静静的喝咖啡</p>
</a>
</div>
<div class="mui-slider-item">
<a href="#">
<img src="../images/cbd.jpg">
<p class="mui-slider-title">Color of SIP CBD</p>
</a>
</div>
<div class="mui-slider-item">
<a href="#">
<img src="../images/yuantiao.jpg">
<p class="mui-slider-title">静静看这世界</p>
</a>
</div>
<div class="mui-slider-item">
<a href="#">
<img src="../images/shuijiao.jpg">
<p class="mui-slider-title">幸福就是可以一起睡觉</p>
</a>
</div>
</div>
<div class="mui-slider-indicator mui-text-right">
<div class="mui-indicator mui-active"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
</div>
</div>
</div>
<script>
var slider = mui("#slider");
document.getElementById("switch").addEventListener('toggle', function(e) {
if (e.detail.isActive) {
slider.slider({
slideshowDelay: 5000
});
} else {
slider.slider({
slideshowDelay: 0
});
}
});
document.getElementById("slider").addEventListener('slide',function(e){
console.log(e.detail.slideNumber);
});
</script>
</body>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/speech.html deleted 100644 → 0
View file @ 86f3bac6
<!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-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
_site/examples/hello-mui/examples/switches.html deleted 100644 → 0
View file @ 86f3bac6
<!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-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">开关（Toggles）</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<span></span>
<div class="mui-switch mui-active">
<div class="mui-switch-handle"></div>
</div>
</li>
<li class="mui-table-view-cell">
<span></span>
<div class="mui-switch">
<div class="mui-switch-handle"></div>
</div>
</li>
<li class="mui-table-view-cell">
<span></span>
<div class="mui-switch mui-switch-mini mui-active ">
<div class="mui-switch-handle"></div>
</div>
</li>
<li class="mui-table-view-cell">
<span></span>
<div class="mui-switch mui-switch-mini">
<div class="mui-switch-handle"></div>
</div>
</li>
<li class="mui-table-view-cell">
<span></span>
<div class="mui-switch mui-switch-blue mui-active">
<div class="mui-switch-handle"></div>
</div>
</li>
<li class="mui-table-view-cell">
<span></span>
<div class="mui-switch mui-switch-blue">
<div class="mui-switch-handle"></div>
</div>
</li>
<li class="mui-table-view-cell">
<span></span>
<div class="mui-switch mui-switch-blue mui-switch-mini mui-active">
<div class="mui-switch-handle"></div>
</div>
</li>
<li class="mui-table-view-cell">
<span></span>
<div class="mui-switch mui-switch-blue mui-switch-mini">
<div class="mui-switch-handle"></div>
</div>
</li>
</ul>
</div>
</div>
<script>
// mui.plusReady(function(){
// plus.webview.currentWebview().setStyle({bounce:'none'});
// });
$('.mui-content .mui-switch').each(function() {//循环所有toggle
//toggle.classList.contains('mui-active') 可识别该toggle的开关状态
this.parentNode.querySelector('span').innerText = '状态：' + (this.classList.contains('mui-active') ? 'true' : 'false');
/**
* toggle 事件监听
*/
this.addEventListener('toggle', function(event) {
//event.detail.isActive 可直接获取当前状态
this.parentNode.querySelector('span').innerText = '状态：' + (event.detail.isActive ? 'true' : 'false');
});
});
</script>
</body>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/tab-webview-main.html deleted 100644 → 0
View file @ 86f3bac6
<!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>
<style>
.mui-control-content h3 {
padding-top: 100px;
text-align: center;
}
</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">选项卡（Tab）</h1>
</header>
<nav class="mui-bar mui-bar-tab">
<a id="defaultTab" class="mui-tab-item mui-active" href="tab-webview-subpage-phone.html">
<span class="mui-icon mui-icon-phone"></span>
<span class="mui-tab-label">电话咨询</span>
</a>
<a class="mui-tab-item" href="tab-webview-subpage-chat.html">
<span class="mui-icon mui-icon-chat"></span>
<span class="mui-tab-label">在线咨询</span>
</a>
<a class="mui-tab-item" href="tab-webview-subpage-sms.html">
<span class="mui-icon mui-icon-sms"></span>
<span class="mui-tab-label">短信咨询</span>
</a>
<a class="mui-tab-item" href="tab-webview-subpage-map.html">
<span class="mui-icon mui-icon-map"></span>
<span class="mui-tab-label">查看地图</span>
</a>
</nav>
<script type="text/javascript" charset="utf-8">
//选项卡设计思路：
//1、第一个选项卡对应webview，作为入口页面，主页面加载后需立即展现
//故将其作为子页面append到主窗口，这样主窗口预加载时，会同时预加载子页面；
//2、其它选项卡对应webview，不会立即展现，故可在主页面显示时，再进行预加载；
mui.init({
subpages:[{
url:'tab-webview-subpage-phone.html',
id:'tab-webview-subpage-phone.html',
styles:{
top:'48px',
bottom:'50px'
}
}],
preloadPages:[{
url:'tab-webview-subpage-chat.html',
id:'tab-webview-subpage-chat.html',
styles:{
top:'48px',
bottom:'50px'
}
},{
url:'tab-webview-subpage-sms.html',
id:'tab-webview-subpage-sms.html',
styles:{
top:'48px',
bottom:'50px'
}
},{
url:'tab-webview-subpage-map.html',
id:'tab-webview-subpage-map.html',
styles:{
top:'48px',
bottom:'50px'
}
}]
});
//当前激活选项，默认为第一个；
var firstTab = activeTab = 'tab-webview-subpage-phone.html';
//选项卡点击事件
$('.mui-bar-tab').on('tap', 'a', function(e) {
var targetTab = this.getAttribute('href');
if(targetTab==activeTab){
return;
}
//当前为第一个选项卡，则仅显示目标选项卡即可；
if(activeTab==firstTab){
$.openWindow({url:targetTab,id:targetTab,show:{aniShow:'none'}});
}else{
//如果目标选项卡为第一个选项卡，则直接隐藏当前选项卡即可；
if(targetTab == firstTab){
plus.webview.hide(activeTab);
}else{
//先显示目标选项卡，再隐藏当前选项卡
$.openWindow({url:targetTab,id:targetTab,show:{aniShow:'none'}});
plus.webview.hide(activeTab);
}
}
activeTab = targetTab;
});
var defaultBack = mui.back;
mui.back = function(){
//先隐藏自己；
defaultBack();
//再隐藏当前显示的子webview
plus.webview.hide(activeTab);
}
window.addEventListener("pagebeforeshow",function(){
if(activeTab!==firstTab){
$.openWindow({url:activeTab,id:activeTab,show:{aniShow:'none'}});
}
});
</script>
</body>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/tab-webview-subpage-chat.html deleted 100644 → 0
View file @ 86f3bac6
<!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>
<h3>在线咨询</h3>
<style type="text/css">
h3{
text-align: center;
margin: 50% auto;
}
</style>
<script type="text/javascript" charset="utf-8">
mui.back = function(){
//执行父页面的关闭逻辑；
mui.currentWebview.opener().evalJS("mui.back()");
}
</script>
</body>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/tab-webview-subpage-map.html deleted 100644 → 0
View file @ 86f3bac6
<!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>
<h3>查看地图</h3>
<style type="text/css">
h3{
text-align: center;
margin: 50% auto;
}
</style>
<script type="text/javascript" charset="utf-8">
mui.back = function(){
//执行父页面的关闭逻辑；
mui.currentWebview.opener().evalJS("mui.back()");
}
</script>
</body>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/tab-webview-subpage-phone.html deleted 100644 → 0
View file @ 86f3bac6
<!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>
<h3>电话咨询</h3>
<style type="text/css">
h3{
text-align: center;
margin: 50% auto;
}
</style>
</body>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/tab-webview-subpage-sms.html deleted 100644 → 0
View file @ 86f3bac6
<!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>
<h3>短信咨询</h3>
<style type="text/css">
h3{
text-align: center;
margin: 50% auto;
}
</style>
<script type="text/javascript" charset="utf-8">
mui.back = function(){
//执行父页面的关闭逻辑；
mui.currentWebview.opener().evalJS("mui.back()");
}
</script>
</body>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/tab-with-segmented-control.html deleted 100644 → 0
View file @ 86f3bac6
<!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>
<style>
.mui-bar-nav ~ .mui-content{padding-top:54px;}
.mui-segmented-control {
margin-top: 10px;
}
.mui-segmented-control:first-child {
margin-top: 0;
}
.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 id="segmentedControl" class="mui-segmented-control">
<a class="mui-control-item mui-active" href="#item1mobile">
待办公文（8）
</a>
<a class="mui-control-item" href="#item2mobile">
已办公文
</a>
<a class="mui-control-item" href="#item3mobile">
全部公文
</a>
</div>
<div>
<div id="item1mobile" 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="item2mobile" 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="item3mobile" 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 class="mui-input-row mui-radio">
<label>文字</label>
<input name="style" type="radio" value="inverted">
</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">
</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>
<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>
</body>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/tab-with-viewpagerindicator.html deleted 100644 → 0
View file @ 86f3bac6
<!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>
<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>
<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>
</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">
</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>
</body>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/tabbar-labels-only.html deleted 100644 → 0
View file @ 86f3bac6
<!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-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 mui-active" href="#">
电话沟通
</a>
<a class="mui-tab-item" href="#">
在线交流
</a>
<a class="mui-tab-item" href="#">
短信咨询
</a>
<a class="mui-tab-item" href="#">
查看地图
</a>
</nav>
</body>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/tabbar-with-submenus.html deleted 100644 → 0
View file @ 86f3bac6
<!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-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>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/tabbar.html deleted 100644 → 0
View file @ 86f3bac6
<!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>
<style>
.mui-control-content h3 {
padding-top: 100px;
text-align: center;
}
</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">选项卡（Tab）</h1>
</header>
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active" href="#tabbar">
<span class="mui-icon mui-icon-phone"></span>
<span class="mui-tab-label">电话咨询</span>
</a>
<a class="mui-tab-item" href="#tabbar-with-chat">
<span class="mui-icon mui-icon-chat"></span>
<span class="mui-tab-label">在线咨询</span>
</a>
<a class="mui-tab-item" href="#tabbar-with-sms">
<span class="mui-icon mui-icon-sms"></span>
<span class="mui-tab-label">短信咨询</span>
</a>
<a class="mui-tab-item" href="#tabbar-with-map">
<span class="mui-icon mui-icon-map"></span>
<span class="mui-tab-label">查看地图</span>
</a>
</nav>
<div class="mui-content">
<div id="tabbar" class="mui-control-content mui-active">
<h3>电话咨询</h3>
</div>
<div id="tabbar-with-chat" class="mui-control-content">
<h3>在线咨询</h3>
</div>
<div id="tabbar-with-sms" class="mui-control-content">
<h3>短信咨询</h3>
</div>
<div id="tabbar-with-map" class="mui-control-content">
<h3>查看地图</h3>
</div>
</div>
</body>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/tableview-image-left.html deleted 100644 → 0
View file @ 86f3bac6
<!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-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-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 href="#">
<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 href="#">
<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 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
_site/examples/hello-mui/examples/tableview-image-right.html deleted 100644 → 0
View file @ 86f3bac6
<!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-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
_site/examples/hello-mui/examples/tableview-with-images-and-chevrons.html deleted 100644 → 0
View file @ 86f3bac6
<!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-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
_site/examples/hello-mui/examples/tableviews-with-badges-and-chevrons.html deleted 100644 → 0
View file @ 86f3bac6
<!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-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">
<a class="mui-navigate-right">
<span class="mui-badge">15</span>
Item 1
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
<span class="mui-badge">5</span>
Item 2
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
<span class="mui-badge">5</span>
Item 3
</a>
</li>
</ul>
</div>
</div>
</body>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/tableviews-with-badges.html deleted 100644 → 0
View file @ 86f3bac6
<!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-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">Item 1 <span class="mui-badge mui-badge-primary">14</span></li>
<li class="mui-table-view-cell">Item 2 <span class="mui-badge mui-badge-success">1</span></li>
<li class="mui-table-view-cell">Item 3 <span class="mui-badge">5</span></li>
</ul>
</div>
</div>
</body>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/tableviews-with-chevrons.html deleted 100644 → 0
View file @ 86f3bac6
<!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-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">
<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>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/tableviews-with-collapses.html deleted 100644 → 0
View file @ 86f3bac6
<!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-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-collapse"><a class="mui-navigate-right" href="#">产品</a>
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">iOS</a></li>
<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">Android</a></li>
<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">HTML5</a></li>
</ul></li>
<li class="mui-table-view-cell mui-collapse"><a class="mui-navigate-right" href="#">方案</a>
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">PC方案</a></li>
<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">手机方案</a></li>
<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">TV方案</a></li>
</ul></li>
<li class="mui-table-view-cell mui-collapse"><a class="mui-navigate-right" href="#">新闻</a>
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">公司新闻</a></li>
<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">行业新闻</a></li>
</ul></li>
</ul>
</div>
</div>
</body>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/tableviews-with-grid-and-pagination.html deleted 100644 → 0
View file @ 86f3bac6
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</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.css">
<script src="../js/mui.js"></script>
<script src="../js/app.js"></script>
<style>
html,body,.mui-content{
background-color: #efeff4;
}
</style>
</head>
<body class="mui-mobile">
<link rel="stylesheet" href="../css/mui-grid.css">
<style>
.mui-slider-indicator {
bottom: 0;
}
.mui-slider{
background-color:#f2f2f2;
}
</style>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left mui-pull-left"></a>
<h1 class="mui-title">Table views with grid and pagination</h1>
</header>
<div class="mui-content">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
循环
<div id="Gallery_Toggle" class="mui-switch">
<div class="mui-switch-handle"></div>
</div>
</li>
</ul>
<div id="Gallery" class="mui-slider" style="margin-top:15px;">
<div class="mui-slider-group">
<div class="mui-slider-item">
<ul class="mui-table-view mui-grid-view">
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-home"><span class="mui-number">5</span></span>
<div class="mui-media-body">
Home
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-sms"></span>
<div class="mui-media-body">
Email
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-calendar"></span>
<div class="mui-media-body">
Calendar
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-chat"></span>
<div class="mui-media-body">
Chat
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-category"></span>
<div class="mui-media-body">
Sort
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-map"></span>
<div class="mui-media-body">
Map
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-search"></span>
<div class="mui-media-body">
Search
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-phone"></span>
<div class="mui-media-body">
Phone
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-cog"></span>
<div class="mui-media-body">
Setting
</div>
</a>
</li>
</ul>
</div>
<div class="mui-slider-item">
<ul class="mui-table-view mui-grid-view">
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-home"></span>
<div class="mui-media-body">
Home
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-sms"><span class="mui-number">6</span></span>
<div class="mui-media-body">
Email
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-calendar"></span>
<div class="mui-media-body">
Calendar
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-chat"></span>
<div class="mui-media-body">
Chat
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-category"></span>
<div class="mui-media-body">
Sort
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-map"></span>
<div class="mui-media-body">
Map
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-search"></span>
<div class="mui-media-body">
Search
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-phone"></span>
<div class="mui-media-body">
Phone
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-cog"></span>
<div class="mui-media-body">
Setting
</div>
</a>
</li>
</ul>
</div>
<div class="mui-slider-item">
<ul class="mui-table-view mui-grid-view">
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-home"></span>
<div class="mui-media-body">
Home
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-sms"></span>
<div class="mui-media-body">
Email
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-calendar"><span class="mui-number">7</span></span>
<div class="mui-media-body">
Calendar
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-chat"></span>
<div class="mui-media-body">
Chat
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-category"></span>
<div class="mui-media-body">
Sort
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-map"></span>
<div class="mui-media-body">
Map
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-search"></span>
<div class="mui-media-body">
Search
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-phone"></span>
<div class="mui-media-body">
Phone
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-cog"></span>
<div class="mui-media-body">
Setting
</div>
</a>
</li>
</ul>
</div>
</div>
<div class="mui-slider-indicator">
<div class="mui-indicator mui-active"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
</div>
</div>
</div>
<script>
$.init({
swipeBack : false,
});
$.ready(function() {
var slider = document.getElementById('Gallery');
var group = slider.querySelector('.mui-slider-group');
var items = $('.mui-slider-item', group);
var first = items[0].cloneNode(true);
first.classList.add('mui-slider-item-duplicate');
var last = items[items.length - 1].cloneNode(true);
last.classList.add('mui-slider-item-duplicate');
function toggleLoop(toggle) {
if (toggle) {
group.classList.add('mui-slider-loop');
group.insertBefore(last, group.firstChild);
group.appendChild(first);
} else {
group.classList.remove('mui-slider-loop');
group.removeChild(first);
group.removeChild(last);
}
}
document.getElementById('Gallery_Toggle').addEventListener('toggle', function(e) {
var detail = e.detail;
toggleLoop(detail.isActive);
});
});
</script>
<script>
//EVENTS
// $.each(['tap','longtap','doubletap', 'dragleft', 'dragright', 'dragup', 'dragdown', 'dragend', 'swipeleft', 'swiperight', 'swipeup', 'swipedown'], function(index, type) {
// window.addEventListener(type, function(event) {
// console.log(type);
// event.detail.gesture = null;
// console.log(JSON.stringify(event.detail));
// });
// });
</script>
</body>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/tableviews-with-swipe.html deleted 100644 → 0
View file @ 86f3bac6
<!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>
<style>
.mui-h6, h5, h4 {
font-weight: 500;
margin: 0;
margin-left: 5px;
text-transform: none;
}
.mui-table-view .mui-table-view-cell {
padding-right: 0;
}
.oa-task-cell.mui-table .mui-table-cell, .oa-contact-cell.mui-table .mui-table-cell {
padding: 11px 0;
vertical-align: middle;
}
.oa-task-cell, .oa-contact-cell {
position: relative;
margin: -11px 0;
}
.oa-task-time {
width: 15%;
}
.oa-task-status {
width: 30%;
-webkit-transition: width .4s;
transition: width .4s;
}
.oa-task-time span, .oa-task-status, .oa-task-action {
text-align: center;
}
.oa-task-cell.mui-table .mui-table-cell.oa-task-content {
width: 55%;
padding-left: 15px;
}
.oa-task-time-start, .oa-task-time-end {
display: block;
width: 50px;
}
.oa-contact-avatar {
width: 75px;
}
.oa-contact-avatar img {
border-radius: 50%;
}
.oa-contact-content {
width: 100%;
}
.oa-contact-name {
margin-right: 20px;
}
.oa-contact-name, oa-contact-position {
float: left;
}
/*左拖，右拖，超出该区域宽度后，释放触发slideleft,slideright事件*/
/*重要：该样式定制拉出的功能图标区域的width(必须)*/
.oa-task-action {
background-color: #527fdc;
color: white;
width: 25%;
line-height: 62px;
}
/*左拖拉出，右拖关闭菜单*/
/*重要：该样式定制拉出的功能菜单区域的margin-left(必须,该值是功能菜单距离mui-slider-cell左侧的位置)*/
.oa-contact-action {
background-color: #527fdc;
margin-left: 75px;
height: 87px;
}
.oa-contact-action .mui-icon {
width: 20%;
color: white;
text-align: center;
line-height: 87px;
height: 87px;
float: left;
}
.oa-contact-action .mui-icon:first-child, .oa-contact-action .mui-icon:last-child {
width: 40%;
}
</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">
<h5 class="mui-content-padded">拖拽(滑动)显示功能按钮，点击按钮触发事件</h5>
<ul id="OA_task_1" class="mui-table-view mui-table-view-striped mui-table-view-slider">
<li class="mui-table-view-cell">
<div class="mui-slider-cell">
<div class="mui-slider-right oa-task-action mui-table-cell mui-disabled">
<span class="mui-icon mui-icon-close"></span>
</div>
<div class="mui-slider-handle oa-task-cell mui-table">
<div class="oa-task-time mui-table-cell">
<span class="oa-task-time-start">9:00</span><span class="oa-task-time-end mui-h6">10:00</span>
</div>
<div class="oa-task-content mui-table-cell">
<h4 class="mui-ellipsis">左拖(左滑)</h5>
<p class="mui-h6 mui-ellipsis">
一会议室
</p>
</div>
<div class="oa-task-status mui-table-cell">
<span class="mui-icon mui-icon-phone"></span>
</div>
</div>
</div>
</li>
<li class="mui-table-view-cell">
<div class="mui-slider-cell">
<div class="mui-slider-left oa-task-action mui-table-cell mui-disabled">
<span class="mui-icon mui-icon-close"></span>
</div>
<div class="mui-slider-handle oa-task-cell mui-table">
<div class="oa-task-time mui-table-cell">
<span class="oa-task-time-start">9:00</span><span class="oa-task-time-end mui-h6">10:00</span>
</div>
<div class="oa-task-content mui-table-cell">
<h4 class="mui-ellipsis">右拖(右滑)</h5>
<p class="mui-h6 mui-ellipsis">
一会议室
</p>
</div>
<div class="oa-task-status mui-table-cell">
<span class="mui-icon mui-icon-phone"></span>
</div>
</div>
</div>
</li>
<li class="mui-table-view-cell">
<div class="mui-slider-cell">
<div class="mui-slider-left oa-task-action mui-table-cell mui-disabled">
<span class="mui-icon mui-icon-close"></span>
</div>
<div class="mui-slider-right oa-task-action mui-table-cell mui-disabled">
<span class="mui-icon mui-icon-close"></span>
</div>
<div class="mui-slider-handle oa-task-cell mui-table">
<div class="oa-task-time mui-table-cell">
<span class="oa-task-time-start">9:00</span><span class="oa-task-time-end mui-h6">10:00</span>
</div>
<div class="oa-task-content mui-table-cell">
<h4 class="mui-ellipsis">左右拖拽(滑动)</h5>
<p class="mui-h6 mui-ellipsis">
一会议室
</p>
</div>
<div class="oa-task-status mui-table-cell">
<span class="mui-icon mui-icon-phone"></span>
</div>
</div>
</div>
</li>
</ul>
<h5 class="mui-content-padded">拖拽显示功能图标，释放后还原，自动触发事件</h5>
<ul id="OA_task_2" class="mui-table-view mui-table-view-striped mui-table-view-slider">
<li class="mui-table-view-cell">
<div class="mui-slider-cell">
<div class="mui-slider-right mui-bounce oa-task-action mui-table-cell mui-disabled">
<span class="mui-icon mui-icon-close"></span>
</div>
<div class="mui-slider-handle oa-task-cell mui-table">
<div class="oa-task-time mui-table-cell">
<span class="oa-task-time-start">9:00</span><span class="oa-task-time-end mui-h6">10:00</span>
</div>
<div class="oa-task-content mui-table-cell">
<h4 class="mui-ellipsis">左拖</h5>
<p class="mui-h6 mui-ellipsis">
一会议室
</p>
</div>
<div class="oa-task-status mui-table-cell">
<span class="mui-icon mui-icon-phone"></span>
</div>
</div>
</div>
</li>
<li class="mui-table-view-cell">
<div class="mui-slider-cell">
<div class="mui-slider-left mui-bounce oa-task-action mui-table-cell mui-disabled">
<span class="mui-icon mui-icon-close"></span>
</div>
<div class="mui-slider-handle oa-task-cell mui-table">
<div class="oa-task-time mui-table-cell">
<span class="oa-task-time-start">10:00</span><span class="oa-task-time-end mui-h6">10:30</span>
</div>
<div class="oa-task-content mui-table-cell">
<h4 class="mui-ellipsis">右拖</h5>
<p class="mui-h6 mui-ellipsis">
海淀区皂君庙乙2号院4号楼
</p>
</div>
<div class="oa-task-status mui-table-cell">
<span class="mui-icon mui-icon-phone"></span>
</div>
</div>
</div>
</li>
<li class="mui-table-view-cell">
<div class="mui-slider-cell">
<div class="mui-slider-left mui-bounce oa-task-action mui-table-cell mui-disabled">
<span class="mui-icon mui-icon-close"></span>
</div>
<div class="mui-slider-right mui-bounce oa-task-action mui-table-cell mui-disabled">
<span class="mui-icon mui-icon-close"></span>
</div>
<div class="mui-slider-handle oa-task-cell mui-table">
<div class="oa-task-time mui-table-cell">
<span class="oa-task-time-start">9:00</span><span class="oa-task-time-end mui-h6">10:00</span>
</div>
<div class="oa-task-content mui-table-cell">
<h4 class="mui-ellipsis">左右拖拽</h5>
<p class="mui-h6 mui-ellipsis">
一会议室
</p>
</div>
<div class="oa-task-status mui-table-cell">
<span class="mui-icon mui-icon-phone"></span>
</div>
</div>
</div>
</li>
</ul>
<h5 class="mui-content-padded">左拖拉出，右拖关闭功能菜单</h5>
<ul id="OA_contact" class="mui-table-view mui-table-view-striped mui-table-view-condensed">
<li class="mui-table-view-cell">
<div class="mui-slider-cell">
<div class="oa-contact-cell mui-table">
<div class="oa-contact-avatar mui-table-cell">
<img src="../images/60x60.gif"/>
</div>
<div class="oa-contact-content mui-table-cell">
<div class="mui-clearfix">
<h4 class="oa-contact-name">李明明</h4>
<span class="oa-contact-position mui-h6">总经理</span>
</div>
<p class="oa-contact-email mui-h6">
limingming@dh.cn
</p>
</div>
</div>
<div class="mui-slider-handle oa-contact-action mui-table-cell mui-disabled">
<span class="mui-icon mui-icon-phone"></span>
<span class="mui-icon mui-icon-sms"></span>
<span class="mui-icon mui-icon-chat"></span>
</div>
</div>
</li>
<li class="mui-table-view-cell">
<div class="mui-slider-cell">
<div class="oa-contact-cell mui-table">
<div class="oa-contact-avatar mui-table-cell">
<img src="../images/60x60.gif"/>
</div>
<div class="oa-contact-content mui-table-cell">
<div class="mui-clearfix">
<h4 class="oa-contact-name">张聪聪</h4>
<span class="oa-contact-position mui-h6">理事长</span>
</div>
<p class="oa-contact-email mui-h6">
zcc@dh.cn
</p>
</div>
</div>
<div class="mui-slider-handle oa-contact-action mui-table-cell mui-disabled">
<span class="mui-icon mui-icon-phone"></span>
<span class="mui-icon mui-icon-sms"></span>
<span class="mui-icon mui-icon-chat"></span>
</div>
</div>
</li>
<li class="mui-table-view-cell">
<div class="mui-slider-cell">
<div class="oa-contact-cell mui-table">
<div class="oa-contact-avatar mui-table-cell">
<img src="../images/60x60.gif"/>
</div>
<div class="oa-contact-content mui-table-cell">
<div class="mui-clearfix">
<h4 class="oa-contact-name">吴丽丽</h4>
<span class="oa-contact-position mui-h6">理事长</span>
</div>
<p class="oa-contact-email mui-h6">
wulili@dh.cn
</p>
</div>
</div>
<div class="mui-slider-handle oa-contact-action mui-table-cell mui-disabled">
<span class="mui-icon mui-icon-phone"></span>
<span class="mui-icon mui-icon-sms"></span>
<span class="mui-icon mui-icon-chat"></span>
</div>
</div>
</li>
</ul>
</div>
<script>
mui.init({
swipeBack : false
});
(function($) {
var btnArray = ['确认','取消'];
$('#OA_task_1').on('tap', '.oa-task-action', function() {
var cell = this.parentNode.parentNode;
cell.parentNode.removeChild(cell);
});
$('#OA_task_2').on('slideleft', '.mui-table-view-cell', function(event) {
var elem = this;
mui.confirm('确认删除该条记录？','Hello MUI',btnArray,function(e){
if(e.index==0){
elem.parentNode.removeChild(elem);
}
});
});
$('#OA_task_2').on('slideright', '.mui-table-view-cell', function(event) {
var elem = this;
mui.confirm('确认删除该条记录？','Hello MUI',btnArray,function(e){
if(e.index==0){
elem.parentNode.removeChild(elem);
}
});
});
})(mui);
</script>
</body>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/tableviews-with-switches.html deleted 100644 → 0
View file @ 86f3bac6
<!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-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
_site/examples/hello-mui/examples/tableviews.html deleted 100644 → 0
View file @ 86f3bac6
<!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-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">列表第1项</li>
<li class="mui-table-view-cell">列表第2项</li>
<li class="mui-table-view-cell">列表第3项</li>
<li class="mui-table-view-divider">两行列表</li>
<li class="mui-table-view-cell"><span class="mui-ellipsis-2">我的内容比较多，但也不会超过两行，因为加了.mui-ellipsis-2,mui会自动截断，变成省略号</span></li>
<li class="mui-table-view-cell"><span class="mui-ellipsis-2">我的内容比较多，但也不会超过两行，因为加了.mui-ellipsis-2,mui会自动截断，变成省略号</span></li>
<li class="mui-table-view-cell"><span class="mui-ellipsis-2">我的内容比较多，但也不会超过两行，因为加了.mui-ellipsis-2,mui会自动截断，变成省略号</span></li>
</ul>
</div>
</div>
</body>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/titlebar-with-buttons.html deleted 100644 → 0
View file @ 86f3bac6
<!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">
<button class="mui-action-back mui-btn mui-pull-left">
back
</button>
<button id="M_Menu" class="mui-btn mui-btn-primary mui-btn-link mui-pull-right">
完成
</button>
<h1 class="mui-title">导航条包含按钮</h1>
</header>
<div class="mui-content">
</div>
<script>
document.getElementById('M_Menu').addEventListener('tap', function() {
alert('你刚点了按钮');
});
</script>
</body>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/titlebar-with-html5-and-5+.html deleted 100644 → 0
View file @ 86f3bac6
<!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>
<script>
mui.init({
optimize: false,
titleBar: {
title: 'Title bar with 5+(html5)'
}
});
$.ready(function() {
$.get('pulldown.html', function(response) {
var wrap = document.createElement('div');
wrap.innerHTML = response;
var content = wrap.querySelector('.mui-content');
document.body.appendChild(content);
//动态执行html中的script代码
var scripts = wrap.querySelectorAll('script');
for (var i = 0, len = scripts.length; i < len; i++) {
var script = document.createElement("script");
script.text = scripts[i].innerHTML;
document.head.appendChild(script).parentNode.removeChild(script);
}
});
});
</script>
</body>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/titlebar-with-icons.html deleted 100644 → 0
View file @ 86f3bac6
<!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-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<a class="mui-icon mui-icon-bars mui-pull-right"></a>
<h1 class="mui-title">导航条包含图标</h1>
</header>
</body>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/titlebar-with-search.html deleted 100644 → 0
View file @ 86f3bac6
<!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-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<input type="search" class="mui-pull-right" placeholder="search">
<h1 class="mui-title">带搜索框的导航栏</h1>
</header>
</body>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/titlebar-with-text-and-icons.html deleted 100644 → 0
View file @ 86f3bac6
<!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>
<style>
.mui-bar .mui-title{
right:80px;
left:80px;
}
</style>
<header class="mui-bar mui-bar-nav">
<button class="mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left">
<span class="mui-icon mui-icon-left-nav"></span>
back
</button>
<button class="mui-btn mui-btn-link mui-btn-nav mui-pull-right">
menu
<span class="mui-icon mui-icon-bars"></span>
</button>
<h1 class="mui-title">导航条同时包含文字和图标</h1>
</header>
</body>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/titlebar-with-webview-and-5+.html deleted 100644 → 0
View file @ 86f3bac6
<!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>
<script>
mui.init({
titleBar: {
title: 'Title bar with 5+(webview)'
}
});
$.ready(function() {
$.get('pulldown-with-5+.html', function(response) {
document.body.innerHTML = response;
var padded = document.body.querySelector('.mui-content-padded');
if (padded) {
padded.style.marginTop = '0px';
}
//动态执行html中的script代码
var scripts = document.body.querySelectorAll('script');
for (var i = 0, len = scripts.length; i < len; i++) {
var script = document.createElement("script");
script.text = scripts[i].innerHTML;
document.head.appendChild(script).parentNode.removeChild(script);
}
//移除pulldown-with-5+.html的header
var header = document.body.querySelector('.mui-bar');
header.parentNode.removeChild(header);
});
});
</script>
</body>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/titlebar.html deleted 100644 → 0
View file @ 86f3bac6
<!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-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">导航栏</h1>
</header>
</body>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/top.html deleted 100644 → 0
View file @ 86f3bac6
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<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.css">
<link rel="stylesheet" href="../css/mui-theme-ios.css">
<script src="../js/fastclick.js"></script>
<script src="../js/mui.js"></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>
<script>
mui.init({
titleBar: false
});
</script>
</body>
</html>
_site/examples/hello-mui/examples/top_list.html deleted 100644 → 0
View file @ 86f3bac6
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<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.css">
<script src="../js/mui.js"></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>
</body>
</html>
_site/examples/hello-mui/examples/typography.html deleted 100644 → 0
View file @ 86f3bac6
<!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>
<style>
.mui-content-padded {
padding: 10px;
}
</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">Typography</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded">
<h1>h1. Heading</h1>
<h2>h2. Heading</h2>
<h3>h3. Heading</h3>
<h4>h4. Heading</h4>
<h5>h5. Heading</h5>
<h6>h6. Heading</h6>
<p>
p. 目前最接近原生App效果的框架。
</p>
</div>
</div>
</body>
</html>
\ No newline at end of file
_site/examples/hello-mui/index.html deleted 100644 → 0
View file @ 86f3bac6
<!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/update.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a id="info" class="mui-icon mui-icon-info mui-pull-right" style="color: #999;"></a>
<h1 class="mui-title">Hello mui</h1>
</header>
<script>
mui.init({
swipeBack : false,
subpages : [{
id : 'list',
url : 'list.html',
styles : {
top : '48px',
bottom : 0,
bounce :'vertical'
//scrollIndicator : "none"
}
}]
});
document.getElementById('info').addEventListener('tap', function() {
mui.openWindow({url:'examples/info.html', id:'info'});
});
mui.plusReady(function() {
//首页返回键处理
//处理逻辑：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);
});
</script>
</body>
</html>
_site/examples/hello-mui/js/app.js deleted 100644 → 0
View file @ 86f3bac6
(function($) {
//全局配置(通常所有页面引用该配置，特殊页面使用mui.init({})来覆盖全局配置)
$.initGlobal({
optimize: true,
swipeBack: true,
showAfterLoad: true
});
})(mui);
/**
* toggle
*/
window.addEventListener('toggle', function(event) {
if (event.target.id === 'M_Toggle') {
var isActive = event.detail.isActive;
var table = document.querySelector('.mui-table-view');
var card = document.querySelector('.mui-card');
if (isActive) {
card.appendChild(table);
card.style.display = '';
} else {
var content = document.querySelector('.mui-content');
content.insertBefore(table, card);
card.style.display = 'none';
}
}
});
//简单处理label点击触发radio或checkbox
window.addEventListener('tap', function(event) {
var target = event.target;
for (; target && target !== document; target = target.parentNode) {
if (target.tagName && target.tagName === 'LABEL') {
var parent = target.parentNode;
if (parent.classList && (parent.classList.contains('mui-radio') || parent.classList.contains('mui-checkbox'))) {
var input = parent.querySelector('input');
if (input) {
input.click();
}
}
}
}
});
\ No newline at end of file
_site/examples/hello-mui/js/mui.min.js deleted 100644 → 0
View file @ 86f3bac6
/*!
* =====================================================
* Mui v0.5.5 (https://github.com/dcloudio/mui)
* =====================================================
*/
var mui=function(a,b){var c=/complete|loaded|interactive/,d=/^#([\w-]*)$/,e=/^\.([\w-]+)$/,f=/^[\w-]+$/,g=/translate(?:3d)?\((.+?)\)/,h=/matrix(3d)?\((.+?)\)/,i=function(b,c){if(c=c||a,!b)return j();if("object"==typeof b)return j([b],null);try{if(d.test(b)){var e=c.getElementById(RegExp.$1);return j(e?[e]:[])}return j(i.qsa(b,c),b)}catch(f){}return j()},j=function(a,b){return a=a||[],a.__proto__=i.fn,a.selector=b||"",a};return i.uuid=0,i.data={},i.extend=function(a,c,d){a||(a={}),c||(c={});for(var e in c)c[e]!==b&&(d&&"object"==typeof a[e]?i.extend(a[e],c[e],d):a[e]=c[e]);return a},i.slice=[].slice,i.qsa=function(b,c){return c=c||a,i.slice.call(e.test(b)?c.getElementsByClassName(RegExp.$1):f.test(b)?c.getElementsByTagName(b):c.querySelectorAll(b))},i.ready=function(b){return c.test(a.readyState)?b(i):a.addEventListener("DOMContentLoaded",function(){b(i)},!1),this},i.each=function(a,b){return[].every.call(a,function(a,c){return b.call(a,c,a)!==!1}),this},i.trigger=function(a,b,c){return a.dispatchEvent(new CustomEvent(b,{detail:c,bubbles:!0,cancelable:!0})),this},i.getStyles=function(a,b){var c=a.ownerDocument.defaultView.getComputedStyle(a,null);return b?c.getPropertyValue(b)||c[b]:c},i.parseTranslate=function(a,b){var c=a.match(g||"");return c&&c[1]||(c=["","0,0,0"]),c=c[1].split(","),c={x:parseFloat(c[0]),y:parseFloat(c[1]),z:parseFloat(c[2])},b&&c.hasOwnProperty(b)?c[b]:c},i.parseTranslateMatrix=function(a,b){var c=a.match(h),d=c&&c[1];c?(c=c[2].split(","),"3d"===d?c=c.slice(12,15):(c.push(0),c=c.slice(4,7))):c=[0,0,0];var e={x:parseFloat(c[0]),y:parseFloat(c[1]),z:parseFloat(c[2])};return b&&e.hasOwnProperty(b)?e[b]:e},i.fn={each:function(a){return[].every.call(this,function(b,c){return a.call(b,c,b)!==!1}),this}},i}(document);window.mui=mui,"$"in window||(window.$=mui),function(a,b,c){a.targets={},a.targetHandles=[],a.registerTarget=function(b){return b.index=b.index||1e3,a.targetHandles.push(b),a.targetHandles.sort(function(a,b){return a.index-b.index}),a.targetHandles},b.addEventListener("touchstart",function(b){for(var d=b.target,e={};d&&d!==c;d=d.parentNode){var f=!1;if(a.each(a.targetHandles,function(c,g){var h=g.name;f||e[h]||!g.hasOwnProperty("handle")?e[h]||g.isReset!==!1&&(a.targets[h]=!1):(a.targets[h]=g.handle(b,d),a.targets[h]&&(e[h]=!0,g.isContinue!==!0&&(f=!0)))}),f)break}})}(mui,window,document),function(a){String.prototype.trim===a&&(String.prototype.trim=function(){return this.replace(/^\s+|\s+$/g,"")})}(),function(){function a(a,b){b=b||{bubbles:!1,cancelable:!1,detail:void 0};var c=document.createEvent("Events"),d=!0;if(b)for(var e in b)"bubbles"===e?d=!!b[e]:c[e]=b[e];return c.initEvent(a,d,!0),c}"undefined"==typeof window.CustomEvent&&(a.prototype=window.Event.prototype,window.CustomEvent=a)}(),function(a){"classList"in a.documentElement||!Object.defineProperty||"undefined"==typeof HTMLElement||Object.defineProperty(HTMLElement.prototype,"classList",{get:function(){function a(a){return function(c){var d=b.className.split(/\s+/),e=d.indexOf(c);a(d,e,c),b.className=d.join(" ")}}var b=this,c={add:a(function(a,b,c){~b||a.push(c)}),remove:a(function(a,b){~b&&a.splice(b,1)}),toggle:a(function(a,b,c){~b?a.splice(b,1):a.push(c)}),contains:function(a){return!!~b.className.split(/\s+/).indexOf(a)},item:function(a){return b.className.split(/\s+/)[a]||null}};return Object.defineProperty(c,"length",{get:function(){return b.className.split(/\s+/).length}}),c}})}(document),function(a){var b=0;a.requestAnimationFrame||(a.requestAnimationFrame=a.webkitRequestAnimationFrame,a.cancelAnimationFrame=a.webkitCancelAnimationFrame||a.webkitCancelRequestAnimationFrame),a.requestAnimationFrame||(a.requestAnimationFrame=function(c){var d=(new Date).getTime(),e=Math.max(0,16.7-(d-b)),f=a.setTimeout(function(){c(d+e)},e);return b=d+e,f}),a.cancelAnimationFrame||(a.cancelAnimationFrame=function(a){clearTimeout(a)})}(window),function(a,b,c){if(!b.FastClick){var d=function(a,b){return!b.type||"radio"!==b.type&&"checkbox"!==b.type?!1:b};a.registerTarget({name:c,index:40,handle:d,target:!1});var e=function(c){var d=a.targets.click;if(d){var e,f;document.activeElement&&document.activeElement!==d&&document.activeElement.blur(),f=c.detail.gesture.changedTouches[0],e=document.createEvent("MouseEvents"),e.initMouseEvent("click",!0,!0,b,1,f.screenX,f.screenY,f.clientX,f.clientY,!1,!1,!1,!1,0,null),e.forwardedTouchEvent=!0,d.dispatchEvent(e)}};b.addEventListener("tap",e),b.addEventListener("doubletap",e),b.addEventListener("click",function(b){return a.targets.click&&!b.forwardedTouchEvent?(b.stopImmediatePropagation?b.stopImmediatePropagation():b.propagationStopped=!0,b.stopPropagation(),b.preventDefault(),!1):void 0},!0)}}(mui,window,"click"),function(a){a.namespace="mui",a.classNamePrefix=a.namespace+"-",a.classSelectorPrefix="."+a.classNamePrefix,a.className=function(b){return a.classNamePrefix+b},a.classSelector=function(b){return b.replace(/\./g,a.classSelectorPrefix)},a.eventName=function(b,c){return b+(a.namespace?"."+a.namespace:"")+(c?"."+c:"")}}(mui),function(a,b){a.EVENT_START="touchstart",a.EVENT_MOVE="touchmove",a.EVENT_END="touchend",a.EVENT_CANCEL="touchcancel",a.EVENT_CLICK="click",a.preventDefault=function(a){a.preventDefault()},a.stopPropagation=function(a){a.stopPropagation()},a.gestures=[],a.registerGesture=function(b){return b.index=b.index||1e3,a.gestures.push(b),a.gestures.sort(function(a,b){return a.index-b.index}),a.gestures};var c=function(a,b){var c=b.x-a.x,d=b.y-a.y;return Math.sqrt(c*c+d*d)},d=function(a,b){return 180*Math.atan2(b.y-a.y,b.x-a.x)/Math.PI},e=function(a){return-45>a&&a>-135?"up":a>=45&&135>a?"down":a>=135||-135>=a?"left":a>=-45&&45>=a?"right":null},f=function(b,c){a.gestures.stoped||a.each(a.gestures,function(d,e){a.gestures.stoped||a.options.gestureConfig[e.name]&&e.hasOwnProperty("handle")&&e.handle(b,c)})},g={},h=function(b){a.gestures.stoped=!1,g={target:b.target,lastTarget:g.lastTarget?g.lastTarget:null,startTime:Date.now(),touchTime:0,lastTapTime:g.lastTapTime?g.lastTapTime:0,start:{x:b.touches[0].pageX,y:b.touches[0].pageY},move:{x:0,y:0},deltaX:0,deltaY:0,lastDeltaX:0,lastDeltaY:0,angle:"",direction:"",distance:0,drag:!1,swipe:!1,gesture:b},f(b,g)},i=function(b){a.gestures.stoped||(g.touchTime=Date.now()-g.startTime,g.move={x:b.touches[0].pageX,y:b.touches[0].pageY},g.distance=c(g.start,g.move),g.angle=d(g.start,g.move),g.direction=e(g.angle),g.lastDeltaX=g.deltaX,g.lastDeltaY=g.deltaY,g.deltaX=g.move.x-g.start.x,g.deltaY=g.move.y-g.start.y,g.gesture=b,f(b,g))},j=function(b){a.gestures.stoped||(g.touchTime=Date.now()-g.startTime,g.gesture=b,f(b,g))};b.addEventListener(a.EVENT_START,h),b.addEventListener(a.EVENT_MOVE,i),b.addEventListener(a.EVENT_END,j),b.addEventListener(a.EVENT_CANCEL,j),a.fn.on=function(b,c,d){this.each(function(){var e=this;e.addEventListener(b,function(b){var f=a.qsa(c,e),g=b.target;if(f&&f.length>0)for(;g&&g!==document&&g!==e;g=g.parentNode)g&&~f.indexOf(g)&&(b.detail?b.detail.currentTarget=g:b.detail={currentTarget:g},d.call(g,b))}),e.removeEventListener(a.EVENT_CLICK,k),e.addEventListener(a.EVENT_CLICK,k)})};var k=function(a){a.target&&"INPUT"!==a.target.tagName&&a.preventDefault()}}(mui,window),function(a,b){var c=function(c,d){if(c.type===a.EVENT_END||c.type===a.EVENT_CANCEL){var e=this.options;d.direction&&e.swipeMaxTime>d.touchTime&&d.distance>e.swipeMinDistince&&"range"!==c.target.type&&(d.swipe=!0,a.trigger(c.target,b+d.direction,d))}};a.registerGesture({name:b,index:10,handle:c,options:{swipeMaxTime:300,swipeMinDistince:18}})}(mui,"swipe"),function(a,b){var c=function(c,d){switch(c.type){case a.EVENT_MOVE:d.direction&&(d.drag||(d.drag=!0,a.trigger(c.target,b+"start",d)),a.trigger(c.target,b,d),a.trigger(c.target,b+d.direction,d));break;case a.EVENT_END:case a.EVENT_CANCEL:d.drag&&a.trigger(c.target,b+"end",d)}};a.registerGesture({name:b,index:20,handle:c,options:{}})}(mui,"drag"),function(a,b){var c=function(c,d){if(c.type===a.EVENT_END||c.type===a.EVENT_CANCEL){var e=this.options;if(d.distance<e.tabMaxDistance&&d.touchTime<e.tapMaxTime){if(a.options.gestureConfig.doubletap&&d.lastTarget&&d.lastTarget===c.target&&d.lastTapTime&&d.startTime-d.lastTapTime<e.tabMaxInterval)return a.trigger(c.target,"doubletap",d),d.lastTapTime=Date.now(),void(d.lastTarget=c.target);a.trigger(c.target,b,d),d.lastTapTime=Date.now(),d.lastTarget=c.target}}};a.registerGesture({name:b,index:30,handle:c,options:{tabMaxInterval:300,tabMaxDistance:5,tapMaxTime:250}})}(mui,"tap"),function(a,b){var c,d=function(d,e){var f=this.options;switch(d.type){case a.EVENT_START:clearTimeout(c),c=setTimeout(function(){e.drag||a.trigger(d.target,b,e)},f.holdTimeout);break;case a.EVENT_MOVE:e.distance>f.holdThreshold&&clearTimeout(c);break;case a.EVENT_END:case a.EVENT_CANCEL:clearTimeout(c)}};a.registerGesture({name:b,index:10,handle:d,options:{holdTimeout:500,holdThreshold:2}})}(mui,"longtap"),function(a){function b(b){this.os={};var c=[function(){var a=b.match(/(Android);?[\s\/]+([\d.]+)?/);return a&&(this.os.android=!0,this.os.version=a[2]),this.os.android===!0},function(){var a=b.match(/(iPhone\sOS)\s([\d_]+)/);if(a)this.os.ios=this.os.iphone=!0,this.os.version=a[2].replace(/_/g,".");else{var c=b.match(/(iPad).*OS\s([\d_]+)/);c&&(this.os.ios=this.os.ipad=!0,this.os.version=c[2].replace(/_/g,"."))}return this.os.ios===!0}];[].every.call(c,function(b){return!b.call(a)})}b.call(a,navigator.userAgent)}(mui),function(a){function b(a){this.os=this.os||{};var b=a.match(/Html5Plus/i);b&&(this.os.plus=!0)}b.call(a,navigator.userAgent)}(mui),function(a){var b=[];a.global=a.options={gestureConfig:{tap:!0,doubletap:!0,longtap:!0,swipe:!0,drag:!0}},a.initGlobal=function(b){return a.options=a.extend(a.global,b,!0),this},a.init=function(c){return a.options=a.extend(a.global,c||{},!0),a.ready(function(){for(var c=0,d=b.length;d>c;c++)b[c].call(a)}),this},a.init.add=function(a){b.push(a)}}(mui),function(a){var b={optimize:!0,swipeBack:!1,preloadPages:[],preloadLimit:10},c={duration:a.os.ios?200:100,aniShow:"slide-in-right"};a.options.show&&(c=a.extend(c,a.options.show,!0)),a.currentWebview=null,a.isHomePage=!1,a.extend(a.global,b),a.extend(a.options,b),a.waitingOptions=function(b){return a.extend({},b)},a.showOptions=function(b){return a.extend(c,b)},a.windowOptions=function(b){return a.extend({scalable:!1,bounce:""},b)},a.plusReady=function(a){return window.plus?a():document.addEventListener("plusready",function(){a()},!1),this},a.fire=function(a,b,c){a&&a.evalJS("mui&&mui.receive('"+b+"','"+JSON.stringify(c||{})+"')")},a.receive=function(b,c){b&&(c=JSON.parse(c),a.trigger(document,b,c))};var d=function(b){if(!b.preloaded){a.fire(b,"preload");for(var c=b.children(),d=0;d<c.length;d++)a.fire(c[d],"preload");b.preloaded=!0}},e=function(b,c,d){if(d){if(!b[c+"ed"]){a.fire(b,c);for(var e=b.children(),f=0;f<e.length;f++)a.fire(e[f],c);b[c+"ed"]=!0}}else{a.fire(b,c);for(var e=b.children(),f=0;f<e.length;f++)a.fire(e[f],c)}};a.openWindow=function(b,c,f){if(window.plus){"object"==typeof b?(f=b,b=f.url,c=f.id||b):"object"==typeof c?(f=c,c=b):c=c||b,f=f||{};var g,h,i=f.params||{};if(a.webviews[c]){var j=a.webviews[c];if(j.preload)return g=j.webview,g&&g.getURL()||(f=a.extend(f,{id:c,url:b,showAfterLoad:f.showAfterLoad===!1?!1:!0,preload:!0}),g=a.createWindow(f)),h=j.show,h=f.show?a.extend(h,f.show):h,g.show(h.aniShow,h.duration,function(){d(g),e(g,"pagebeforeshow",!1)}),j.afterShowMethodName&&g.evalJS(j.afterShowMethodName+"('"+JSON.stringify(i)+"')"),this;f=a.extend(j,a.extend(f,{id:c,url:b,showAfterLoad:f.showAfterLoad===!1?!1:!0})),g=a.createWindow(f)}else f=a.extend(f,{id:c,url:b,showAfterLoad:f.showAfterLoad===!1?!1:!0}),g=a.createWindow(f);if(f.showAfterLoad){var k=a.waitingOptions(f.waiting),l=plus.nativeUI.showWaiting(k.title||"",k.options);h=a.showOptions(f.show),g.addEventListener("loaded",function(){l.close(),g.show(h.aniShow,h.duration,function(){d(g),e(g,"pagebeforeshow",!1)}),g.showed=!0,f.afterShowMethodName&&g.evalJS(f.afterShowMethodName+"('"+JSON.stringify(i)+"')")},!1)}return g}},a.createWindow=function(b,c){if(window.plus){var d,e=b.id||b.url;if(b.preload){a.webviews[e]&&a.webviews[e].webview.getURL()?d=a.webviews[e].webview:(d=plus.webview.create(b.url,e,a.windowOptions(b.styles),{preload:!0}),b.subpages&&a.each(b.subpages,function(b,c){var e=plus.webview.create(c.url,c.id||c.url,a.windowOptions(c.styles),{preload:!0});d.append(e)})),a.webviews[e]={webview:d,preload:!0,show:a.showOptions(b.show),afterShowMethodName:b.afterShowMethodName};var f=a.data.preloads,g=f.indexOf(e);if(~g&&f.splice(g,1),f.push(e),f.length>a.options.preloadLimit){var h=a.data.preloads.shift(),i=a.webviews[h];i&&i.webview&&a.closeAll(i.webview),delete a.webviews[h]}}else c!==!1&&(d=plus.webview.create(b.url,e,a.windowOptions(b.styles)),b.subpages&&a.each(b.subpages,function(b,c){var e=plus.webview.create(c.url,c.id||c.url,a.windowOptions(c.styles));d.append(e)}));return d}},a.closeOpened=function(b){var c=b.opened();if(c)for(var d=0,e=c.length;e>d;d++){var f=c[d],g=f.opened();g&&g.length>0?a.closeOpened(f):f.parent()!==b&&f.close("none")}},a.closeAll=function(b,c){a.closeOpened(b),c?b.close(c):b.close()},a.createWindows=function(b){a.each(b,function(b,c){a.createWindow(c,!1)})},a.appendWebview=function(b){if(window.plus){var c,d=b.id||b.url;return a.webviews[d]||(c=plus.webview.create(b.url,d,b.styles),c.addEventListener("loaded",function(){a.currentWebview.append(c)}),a.webviews[d]=b),c}},a.webviews={},a.data.preloads=[],a.init.add(function(){var b=a.options,c=b.subpages||[];a.plusReady(function(){a.currentWebview=plus.webview.currentWebview(),a.each(c,function(b,c){a.appendWebview(c)}),a.currentWebview==plus.webview.getWebviewById(plus.runtime.appid)&&(a.isHomePage=!0,setTimeout(function(){d(a.currentWebview)},300))})}),window.addEventListener("preload",function(){var b=a.options.preloadPages||[];a.plusReady(function(){a.each(b,function(b,c){a.createWindow(a.extend(c,{preload:!0}))})})})}(mui),function(a){a.init.add(function(){var b=a.options;b.titleBar&&a.titleBar(b.titleBar),a.os.ios&&a.plusReady(function(){var b=a.options.statusBarBackground?a.options.statusBarBackground:"#f7f7f7";plus.navigator.setStatusBarBackground(b)})})}(mui),function(a){a.init.add(function(){var b=a.options,c=b.pullRefresh||{};if(a.os.plus&&a.os.android)c.down&&a.plus_pulldownRefresh(c.down);else{var d=c.container;if(d){var e=a(d);1===e.length&&e.pullRefresh(c)}}})}(mui),function(a,b,c){a.titleBar=function(b){return b=a.extend({template:"top.html",height:"48px"},b),a.options.optimize&&a.os.plus?a.plusReady(function(){var c=plus.webview.create(b.template,null,{scalable:!1,position:"dock",dock:"top",height:b.height});c.addEventListener("loaded",function(){c.evalJS('document.querySelector(".mui-title").innerHTML="'+b.title+'"')});var d=b.pulldownRefresh||{},e=d.container;e?c.append(a.currentWebview):a.currentWebview.append(c)}):a.get(b.template,function(a){var d=a.match(/<body[^>]*>([\s\S.]*)<\/body>/i)[0],e=c.createElement("div");for(e.innerHTML=d;e.firstChild;)c.body.insertBefore(e.firstChild,c.body.firstChild);if(b.title){var f=c.body.querySelector(".mui-bar .mui-title");f&&(f.innerHTML=b.title)}}),this}}(mui,window,document),function(a){a.get=function(a,c,d){b("GET",a,c,d)},a.post=function(a,c,d){b("POST",a,c,d)};var b=function(a,b,c,d){var e=new XMLHttpRequest,f=/^([\w-]+:)\/\//.test(b)?RegExp.$1:window.location.protocol;e.onreadystatechange=function(){4===e.readyState&&(e.status>=200&&e.status<300||304===e.status||0===e.status&&"file:"===f?c&&c(e.responseText):d&&d())},e.open(a,b,!0),e.send()}}(mui),function(a,b,c){a.offset=function(a){var d={top:0,left:0};return typeof a.getBoundingClientRect!==c&&(d=a.getBoundingClientRect()),{top:d.top+b.pageYOffset-a.clientTop,left:d.left+b.pageXOffset-a.clientLeft}}}(mui,window),function(a,b){a.scrollTo=function(a,c,d){c=c||1e3;var e=function(c){if(0>=c)return void(d&&d());var f=a-b.scrollY;setTimeout(function(){b.scrollTo(0,b.scrollY+f/c*10),e(c-10)},16.7)};e(c)}}(mui,window),function(a,b,c){var d="mui-pull-top-pocket",e="mui-pull-bottom-pocket",f="mui-pull",g="mui-pull-loading",h="mui-pull-caption",i=h+"-down",j=h+"-over",k=h+"-refresh",l="mui-icon",m="mui-icon-spinner",n="mui-icon-pulldown",o="mui-spin",p="mui-in",q="mui-reverse",r=g+" "+l+" "+n+" "+q,s=g+" "+l+" "+n,t=g+" "+l+" "+m+" "+o,u={down:{height:50,contentdown:"下拉可以刷新",contentover:"释放立即刷新",contentrefresh:"正在刷新..."},up:{height:50,contentdown:"上拉显示更多",contentover:"释放立即刷新",contentrefresh:"正在刷新...",duration:300}},v=['<div class="'+f+'">','<div class="'+s+'"></div>','<div class="'+h+'">','<span class="'+i+" "+p+'">{downCaption}</span>','<span class="'+j+'">{overCaption}</span>','<span class="'+k+'">{refreshCaption}</span>',"</div>","</div>"],w=function(b,c){this.element=b,this.options=a.extend(u,c,!0),this.options.up.height=-this.options.up.height,this.pullOptions=null,this.init()};w.prototype.init=function(){this.element.style.webkitTransform="translate3d(0,0,0)",this.element.style.position="relative",this.element.style["-webkit-backface-visibility"]="hidden",this.translateY=0,this.lastTranslateY=0,this.initPocket(),this.initEvent()},w.prototype.initPocket=function(){var a=this.options;a.down&&a.down.hasOwnProperty("callback")&&(this.topPocket=this.element.querySelector("."+d),this.topPocket||(this.topPocket=this.createPocket(d,a.down),this.element.insertBefore(this.topPocket,this.element.firstChild))),a.up&&a.up.hasOwnProperty("callback")&&(this.bottomPocket=this.element.querySelector("."+e),this.bottomPocket||(this.bottomPocket=this.createPocket(e,a.up),this.element.appendChild(this.bottomPocket)))},w.prototype.createPocket=function(a,b){var d=c.createElement("div");return d.className=a,d.innerHTML=v.join("").replace("{downCaption}",b.contentdown).replace("{overCaption}",b.contentover).replace("{refreshCaption}",b.contentrefresh),d},w.prototype.initEvent=function(){var a=this;a.bottomPocket&&a.element.addEventListener("dragup",function(b){a.dragUp(b)}),a.topPocket&&a.element.addEventListener("dragdown",function(b){a.dragDown(b)}),(a.bottomPocket||a.topPocket)&&(a.element.addEventListener("dragstart",function(b){a.dragStart(b)}),a.element.addEventListener("drag",function(b){var c=b.detail.direction;a.dragDirection&&"up"!==c&&"down"!==c&&a.pullOptions&&(a.pullOptions.height>0?a.dragDown(b):a.dragUp(b))}),a.element.addEventListener("dragend",function(b){a.dragEnd(b)}))},w.prototype.dragStart=function(a){var b=a.detail;("up"===b.direction||"down"===b.direction)&&(this.element.style.webkitTransitionDuration="0s",this.isLoading=this.dragDirection=!1)},w.prototype.dragUp=function(a){var d=this;if(!d.isLoading&&"down"!==d.dragDirection){var e=c.body.scrollHeight;!d.dragDirection&&b.innerHeight+b.scrollY+40<e||(b.scrollTo(0,e),d.pullOptions=d.options.up,d.loading=d.bottomPocket.querySelector("."+g),d.drag(a))}},w.prototype.dragDown=function(a){var c=this;if(!c.isLoading&&"up"!==c.dragDirection){var d=b.scrollY;!c.dragDirection&&d>5||(0!==d&&b.scrollTo(0,0),c.pullOptions=c.options.down,c.loading=c.topPocket.querySelector("."+g),c.drag(a))}},w.prototype.drag=function(a){this.pullOptions&&(this.pullOptions.height>0&&a.detail.deltaY<0||(this.dragDirection=this.pullOptions.height>0?"down":"up",this.requestAnimationFrame||this.updateTranslate(),a.detail.gesture.preventDefault(),this.translateY=.4*a.detail.deltaY))},w.prototype.dragEnd=function(b){var c=this;c.pullOptions&&(cancelAnimationFrame(c.requestAnimationFrame),Math.abs(.4*b.detail.deltaY)>=Math.abs(c.pullOptions.height)?c.load():this.hide(),a.gestures.stoped=!0)},w.prototype.hide=function(){this.translateY=0,this.requestAnimationFrame&&(cancelAnimationFrame(this.requestAnimationFrame),this.requestAnimationFrame=null),this.element.style.webkitTransitionDuration="0.5s",this.setTranslate(0),this.setCaption(i),this.pullOptions.height>0&&this.loading.classList.remove(q),this.pullOptions=null},w.prototype.updateTranslate=function(){var a=this;a.translateY!==a.lastTranslateY&&(a.translateY=Math.abs(a.translateY)<2?0:a.translateY,a.setTranslate(a.translateY),Math.abs(a.translateY)>=Math.abs(a.pullOptions.height)?a.showLoading(j):a.hideLoading(i),a.lastTranslateY=a.translateY),a.requestAnimationFrame=requestAnimationFrame(function(){a.updateTranslate()})},w.prototype.setTranslate=function(a){this.element.style.webkitTransform="translate3d(0,"+a+"px,0)",this.bottomPocket&&(0>a?this.bottomPocket.style.bottom=(a>this.pullOptions.height?a:this.pullOptions.height)+"px":0===a&&this.bottomPocket.setAttribute("style",""))},w.prototype.load=function(){var d=this;d.isLoading=!0,d.showLoading(k),d.setTranslate(d.pullOptions.height);var e=d.pullOptions.callback;e&&e(function(){if(d.pullOptions&&d.pullOptions.height<0){var e=Math.min(1e3,d.pullOptions.duration);setTimeout(function(){a.scrollTo(c.body.scrollHeight-b.innerHeight,e,function(){d.isLoading=!1})},100)}else d.isLoading=!1;d.hide()})},w.prototype.showLoading=function(a){this.setCaption(a)},w.prototype.hideLoading=function(a){this.setCaption(a)},w.prototype.setCaption=function(a){var b=this.pullOptions&&this.pullOptions.height>0?this.topPocket:this.bottomPocket;if(b){var c=b.querySelector("."+h),d=c.querySelector("."+p);d&&d.classList.remove(p);var e=c.querySelector("."+a);e&&e.classList.add(p),this.loading.className=this.pullOptions&&this.pullOptions.height>0?a===k?t:a===j?r:s:t}},a.fn.pullRefresh=function(b){this.each(function(){var c=this.getAttribute("data-pullrefresh");if(!c){var d=++a.uuid;a.data[d]=new w(this,b),this.setAttribute("data-pullrefresh",d)}})}}(mui,window,document),function(a){var b={height:50,contentdown:"下拉可以刷新",contentover:"释放立即刷新",contentrefresh:"正在刷新..."};a.plus_pulldownRefresh=function(c){c=a.extend(b,c,!0),a.plusReady(function(){var b=document.body,d=b.getAttribute("data-pullrefresh-plus");if(!d){d=++a.uuid,b.setAttribute("data-pullrefresh-plus",d);var e=a.currentWebview;e.setPullToRefresh({support:!0,height:c.height+"px",range:"200px",contentdown:{caption:c.contentdown},contentover:{caption:c.contentover},contentrefresh:{caption:c.contentrefresh}},function(){c.callback&&c.callback(function(){e.endPullToRefresh()})})}})}}(mui),function(a,b,c,d){var e="mui-off-canvas-left",f="mui-off-canvas-right",g="mui-off-canvas-backdrop",h="mui-off-canvas-wrap",i="mui-off-canvas-height-fixed",j="mui-left",k="mui-right",l="mui-sliding",m=".mui-inner-wrap",n=function(a){if(parentNode=a.parentNode){if(parentNode.classList.contains(h))return parentNode;if(parentNode=parentNode.parentNode,parentNode.classList.contains(h))return parentNode}},o=function(b,d){if(d.classList&&d.classList.contains(g)){var e=n(d);if(e)return a.targets._container=e,d}else if("A"===d.tagName&&d.hash){var f=c.getElementById(d.hash.replace("#",""));if(f){var e=n(f);if(e)return a.targets._container=e,f}}return!1};a.registerTarget({name:d,index:60,handle:o,target:!1,isReset:!1,isContinue:!0});var p=function(a,b){var d=a.querySelector(".mui-content"),e=c.getElementsByTagName("html")[0],f=c.body;b?(e.classList.add(i),f.classList.add(i),d&&d.classList.add(i)):(e.classList.remove(i),f.classList.remove(i),d&&d.classList.remove(i))},q=function(){var a=this.parentNode;a.classList.remove(l),this.removeEventListener("webkitTransitionEnd",q),a.classList.contains(k)||a.classList.contains(j)||p(a,!1)},r=function(a,b){if(a&&b){var c=b.classList;a.querySelector(m).addEventListener("webkitTransitionEnd",q),a.classList.contains(k)||a.classList.contains(j)||p(a,!0),c.contains(e)?a.classList.toggle(k):c.contains(f)?a.classList.toggle(j):c.contains(g)&&(a.classList.remove(k),a.classList.remove(j)),a.classList.add(l)}};b.addEventListener("tap",function(){a.targets.offcanvas&&r(a.targets._container,a.targets.offcanvas)}),a.fn.offCanvas=function(){var a=arguments;this.each(function(){if("show"===a[0]||"hide"===a[0]||"toggle"===a[0]){var b=this.classList;if(b.contains(e)||b.contains(f)){var c=n(this);c&&r(c,this)}}})}}(mui,window,document,"offcanvas"),function(a,b,c){if(!a.os.android){var d,e,f,g,h="mui-slider",i="mui-switch",j="mui-table-view-cell",k="mui-slider-handle",l="mui-off-canvas-left",m="mui-off-canvas-right",n="mui-off-canvas-wrap",o="mui-off-canvas-height-fixed",p="mui-left",q="mui-right",r="mui-sliding",s="mui-draggable",t=".mui-inner-wrap",u="."+l,v="."+m,w=!1,x=1,y=0,z=0,A=0,B=0,C=function(){y!==z&&(e.style["-webkit-transition-duration"]="0s","right"===g&&y>0?(y=Math.min(y,B),0>A?D(e,A+y):D(e,y)):"left"===g&&0>y&&(y=Math.max(y,-B),A>0?D(e,A+y):D(e,y)),z=y),f=requestAnimationFrame(function(){C()})},D=function(a,b){a&&(a.style.webkitTransform="translate3d("+b+"px,0,0)")},E=function(a,b){var d=a.querySelector(".mui-content"),e=c.getElementsByTagName("html")[0],f=c.body;b?(e.classList.add(o),f.classList.add(o),d&&d.classList.add(o)):(e.classList.remove(o),f.classList.remove(o),d&&d.classList.remove(o))},F=function(){var a=this.parentNode,b=a.classList;b.remove(r),this.removeEventListener("webkitTransitionEnd",F),b.contains(q)||b.contains(p)||E(a,!1)};b.addEventListener("touchstart",function(a){var b=a.target;for(w=!1,d=e=null;b&&b!==c;b=b.parentNode){var f=b.classList;if(f){if(f.contains(i))break;if(f.contains(j)&&b.querySelector("."+k))break;if(f.contains(h))break;if(f.contains(n)&&f.contains(s)){if(d=b,e=d.querySelector(t),!e)return;break}}}}),b.addEventListener("dragstart",function(b){if(d){var c=b.detail;if("left"===c.direction?d.classList.contains(q)?w=!0:d.querySelector(v)&&!d.classList.contains(p)&&(w=!0):"right"===c.direction&&(d.classList.contains(p)?w=!0:d.querySelector(u)&&!d.classList.contains(q)&&(w=!0)),w){g=c.direction,B=.8*d.offsetWidth;var f=a.getStyles(e,"webkitTransform"),h=a.parseTranslateMatrix(f);A=y=h?h.x:0;var i=d.classList;i.add(r),i.contains(q)||i.contains(p)||E(d,!0),c.gesture.preventDefault()}}}),b.addEventListener("drag",function(a){if(w){var b=a.detail;f||C(),y=b.deltaX*x}}),b.addEventListener("dragend",function(){if(w){f&&(cancelAnimationFrame(f),f=null),e.setAttribute("style",""),e.addEventListener("webkitTransitionEnd",F);var a,b=d.classList,c=["add","remove"];"right"===g&&y>0?(a=q,0>A&&(c.reverse(),a=p),y>B/2?b[c[0]](a):b[c[1]](a)):"left"===g&&0>y&&(a=p,A>0&&(c.reverse(),a=q),-y>B/2?b[c[0]](a):b[c[1]](a))}})}}(mui,window,document,"offcanvas"),function(a,b,c,d){var e="mui-action",f=function(a,b){return b.className&&~b.className.indexOf(e)?b:!1};a.registerTarget({name:d,index:50,handle:f,target:!1})}(mui,window,document,"action"),function(a,b,c,d){var e="mui-modal",f=function(a,b){if("A"===b.tagName&&b.hash){var d=c.getElementById(b.hash.replace("#",""));if(d&&d.classList.contains(e))return d}return!1};a.registerTarget({name:d,index:50,handle:f,target:!1,isReset:!1,isContinue:!0}),b.addEventListener("tap",function(){a.targets.modal&&a.targets.modal.classList.toggle("mui-active")})}(mui,window,document,"modal"),function(a,b,c,d){var e="mui-popover",f="mui-bar-popover",g="mui-popover-action",h="mui-backdrop",i="mui-bar-backdrop",j="mui-backdrop-action",k="mui-active",l=function(b,d){return"A"===d.tagName&&d.hash&&(a.targets._popover=c.getElementById(d.hash.replace("#","")),a.targets._popover&&a.targets._popover.classList.contains(e))?d:!1};a.registerTarget({name:d,index:60,handle:l,target:!1,isReset:!1,isContinue:!0});var m=function(a){a?c.body.setAttribute("style","position:fixed;width:100%;height:100%;overflow:hidden;"):c.body.setAttribute("style","")},n=function(){this.style.display="none",this.removeEventListener("webkitTransitionEnd",n),m(!1)},o=function(){var b=c.createElement("div");return b.classList.add(h),b.addEventListener("tap",function(){var b=a.targets._popover;b&&(b.addEventListener("webkitTransitionEnd",n),b.classList.remove(k),b.parentNode.removeChild(o))}),b}();b.addEventListener("tap",function(){a.targets.popover&&p(a.targets._popover,a.targets.popover)});var p=function(a,d){o.classList.remove(i),o.classList.remove(j);var e=c.querySelector(".mui-popover.mui-active");if(!e||(e.style.display="none",e.classList.remove(k),e.removeEventListener("webkitTransitionEnd",n),m(!1),e.parentNode.removeChild(o),a!==e)){if(a.classList.contains(f)||a.classList.contains(g))if(a.classList.contains(g))o.classList.add(j);else if(o.classList.add(i),d&&d.parentNode){var h=d.offsetWidth,l=d.offsetLeft,p=b.innerWidth;a.style.left=Math.min(Math.max(l,5),p-h-5)+"px"}a.style.display="block",a.offsetHeight,a.classList.add(k),a.parentNode.appendChild(o),m(!0),o.classList.add(k)}};a.fn.popover=function(){var b=arguments;this.each(function(){a.targets._popover=this,("show"===b[0]||"hide"===b[0]||"toggle"===b[0])&&p(this,b[1])})}}(mui,window,document,"popover"),function(a,b,c,d){var e="mui-control-item",f="mui-control-content",g="mui-tab-item",h=function(a,b){return b.classList&&(b.classList.contains(e)||b.classList.contains(g))?b:!1};a.registerTarget({name:d,index:80,handle:h,target:!1}),b.addEventListener("tap",function(){var b=a.targets.tab;if(b){var e,g,h,i="mui-active",j="."+i;e=b.parentNode.querySelector(j),e&&e.classList.remove(i);var k=b===e;if(b&&b.classList.add(i),b.hash&&(h=c.getElementById(b.hash.replace("#","")))){if(!h.classList.contains(f))return void b.classList[k?"remove":"add"](i);if(!k){g=h.parentNode.getElementsByClassName(i);for(var l=0;l<g.length;l++)g[l].classList.remove(i);h.classList.add(i);var m=h.parentNode.querySelectorAll("."+f);a.trigger(h,a.eventName("shown",d),{tabNumber:Array.prototype.indexOf.call(m,h)})}}}})}(mui,window,document,"tab"),function(a,b){var c="mui-slider",d="mui-slider-group",e="mui-slider-loop",f="mui-slider-indicator",g="mui-action-previous",h="mui-action-next",i="mui-slider-item",j="."+i,k="."+f,l=".mui-slider-progress-bar",m=function(b,c){this.element=b,this.options=a.extend({slideshowDelay:0,factor:1},c),this.init()};m.prototype.init=function(){this.initEvent(),this.initTimer()},m.prototype.refresh=function(b){var c=a.extend({slideshowDelay:0,factor:1},b);this.options.slideshowDelay!=c.slideshowDelay&&(this.options.slideshowDelay=c.slideshowDelay,this.options.slideshowDelay&&this.nextItem())},m.prototype.initEvent=function(){var b=this,c=b.element,d=c.parentNode;b.translateX=0,b.sliderWidth=c.offsetWidth,b.isLoop=c.classList.contains(e),b.sliderLength=c.querySelectorAll(j).length,b.progressBarWidth=0,b.progressBar=d.querySelector(l),b.progressBar&&(b.progressBarWidth=b.progressBar.offsetWidth);var f=!1;b.isSwipeable=!1,d.addEventListener("dragstart",function(a){var d=a.detail,g=d.direction;("left"==g||"right"==g)&&(f=!0,b.translateX=b.lastTranslateX=0,b.scrollX=b.getScroll(),b.sliderWidth=c.offsetWidth,b.isLoop=c.classList.contains(e),b.sliderLength=c.querySelectorAll(j).length,b.progressBar&&(b.progressBarWidth=b.progressBar.offsetWidth),b.maxTranslateX=(b.sliderLength-1)*b.sliderWidth,a.detail.gesture.preventDefault())}),d.addEventListener("drag",function(a){f&&b.dragItem(a)}),d.addEventListener("dragend",function(){f&&(b.gotoItem(b.getSlideNumber()),f=b.isSwipeable=!1)}),d.addEventListener("swipeleft",function(c){b.isSwipeable&&(a.gestures.stoped=!0,b.nextItem(),f=b.isSwipeable=!1,c.stopImmediatePropagation())}),d.addEventListener("swiperight",function(c){b.isSwipeable&&(a.gestures.stoped=!0,b.prevItem(),f=b.isSwipeable=!1,c.stopImmediatePropagation())}),d.addEventListener("slide",function(a){var b=a.detail;b.slideNumber=b.slideNumber||0;var c=d.querySelector(".mui-slider-indicator .mui-number span");c&&(c.innerText=b.slideNumber+1);for(var e=d.querySelectorAll(".mui-slider-indicator .mui-indicator"),f=0,g=e.length;g>f;f++)e[f].classList[f===b.slideNumber?"add":"remove"]("mui-active");for(var h=d.querySelectorAll(".mui-control-item"),f=0,g=h.length;g>f;f++)h[f].classList[f===b.slideNumber?"add":"remove"]("mui-active")}),d.addEventListener(a.eventName("shown","tab"),function(a){b.gotoItem(-(a.detail.tabNumber||0))});var i=c.parentNode.querySelector(k);i&&i.addEventListener("tap",function(a){var c=a.target;(c.classList.contains(g)||c.classList.contains(h))&&(b[c.classList.contains(g)?"prevItem":"nextItem"](),a.stopPropagation())})},m.prototype.dragItem=function(a){var b=this,c=a.detail;if(c.deltaX!==c.lastDeltaX){var d=c.deltaX*b.options.factor+b.scrollX;
b.element.style["-webkit-transition-duration"]="0";var e=0,f=-b.maxTranslateX;if(b.isLoop&&(e=b.sliderWidth,f+=e),d>e||f>d)return void(b.isSwipeable=!1);b.requestAnimationFrame||b.updateTranslate(),b.isSwipeable=!0,b.translateX=d}b.timer&&clearTimeout(b.timer),b.timer=setTimeout(function(){b.initTimer()},100)},m.prototype.updateTranslate=function(){var a=this;a.lastTranslateX!==a.translateX&&(a.setTranslate(a.translateX),a.lastTranslateX=a.translateX),a.requestAnimationFrame=requestAnimationFrame(function(){a.updateTranslate()})},m.prototype.setTranslate=function(a){this.element.style.webkitTransform="translate3d("+a+"px,0,0)",this.updateProcess(a)},m.prototype.updateProcess=function(a){var b=this.progressBarWidth;b&&(a=Math.abs(a),this.setProcess(a*(b/this.sliderWidth)))},m.prototype.setProcess=function(a){var b=this.progressBar;b&&(b.style.webkitTransform="translate3d("+a+"px,0,0)")},m.prototype.nextItem=function(){this.gotoItem(this.getCurrentSlideNumber("next")-1)},m.prototype.prevItem=function(){this.gotoItem(this.getCurrentSlideNumber("prev")+1)},m.prototype.gotoItem=function(b){var c=this,d=c.element,e=c.sliderLength;c.isLoop?e-=2:(e-=1,b=Math.min(0,b),b=Math.max(b,-e)),c.requestAnimationFrame&&(cancelAnimationFrame(c.requestAnimationFrame),c.requestAnimationFrame=null);var f=Math.max(b,-e)*d.offsetWidth;d.style["-webkit-transition-duration"]=".2s",c.setTranslate(f);var g=function(){d.style["-webkit-transition-duration"]="0",d.style.webkitTransform="translate3d("+b*d.offsetWidth+"px,0,0)",d.removeEventListener("webkitTransitionEnd",g)};d.removeEventListener("webkitTransitionEnd",g),c.isLoop&&(1===b||b===-e)&&(b=1===b?-e+1:0,d.addEventListener("webkitTransitionEnd",g)),a.trigger(d.parentNode,"slide",{slideNumber:Math.abs(b)}),this.initTimer()},m.prototype.getSlideNumber=function(){return Math.round(this.getScroll()/this.sliderWidth)},m.prototype.getCurrentSlideNumber=function(a){return Math["next"===a?"ceil":"floor"](this.getScroll()/this.sliderWidth)},m.prototype.getScroll=function(){var b=this.element,c=0;if("webkitTransform"in b.style){var d=a.parseTranslate(b.style.webkitTransform);c=d?d.x:0}return c},m.prototype.initTimer=function(){var a=this,c=a.options.slideshowDelay;if(c){var d=a.element,e=d.getAttribute("data-slidershowTimer");e&&b.clearTimeout(e),e=b.setTimeout(function(){d&&((d.offsetWidth||d.offsetHeight)&&a.nextItem(),a.initTimer())},c),d.setAttribute("data-slidershowTimer",e)}},a.fn.slider=function(b){this.each(function(){var e=this;this.classList.contains(c)&&(e=this.querySelector("."+d));var f=e.getAttribute("data-slider");if(f){var g=a.data[f];g&&g.refresh(b)}else f=++a.uuid,a.data[f]=new m(e,b),e.setAttribute("data-slider",f)})},a.ready(function(){a(".mui-slider-group").slider()})}(mui,window),function(a,b,c,d){var e="mui-switch",f="mui-switch-handle",g="mui-active",h="."+f,i=function(a,b){return b.classList&&b.classList.contains(e)?b:!1};a.registerTarget({name:d,index:100,handle:i,target:!1});var j,i,k,l,m,n=function(b){if(j){var c=b.detail;a.gestures.stoped=!0;var d=!c.drag&&!j.classList.contains(g)||c.drag&&c.deltaX>k/2-l/2;i.style["-webkit-transition-duration"]=".2s",d?(i.style.webkitTransform="translate3d("+m+"px,0,0)",j.classList.add(g)):(i.style.webkitTransform="translate3d(0,0,0)",j.classList.remove(g)),a.trigger(j,"toggle",{isActive:d})}},o=function(a){if(j){var b=a.detail.deltaX;if(0>b)return i.style.webkitTransform="translate3d(0,0,0)";if(b>m)return i.style.webkitTransform="translate3d("+m+"px,0,0)";i.style["-webkit-transition-duration"]="0s",i.style.webkitTransform="translate3d("+b+"px,0,0)",j.classList[b>k/2-l/2?"add":"remove"](g)}};b.addEventListener(a.EVENT_START,function(b){j=a.targets.toggle,j&&(i=j.querySelector(h),k=j.clientWidth,l=i.clientWidth,m=k-l+3,b.preventDefault())}),b.addEventListener("tap",n),b.addEventListener("drag",o),b.addEventListener("dragend",n)}(mui,window,document,"toggle"),function(a,b,c){var d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u="mui-active",v="mui-selected",w="mui-table-view-cell",x="mui-disabled",y="mui-switch",z="mui-btn",A="mui-slider-cell",B="mui-slider-handle",C="mui-slider-left",D="mui-slider-right",E="mui-bounce",F="."+A,G="."+B,H="."+C,I="."+D,J=.4,K=1,L=1,M=function(a){a?e?e.classList.add(u):d&&d.classList.add(u):e?e.classList.remove(u):d&&d.classList.remove(u)},N=function(){s!==t&&(k||n?(k&&n?0===h?O(g,s):O(g,h+s):k?0===h?O(g,Math.max(s,0)):O(g,Math.max(h+s,0)):n&&(0===h?O(g,Math.min(s,0)):O(g,Math.min(h+s,0))),k&&(0===h?s>m&&(f.style.backgroundColor=l,O(k,Math.max(s-m,0))):(f.style.backgroundColor=s>0?l:"",O(k,Math.max(s,0)))),n&&(0===h?-s>p&&(f.style.backgroundColor=o,O(n,Math.min(-(-s-p),0))):(f.style.backgroundColor=s>0&&!k?"":o,O(n,Math.min(s,0))))):g&&(0===h&&s>0||h===i&&0>s)&&Math.abs(s)<=i&&O(g,h+s),t=s),r=requestAnimationFrame(function(){N()})},O=function(a,b){a&&(a.style.webkitTransform="translate3d("+b+"px,0,0)")},P=function(b,c){k&&(k.setAttribute("style",""),n&&n.setAttribute("style",""),b?(O(g,m),c&&a.trigger(g,"slideright"),d.classList.add(v)):(O(g,0),d.classList.remove(v)))},Q=function(b,c){n&&(n.setAttribute("style",""),k&&k.setAttribute("style",""),b?(O(g,-p),c&&a.trigger(g,"slideleft"),d.classList.add(v)):(O(g,0),d.classList.remove(v)))},R=function(a){g&&(a?(O(g,0),d.classList.add(v)):(O(g,i),d.classList.remove(v)))},S=function(b,c){q=!1,r&&(cancelAnimationFrame(r),r=null),f.setAttribute("style","");var d=Math.abs(s);if(b||!k&&!n)k||n||R(0===h?!(d>i/2):d>i/2);else if(s>0){var e=m/2;if(0!==h&&n&&(Q(!(d>=p/2),!1),e=m/2+p),k){var j=d>=e;k.classList.contains(E)?(k.setAttribute("style",""),O(g,0),j&&!c.swipe&&a.trigger(g,"slideright")):P(j,!0)}}else{var e=m/2;if(0!==h&&k&&(P(!(d>=m/2),!1),e=p/2+m),n){var j=d>=e;n.classList.contains(E)?(n.setAttribute("style",""),O(g,0),j&&!c.swipe&&a.trigger(g,"slideleft")):Q(j,!0)}}};b.addEventListener("touchstart",function(b){d=e=g=k=n=q=r=!1,s=t=h=i=m=p=0,l=o="";for(var u=b.target,A=!1;u&&u!==c;u=u.parentNode)if(u.classList){var B=u.classList;if(("INPUT"===u.tagName&&"radio"!==u.type&&"checkbox"!==u.type||"BUTTON"===u.tagName||B.contains(y)||B.contains(z)||B.contains(x))&&(A=!0),B.contains(w)){d=u;var C=d.parentNode.querySelector("."+v);if(C&&C!=d){C.classList.remove(v);var D=C.querySelector(G);if(D){var E=C.querySelector(H);E&&E.setAttribute("style","");var N=C.querySelector(I);N&&N.setAttribute("style",""),E||N?O(D,0):O(D,D.offsetWidth)}}var P=d.querySelector("a");if(P&&P.parentNode===d&&(e=P),f=d.querySelector(F),f&&f.parentNode===d){var Q=f.querySelector(G);if(Q){g=Q,i=g.offsetWidth,j=a.getStyles(g,"margin-left"),L=K;var R=f.querySelector(H);R&&(k=R,l=a.getStyles(R,"background-color"),m=R.offsetWidth);var S=f.querySelector(I);S&&(n=S,o=a.getStyles(S,"background-color"),p=S.offsetWidth),(k||n)&&(L=J);var T=a.getStyles(g,"webkitTransform"),U=a.parseTranslateMatrix(T);h=U?U.x:0}}A||M(!0);break}}}),b.addEventListener("touchmove",function(){M(!1)}),b.addEventListener("dragstart",function(a){if(g){var b=a.detail,c=b.direction,d=b.angle;if("left"===c){if((n||g)&&(d>150||-150>d)){if(!n&&k&&0===h)return;if(g&&!n&&!k&&0===h)return;q=!0}}else if("right"===c&&(k||g)&&d>-30&&30>d){if(!k&&n&&0===h)return;if(g&&!n&&!k&&h===i)return;q=!0}}}),b.addEventListener("drag",function(a){q&&(r||N(),s=a.detail.deltaX*L,a.detail.gesture.preventDefault())}),b.addEventListener("dragend",function(a){q&&S(!1,a.detail)}),b.addEventListener("swiperight",function(b){if(g){var c=!1;k&&!k.classList.contains(E)&&0===h?(P(!0,!0),c=!0):n&&0>h?(Q(!1,!1),c=!0):k||n||(c=!0),c&&(a.gestures.stoped=!0,b.stopImmediatePropagation(),S(!0,b.detail))}}),b.addEventListener("swipeleft",function(b){if(g){var c=!1;n&&!n.classList.contains(E)&&0===h?(Q(!0,!0),c=!0):k&&h>0?(P(!1,!1),c=!0):k||n||(c=!0),c&&(a.gestures.stoped=!0,b.stopImmediatePropagation(),S(!0,b.detail))}}),b.addEventListener("touchend",function(){d&&M(!1)}),b.addEventListener("touchcancel",function(){d&&M(!1)});var T=function(){var a=d.classList;if(a.contains("mui-radio")){var b=d.querySelector("input[type=radio]");b&&b.click()}else if(a.contains("mui-checkbox")){var b=d.querySelector("input[type=checkbox]");b&&b.click()}};b.addEventListener("doubletap",function(){d&&T()}),b.addEventListener("tap",function(){if(d){var b=!1,c=d.classList;if(c.contains("mui-collapse")){if(!c.contains(u)){var e=d.parentNode.querySelector(".mui-collapse.mui-active");e&&e.classList.remove(u),b=!0}c.toggle(u),b&&a.trigger(d,"expand")}T()}})}(mui,window,document),function(a,b){a.alert=function(c,d,e,f){if(a.os.plus){if(void 0===typeof c)return;"function"==typeof d?(f=d,d=null,e="确定"):"function"==typeof e&&(f=e,e=null),plus.nativeUI.alert(c,f,d,e)}else b.alert(c)}}(mui,window),function(a,b){a.confirm=function(c,d,e,f){if(a.os.plus){if(void 0===typeof c)return;"function"==typeof d?(f=d,d=null,e=null):"function"==typeof e&&(f=e,e=null),plus.nativeUI.confirm(c,f,d,e)}else b.confirm(c)}}(mui,window),function(a,b){a.prompt=function(c,d,e,f,g){if(a.os.plus){if(void 0===typeof message)return;"function"==typeof d?(g=d,d=null,e=null,f=null):"function"==typeof e?(g=e,e=null,f=null):"function"==typeof f&&(g=f,f=null),plus.nativeUI.prompt(c,g,e,d,f)}else b.prompt(c)}}(mui,window),function(a){a.toast=function(b){if(a.os.plus&&a.os.android)plus.nativeUI.toast(b,{verticalAlign:"bottom"});else{var c=document.createElement("div");c.classList.add("mui-toast-container"),c.innerHTML='<div class="mui-toast-message">'+b+"</div>",document.body.appendChild(c),setTimeout(function(){document.body.removeChild(c)},2e3)}}}(mui,window),function(a,b,c){var d="mui-icon",e="mui-icon-clear",f="mui-icon-speech",g="mui-icon-search",h="mui-input-row",i="mui-placeholder",j="mui-tooltip",k="mui-hidden",l="."+e,m="."+f,n="."+i,o="."+j,p=function(a){for(;a&&a!==c;a=a.parentNode)if(a.classList&&a.classList.contains(h))return a;return null},q=function(a,b){this.element=a,this.options=b||{actions:"clear"},~this.options.actions.indexOf("slider")?(this.sliderActionClass=j+" "+k,this.sliderActionSelector=o):(~this.options.actions.indexOf("clear")&&(this.clearActionClass=d+" "+e+(a.value?"":" "+k),this.clearActionSelector=l),~this.options.actions.indexOf("speech")&&(this.speechActionClass=d+" "+f,this.speechActionSelector=m),~this.options.actions.indexOf("search")&&(this.searchActionClass=i,this.searchActionSelector=n)),this.init()};q.prototype.init=function(){this.initAction(),this.initElementEvent()},q.prototype.initAction=function(){var a=this,b=a.element.parentNode;b&&(a.sliderActionClass?a.sliderAction=a.createAction(b,a.sliderActionClass,a.sliderActionSelector):(a.searchActionClass&&(a.searchAction=a.createAction(b,a.searchActionClass,a.searchActionSelector),a.searchAction.addEventListener("tap",function(){setTimeout(function(){a.element.focus()},0)})),a.speechActionClass&&(a.speechAction=a.createAction(b,a.speechActionClass,a.speechActionSelector),a.speechAction.addEventListener("click",function(a){a.stopPropagation()}),a.speechAction.addEventListener("tap",function(b){a.speechActionClick(b)})),a.clearActionClass&&(a.clearAction=a.createAction(b,a.clearActionClass,a.clearActionSelector),a.clearAction.addEventListener("tap",function(b){a.clearActionClick(b)}))))},q.prototype.createAction=function(a,b,e){var f=a.querySelector(e);if(!f){var f=c.createElement("span");f.className=b,b===this.searchActionClass&&(f.innerHTML='<span class="'+d+" "+g+'"></span>'+this.element.getAttribute("placeholder"),this.element.setAttribute("placeholder","")),a.insertBefore(f,this.element.nextSibling)}return f},q.prototype.initElementEvent=function(){var b=this.element;if(this.sliderActionClass){var c=this.sliderAction,d=b.offsetLeft,e=b.offsetWidth-28,f=c.offsetWidth,g=Math.abs(b.max-b.min),h=null,i=function(){c.classList.remove(k),f=f||c.offsetWidth;var a=Math.abs(b.value)/g*e;c.style.left=14+d+a-f/2+"px",c.innerText=b.value,h&&clearTimeout(h),h=setTimeout(function(){c.classList.add(k)},1e3)};b.addEventListener("input",i),b.addEventListener("tap",i)}else{if(this.clearActionClass){var j=this.clearAction;if(!j)return;a.each(["keyup","change","input","focus","blur","cut","paste"],function(a,c){!function(a){b.addEventListener(a,function(){j.classList[b.value.trim()?"remove":"add"](k)})}(c)})}this.searchActionClass&&(b.addEventListener("focus",function(){b.parentNode.classList.add("mui-active")}),b.addEventListener("blur",function(){b.value.trim()||b.parentNode.classList.remove("mui-active")}))}},q.prototype.clearActionClick=function(a){this.element.value="",this.element.focus(),this.clearAction.classList.add(k),a.preventDefault()},q.prototype.speechActionClick=function(a){if(b.plus){var c=this;c.element.value="",plus.speech.startRecognize({engine:"iFly"},function(a){c.element.value+=a,setTimeout(function(){c.element.focus()},0),plus.speech.stopRecognize()},function(){})}else alert("only for 5+");a.preventDefault()},a.fn.input=function(){this.each(function(){var b=[],c=p(this.parentNode);if("range"===this.type&&c.classList.contains("mui-input-range"))b.push("slider");else{var d=this.classList;d.contains("mui-input-clear")&&b.push("clear"),d.contains("mui-input-speech")&&b.push("speech"),"search"===this.type&&c.classList.contains("mui-search")&&b.push("search")}var e=this.getAttribute("data-input-"+b[0]);if(!e){e=++a.uuid,a.data[e]=new q(this,{actions:b.join(",")});for(var f=0,g=b.length;g>f;f++)this.setAttribute("data-input-"+b[f],e)}})},a.ready(function(){a(".mui-input-row input").input()})}(mui,window,document),function(a,b){a.back=function(){b.history.length>1&&("function"==typeof a.options.back?a.options.back()!==!1&&b.history.back():b.history.back())},b.addEventListener("tap",function(){var b=a.targets.action;b&&b.classList.contains("mui-action-back")&&a.back()}),b.addEventListener("swiperight",function(b){var c=b.detail;c.angle>-15&&c.angle<15&&a.options.swipeBack===!0&&a.back()})}(mui,window),function(a,b){a.back=function(){var c=!0,d=!1;if("function"==typeof a.options.back&&(d=a.options.back(),d===!1&&(c=!1)),c)if(b.plus){var e=a.currentWebview,f=e.parent();f&&(e=f),e.canBack(function(){var b=e.opener();b&&(e.preload?e.hide("auto"):a.closeAll(e))})}else b.history.length>1?b.history.back():b.close()},a.menu=function(){var c=document.querySelector(".mui-action-menu");if(c)a.trigger(c,"tap");else if(b.plus){var d=a.currentWebview,e=d.parent();e&&e.evalJS("mui&&mui.menu();")}},a.plusReady(function(){plus.key.addEventListener("backbutton",function(){a.back()},!1),plus.key.addEventListener("menubutton",function(){a.menu()},!1)})}(mui,window);
\ No newline at end of file
_site/examples/hello-mui/js/update.js deleted 100644 → 0
View file @ 86f3bac6
(function(w){
var server="http://d.dcloud.net.cn/hellomui/update.json",//获取升级描述文件服务器地址
localDir="update",localFile="update.json",//本地保存升级描述目录和文件名
keyUpdate="updateCheck",//取消升级键名
keyAbort="updateAbort",//忽略版本键名
checkInterval=60480000,//升级检查间隔，单位为ms,7天为7*24*60*60*1000=60480000, 如果每次启动需要检查设置值为0
dir=null;
/**
* 准备升级操作
* 创建升级文件保存目录
*/
function initUpdate(){
// 打开doc根目录
plus.io.requestFileSystem( plus.io.PRIVATE_DOC, function(fs){
fs.root.getDirectory( localDir, {create:true}, function(entry){
dir = entry;
checkUpdate();
}, function(e){
console.log( "准备升级操作，打开update目录失败："+e.message );
});
},function(e){
console.log( "准备升级操作，打开doc目录失败："+e.message );
});
}
/**
* 检测程序升级
*/
function checkUpdate() {
// 判断升级检测是否过期
var lastcheck = plus.storage.getItem( keyUpdate );
if ( lastcheck ) {
var dc = parseInt( lastcheck );
var dn = (new Date()).getTime();
if ( dn-dc < checkInterval ) { // 未超过上次升级检测间隔，不需要进行升级检查
return;
}
// 取消已过期，删除取消标记
plus.storage.removeItem( keyUpdate );
}
// 读取本地升级文件
dir.getFile( localFile, {create:false}, function(fentry){
fentry.file( function(file){
var reader = new plus.io.FileReader();
reader.onloadend = function ( e ) {
fentry.remove();
var data = null;
try{
data=JSON.parse(e.target.result);
}catch(e){
console.log( "读取本地升级文件，数据格式错误！" );
return;
}
checkUpdateData( data );
}
reader.readAsText(file);
}, function(e){
console.log( "读取本地升级文件，获取文件对象失败："+e.message );
fentry.remove();
} );
}, function(e){
// 失败表示文件不存在，从服务器获取升级数据
getUpdateData();
});
}
/**
* 检查升级数据
*/
function checkUpdateData( j ){
var curVer=plus.runtime.version,
inf = j[plus.os.name];
if ( inf ){
var srvVer = inf.version;
// 判断是否存在忽略版本号
var vabort = plus.storage.getItem( keyAbort );
if ( vabort && srvVer==vabort ) {
// 忽略此版本
return;
}
// 判断是否需要升级
if ( compareVersion(curVer,srvVer) ) {
// 提示用户是否升级
plus.ui.confirm( inf.note, function(i){
if ( 0==i ) {
plus.runtime.openURL( inf.url );
} else if ( 1==i ) {
plus.storage.setItem( keyAbort, srvVer );
plus.storage.setItem( keyUpdate, (new Date()).getTime().toString() );
} else {
plus.storage.setItem( keyUpdate, (new Date()).getTime().toString() );
}
}, inf.title, ["立即更新","跳过此版本","取　　消"] );
}
}
}
/**
* 从服务器获取升级数据
*/
function getUpdateData(){
var xhr = new plus.net.XMLHttpRequest();
xhr.onreadystatechange = function () {
switch ( xhr.readyState ) {
case 4:
if ( xhr.status == 200 ) {
// 保存到本地文件中
dir.getFile( localFile, {create:true}, function(fentry){
fentry.createWriter( function(writer){
writer.onerror = function(){
console.log( "获取升级数据，保存文件失败！" );
}
writer.write( xhr.responseText );
}, function(e){
console.log( "获取升级数据，创建写文件对象失败："+e.message );
} );
}, function(e){
console.log( "获取升级数据，打开保存文件失败："+e.message );
});
} else {
console.log( "获取升级数据，联网请求失败："+xhr.status );
}
break;
default :
break;
}
}
xhr.open( "GET", server );
xhr.send();
}
/**
* 比较版本大小，如果新版本nv大于旧版本ov则返回true，否则返回false
* @param {String} ov
* @param {String} nv
* @return {Boolean}
*/
function compareVersion( ov, nv ){
if ( !ov || !nv || ov=="" || nv=="" ){
return false;
}
var b=false,
ova = ov.split(".",4),
nva = nv.split(".",4);
for ( var i=0; i<ova.length&&i<nva.length; i++ ) {
var so=ova[i],no=parseInt(so),sn=nva[i],nn=parseInt(sn);
if ( nn>no || sn.length>so.length ) {
return true;
} else if ( nn<no ) {
return false;
}
}
if ( nva.length>ova.length && 0==nv.indexOf(ov) ) {
return true;
}
}
if ( w.plus ) {
initUpdate();
} else {
document.addEventListener("plusready", initUpdate, false );
}
})(window);
\ No newline at end of file
_site/examples/hello-mui/list.html deleted 100644 → 0
View file @ 86f3bac6
<!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 type="text/css">
#demos {
/*避免导航边框和列表背景边框重叠，看起来像两条边框似得；*/
margin-top: -1px;
}
</style>
</head>
<body>
<div class="mui-content">
<ul id="list" class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/badges.html">
badge（数字角标）
</a>
</li>
<li class="mui-table-view-cell mui-collapse">
<a class="mui-navigate-right" href="#">
button（按钮）
</a>
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/buttons.html">
普通按钮
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/buttons-with-icons.html">
带图标的按钮
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/buttons-with-badges.html">
带数字的按钮
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/buttons-with-block.html">
块级按钮
</a>
</li>
<!--<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/buttons-with-fabs.html">
浮动控制按钮
</a>
</li>-->
</ul>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/checkbox.html">
checkbox（复选框）
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/dialog.html">
dialog（消息框）
</a>
</li>
<li class="mui-table-view-cell mui-collapse">
<a class="mui-navigate-right" href="#">
gallery slider（图片轮播）
</a>
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/slider-default.html">
默认样式
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/slider-with-title.html">
下方悬浮标题
</a>
</li>
</ul>
</li>
<li class="mui-table-view-cell mui-collapse">
<a class="mui-navigate-right" href="#">
gallery table（图文表格）
</a>
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/slider-table-default.html">
默认样式
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/slider-table-pagination.html">
左右滑动分页样式
</a>
</li>
</ul>
</li>
<li class="mui-table-view-cell mui-collapse">
<a class="mui-navigate-right" href="#">
grid（9宫格）
</a>
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/grid-default.html">
默认样式
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/grid-pagination.html">
左右滑动分页样式
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/oa-grid.html">
高度自适应示例
</a>
</li>
</ul>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/icons.html">
icon（图标）
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/inputs.html">
input（输入框）
</a>
</li>
<li class="mui-table-view-cell mui-collapse">
<a class="mui-navigate-right" href="#">
list（列表）
</a>
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/tableviews.html">
默认样式
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/tableviews-with-chevrons.html">
右侧带导航箭头
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/tableviews-with-badges.html">
右侧带数字角标
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/tableviews-with-badges-and-chevrons.html">
右侧同时带箭头和数字角标
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/list-with-input.html">
列表带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">
二级列表
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/tableviews-with-swipe.html">
滑动触发列表项菜单
</a>
</li>
<!--<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/cards.html">
Carded table views
</a>
</li>-->
</ul>
</li>
<li class="mui-table-view-cell mui-collapse">
<a class="mui-navigate-right" href="#">
nav bar（导航栏）
</a>
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/titlebar.html">
默认样式
</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" href="examples/titlebar-with-buttons.html">
导航条包含按钮
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/titlebar-with-icons.html">
导航条包含ICON
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/titlebar-with-text-and-icons.html">
导航条同时包含文字和图标
</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">
<a class="mui-navigate-right" href="#">
off canvas（侧滑导航）
</a>
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/offcanvas-left-plus-main.html">
右滑菜单
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/offcanvas-right-plus-main.html">
左滑菜单
</a>
</li>
<li class="mui-table-view-cell ios-only">
<a class="mui-navigate-right" href="examples/offcanvas-with-left.html">
可拖动式右滑菜单
</a>
</li>
<li class="mui-table-view-cell ios-only">
<a class="mui-navigate-right" href="examples/offcanvas-with-right.html">
可拖动式左滑菜单
</a>
</li>
</ul>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/pagination.html">
pagination（分页）
</a>
</li>
<li class="mui-table-view-cell mui-collapse">
<a class="mui-navigate-right" href="">
popover（弹出菜单）
</a>
<ul class="mui-table-view mui-table-view-chevron">
<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/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 mui-collapse" id="pull-refresh-h5">
<a class="mui-navigate-right" href="#">
pull to refresh（下拉刷新）
</a>
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell ">
<a class="mui-navigate-right" href="examples/pullrefresh-down-main.html">
下拉刷新
</a>
</li>
<li class="mui-table-view-cell ">
<a class="mui-navigate-right" href="examples/pullup.html">
上拉加载
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/pulldown-and-pullup.html">
同时支持下拉和上拉
</a>
</li>
</ul>
</li>
<li class="mui-table-view-cell mui-collapse" id="pull-refresh-pandora">
<a class="mui-navigate-right" href="#">
pull to refresh（下拉刷新）
</a>
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/pullrefresh-down-main.html">
下拉刷新默认样式
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/pulldown-with-plus-main-custom.html">
下拉刷新自定义样式
</a>
</li>
</ul>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/radio.html">
radio（单选框）
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/range.html">
range（滑块）
</a>
</li>
<li class="mui-table-view-cell mui-collapse">
<a class="mui-navigate-right" href="#">
segment（分段选择）
</a>
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/tab-with-segmented-control.html">
按钮式选项卡
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/tab-with-viewpagerindicator.html">
可拖动选项卡(仿Android)
</a>
</li>
</ul>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/switches.html">
switch（开关）
</a>
</li>
<li class="mui-table-view-cell mui-collapse">
<a class="mui-navigate-right" href="#">
tab bar（选项卡）
</a>
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/tabbar.html">
div模式
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/tab-webview-main.html">
webview模式
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/tabbar-labels-only.html">
文字选项卡
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/tabbar-with-submenus.html">
含二级菜单的选项卡
</a>
</li>
</ul>
</li>
<!--<li class="mui-table-view-cell mui-collapse">
<a class="mui-navigate-right" href="#">
表单（Forms）
</a>
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/forms.html">
Form
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/forms-with-group.html">
Form with input group
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/forms-with-group-and-labels.html">
Form with input group and labels
</a>
</li>
</ul>
</li>-->
<!--<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/modals.html">
弹出窗口（Modals）
</a>
</li>-->
<!--<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/preload.html">
预加载（Preload）
</a>
</li>-->
<!--<li class="mui-table-view-cell mui-collapse">
<a class="mui-navigate-right" href="#">
OA模板
</a>
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/oa-missives-detail.html">
待办公文详情
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/oa-contact-main.html">
通讯录
</a>
</li>
</ul>
</li>-->
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/typography.html">
typography（文字）
</a>
</li>
<!--<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/iscroll.html">
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">
预加载(模板)
</a>
</li>-->
</ul>
</div>
<script>
var limit = 3,count = 0;
mui.init({
preloadLimit: limit, //同时并存的预加载窗口数量
swipeBack: false,
});
$.plusReady(function() {
//初始化一级列表的预加载
$('#list>.mui-table-view-cell', document.body).each(function() {
//只预加载一级列表，二级列表在其展开时再预加载；
if (!this.classList.contains('mui-collapse')) {
var url = this.querySelector('a').getAttribute("href");
//预加载，默认使用url作为其id
$.createWindow({
url: url,
preload: true
});
if (++count >= limit) {
return false;
}
}
});
//监听展开事件,预加载二级列表的前几个；
$('#list').on('expand', '.mui-collapse', function(e) {
count = 0;
$('.mui-table-view a', this).each(function() {
var url = this.getAttribute("href");
//单独处理侧滑导航的index
if(~url.indexOf('offcanvas-')){
$.createWindow({
url: url,
styles:{
zindex:9999
},
preload: true
});
}else{
$.createWindow({
url: url,
preload: true
});
}
if(++count>=limit){
return false;
}
});
});
// 关闭启动界面
plus.navigator.closeSplashscreen();
//下拉刷新两个平台有区别；
if ($.os.ios) {
document.getElementById('pull-refresh-pandora').style.display = "none";
} else if ($.os.android) {
document.getElementById('pull-refresh-h5').style.display = "none";
var list = document.querySelectorAll('.ios-only');
if(list){
for(var i=0;i<list.length;i++){
list[i].style.display = 'none';
}
}
}
});
/**
* 处理链接点击事件
*/
$.ready(function() {
$('body').on('tap', 'a', function(e) {
var id = this.getAttribute('href');
if (id) {
if (~id.indexOf('.html')) {
if (window.plus) {
//侧滑导航涉及Index问题，需要单独处理；
if(~id.indexOf('offcanvas-')){
$.openWindow({
id: id,
url: this.href,
styles:{
zindex:9999
},
preload: true
});
}else{
$.openWindow({
id: id,
url: this.href,
preload:true
});
}
} else {
document.location.href = this.href;
}
} else {
if (typeof plus !== 'undefined') {
plus.runtime.openURL(id);
}
}
}
});
});
</script>
</body>
</html>
_site/examples/hello-mui/manifest.json deleted 100644 → 0
View file @ 86f3bac6
{
"@platforms": ["android", "iPhone", "iPad"],
"id": "H5291D269",/*必选，应用的标识*/
"name": "test",/*必选，应用名称*/
"version": {
"name": "1.0",/*必选，版本名称*/
"code": ""
},
"description": "",/*可选，应用描述信息*/
"icons": {
"72": "icon.png"
},
"launch_path": "index.html",/*必选，应用的入口页面，默认为根目录下的index.html；也可以是网络地址，网络地址必须以http://或https://开头*/
"developer": {
"email": "",/*可选，开发者名称*/
"name": "",/*可选，开发者邮箱地址*/
"url": ""/*可选，开发者自定义地址*/
},
"permissions": {
"Accelerometer": {
"description": "访问加速度感应器"
},
"Audio": {
"description": "访问麦克风"
},
"Cache": {
"description": "管理应用缓存"
},
"Camera": {
"description": "访问摄像头"
},
"Console": {
"description": "跟踪调试输出日志"
},
"Contacts": {
"description": "访问系统联系人信息"
},
"Device": {
"description": "访问设备信息"
},
"Downloader": {
"description": "文件下载管理"
},
"Events": {
"description": "应用扩展事件"
},
"File": {
"description": "访问本地文件系统"
},
"Gallery": {
"description": "访问系统相册"
},
"Geolocation": {
"description": "访问位置信息"
},
"Invocation": {
"description": "调用Native JS桥功能"
},
"Messaging": {
"description": "访问通讯能力"
},
"Orientation": {
"description": "访问方向感应器"
},
"Proximity": {
"description": "访问距离感应器"
},
"Storage": {
"description": "管理应用本地数据"
},
"UI": {
"description": "管理系统原生控件"
},
"Uploader": {
"description": "管理文件上传任务"
},
"Runtime": {
"description": "访问运行期环境"
},
"XMLHttpRequest": {
"description": "跨域网络访问"
},
"Zip": {
"description": "文件压缩与解压缩"
},
"Barcode": {
"description": "管理二维码扫描插件"
},
"Maps": {
"description": "管理地图插件"
},
"Payment": {
"description": "管理支付插件"
},
"Push": {
"description": "管理推送消息插件"
},
"Share": {
"description": "管理社交分享插件"
},
"Speech": {
"description": "管理语音识别插件"
},
"Statistic": {
"description": "管理统计插件"
}
},
"plus": {
"splashscreen": {
"autoclose": true,/*如果为true，程序启动的图片可以自动关闭，如果为false，开发者需要手动关闭*/
"waiting": true/*autoclose设置为false时生效，在此事件后，启动图片自动关闭，单位为毫秒*/
},
"runmode": "liberate",/*两个值，liberate或normal，前者在应用安装时释放资源，后者不需要释放资源*/
"signature": "Sk9JTiBVUyBtYWlsdG86aHIyMDEzQGRjbG91ZC5pbw==",/*可选，保留给应用签名，暂不使用*/
"distribute": {
"debug": "",/*可选，是否为debug模式，可取值：true表示debug模式运行，false表示release模式运行，默认值为false*/
"apple": {
"appid": "",/*iOS必选，苹果开发网站申请的appid，如com.dheaven.hbuilder*/
"mobileprovision": "",/*iOS必选，打包配置文件*/
"password": "",/*iOS必选，导入配置文件密码*/
"p12": "",/*iOS必选，打包配置文件关联的个人证书*/
"devices": "universal",/*iphone，可取值iphone/ipad/universal*/
"frameworks":[]/*用户在调用 Native.js 或开发第三方插件时使用到的 FrameWork 名*/
},
"google": {
"packagename": "",/*Android必选，程序包名，如com.dheaven.hbuilder*/
"keystore": "",/*Android必选，打包证书文件*/
"password": "",/*Android必选，打包证书密码*/
"aliasname": "",/*Android必选，打包证书别名*/
"permissions": [] /*使用 Native.js 调用原生安卓 API 需要申请的系统权限，用户可以添加多个权限的字符串*/
},
"orientation": ["portrait-primary", "landscape-primary", "portrait-secondary", "landscape-secondary"],/*必选*/
"icons": {
"ios": {
"prerendered": "", /*必选，是否高亮显示*/
"auto": "", /*可选，512x512，用于自动生成各种尺寸图标的大分辨率程序图标*/
"iphone": {
"normal": "",/*可选，57x57，iPhone普通屏幕程序图标*/
"retina": "",/*可选，114x114，iPhone高分屏程序图标*/
"retina7": "",/*可选，120x120，iPhone iOS7高分屏程序图标*/
"spotlight-normal": "", /*可选，29x29，iPhone Spotlight搜索程序图标*/
"spotlight-retina": "", /*可选，58x58，iPhone高分屏Spotlight搜索程序图标*/
"spotlight-retina7": "",/*可选，80x80，iPhone iOS7高分屏Spotlight搜索程序图标*/
"settings-normal": "", /*可选，29x29，iPhone设置页面程序图标*/
"settings-retina": "" /*iPhone 高分屏设置页面程序图标*/
},
"ipad": {
"normal": "", /*可选，72x72，iPad普通屏幕程序图标*/
"retina": "", /*可选，144x144，iPad高分屏程序图标*/
"normal7": "", /*可选，76x76，iPad iOS7程序图标*/
"retina7": "", /*可选，152x152，iPad iOS7高分屏程序图标*/
"spotlight-normal": "", /*可选，50x50，iPad Spotlight搜索程序图标*/
"spotlight-retina": "", /*可选，100x100，iPad高分屏Spotlight搜索程序图标*/
"spotlight-normal7": "",/*可选，40x40，iPad iOS7 Spotlight搜索程序图标*/
"spotlight-retina7": "",/*可选，80x80，iPad iOS7高分屏Spotlight搜索程序图标*/
"settings-normal": "",/*可选，29x29，iPad设置页面程序图标*/
"settings-retina": "" /*iPad 高分屏设置页面程序图标*/
}
},
"android": {
"mdpi": "", /*必选，48x48，普通屏程序图标*/
"ldpi": "", /*必选，48x48，大屏程序图标*/
"hdpi": "", /*必选，72x72，高分屏程序图标*/
"xhdpi": "",/*必选，96x96，720P高分屏程序图标*/
"xxhdpi": "" /*1080P 高分屏程序图标*/
}
},
"splashscreen": {
"ios": {
"iphone": {
"default": "", /*必选，320x480，iPhone3启动图片*/
"retina35": "",/*必选，640x960，3.5英寸设备(iPhone4)启动图片*/
"retina40": "" /*4.0 英寸设备(iPhone5)启动图片*/
},
"ipad": {
"portrait": "", /*可选，768x1004，需支持iPad时必选，iPad竖屏启动图片*/
"portrait-retina": "",/*可选，1536x2008，需支持iPad时必选，iPad高分屏竖屏图片*/
"landscape": "", /*可选，1024x748，需支持iPad时必选，iPad横屏启动图片*/
"landscape-retina": "", /*可选 ，2048x1496，需支持iPad时必选，iPad高分屏横屏启动图片*/
"portrait7": "", /*可选，768x1024，需支持iPad iOS7时必选，iPad竖屏启动图片*/
"portrait-retina7": "",/*可选，1536x2048，需支持iPad iOS7时必选，iPad高分屏竖屏图片*/
"landscape7": "", /*可选，1024x768，需支持iPad iOS7时必选，iPad横屏启动图片*/
"landscape-retina7": "" /*需支持 iPad iOS7 时必选，iPad 高分屏横屏启动*/
}
},
"android": {
"mdpi": "", /*必选，240x282，普通屏启动图片*/
"ldpi": "", /*必选，320x442，大屏启动图片*/
"hdpi": "", /*必选，480x762，高分屏启动图片*/
"xhdpi": "", /*必选，720x1242，720P高分屏启动图片*/
"xxhdpi": "" /*1080p 高分屏启动图片*/
}
}
}
}
}
\ No newline at end of file
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