Skip to content

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

上传hello mui源码

parent d33af97b
Show whitespace changes
Inline Side-by-side
Showing with 8781 additions and 0 deletions
examples/hello-mui/.project 0 → 100644
View file @ afa28503
<?xml version="1.0" encoding="UTF-8"?>
<projectDescription>
<name>app-demo</name>
<comment></comment>
<projects>
</projects>
<buildSpec>
<buildCommand>
<name>com.aptana.ide.core.unifiedBuilder</name>
<arguments>
</arguments>
</buildCommand>
<buildCommand>
<name>com.pandora.projects.ui.MKeyBuilder</name>
<arguments>
</arguments>
</buildCommand>
</buildSpec>
<natures>
<nature>com.pandora.projects.ui.MKeyNature</nature>
</natures>
</projectDescription>
examples/hello-mui/css/mui.min.css 0 → 100644
View file @ afa28503
/*!
* =====================================================
* Mui v0.5.1 (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 500ms ease;transition:transform 500ms ease;-webkit-backface-visibility:hidden}.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-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-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-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{background-color:rgba(0,0,0,.07)}.mui-bar .mui-icon{position:relative;z-index:20;padding-top:10px;padding-bottom:10px;font-size:24px}.mui-bar .mui-icon:active{background-color:rgba(0,0,0,.07)}.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;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 20px;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;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:1px solid #ddd;border-radius:100px;-webkit-transition-duration:.2s;transition-duration:.2s;-webkit-transition-property:-webkit-transform,border,width;-moz-transition-property:-moz-transform,border,width;transition-property:transform,border,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:transparent;border-color:#4cd964;-webkit-box-shadow:inset 0 0 0 13px #4cd964;box-shadow:inset 0 0 0 13px #4cd964}.mui-switch.mui-active .mui-switch-handle{border-color:#4cd964;-webkit-transform:translate3d(44px,0,0);transform:translate3d(44px,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(17px,0,0);transform:translate3d(17px,0,0)}.mui-switch-blue .mui-switch-handle{border:1px solid rgba(0,0,0,.2);-webkit-box-shadow:0 3px 3px rgba(0,0,0,.08);box-shadow:0 3px 3px rgba(0,0,0,.08)}.mui-switch-blue.mui-active{border:2px solid #007aff;-webkit-box-shadow:inset 0 0 0 13px #007aff;box-shadow:inset 0 0 0 13px #007aff}.mui-switch-blue.mui-active .mui-switch-handle{border-color:#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-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}@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-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
examples/hello-mui/css/oa.css 0 → 100644
View file @ afa28503
@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
examples/hello-mui/examples/badges.html 0 → 100644
View file @ afa28503
<!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
examples/hello-mui/examples/buttons-with-badges.html 0 → 100644
View file @ afa28503
<!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
examples/hello-mui/examples/buttons-with-block.html 0 → 100644
View file @ afa28503
<!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>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/buttons-with-fabs.html 0 → 100644
View file @ afa28503
<!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
examples/hello-mui/examples/buttons-with-icons.html 0 → 100644
View file @ afa28503
<!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
examples/hello-mui/examples/buttons.html 0 → 100644
View file @ afa28503
<!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
examples/hello-mui/examples/cards.html 0 → 100644
View file @ afa28503
<!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
examples/hello-mui/examples/checkbox.html 0 → 100644
View file @ afa28503
<!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
examples/hello-mui/examples/demo.html 0 → 100644
View file @ afa28503
<!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 id="demo" class="mui-content-padded">
<button class="mui-btn mui-btn-block" data-webview-id="demo1" data-webview-url="toggles.html">
Block button
</button>
<button class="mui-btn mui-btn-primary mui-btn-block" data-webview-id="demo2" data-webview-url="typography.html">
Block button
</button>
<button class="mui-btn mui-btn-success mui-btn-block" data-webview-id="demo3" data-webview-url="tableviews.html">
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>
</div>
</div>
<script>
(function($) {
var templates = {};
var show = {
aniShow : 'slide-in-right',
duration : 400
};
$.ready(function() {
$('#demo').on('tap', 'button', function() {
var id = this.getAttribute('data-webview-id');
var url = this.getAttribute('data-webview-url');
var webview = templates[id];
if (webview) {
if (webview.showed) {
webview.clear();
}
webview.show(show.aniShow, show.duration);
webview.loadURL(url);
var waiting = null;
var timeout = setTimeout(function() {
console.log(timeout);
waiting = plus.nativeUI.showWaiting();
}, show.duration);
webview.addEventListener("loaded", function() {
console.log(waiting);
if (waiting) {
waiting.close();
} else {
clearTimeout(timeout);
}
webview.showed = true;
}, false);
}
});
});
$.plusReady(function() {
templates = {
demo1 : createTemplate('DEMO1'),
demo2 : createTemplate('DEMO2'),
demo3 : createTemplate('DEMO3')
}
});
})(mui);
var createTemplate = function(title) {
title = title || '';
var template = plus.webview.create('titlebar.html');
template.addEventListener('loaded', function() {
template.evalJS('document.querySelector(".mui-title").innerHTML="' + title + '"');
});
return template;
};
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/events.html 0 → 100644
View file @ afa28503
<!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">Events</h1>
</header>
<div class="mui-content">
</div>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/forms-with-group-and-labels.html 0 → 100644
View file @ afa28503
<!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
examples/hello-mui/examples/forms-with-group.html 0 → 100644
View file @ afa28503
<!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
examples/hello-mui/examples/forms.html 0 → 100644
View file @ afa28503
<!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
examples/hello-mui/examples/grid-default.html 0 → 100644
View file @ afa28503
<!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
examples/hello-mui/examples/grid-pagination.html 0 → 100644
View file @ afa28503
<!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
examples/hello-mui/examples/icons.html 0 → 100644
View file @ afa28503
<!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>
</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-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-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-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-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-right"></span>
</a>
<a>
<span class="mui-icon mui-icon-left-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-cycle"></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>
<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-close-cycle"></span>
</a>
</div>
<div class="mui-content-padded">
<!--<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>-->
<!--<div class="mui-spinner mui-spinner-large">
<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>-->
</div>
</div>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/info.html 0 → 100644
View file @ afa28503
<!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开发者倍感挫败，尤其拿到Android低端机运行，摔手机的心都有； 另一方面，浏览器默认控件样式又少又丑，制作一个漂亮的控件非常麻烦，也有一些制作简单的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>
<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>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/inputs.html 0 → 100644
View file @ afa28503
<!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
examples/hello-mui/examples/iscroll.html 0 → 100644
View file @ afa28503
<!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
examples/hello-mui/examples/modals.html 0 → 100644
View file @ afa28503
<!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
examples/hello-mui/examples/oa-contact-list.html 0 → 100644
View file @ afa28503
<!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
examples/hello-mui/examples/oa-contact-main.html 0 → 100644
View file @ afa28503
<!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
examples/hello-mui/examples/oa-grid.html 0 → 100644
View file @ afa28503
<!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
examples/hello-mui/examples/oa-missives-detail.html 0 → 100644
View file @ afa28503
<!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
examples/hello-mui/examples/oa-missives.html 0 → 100644
View file @ afa28503
<!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
examples/hello-mui/examples/offcanvas-with-left.html 0 → 100644
View file @ afa28503
<!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">
<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>
<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>
<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,
});
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
examples/hello-mui/examples/offcanvas-with-right.html 0 → 100644
View file @ afa28503
<!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">
<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
examples/hello-mui/examples/pagination.html 0 → 100644
View file @ afa28503
<!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>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/popovers-with-actionsheet.html 0 → 100644
View file @ afa28503
<!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
examples/hello-mui/examples/popovers-with-cross-webviews-popover.html 0 → 100644
View file @ afa28503
<!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
examples/hello-mui/examples/popovers-with-cross-webviews.html 0 → 100644
View file @ afa28503
<!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
examples/hello-mui/examples/popovers-with-js-call.html 0 → 100644
View file @ afa28503
<!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
examples/hello-mui/examples/popovers.html 0 → 100644
View file @ afa28503
<!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>
<li class="mui-table-view-cell"><a href="#">Item7</a></li>
<li class="mui-table-view-cell"><a href="#">Item8</a></li>
<li class="mui-table-view-cell"><a href="#">Item9</a></li>
<li class="mui-table-view-cell"><a href="#">Item10</a></li>
</ul>
</div>
</div>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/preload-mixwebview-content.html 0 → 100644
View file @ afa28503
<!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
examples/hello-mui/examples/preload-mixwebview-main.html 0 → 100644
View file @ afa28503
<!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
examples/hello-mui/examples/preload-webview-with-openwindow.html 0 → 100644
View file @ afa28503
<!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
examples/hello-mui/examples/preload-webview.html 0 → 100644
View file @ afa28503
<!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
examples/hello-mui/examples/preload.html 0 → 100644
View file @ afa28503
<!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',
preload : true,
styles : {
},
subpages : [{
id : 'preloadMixWebviewContent',
url : 'preload-mixwebview-content.html',
styles : {
top : '45px'
},
}]
}, {
id : 'preloadWebview', //可选ID，未设置的话使用URL作为窗口ID
url : 'preload-webview.html',
preload : true,
styles : {
},
afterShowMethodName : 'preload_webview', //跨webview的js call,不应该有这种东西，应该5+触发afterShow，预加载窗口监听实现
subpages : [
//子webview配置
]
}]
});
//点击打开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
examples/hello-mui/examples/pull-refresh-content-custom.html 0 → 100644
View file @ afa28503
<!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
examples/hello-mui/examples/pulldown-and-pullup.html 0 → 100644
View file @ afa28503
<!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: function(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);
}
},
up: {
contentdown: '上拉显示更多',
contentover: '释放立即刷新',
contentrefresh: '正在刷新...',
callback: function(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
examples/hello-mui/examples/pulldown-with-5+.html 0 → 100644
View file @ afa28503
<!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 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({
optimize: true,
titleBar: {
title: 'pulldown with 5+'
},
pulldownRefresh: {
container: '.mui-content',
contentdown: '下拉可以刷新',
contentover: '释放立即刷新',
contentrefresh: '正在刷新...',
callback: function(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);
}
}
});
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/pulldown-with-plus-content-custom.html 0 → 100644
View file @ afa28503
<!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
examples/hello-mui/examples/pulldown-with-plus-content.html 0 → 100644
View file @ afa28503
<!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 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({
optimize : true,
pullRefresh : {
container : '.mui-content',
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);
}
//ws.endPullToRefresh();
//refresh completed 这行代码必须调用
callback();
}, 1000);
}
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/pulldown-with-plus-main-custom.html 0 → 100644
View file @ afa28503
<!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,
list = null;
// 扩展API加载完毕，现在可以正常调用扩展API
function plusReady() {
ws = plus.webview.currentWebview();
// wo = ws.opener();
list = plus.webview.create("pulldown-with-plus-content-custom.html", "pulldown-with-plus-content-custom.html", {
top: "48px",
bottom: "0px",
bounce: "vertical"
});
// ws.append(list);
// list.addEventListener("loaded", function() { //叶面加载完成后才显示
// ws.show("slide-in-right", 300);
// wo.evalJS("closeWaiting()");
// if (plus.os.name != "Android") {
// plus.nativeUI.alert("由于Android性能不足，我们提供了原生的下拉刷新加速方案。iOS设备请使 用iscroll等标准框架来解决下拉刷新问题");
// }
// }, false);
ws.append(list);
// 实现列表可下拉刷新
list.addEventListener("dragBounce", onPullStateChange, false);
list.setBounce({
position: {
top: "100px"
},
changeoffset: {
top: "50px"
}
});
}
if (window.plus) {
plusReady();
} else {
document.addEventListener("plusready", plusReady, false);
}
// 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
examples/hello-mui/examples/pulldown-with-plus-main.html 0 → 100644
View file @ afa28503
<!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 : 'pulldown-with-plus-content',
url : 'pulldown-with-plus-content.html',
styles : {
top : '48px',
bottom : 0
}
}]
});
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/pulldown.html 0 → 100644
View file @ afa28503
<!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</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: function(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);
}
}
}
});
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/pullup.html 0 → 100644
View file @ afa28503
<!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,
optimize: false,
pullRefresh: {
container: '.mui-content-padded',
up: {
contentdown: '上拉显示更多',
contentover: '释放立即刷新',
contentrefresh: '正在刷新...',
callback: function(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
examples/hello-mui/examples/radio.html 0 → 100644
View file @ afa28503
<!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
examples/hello-mui/examples/range.html 0 → 100644
View file @ afa28503
<!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
examples/hello-mui/examples/slider-default.html 0 → 100644
View file @ afa28503
<!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">
<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">
mui.init({
swipeBack : false
});
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/slider-table-default.html 0 → 100644
View file @ afa28503
<!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
examples/hello-mui/examples/slider-table-pagination.html 0 → 100644
View file @ afa28503
<!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>
$.ready(function() {
$('.mui-slider-group').slider();
});
mui.init({
swipeBack : false
});
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/slider-with-title.html 0 → 100644
View file @ afa28503
<!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">
<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>
$.ready(function() {
$('.mui-slider-group').slider();
});
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/speech.html 0 → 100644
View file @ afa28503
<!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
examples/hello-mui/examples/switches.html 0 → 100644
View file @ afa28503
<!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
examples/hello-mui/examples/tab-with-segmented-control.html 0 → 100644
View file @ afa28503
<!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">Tab with segmented control</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>
<li class="mui-table-view-cell">
第一个选项卡子项-4
</li>
<li class="mui-table-view-cell">
第一个选项卡子项-5
</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>
<li class="mui-table-view-cell">
第二个选项卡子项-4
</li>
<li class="mui-table-view-cell">
第二个选项卡子项-5
</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>
<li class="mui-table-view-cell">
第三个选项卡子项-4
</li>
<li class="mui-table-view-cell">
第三个选项卡子项-5
</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
examples/hello-mui/examples/tab-with-viewpagerindicator.html 0 → 100644
View file @ afa28503
<!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">Tab with viewPagerIndicator</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
examples/hello-mui/examples/tabbar-labels-only.html 0 → 100644
View file @ afa28503
<!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
examples/hello-mui/examples/tabbar-with-anchor.html 0 → 100644
View file @ afa28503
<!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">Tab bar</h1>
</header>
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active" href="#table1">
<span class="mui-icon mui-icon-phone"></span>
<span class="mui-tab-label">Table1</span>
</a>
<a class="mui-tab-item" href="#table2">
<span class="mui-icon mui-icon-chat"></span>
<span class="mui-tab-label">Table2</span>
</a>
<a class="mui-tab-item" href="#table3">
<span class="mui-icon mui-icon-sms"></span>
<span class="mui-tab-label">Table3</span>
</a>
<a class="mui-tab-item" href="#table4">
<span class="mui-icon mui-icon-map"></span>
<span class="mui-tab-label">Table4</span>
</a>
</nav>
<div class="mui-content">
<span id="table1" class="mui-anchor"></span>
<div class="mui-content-padded">table1</div>
<div class="mui-card">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 1
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 2
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 3
</a>
</li>
</ul>
</div>
<span id="table2" class="mui-anchor"></span>
<div class="mui-content-padded">table2</div>
<div class="mui-card">
<ul class="mui-table-view">
<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>
<span id="table3" class="mui-anchor"></span>
<div class="mui-content-padded">table3</div>
<div class="mui-card">
<ul class="mui-table-view">
<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>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 9
</a>
</li>
</ul>
</div>
<span id="table4" class="mui-anchor"></span>
<div class="mui-content-padded">table4</div>
<div class="mui-card">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 10
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 11
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 12
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 13
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 14
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 15
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 16
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 17
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 18
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 19
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 20
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 21
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 22
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 23
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 24
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 25
</a>
</li>
</ul>
</div>
</div>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/tabbar-with-chat.html 0 → 100644
View file @ afa28503
<!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">Tab bar(Page of Chat)</h1>
</header>
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item" href="tabbar.html">
<span class="mui-icon mui-icon-phone"></span>
<span class="mui-tab-label">电话咨询</span>
</a>
<a class="mui-tab-item mui-active" href="tabbar-with-chat.html">
<span class="mui-icon mui-icon-chat"></span>
<span class="mui-tab-label">在线咨询</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">短信咨询</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">查看地图</span>
</a>
</nav>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/tabbar-with-map.html 0 → 100644
View file @ afa28503
<!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">Tab bar(Page of Map)</h1>
</header>
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item" href="tabbar.html">
<span class="mui-icon mui-icon-phone"></span>
<span class="mui-tab-label">电话咨询</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">在线咨询</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">短信咨询</span>
</a>
<a class="mui-tab-item mui-active" href="tabbar-with-map.html">
<span class="mui-icon mui-icon-map"></span>
<span class="mui-tab-label">查看地图</span>
</a>
</nav>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/tabbar-with-sms.html 0 → 100644
View file @ afa28503
<!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">Tab bar(Page of SMS)</h1>
</header>
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item" href="tabbar.html">
<span class="mui-icon mui-icon-phone"></span>
<span class="mui-tab-label">电话咨询</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">在线咨询</span>
</a>
<a class="mui-tab-item mui-active" href="tabbar-with-sms.html">
<span class="mui-icon mui-icon-sms"></span>
<span class="mui-tab-label">短信咨询</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">查看地图</span>
</a>
</nav>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/tabbar-with-submenus.html 0 → 100644
View file @ afa28503
<!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
examples/hello-mui/examples/tabbar.html 0 → 100644
View file @ afa28503
<!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
examples/hello-mui/examples/tableview-image-left.html 0 → 100644
View file @ afa28503
<!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
examples/hello-mui/examples/tableview-image-right.html 0 → 100644
View file @ afa28503
<!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
examples/hello-mui/examples/tableview-with-images-and-chevrons.html 0 → 100644
View file @ afa28503
<!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
examples/hello-mui/examples/tableviews-with-badges-and-chevrons.html 0 → 100644
View file @ afa28503
<!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
examples/hello-mui/examples/tableviews-with-badges.html 0 → 100644
View file @ afa28503
<!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
examples/hello-mui/examples/tableviews-with-buttons.html 0 → 100644
View file @ afa28503
<!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
<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 1
<div class="mui-switch mui-active">
<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>
<li class="mui-table-view-cell mui-radio mui-left">
<input name="radio" type="radio">Item 3
</li>
<li class="mui-table-view-cell mui-radio mui-left">
<input name="radio" type="radio">Item 3
</li>
<li class="mui-table-view-cell mui-checkbox mui-left">
<input name="checkbox" type="checkbox">Item 3
</li>
<li class="mui-table-view-cell mui-checkbox mui-left">
<input name="checkbox" type="checkbox">Item 3
</li>
</ul>
</div>
</div>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/tableviews-with-chevrons.html 0 → 100644
View file @ afa28503
<!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
examples/hello-mui/examples/tableviews-with-collapses.html 0 → 100644
View file @ afa28503
<!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
examples/hello-mui/examples/tableviews-with-grid-and-pagination.html 0 → 100644
View file @ afa28503
<!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
examples/hello-mui/examples/tableviews-with-swipe.html 0 → 100644
View file @ afa28503
<!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: 18%;
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($) {
$('#OA_task_1').on('tap', '.oa-task-action', function() {
if (confirm('确认删除该条记录吗?')) {
var cell = this.parentNode.parentNode;
cell.parentNode.removeChild(cell);
}
});
$('#OA_task_2').on('slideleft', '.mui-table-view-cell', function(event) {
if (confirm('左拖：确认删除该条记录吗?')) {
this.parentNode.removeChild(this);
}
});
$('#OA_task_2').on('slideright', '.mui-table-view-cell', function(event) {
if (confirm('右拖：确认删除该条记录吗?')) {
this.parentNode.removeChild(this);
}
});
})(mui);
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/tableviews-with-switches.html 0 → 100644
View file @ afa28503
<!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
examples/hello-mui/examples/tableviews.html 0 → 100644
View file @ afa28503
<!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
examples/hello-mui/examples/titlebar-with-buttons.html 0 → 100644
View file @ afa28503
<!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
examples/hello-mui/examples/titlebar-with-html5-and-5+.html 0 → 100644
View file @ afa28503
<!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
examples/hello-mui/examples/titlebar-with-icons.html 0 → 100644
View file @ afa28503
<!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
examples/hello-mui/examples/titlebar-with-search.html 0 → 100644
View file @ afa28503
<!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
examples/hello-mui/examples/titlebar-with-text-and-icons.html 0 → 100644
View file @ afa28503
<!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
examples/hello-mui/examples/titlebar-with-webview-and-5+.html 0 → 100644
View file @ afa28503
<!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
examples/hello-mui/examples/titlebar.html 0 → 100644
View file @ afa28503
<!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
examples/hello-mui/examples/top.html 0 → 100644
View file @ afa28503
<!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>
examples/hello-mui/examples/top_list.html 0 → 100644
View file @ afa28503
<!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>
examples/hello-mui/examples/typography.html 0 → 100644
View file @ afa28503
<!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
examples/hello-mui/index.html 0 → 100644
View file @ afa28503
<!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() {
$.openWindow('examples/info.html', 'info');
});
</script>
</body>
</html>
examples/hello-mui/js/app.js 0 → 100644
View file @ afa28503
(function($) {
//全局配置(通常所有页面引用该配置，特殊页面使用mui.init({})来覆盖全局配置)
$.initGlobal({
optimize: true,
swipeBack: true,
showAfterLoad: true,
titleBar: false,
back: function() {
// return {
// preload : true//TODO 默认启用预加载等show，hide事件，动画都完成后放开预加载
// }
},
show: {
aniShow: 'slide-in-right',
duration: 400
}
});
/**
* hyperlink
*/
$.ready(function() {
$('body').on('tap', 'a', function(e) {
var id = this.getAttribute('href');
if(id){
if (~id.indexOf('.html')) {
if (window.plus) {
$.openWindow({
id: id,
url: this.href,
preload: $.os.ios ? false : true //TODO 暂时屏蔽IOS的预加载
});
} else {
document.location.href = this.href;
}
}else{
plus.runtime.openURL(id);
}
}
});
});
})(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
examples/hello-mui/js/mui.min.js 0 → 100644
View file @ afa28503
/*!
* =====================================================
* Mui v0.5.1 (https://github.com/dcloudio/mui)
* =====================================================
*/
var mui=function(a,b,c){var d=/complete|loaded|interactive/,e=/^#([\w-]*)$/,f=/^\.([\w-]+)$/,g=/^[\w-]+$/,h=/translate(?:3d)?\((.+?)\)/,i=/matrix(3d)?\((.+?)\)/,j=function(a,c){if(c=c||b,!a)return k();if("object"==typeof a)return k([a],null);try{if(e.test(a)){var d=c.getElementById(RegExp.$1);return k(d?[d]:[])}return k(j.qsa(a,c),a)}catch(f){}return k()},k=function(a,b){return a=a||[],a.__proto__=j.fn,a.selector=b||"",a};return j.uuid=0,j.data={},j.extend=function(a,b,d){a||(a={}),b||(b={});for(var e in b)b[e]!==c&&(d&&"object"==typeof a[e]?j.extend(a[e],b[e],d):a[e]=b[e]);return a},j.slice=[].slice,j.qsa=function(a,c){return c=c||b,j.slice.call(f.test(a)?c.getElementsByClassName(RegExp.$1):g.test(a)?c.getElementsByTagName(a):c.querySelectorAll(a))},j.ready=function(a){return d.test(b.readyState)?a(j):b.addEventListener("DOMContentLoaded",function(){a(j)},!1),this},j.each=function(a,b){return[].every.call(a,function(a,c){return b.call(a,c,a)!==!1}),this},j.trigger=function(a,b,c){return a.dispatchEvent(new CustomEvent(b,{detail:c,bubbles:!0,cancelable:!0})),this},j.getStyles=function(a,b){var c=a.ownerDocument.defaultView.getComputedStyle(a,null);return b?c.getPropertyValue(b)||c[b]:c},j.parseTranslate=function(a,b){var c=a.match(h||"");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},j.parseTranslateMatrix=function(a,b){var c=a.match(i),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},j.fn={each:function(a){return[].every.call(this,function(b,c){return a.call(b,c,b)!==!1}),this}},j}(window,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}),b.addEventListener("tap",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("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,window,document),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||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(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={},a.initGlobal=function(b){return a.options=a.extend(a.global,b),this},a.init=function(c){return a.options=a.extend(a.global,c||{}),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,document),function(a){var b={optimize:!0,swipeBack:!1,preloadPages:[],preloadLimit:10};a.extend(a.global,b),a.extend(a.options,b),a.waitingOptions=function(b){return a.extend({},b)},a.showOptions=function(b){var c=100;return a.os.ios&&(c=200),a.extend({aniShow:"slide-in-right",duration: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))},a.openWindow=function(b,c,d){if(window.plus){"object"==typeof b?(d=b,b=d.url,c=d.id||b):"object"==typeof c?(d=c,c=b):c=c||b,d=d||{};var e,f=d.params||{};if(a.webviews[c]){var g=a.webviews[c];if(g.preload)return e=g.webview,e.show(g.show.aniShow,g.show.duration),g.afterShowMethodName&&e.evalJS(g.afterShowMethodName+"('"+JSON.stringify(f)+"')"),this;d=a.extend(g,a.extend(d,{id:c,url:b,showAfterLoad:d.showAfterLoad===!1?!1:!0})),e=a.createWindow(d)}else d=a.extend(d,{id:c,url:b,showAfterLoad:d.showAfterLoad===!1?!1:!0}),e=a.createWindow(d);if(d.showAfterLoad){var h=a.waitingOptions(d.waiting),i=plus.nativeUI.showWaiting(h.title||"",h),j=a.showOptions(d.show);e.addEventListener("loaded",function(){i.close(),e.show(j.aniShow,j.duration),e.showed=!0,d.afterShowMethodName&&e.evalJS(d.afterShowMethodName+"('"+JSON.stringify(f)+"')")},!1)}return e}},a.createWindow=function(b,c){if(window.plus){var d,e=b.id||b.url;if(b.preload){a.webviews[e]?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&&i.webview.close(),delete a.webviews[h]}}else a.webviews[e]=b,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.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(){plus.webview.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.each(c,function(b,c){a.appendWebview(c)})});var d=b.preloadPages||[];setTimeout(function(){a.plusReady(function(){a.createWindows(d)})},500)})}(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||{},d=c.container;if(d){var e=a(d);1===e.length&&(a.options.optimize&&a.os.plus&&a.os.android?e.plus_pulldownRefresh(c.down):e.pullRefresh(c))}})}(mui),function(a){a.init.add(function(){a(".mui-slider-group").each(function(){var b=this.querySelector(".mui-control-content");b?a(this).slider({slideshowDelay:0}):a(this).slider()}),a(".mui-input-row input").input()})}(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 a=plus.webview.create(b.template,null,{scalable:!1,position:"dock",dock:"top",height:b.height});a.addEventListener("loaded",function(){a.evalJS('document.querySelector(".mui-title").innerHTML="'+b.title+'"')});var c=b.pulldownRefresh||{},d=c.container;d?a.append(plus.webview.currentWebview()):plus.webview.currentWebview().append(a)}):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-arrow",h="mui-pull-loading",i="mui-pull-caption",j=i+"-down",k=i+"-over",l=i+"-refresh",m="mui-icon",n="mui-icon-spinner",o="mui-spin",p="mui-in",q="mui-reverse",r={down:{height:50,contentdown:"下拉可以刷新",contentover:"释放立即刷新",contentrefresh:"正在刷新..."},up:{height:50,contentdown:"上拉显示更多",contentover:"释放立即刷新",contentrefresh:"正在刷新...",duration:300}},s=['<div class="'+f+'">','<div class="'+g+'"></div>','<div class="'+h+" "+m+" "+n+" "+o+'"></div>','<div class="'+i+'">','<span class="'+j+" "+p+'">{downCaption}</span>','<span class="'+k+'">{overCaption}</span>','<span class="'+l+'">{refreshCaption}</span>',"</div>","</div>"],t=function(b,c){this.element=b,this.options=a.extend(r,c,!0),this.options.up.height=-this.options.up.height,this.pullOptions=null,this.init()};t.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()},t.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)),this.topArrow=this.topPocket.querySelector("."+g)),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)))},t.prototype.createPocket=function(a,b){var d=c.createElement("div");return d.className=a,d.innerHTML=s.join("").replace("{downCaption}",b.contentdown).replace("{overCaption}",b.contentover).replace("{refreshCaption}",b.contentrefresh),d},t.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)}))},t.prototype.dragStart=function(a){var b=a.detail;("up"===b.direction||"down"===b.direction)&&(this.isLoading=this.dragDirection=!1)},t.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.drag(a))}},t.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.drag(a))}},t.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))},t.prototype.dragEnd=function(b){var c=this;c.pullOptions&&(cancelAnimationFrame(c.requestAnimationFrame),Math.abs(.4*b.detail.deltaY)>=Math.abs(c.pullOptions.height)?c.loading():this.hide(),a.gestures.stoped=!0)},t.prototype.hide=function(){this.translateY=0,this.setTranslate(0),cancelAnimationFrame(this.requestAnimationFrame),this.requestAnimationFrame=null,this.setCaption(j),this.pullOptions.height>0&&this.topArrow.classList.remove(q),this.pullOptions=null},t.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(k):a.hideLoading(j),a.lastTranslateY=a.translateY),a.requestAnimationFrame=requestAnimationFrame(function(){a.updateTranslate()})},t.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",""))},t.prototype.loading=function(){var d=this;d.isLoading=!0,d.showLoading(l),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()})},t.prototype.showLoading=function(a){this.setCaption(a),this.pullOptions&&this.pullOptions.height>0&&this.topArrow.classList.add(q)},t.prototype.hideLoading=function(a){this.setCaption(a),this.pullOptions&&this.pullOptions.height>0&&this.topArrow.classList.remove(q)},t.prototype.setCaption=function(a){var b=this.pullOptions&&this.pullOptions.height>0?this.topPocket:this.bottomPocket;if(b){var c=b.querySelector("."+i),d=c.querySelector("."+p);d&&d.classList.remove(p);var e=c.querySelector("."+a);e&&e.classList.add(p);var f=b.querySelector("."+h);f&&(a===l?f.classList.add(p):f.classList.remove(p))}},a.fn.pullRefresh=function(b){this.each(function(){var c=this.getAttribute("data-pullrefresh");if(!c){var d=++a.uuid;a.data[d]=new t(this,b),this.setAttribute("data-pullrefresh",d)}})}}(mui,window,document),function(a){var b={height:50,contentdown:"下拉可以刷新",contentover:"释放立即刷新",contentrefresh:"正在刷新..."};a.fn.plus_pulldownRefresh=function(c){c=a.extend(b,c,!0),this.each(function(){var b=this;a.plusReady(function(){var d=b.getAttribute("data-pullrefresh-plus");if(!d){d=++a.uuid,b.setAttribute("data-pullrefresh-plus",d);var e=plus.webview.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.classList.add(l),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))}};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){var d,e,f,g,h="mui-off-canvas-left",i="mui-off-canvas-right",j="mui-off-canvas-wrap",k="mui-off-canvas-height-fixed",l="mui-left",m="mui-right",n="mui-sliding",o=".mui-inner-wrap",p="."+h,q="."+i,r=!1,s=1.5,t=0,u=0,v=maxOffCanvasWidth=0,w=function(){t!==u&&(e.style["-webkit-transition-duration"]="0s","right"===g&&t>0?(t=Math.min(t,maxOffCanvasWidth),0>v?x(e,v+t):x(e,t)):"left"===g&&0>t&&(t=Math.max(t,-maxOffCanvasWidth),v>0?x(e,v+t):x(e,t)),u=t),f=requestAnimationFrame(function(){w()})},x=function(a,b){a&&(a.style.webkitTransform="translate3d("+b+"px,0,0)")},y=function(a,b){var d=a.querySelector(".mui-content"),e=c.getElementsByTagName("html")[0],f=c.body;b?(e.classList.add(k),f.classList.add(k),d&&d.classList.add(k)):(e.classList.remove(k),f.classList.remove(k),d&&d.classList.remove(k))},z=function(){var a=this.parentNode,b=a.classList;b.remove(n),this.removeEventListener("webkitTransitionEnd",z),b.contains(m)||b.contains(l)||y(a,!1)};b.addEventListener("touchstart",function(a){for(var b=a.target;b&&b!==c;b=b.parentNode)if(b.classList&&b.classList.contains(j)){if(d=b,e=d.querySelector(o),!e)return;break}}),b.addEventListener("dragstart",function(b){if(d){var c=b.detail;if("left"===c.direction?d.classList.contains(m)?r=!0:d.querySelector(q)&&!d.classList.contains(l)&&(r=!0):"right"===c.direction&&(d.classList.contains(l)?r=!0:d.querySelector(p)&&!d.classList.contains(m)&&(r=!0)),r){g=c.direction,maxOffCanvasWidth=.8*d.offsetWidth;var f=a.getStyles(e,"webkitTransform"),h=a.parseTranslateMatrix(f);v=t=h?h.x:0;var i=d.classList;i.add(n),i.contains(m)||i.contains(l)||y(d,!0),c.gesture.preventDefault()}}}),b.addEventListener("drag",function(a){if(r){var b=a.detail;f||w(),t=b.deltaX*s}}),b.addEventListener("dragend",function(){if(r){f&&(cancelAnimationFrame(f),f=null),e.setAttribute("style",""),e.addEventListener("webkitTransitionEnd",z);var a,b=d.classList,c=["add","remove"];"right"===g&&t>0?(a=m,0>v&&(c.reverse(),a=l),t>maxOffCanvasWidth/2?b[c[0]](a):b[c[1]](a)):"left"===g&&0>t&&(a=l,v>0&&(c.reverse(),a=m),-t>maxOffCanvasWidth/2?b[c[0]](a):b[c[1]](a)),r=!1,d=e=null}})}(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-loop",d="mui-slider-indicator",e="mui-action-previous",f="mui-action-next",g="mui-slider-item",h="."+g,i="."+d,j=".mui-slider-progress-bar",k=function(b,c){this.element=b,this.options=a.extend({slideshowDelay:5e3,factor:1.1},c),this.init()};k.prototype.init=function(){this.initEvent(),this.initTimer()},k.prototype.initEvent=function(){var b=this,d=b.element,g=d.parentNode;b.translateX=0,b.sliderWidth=d.offsetWidth,b.isLoop=d.classList.contains(c),b.sliderLength=d.querySelectorAll(h).length,b.progressBarWidth=0,b.progressBar=g.querySelector(j),b.progressBar&&(b.progressBarWidth=b.progressBar.offsetWidth);var k=!1;b.isSwipeable=!1,g.addEventListener("dragstart",function(a){var e=a.detail,f=e.direction;("left"==f||"right"==f)&&(k=!0,b.translateX=0,b.scrollX=b.getScroll(),b.sliderWidth=d.offsetWidth,b.isLoop=d.classList.contains(c),b.sliderLength=d.querySelectorAll(h).length,b.progressBar&&(b.progressBarWidth=b.progressBar.offsetWidth),b.maxTranslateX=(b.sliderLength-1)*b.sliderWidth,a.detail.gesture.preventDefault())}),g.addEventListener("drag",function(a){k&&b.dragItem(a)}),g.addEventListener("dragend",function(){k&&(b.gotoItem(b.getSlideNumber()),k=b.isSwipeable=!1)}),g.addEventListener("swipeleft",function(c){b.isSwipeable&&(a.gestures.stoped=!0,b.nextItem(),k=b.isSwipeable=!1,c.stopImmediatePropagation())}),g.addEventListener("swiperight",function(c){b.isSwipeable&&(a.gestures.stoped=!0,b.prevItem(),k=b.isSwipeable=!1,c.stopImmediatePropagation())}),g.addEventListener("slide",function(a){var b=a.detail;b.slideNumber=b.slideNumber||0;var c=g.querySelector(".mui-slider-indicator .mui-number span");c&&(c.innerText=b.slideNumber+1);for(var d=g.querySelectorAll(".mui-slider-indicator .mui-indicator"),e=0,f=d.length;f>e;e++)d[e].classList[e===b.slideNumber?"add":"remove"]("mui-active");for(var h=g.querySelectorAll(".mui-control-item"),e=0,f=h.length;f>e;e++)h[e].classList[e===b.slideNumber?"add":"remove"]("mui-active")}),g.addEventListener(a.eventName("shown","tab"),function(a){b.gotoItem(-(a.detail.tabNumber||0))});var l=d.parentNode.querySelector(i);l&&l.addEventListener("tap",function(a){var c=a.target;(c.classList.contains(e)||c.classList.contains(f))&&(b[c.classList.contains(e)?"prevItem":"nextItem"](),a.stopPropagation())})},k.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)},k.prototype.updateTranslate=function(){var a=this;a.lastTranslateX!==a.translateX&&(a.setTranslate(a.translateX),a.lastTranslateX=a.translateX),a.requestAnimationFrame=requestAnimationFrame(function(){a.updateTranslate()})},k.prototype.setTranslate=function(a){this.element.style.webkitTransform="translate3d("+a+"px,0,0)",this.updateProcess(a)},k.prototype.updateProcess=function(a){var b=this.progressBarWidth;b&&(a=Math.abs(a),this.setProcess(a*(b/this.sliderWidth)))},k.prototype.setProcess=function(a){var b=this.progressBar;b&&(b.style.webkitTransform="translate3d("+a+"px,0,0)")},k.prototype.nextItem=function(){this.gotoItem(this.getCurrentSlideNumber("next")-1)},k.prototype.prevItem=function(){this.gotoItem(this.getCurrentSlideNumber("prev")+1)},k.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()},k.prototype.getSlideNumber=function(){return Math.round(this.getScroll()/this.sliderWidth)},k.prototype.getCurrentSlideNumber=function(a){return Math["next"===a?"ceil":"floor"](this.getScroll()/this.sliderWidth)},k.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},k.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 c=this.getAttribute("data-slider",d);if(!c){var d=++a.uuid;a.data[d]=new k(this,b),this.setAttribute("data-slider",d)}})}}(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,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-table-view-cell",w="mui-disabled",x="mui-switch",y="mui-btn",z="mui-slider-cell",A="mui-slider-handle",B="mui-slider-left",C="mui-slider-right",D="mui-bounce",E="."+z,F="."+A,G="."+B,H="."+C,I=.4,J=1.2,K=1,L=function(a){a?e?e.classList.add(u):d&&d.classList.add(u):e?e.classList.remove(u):d&&d.classList.remove(u)},M=function(){s!==t&&(k||n?(k&&n?0===h?N(g,s):N(g,h+s):k?0===h?N(g,Math.max(s,0)):N(g,Math.max(h+s,0)):n&&(0===h?N(g,Math.min(s,0)):N(g,Math.min(h+s,0))),k&&(0===h?s>m&&(f.style.backgroundColor=l,N(k,Math.max(s-m,0))):(f.style.backgroundColor=s>0?l:"",N(k,Math.max(s,0)))),n&&(0===h?-s>p&&(f.style.backgroundColor=o,N(n,Math.min(-(-s-p),0))):(f.style.backgroundColor=s>0&&!k?"":o,N(n,Math.min(s,0))))):g&&(0===h&&s>0||h===i&&0>s)&&Math.abs(s)<=i&&N(g,h+s),t=s),r=requestAnimationFrame(function(){M()})},N=function(a,b){a&&(a.style.webkitTransform="translate3d("+b+"px,0,0)")},O=function(b,c){k&&(k.setAttribute("style",""),n&&n.setAttribute("style",""),b?(N(g,m),c&&a.trigger(g,"slideright")):N(g,0))},P=function(b,c){n&&(n.setAttribute("style",""),k&&k.setAttribute("style",""),b?(N(g,-p),c&&a.trigger(g,"slideleft")):N(g,0))},Q=function(a){g&&(a?N(g,0):N(g,i))},R=function(b,c){q=!1,r&&(cancelAnimationFrame(r),r=null),f.setAttribute("style","");var d=Math.abs(s);if(b||!k&&!n)k||n||Q(0===h?!(d>i/2):d>i/2);else if(s>0){var e=m/2;if(0!==h&&n&&(P(!(d>=p/2),!1),e=m/2+p),k){var j=d>=e;k.classList.contains(D)?(k.setAttribute("style",""),N(g,0),j&&!c.swipe&&a.trigger(g,"slideright")):O(j,!0)}}else{var e=m/2;if(0!==h&&k&&(O(!(d>=m/2),!1),e=p/2+m),n){var j=d>=e;n.classList.contains(D)?(n.setAttribute("style",""),N(g,0),j&&!c.swipe&&a.trigger(g,"slideleft")):P(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,z=!1;u&&u!==c;u=u.parentNode)if(u.classList){var A=u.classList;if(("INPUT"===u.tagName&&"radio"!==u.type&&"checkbox"!==u.type||"BUTTON"===u.tagName||A.contains(x)||A.contains(y)||A.contains(w))&&(z=!0),A.contains(v)){d=u;var B=d.querySelector("a");if(B&&B.parentNode===d&&(e=B),f=d.querySelector(E),f&&f.parentNode===d){var C=f.querySelector(F);if(C){g=C,i=g.offsetWidth,j=a.getStyles(g,"margin-left"),K=J;var D=f.querySelector(G);D&&(k=D,l=a.getStyles(D,"background-color"),m=D.offsetWidth);var M=f.querySelector(H);M&&(n=M,o=a.getStyles(M,"background-color"),p=M.offsetWidth),(k||n)&&(K=I);var N=a.getStyles(g,"webkitTransform"),O=a.parseTranslateMatrix(N);h=O?O.x:0}}z||L(!0);break}}}),b.addEventListener("touchmove",function(){L(!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||M(),s=a.detail.deltaX*K,a.detail.gesture.preventDefault())}),b.addEventListener("dragend",function(a){q&&R(!1,a.detail)}),b.addEventListener("swiperight",function(b){if(g){var c=!1;k&&!k.classList.contains(D)&&0===h?(O(!0,!0),c=!0):n&&0>h?(P(!1,!1),c=!0):k||n||(c=!0),c&&(a.gestures.stoped=!0,b.stopImmediatePropagation(),R(!0,b.detail))}}),b.addEventListener("swipeleft",function(b){if(g){var c=!1;n&&!n.classList.contains(D)&&0===h?(P(!0,!0),c=!0):k&&h>0?(O(!1,!1),c=!0):k||n||(c=!0),c&&(a.gestures.stoped=!0,b.stopImmediatePropagation(),R(!0,b.detail))}}),b.addEventListener("touchend",function(){d&&L(!1)}),b.addEventListener("touchcancel",function(){d&&L(!1)}),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")}else if(c.contains("mui-radio")){var f=d.querySelector("input[type=radio]");f&&f.click()}else if(c.contains("mui-checkbox")){var f=d.querySelector("input[type=checkbox]");f&&f.click()}}})}(mui,window,document),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)}})}}(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=plus.webview.currentWebview(),f=e.parent();e.canBack(function(a){if(a.canBack)b.history.back();else{f&&(e=f);var c=e.opener();if(c){var d=c.parent();d&&(c=d),e.preload?e.hide("auto"):e.close()}else plus.runtime.quit()}})}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=plus.webview.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
examples/hello-mui/js/update.js 0 → 100644
View file @ afa28503
(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
examples/hello-mui/js/update.json 0 → 100644
View file @ afa28503
{
"appid":"HelloMUI",
"iOS":{
"version":"0.5.1",
"title":"Hello H5+(0.7.0)版本更新",
"note":"新增自动升级检测功能\n新增分享功能演示页面\n新增推送功能演示页面\n",
"url":"itms-apps://itunes.apple.com/cn/app/hello-h5+/id682211190?l=zh&mt=8"
},
"Android":{
"version":"0.5.1",
"title":"Hello H5+(0.7.0)版本更新",
"note":"新增自动升级检测功能\n新增分享功能演示页面\n新增推送功能演示页面\n",
"url":"http://d.m3w.cn/helloh5p/HelloH5.apk"
}
}
\ No newline at end of file
examples/hello-mui/list.html 0 → 100644
View file @ afa28503
<!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="demos" class="mui-table-view mui-table-view-chevron">
<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/checkbox.html">
复选框（checkbox）
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/switches.html">
开关（Switches）
</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">
<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="#">
按钮（Buttons）
</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/badges.html">
数字角标（Badges）
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/icons.html">
图标（Icons）
</a>
</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="#">
选项卡（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">
默认样式
</a>
</li>
<!--<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/tabbar-with-anchor.html">
Tab bar with anchor
</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="#">
分段选择（Segmented control）
</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/pagination.html">
分页（Pagination）
</a>
</li>
<li class="mui-table-view-cell mui-collapse">
<a class="mui-navigate-right" href="#">
列表（Table views）
</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/tableviews-with-buttons.html">
右侧带控件
</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/oa-missives.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="#">
表单（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 mui-collapse">
<a class="mui-navigate-right" href="">
弹出菜单（Popovers）
</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">
Popovers
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/popovers-with-js-call.html">
Popovers with js call
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/popovers-with-actionsheet.html">
Popovers with action sheet
</a>
</li>
<!--<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/popovers-with-cross-webviews.html">
Popovers with cross webviews
</a>
</li>-->
</ul>
</li>
<!--<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/modals.html">
弹出窗口（Modals）
</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="#">
9宫格（Grid）
</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 mui-collapse" id="pull-refresh-h5">
<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="examples/pulldown.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="#">
下拉刷新
</a>
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/pulldown-with-plus-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 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="examples/offcanvas-with-left.html">
Off Canvas(left)
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/offcanvas-with-right.html">
Off Canvas(right)
</a>
</li>
</ul>
</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>
mui.init({
preloadLimit: 3, //同时并存10个预加载窗口
swipeBack: false,
});
//TODO 等show，hide事件，动画都完成后放开预加载
(function($) {
$.plusReady(function() {
//初始化所有一级列表的预加载
var demos = document.getElementById('demos');
if ($.os.android) {
var count = 0;
$('.mui-table-view-cell', demos).each(function() {
if (!this.classList.contains('mui-collapse')) {
if (this.parentNode === demos) {
var a = this.querySelector('a');
var id = a.getAttribute('href');
if (~id.indexOf('.html') && !~$.data.preloads.indexOf(id)) { //如果没在缓存，则创建预加载
var url = a.href;
//延迟100ms处理，避免影响操作流畅
setTimeout(function() {
$.createWindow({
id: id,
url: url,
preload: true
});
}, (count++) * 100);
if (count >= 3) {
return false;
}
}
}
}
});
//监听展开事件
$('#demos').on('expand', '.mui-collapse', function(e) {
if (this.id !== 'pull-refresh-pandora') {
return;
}
count = 0;
$('.mui-table-view a', this).each(function() {
var id = this.getAttribute('href');
if (~id.indexOf('.html') && !~$.data.preloads.indexOf(id)) { //如果没在缓存，则创建预加载
var url = this.href;
//延迟100ms处理，避免影响操作流畅
setTimeout(function() {
$.createWindow({
id: id,
url: url,
preload: true
});
}, (count++) * 100);
if (count >= 3) {
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";
}
});
})(mui);
</script>
</body>
</html>
examples/hello-mui/manifest.json 0 → 100644
View file @ afa28503
{
"@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