Skip to content

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

编译至mui v2.7.0

parent a31a2740
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1130 additions and 529 deletions
dist/css/mui.css
View file @ d60ba180
/*! /*!
* ===================================================== * =====================================================
* Mui v2.6.0 (http://dev.dcloud.net.cn/mui) * Mui v2.7.0 (http://dev.dcloud.net.cn/mui)
* ===================================================== * =====================================================
*/ */
...@@ -730,8 +730,6 @@ p ...@@ -730,8 +730,6 @@ p
overflow: hidden; overflow: hidden;
width: 100%; width: 100%;
-webkit-backface-visibility: hidden;
} }
.mui-scroll .mui-scroll
...@@ -743,8 +741,6 @@ p ...@@ -743,8 +741,6 @@ p
-webkit-transform: translateZ(0); -webkit-transform: translateZ(0);
transform: translateZ(0); transform: translateZ(0);
-webkit-backface-visibility: hidden;
} }
.mui-scrollbar .mui-scrollbar
...@@ -875,8 +871,8 @@ p ...@@ -875,8 +871,8 @@ p
} }
.mui-off-canvas-wrap .mui-inner-wrap.mui-transitioning .mui-off-canvas-wrap .mui-inner-wrap.mui-transitioning
{ {
-webkit-transition: -webkit-transform 200ms ease; -webkit-transition: -webkit-transform 350ms;
transition: transform 200ms ease; transition: transform 350ms cubic-bezier(.165, .84, .44, 1);
} }
.mui-off-canvas-wrap .mui-inner-wrap .mui-off-canvas-left .mui-off-canvas-wrap .mui-inner-wrap .mui-off-canvas-left
{ {
...@@ -905,12 +901,11 @@ p ...@@ -905,12 +901,11 @@ p
display: block; display: block;
transition: background 200ms ease; transition: background 350ms cubic-bezier(.165, .84, .44, 1);
background: rgba(0, 0, 0, .4); background: rgba(0, 0, 0, .4);
box-shadow: -4px 0 4px rgba(0, 0, 0, .5), 4px 0 4px rgba(0, 0, 0, .5); box-shadow: -4px 0 4px rgba(0, 0, 0, .5), 4px 0 4px rgba(0, 0, 0, .5);
-webkit-backface-visibility: hidden;
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
} }
.mui-off-canvas-wrap.mui-slide-in .mui-off-canvas-right .mui-off-canvas-wrap.mui-slide-in .mui-off-canvas-right
...@@ -941,13 +936,12 @@ p ...@@ -941,13 +936,12 @@ p
background: #333; background: #333;
-webkit-backface-visibility: hidden;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
} }
.mui-off-canvas-left.mui-transitioning, .mui-off-canvas-right.mui-transitioning .mui-off-canvas-left.mui-transitioning, .mui-off-canvas-right.mui-transitioning
{ {
-webkit-transition: -webkit-transform 200ms ease; -webkit-transition: -webkit-transform 350ms cubic-bezier(.165, .84, .44, 1);
transition: transform 200ms ease; transition: transform 350ms cubic-bezier(.165, .84, .44, 1);
} }
.mui-off-canvas-left .mui-off-canvas-left
...@@ -975,8 +969,8 @@ p ...@@ -975,8 +969,8 @@ p
} }
.mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable > .mui-off-canvas-left.mui-transitioning, .mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable > .mui-off-canvas-right.mui-transitioning .mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable > .mui-off-canvas-left.mui-transitioning, .mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable > .mui-off-canvas-right.mui-transitioning
{ {
-webkit-transition: -webkit-transform 200ms ease, opacity 200ms ease; -webkit-transition: -webkit-transform 350ms cubic-bezier(.165, .84, .44, 1), opacity 350ms cubic-bezier(.165, .84, .44, 1);
transition: transform 200ms ease, opacity 200ms ease; transition: transform 350ms cubic-bezier(.165, .84, .44, 1), opacity 350ms cubic-bezier(.165, .84, .44, 1);
} }
.mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable > .mui-off-canvas-left .mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable > .mui-off-canvas-left
{ {
...@@ -2155,9 +2149,6 @@ input[type='submit']:enabled:active, input[type='submit'].mui-active:enabled, ...@@ -2155,9 +2149,6 @@ input[type='submit']:enabled:active, input[type='submit'].mui-active:enabled,
{ {
-webkit-transition: -webkit-transform 0ms ease; -webkit-transition: -webkit-transform 0ms ease;
transition: transform 0ms ease; transition: transform 0ms ease;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
} }
.mui-table-view-cell > .mui-slider-left, .mui-table-view-cell > .mui-slider-right .mui-table-view-cell > .mui-slider-left, .mui-table-view-cell > .mui-slider-right
{ {
...@@ -2169,9 +2160,6 @@ input[type='submit']:enabled:active, input[type='submit'].mui-active:enabled, ...@@ -2169,9 +2160,6 @@ input[type='submit']:enabled:active, input[type='submit'].mui-active:enabled,
display: flex; display: flex;
height: 100%; height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
} }
.mui-table-view-cell > .mui-slider-left > .mui-btn, .mui-table-view-cell > .mui-slider-right > .mui-btn .mui-table-view-cell > .mui-slider-left > .mui-btn, .mui-table-view-cell > .mui-slider-right > .mui-btn
{ {
...@@ -2928,7 +2916,7 @@ select:focus ...@@ -2928,7 +2916,7 @@ select:focus
{ {
padding: 8px 0; padding: 8px 0;
} }
.mui-input-row .mui-input-clear ~ .mui-icon-clear, .mui-input-row .mui-input-speech ~ .mui-icon-speech .mui-input-row .mui-input-clear ~ .mui-icon-clear, .mui-input-row .mui-input-speech ~ .mui-icon-speech, .mui-input-row .mui-input-password ~ .mui-icon-eye
{ {
font-size: 20px; font-size: 20px;
...@@ -2944,6 +2932,10 @@ select:focus ...@@ -2944,6 +2932,10 @@ select:focus
color: #999; color: #999;
} }
.mui-input-row .mui-input-clear ~ .mui-icon-clear.mui-active, .mui-input-row .mui-input-speech ~ .mui-icon-speech.mui-active, .mui-input-row .mui-input-password ~ .mui-icon-eye.mui-active
{
color: #007aff;
}
.mui-input-row .mui-input-speech ~ .mui-icon-speech .mui-input-row .mui-input-speech ~ .mui-icon-speech
{ {
font-size: 24px; font-size: 24px;
...@@ -4028,8 +4020,6 @@ select:focus ...@@ -4028,8 +4020,6 @@ select:focus
-webkit-transform: translateZ(0); -webkit-transform: translateZ(0);
transform: translateZ(0); transform: translateZ(0);
-webkit-backface-visibility: hidden;
} }
.mui-switch .mui-switch
...@@ -4294,8 +4284,6 @@ select:focus ...@@ -4294,8 +4284,6 @@ select:focus
-webkit-transition-duration: 400ms; -webkit-transition-duration: 400ms;
transition-duration: 400ms; transition-duration: 400ms;
vertical-align: middle; vertical-align: middle;
-webkit-backface-visibility: hidden;
} }
.mui-pull-loading.mui-reverse .mui-pull-loading.mui-reverse
...@@ -4369,7 +4357,7 @@ select:focus ...@@ -4369,7 +4357,7 @@ select:focus
border-radius: 3px; border-radius: 3px;
background-color: #efeff4; background-color: #efeff4;
} }
.mui-numbox [class*=mui-numbox-btn] .mui-numbox [class*=numbox-btn], .mui-numbox [class*=btn-numbox]
{ {
font-size: 18px; font-size: 18px;
font-weight: normal; font-weight: normal;
...@@ -4389,29 +4377,29 @@ select:focus ...@@ -4389,29 +4377,29 @@ select:focus
border-radius: 0; border-radius: 0;
background-color: #f9f9f9; background-color: #f9f9f9;
} }
.mui-numbox [class*=mui-numbox-btn]:active .mui-numbox [class*=numbox-btn]:active, .mui-numbox [class*=btn-numbox]:active
{ {
background-color: #ccc; background-color: #ccc;
} }
.mui-numbox [class*=mui-numbox-btn][disabled] .mui-numbox [class*=numbox-btn][disabled], .mui-numbox [class*=btn-numbox][disabled]
{ {
color: #c0c0c0; color: #c0c0c0;
} }
.mui-numbox .mui-numbox-btn-plus .mui-numbox .mui-numbox-btn-plus, .mui-numbox .mui-btn-numbox-plus
{ {
right: 0; right: 0;
border-top-right-radius: 3px; border-top-right-radius: 3px;
border-bottom-right-radius: 3px; border-bottom-right-radius: 3px;
} }
.mui-numbox .mui-numbox-btn-minus .mui-numbox .mui-numbox-btn-minus, .mui-numbox .mui-btn-numbox-minus
{ {
left: 0; left: 0;
border-top-left-radius: 3px; border-top-left-radius: 3px;
border-bottom-left-radius: 3px; border-bottom-left-radius: 3px;
} }
.mui-numbox .mui-numbox-input .mui-numbox .mui-numbox-input, .mui-numbox .mui-input-numbox
{ {
display: inline-block; display: inline-block;
overflow: hidden; overflow: hidden;
...@@ -4459,6 +4447,10 @@ select:focus ...@@ -4459,6 +4447,10 @@ select:focus
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
} }
.mui-icon.mui-active
{
color: #007aff;
}
.mui-icon.mui-right:before .mui-icon.mui-right:before
{ {
float: right; float: right;
...@@ -4851,6 +4843,11 @@ select:focus ...@@ -4851,6 +4843,11 @@ select:focus
content: '\e567'; content: '\e567';
} }
.mui-icon-eye:before
{
content: '\e568';
}
.mui-icon-arrowup:before .mui-icon-arrowup:before
{ {
content: '\e580'; content: '\e580';
...@@ -4946,6 +4943,13 @@ select:focus ...@@ -4946,6 +4943,13 @@ select:focus
-webkit-user-modify: inherit; -webkit-user-modify: inherit;
} }
.mui-android.mui-android-4-2 input,
.mui-android.mui-android-4-2 textarea, .mui-android.mui-android-4-3 input,
.mui-android.mui-android-4-3 textarea
{
-webkit-user-select: text;
}
.mui-ios .mui-table-view-cell .mui-ios .mui-table-view-cell
{ {
-webkit-transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
...@@ -4981,3 +4985,39 @@ select:focus ...@@ -4981,3 +4985,39 @@ select:focus
{ {
display: none !important; display: none !important;
} }
.mui-plus.mui-statusbar.mui-statusbar-offset .mui-bar-nav
{
height: 64px;
padding-top: 20px;
}
.mui-plus.mui-statusbar.mui-statusbar-offset .mui-bar-nav ~ .mui-content
{
padding-top: 64px;
}
.mui-plus.mui-statusbar.mui-statusbar-offset .mui-bar-nav ~ .mui-content .mui-pull-top-pocket
{
top: 64px;
}
.mui-plus.mui-statusbar.mui-statusbar-offset .mui-bar-header-secondary
{
top: 64px;
}
.mui-plus.mui-statusbar.mui-statusbar-offset .mui-bar-header-secondary ~ .mui-content
{
padding-top: 94px;
}
.mui-iframe-wrapper
{
position: absolute;
right: 0;
left: 0;
}
.mui-iframe-wrapper iframe
{
width: 100%;
height: 100%;
border: 0;
}
dist/css/mui.min.css
View file @ d60ba180
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/fonts/mui.ttf
View file @ d60ba180
No preview for this file type
dist/js/mui.js
View file @ d60ba180
This diff is collapsed.
dist/js/mui.min.js
View file @ d60ba180
This source diff could not be displayed because it is too large. You can view the blob instead.
examples/hello-mui/css/app.css
View file @ d60ba180
...@@ -3,9 +3,9 @@ ...@@ -3,9 +3,9 @@
* 在实际项目开发时，建议为App单独写一个css文件，从而实现项目的自定义皮肤功能； * 在实际项目开发时，建议为App单独写一个css文件，从而实现项目的自定义皮肤功能；
* *
* */ * */
.mui-android header.mui-bar{ .mui-plus.mui-android header.mui-bar{
display: none; display: none;
} }
.mui-android .mui-bar-nav~.mui-content{ .mui-plus.mui-android .mui-bar-nav~.mui-content{
padding: 0; padding: 0;
} }
\ No newline at end of file
examples/hello-mui/css/mui.css
View file @ d60ba180
/*! /*!
* ===================================================== * =====================================================
* Mui v2.6.0 (http://dev.dcloud.net.cn/mui) * Mui v2.7.0 (http://dev.dcloud.net.cn/mui)
* ===================================================== * =====================================================
*/ */
...@@ -730,8 +730,6 @@ p ...@@ -730,8 +730,6 @@ p
overflow: hidden; overflow: hidden;
width: 100%; width: 100%;
-webkit-backface-visibility: hidden;
} }
.mui-scroll .mui-scroll
...@@ -743,8 +741,6 @@ p ...@@ -743,8 +741,6 @@ p
-webkit-transform: translateZ(0); -webkit-transform: translateZ(0);
transform: translateZ(0); transform: translateZ(0);
-webkit-backface-visibility: hidden;
} }
.mui-scrollbar .mui-scrollbar
...@@ -875,8 +871,8 @@ p ...@@ -875,8 +871,8 @@ p
} }
.mui-off-canvas-wrap .mui-inner-wrap.mui-transitioning .mui-off-canvas-wrap .mui-inner-wrap.mui-transitioning
{ {
-webkit-transition: -webkit-transform 200ms ease; -webkit-transition: -webkit-transform 350ms;
transition: transform 200ms ease; transition: transform 350ms cubic-bezier(.165, .84, .44, 1);
} }
.mui-off-canvas-wrap .mui-inner-wrap .mui-off-canvas-left .mui-off-canvas-wrap .mui-inner-wrap .mui-off-canvas-left
{ {
...@@ -905,12 +901,11 @@ p ...@@ -905,12 +901,11 @@ p
display: block; display: block;
transition: background 200ms ease; transition: background 350ms cubic-bezier(.165, .84, .44, 1);
background: rgba(0, 0, 0, .4); background: rgba(0, 0, 0, .4);
box-shadow: -4px 0 4px rgba(0, 0, 0, .5), 4px 0 4px rgba(0, 0, 0, .5); box-shadow: -4px 0 4px rgba(0, 0, 0, .5), 4px 0 4px rgba(0, 0, 0, .5);
-webkit-backface-visibility: hidden;
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
} }
.mui-off-canvas-wrap.mui-slide-in .mui-off-canvas-right .mui-off-canvas-wrap.mui-slide-in .mui-off-canvas-right
...@@ -941,13 +936,12 @@ p ...@@ -941,13 +936,12 @@ p
background: #333; background: #333;
-webkit-backface-visibility: hidden;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
} }
.mui-off-canvas-left.mui-transitioning, .mui-off-canvas-right.mui-transitioning .mui-off-canvas-left.mui-transitioning, .mui-off-canvas-right.mui-transitioning
{ {
-webkit-transition: -webkit-transform 200ms ease; -webkit-transition: -webkit-transform 350ms cubic-bezier(.165, .84, .44, 1);
transition: transform 200ms ease; transition: transform 350ms cubic-bezier(.165, .84, .44, 1);
} }
.mui-off-canvas-left .mui-off-canvas-left
...@@ -975,8 +969,8 @@ p ...@@ -975,8 +969,8 @@ p
} }
.mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable > .mui-off-canvas-left.mui-transitioning, .mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable > .mui-off-canvas-right.mui-transitioning .mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable > .mui-off-canvas-left.mui-transitioning, .mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable > .mui-off-canvas-right.mui-transitioning
{ {
-webkit-transition: -webkit-transform 200ms ease, opacity 200ms ease; -webkit-transition: -webkit-transform 350ms cubic-bezier(.165, .84, .44, 1), opacity 350ms cubic-bezier(.165, .84, .44, 1);
transition: transform 200ms ease, opacity 200ms ease; transition: transform 350ms cubic-bezier(.165, .84, .44, 1), opacity 350ms cubic-bezier(.165, .84, .44, 1);
} }
.mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable > .mui-off-canvas-left .mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable > .mui-off-canvas-left
{ {
...@@ -2155,9 +2149,6 @@ input[type='submit']:enabled:active, input[type='submit'].mui-active:enabled, ...@@ -2155,9 +2149,6 @@ input[type='submit']:enabled:active, input[type='submit'].mui-active:enabled,
{ {
-webkit-transition: -webkit-transform 0ms ease; -webkit-transition: -webkit-transform 0ms ease;
transition: transform 0ms ease; transition: transform 0ms ease;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
} }
.mui-table-view-cell > .mui-slider-left, .mui-table-view-cell > .mui-slider-right .mui-table-view-cell > .mui-slider-left, .mui-table-view-cell > .mui-slider-right
{ {
...@@ -2169,9 +2160,6 @@ input[type='submit']:enabled:active, input[type='submit'].mui-active:enabled, ...@@ -2169,9 +2160,6 @@ input[type='submit']:enabled:active, input[type='submit'].mui-active:enabled,
display: flex; display: flex;
height: 100%; height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
} }
.mui-table-view-cell > .mui-slider-left > .mui-btn, .mui-table-view-cell > .mui-slider-right > .mui-btn .mui-table-view-cell > .mui-slider-left > .mui-btn, .mui-table-view-cell > .mui-slider-right > .mui-btn
{ {
...@@ -2928,7 +2916,7 @@ select:focus ...@@ -2928,7 +2916,7 @@ select:focus
{ {
padding: 8px 0; padding: 8px 0;
} }
.mui-input-row .mui-input-clear ~ .mui-icon-clear, .mui-input-row .mui-input-speech ~ .mui-icon-speech .mui-input-row .mui-input-clear ~ .mui-icon-clear, .mui-input-row .mui-input-speech ~ .mui-icon-speech, .mui-input-row .mui-input-password ~ .mui-icon-eye
{ {
font-size: 20px; font-size: 20px;
...@@ -2944,6 +2932,10 @@ select:focus ...@@ -2944,6 +2932,10 @@ select:focus
color: #999; color: #999;
} }
.mui-input-row .mui-input-clear ~ .mui-icon-clear.mui-active, .mui-input-row .mui-input-speech ~ .mui-icon-speech.mui-active, .mui-input-row .mui-input-password ~ .mui-icon-eye.mui-active
{
color: #007aff;
}
.mui-input-row .mui-input-speech ~ .mui-icon-speech .mui-input-row .mui-input-speech ~ .mui-icon-speech
{ {
font-size: 24px; font-size: 24px;
...@@ -4028,8 +4020,6 @@ select:focus ...@@ -4028,8 +4020,6 @@ select:focus
-webkit-transform: translateZ(0); -webkit-transform: translateZ(0);
transform: translateZ(0); transform: translateZ(0);
-webkit-backface-visibility: hidden;
} }
.mui-switch .mui-switch
...@@ -4294,8 +4284,6 @@ select:focus ...@@ -4294,8 +4284,6 @@ select:focus
-webkit-transition-duration: 400ms; -webkit-transition-duration: 400ms;
transition-duration: 400ms; transition-duration: 400ms;
vertical-align: middle; vertical-align: middle;
-webkit-backface-visibility: hidden;
} }
.mui-pull-loading.mui-reverse .mui-pull-loading.mui-reverse
...@@ -4369,7 +4357,7 @@ select:focus ...@@ -4369,7 +4357,7 @@ select:focus
border-radius: 3px; border-radius: 3px;
background-color: #efeff4; background-color: #efeff4;
} }
.mui-numbox [class*=mui-numbox-btn] .mui-numbox [class*=numbox-btn], .mui-numbox [class*=btn-numbox]
{ {
font-size: 18px; font-size: 18px;
font-weight: normal; font-weight: normal;
...@@ -4389,29 +4377,29 @@ select:focus ...@@ -4389,29 +4377,29 @@ select:focus
border-radius: 0; border-radius: 0;
background-color: #f9f9f9; background-color: #f9f9f9;
} }
.mui-numbox [class*=mui-numbox-btn]:active .mui-numbox [class*=numbox-btn]:active, .mui-numbox [class*=btn-numbox]:active
{ {
background-color: #ccc; background-color: #ccc;
} }
.mui-numbox [class*=mui-numbox-btn][disabled] .mui-numbox [class*=numbox-btn][disabled], .mui-numbox [class*=btn-numbox][disabled]
{ {
color: #c0c0c0; color: #c0c0c0;
} }
.mui-numbox .mui-numbox-btn-plus .mui-numbox .mui-numbox-btn-plus, .mui-numbox .mui-btn-numbox-plus
{ {
right: 0; right: 0;
border-top-right-radius: 3px; border-top-right-radius: 3px;
border-bottom-right-radius: 3px; border-bottom-right-radius: 3px;
} }
.mui-numbox .mui-numbox-btn-minus .mui-numbox .mui-numbox-btn-minus, .mui-numbox .mui-btn-numbox-minus
{ {
left: 0; left: 0;
border-top-left-radius: 3px; border-top-left-radius: 3px;
border-bottom-left-radius: 3px; border-bottom-left-radius: 3px;
} }
.mui-numbox .mui-numbox-input .mui-numbox .mui-numbox-input, .mui-numbox .mui-input-numbox
{ {
display: inline-block; display: inline-block;
overflow: hidden; overflow: hidden;
...@@ -4459,6 +4447,10 @@ select:focus ...@@ -4459,6 +4447,10 @@ select:focus
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
} }
.mui-icon.mui-active
{
color: #007aff;
}
.mui-icon.mui-right:before .mui-icon.mui-right:before
{ {
float: right; float: right;
...@@ -4851,6 +4843,11 @@ select:focus ...@@ -4851,6 +4843,11 @@ select:focus
content: '\e567'; content: '\e567';
} }
.mui-icon-eye:before
{
content: '\e568';
}
.mui-icon-arrowup:before .mui-icon-arrowup:before
{ {
content: '\e580'; content: '\e580';
...@@ -4946,6 +4943,13 @@ select:focus ...@@ -4946,6 +4943,13 @@ select:focus
-webkit-user-modify: inherit; -webkit-user-modify: inherit;
} }
.mui-android.mui-android-4-2 input,
.mui-android.mui-android-4-2 textarea, .mui-android.mui-android-4-3 input,
.mui-android.mui-android-4-3 textarea
{
-webkit-user-select: text;
}
.mui-ios .mui-table-view-cell .mui-ios .mui-table-view-cell
{ {
-webkit-transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
...@@ -4981,3 +4985,39 @@ select:focus ...@@ -4981,3 +4985,39 @@ select:focus
{ {
display: none !important; display: none !important;
} }
.mui-plus.mui-statusbar.mui-statusbar-offset .mui-bar-nav
{
height: 64px;
padding-top: 20px;
}
.mui-plus.mui-statusbar.mui-statusbar-offset .mui-bar-nav ~ .mui-content
{
padding-top: 64px;
}
.mui-plus.mui-statusbar.mui-statusbar-offset .mui-bar-nav ~ .mui-content .mui-pull-top-pocket
{
top: 64px;
}
.mui-plus.mui-statusbar.mui-statusbar-offset .mui-bar-header-secondary
{
top: 64px;
}
.mui-plus.mui-statusbar.mui-statusbar-offset .mui-bar-header-secondary ~ .mui-content
{
padding-top: 94px;
}
.mui-iframe-wrapper
{
position: absolute;
right: 0;
left: 0;
}
.mui-iframe-wrapper iframe
{
width: 100%;
height: 100%;
border: 0;
}
examples/hello-mui/css/mui.min.css
View file @ d60ba180
This source diff could not be displayed because it is too large. You can view the blob instead.
examples/hello-mui/examples/accordion.html
View file @ d60ba180
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Hello MUI</title> <title>accordion（折叠面板）</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"> <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-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
<body> <body>
<header class="mui-bar mui-bar-nav"> <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-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">折叠面板</h1> <h1 class="mui-title">accordion（折叠面板）</h1>
</header> </header>
<div class="mui-content"> <div class="mui-content">
<div class="mui-card"> <div class="mui-card">
......
examples/hello-mui/examples/dtpicker.html
View file @ d60ba180
...@@ -37,6 +37,10 @@ ...@@ -37,6 +37,10 @@
padding: 20px 10px; padding: 20px 10px;
font-size: 16px; font-size: 16px;
} }
* {
-webkit-touch-callout: none;
-webkit-user-select: none;
}
</style> </style>
</head> </head>
...@@ -63,7 +67,7 @@ ...@@ -63,7 +67,7 @@
</div> </div>
</div> </div>
<script src="../js/mui.min.js"></script> <script src="../js/mui.min.js"></script>
<!--<script src="../js/mui.picker.js"></script> <!--<script src="../js/mui.picker.js"></script>
<script src="../js/mui.dtpicker.js"></script>--> <script src="../js/mui.dtpicker.js"></script>-->
<script src="../js/mui.picker.min.js"></script> <script src="../js/mui.picker.min.js"></script>
<script> <script>
......
examples/hello-mui/examples/icons.html
View file @ d60ba180
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
<!--标准mui.css--> <!--标准mui.css-->
<link rel="stylesheet" href="../css/mui.min.css"> <link rel="stylesheet" href="../css/mui.min.css">
<!--App自定义的css--> <!--App自定义的css-->
<!-- <link rel="stylesheet" type="text/css" href="../css/app.css"/> --> <link rel="stylesheet" type="text/css" href="../css/app.css"/>
<style> <style>
.flex-container { .flex-container {
display: -webkit-box; display: -webkit-box;
...@@ -121,9 +121,9 @@ ...@@ -121,9 +121,9 @@
<a id="icon-help"><span class="mui-icon mui-icon-help"></span></a> <a id="icon-help"><span class="mui-icon mui-icon-help"></span></a>
<a><span class="mui-icon mui-icon-locked"></span></a> <a><span class="mui-icon mui-icon-locked"></span></a>
<a id="icon-more"><span class="mui-icon mui-icon-more"></span></a> <a id="icon-more"><span class="mui-icon mui-icon-more"></span></a>
<!--<a><span class="mui-icon mui-icon-more-vertical"></span></a>-->
<a><span class="mui-icon mui-icon-flag"></span></a> <a><span class="mui-icon mui-icon-flag"></span></a>
<a><span class="mui-icon mui-icon-paperclip"></span></a> <a><span class="mui-icon mui-icon-paperclip"></span></a>
<a><span class="mui-icon mui-icon-eye"></span></a>
......
examples/hello-mui/examples/info.html
View file @ d60ba180
...@@ -11,25 +11,38 @@ ...@@ -11,25 +11,38 @@
<!--标准mui.css--> <!--标准mui.css-->
<link rel="stylesheet" href="../css/mui.min.css"> <link rel="stylesheet" href="../css/mui.min.css">
<!--App自定义的css--> <!--App自定义的css-->
<!--<link rel="stylesheet" type="text/css" href="../css/app.css"/>--> <link rel="stylesheet" type="text/css" href="../css/app.css" />
<style> <style>
p { p {
text-indent: 22px; text-indent: 22px;
padding: 5px 8px; padding: 5px 8px;
} }
html,body,.mui-content {
html,
body,
.mui-content {
background-color: #fff; background-color: #fff;
} }
h4 { h4 {
margin-left: 5px; margin-left: 5px;
} }
.mui-plus header.mui-bar {
display: none;
}
.mui-plus .mui-bar-nav~.mui-content {
padding: 0;
}
</style> </style>
</head> </head>
<body> <body>
<!--<header class="mui-bar mui-bar-nav"> <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-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">关于</h1> <h1 class="mui-title">关于</h1>
</header>--> </header>
<div class="mui-content"> <div class="mui-content">
<div class="mui-content-padded"> <div class="mui-content-padded">
<h4 style="margin-top:10px;">mui</h4> <h4 style="margin-top:10px;">mui</h4>
...@@ -48,7 +61,7 @@ ...@@ -48,7 +61,7 @@
</p> </p>
<p>更多详细介绍，请到<a href="http://dcloudio.github.io/mui">mui官网</a>查看；</p> <p>更多详细介绍，请到<a href="http://dcloudio.github.io/mui">mui官网</a>查看；</p>
<h4>版本介绍</h4> <h4>版本介绍</h4>
<p>当前版本为2.6.0，可到<a href="https://github.com/dcloudio/mui">Github</a>上获取最新版本。</p> <p>当前版本为2.7.0，可到<a href="https://github.com/dcloudio/mui">Github</a>上获取最新版本。</p>
<h4>License</h4> <h4>License</h4>
<p> <p>
mui遵循MIT License，源码已提交至Github，<a href="https://github.com/dcloudio/mui">点击查看</a>; mui遵循MIT License，源码已提交至Github，<a href="https://github.com/dcloudio/mui">点击查看</a>;
...@@ -58,7 +71,7 @@ ...@@ -58,7 +71,7 @@
<script src="../js/mui.min.js"></script> <script src="../js/mui.min.js"></script>
<script type="text/javascript" charset="utf-8"> <script type="text/javascript" charset="utf-8">
mui.init({ mui.init({
swipeBack:true //启用右滑关闭功能 swipeBack: true //启用右滑关闭功能
}); });
//处理点击事件，需要打开原生浏览器 //处理点击事件，需要打开原生浏览器
mui('body').on('tap', 'a', function(e) { mui('body').on('tap', 'a', function(e) {
...@@ -73,4 +86,5 @@ ...@@ -73,4 +86,5 @@
}); });
</script> </script>
</body> </body>
</html> </html>
\ No newline at end of file
examples/hello-mui/examples/input.html
View file @ d60ba180
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
<!--标准mui.css--> <!--标准mui.css-->
<link rel="stylesheet" href="../css/mui.min.css"> <link rel="stylesheet" href="../css/mui.min.css">
<!--App自定义的css--> <!--App自定义的css-->
<link rel="stylesheet" type="text/css" href="../css/app.css"/> <link rel="stylesheet" type="text/css" href="../css/app.css" />
<style> <style>
h5 { h5 {
margin: 5px 7px; margin: 5px 7px;
...@@ -30,10 +30,14 @@ ...@@ -30,10 +30,14 @@
<div class="mui-input-row mui-search"> <div class="mui-input-row mui-search">
<input type="search" class="mui-input-clear" placeholder=""> <input type="search" class="mui-input-clear" placeholder="">
</div> </div>
<h5>语音输入搜索框：</h5> <h5 class="mui-plus-visible">语音输入搜索框：</h5>
<div class="mui-input-row mui-search"> <div class="mui-input-row mui-search mui-plus-visible">
<input id="search" type="search" class="mui-input-speech mui-input-clear" placeholder="带语音输入的搜索框"> <input id="search" type="search" class="mui-input-speech mui-input-clear" placeholder="带语音输入的搜索框">
</div> </div>
<h5>密码框：</h5>
<div class="mui-input-row mui-password">
<input type="password" class="mui-input-password">
</div>
<form class="mui-input-group"> <form class="mui-input-group">
<div class="mui-input-row"> <div class="mui-input-row">
<label>Input</label> <label>Input</label>
...@@ -44,7 +48,7 @@ ...@@ -44,7 +48,7 @@
<input type="text" class="mui-input-clear" placeholder="带清除按钮的输入框"> <input type="text" class="mui-input-clear" placeholder="带清除按钮的输入框">
</div> </div>
<div class="mui-input-row"> <div class="mui-input-row mui-plus-visible">
<label>Input</label> <label>Input</label>
<input type="text" class="mui-input-speech mui-input-clear" placeholder="语音输入"> <input type="text" class="mui-input-speech mui-input-clear" placeholder="语音输入">
</div> </div>
...@@ -61,7 +65,7 @@ ...@@ -61,7 +65,7 @@
<script src="../js/mui.min.js"></script> <script src="../js/mui.min.js"></script>
<script> <script>
mui.init({ mui.init({
swipeBack:true //启用右滑关闭功能 swipeBack: true //启用右滑关闭功能
}); });
//语音识别完成事件 //语音识别完成事件
document.getElementById("search").addEventListener('recognized', function(e) { document.getElementById("search").addEventListener('recognized', function(e) {
...@@ -69,4 +73,5 @@ ...@@ -69,4 +73,5 @@
}); });
</script> </script>
</body> </body>
</html> </html>
\ No newline at end of file
examples/hello-mui/examples/numbox.html
View file @ d60ba180
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
<!--标准mui.css--> <!--标准mui.css-->
<link rel="stylesheet" href="../css/mui.min.css"> <link rel="stylesheet" href="../css/mui.min.css">
<!--App自定义的css--> <!--App自定义的css-->
<link rel="stylesheet" type="text/css" href="../css/app.css"/> <link rel="stylesheet" type="text/css" href="../css/app.css" />
<style> <style>
html, html,
body, body,
...@@ -38,34 +38,34 @@ ...@@ -38,34 +38,34 @@
<div class="mui-content-padded"> <div class="mui-content-padded">
<h5 class="mui-content-padded">默认</h5> <h5 class="mui-content-padded">默认</h5>
<div class="mui-numbox"> <div class="mui-numbox">
<button class="mui-btn mui-numbox-btn-minus" type="button">-</button> <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
<input class="mui-numbox-input" type="number" /> <input class="mui-input-numbox" type="number" />
<button class="mui-btn mui-numbox-btn-plus" type="button">+</button> <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
</div> </div>
<h5 class="mui-content-padded">限定最小值和最大值(1~9)</h5> <h5 class="mui-content-padded">限定最小值和最大值(1~9)</h5>
<div class="mui-numbox" data-numbox-min='1' data-numbox-max='9'> <div class="mui-numbox" data-numbox-min='1' data-numbox-max='9'>
<button class="mui-btn mui-numbox-btn-minus" type="button">-</button> <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
<input class="mui-numbox-input" type="number" value="5" /> <input id="test" class="mui-input-numbox" type="number" value="5" />
<button class="mui-btn mui-numbox-btn-plus" type="button">+</button> <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
</div> </div>
<h5 class="mui-content-padded">设定步长值(步长 10)</h5> <h5 class="mui-content-padded">设定步长值(步长 10)</h5>
<div class="mui-numbox" data-numbox-step='10' data-numbox-min='10' data-numbox-max='90'> <div class="mui-numbox" data-numbox-step='10' data-numbox-min='10' data-numbox-max='90'>
<button class="mui-btn mui-numbox-btn-minus" type="button">-</button> <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
<input class="mui-numbox-input" type="number" /> <input class="mui-input-numbox" type="number" />
<button class="mui-btn mui-numbox-btn-plus" type="button">+</button> <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
</div> </div>
<h5 class="mui-content-padded">取值操作</h5> <h5 class="mui-content-padded">取值操作</h5>
<div class="mui-numbox"> <div class="mui-numbox">
<button class="mui-btn mui-numbox-btn-minus" type="button">-</button> <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
<input id="box" class="mui-numbox-input" type="number" /> <input id="box" class="mui-input-numbox" type="number" />
<button class="mui-btn mui-numbox-btn-plus" type="button">+</button> <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
</div> </div>
<button id="btn" class="mui-btn" style="padding: 7px 12px;">取当前值</button> <button id="btn" class="mui-btn" style="padding: 7px 12px;">取当前值</button>
<h5 class="mui-content-padded">在行内</h5> 购买数量: <h5 class="mui-content-padded">在行内</h5> 购买数量:
<div class="mui-numbox"> <div class="mui-numbox">
<button class="mui-btn mui-numbox-btn-minus" type="button">-</button> <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
<input class="mui-numbox-input" type="number" /> <input class="mui-input-numbox" type="number" />
<button class="mui-btn mui-numbox-btn-plus" type="button">+</button> <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
</div> </div>
<h5 class="mui-content-padded">在表单中</h5> <h5 class="mui-content-padded">在表单中</h5>
<div class="mui-card"> <div class="mui-card">
...@@ -73,37 +73,41 @@ ...@@ -73,37 +73,41 @@
<div class="mui-input-row"> <div class="mui-input-row">
<label>数字框一</label> <label>数字框一</label>
<div class="mui-numbox"> <div class="mui-numbox">
<button class="mui-btn mui-numbox-btn-minus" type="button">-</button> <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
<input class="mui-numbox-input" type="number" /> <input class="mui-input-numbox" type="number" />
<button class="mui-btn mui-numbox-btn-plus" type="button">+</button> <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
</div> </div>
</div> </div>
<div class="mui-input-row"> <div class="mui-input-row">
<label>数字框二</label> <label>数字框二</label>
<div class="mui-numbox"> <div class="mui-numbox">
<button class="mui-btn mui-numbox-btn-minus" type="button">-</button> <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
<input class="mui-numbox-input" type="number" /> <input class="mui-input-numbox" type="number" />
<button class="mui-btn mui-numbox-btn-plus" type="button">+</button> <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
</div> </div>
</div> </div>
</form> </form>
</div> </div>
<h5 class="mui-content-padded">通过样式定义大小(220x60)</h5> <h5 class="mui-content-padded">通过样式定义大小(220x60)</h5>
<div class="mui-numbox" style="width: 220px;height: 60px;"> <div class="mui-numbox" style="width: 220px;height: 60px;">
<button class="mui-numbox-btn-minus" type="button">-</button> <button class="mui-btn-numbox-minus" type="button">-</button>
<input class="mui-numbox-input" type="number" /> <input class="mui-input-numbox" type="number" />
<button class="mui-numbox-btn-plus" type="button">+</button> <button class="mui-btn-numbox-plus" type="button">+</button>
</div> </div>
<br/> <br/>
<br /> <br />
</div> </div>
</div> </div>
<script src="../js/mui.min.js"></script> <script src="../js/mui.js"></script>
<script> <script>
mui.init(); mui.init();
document.getElementById("btn").addEventListener('tap', function(event) { document.getElementById("btn").addEventListener('tap', function(event) {
mui.alert('当前值: ' + document.getElementById("box").value, null, "提示"); mui.alert('当前值: ' + document.getElementById("box").value, null, "提示");
}); });
var testBox=document.getElementById("test");
testBox.addEventListener('change',function(){
console.log(testBox.value);
});
</script> </script>
</body> </body>
......
examples/hello-mui/examples/popovers.html
View file @ d60ba180
...@@ -15,12 +15,21 @@ ...@@ -15,12 +15,21 @@
<style> <style>
/*跨webview需要手动指定位置*/ /*跨webview需要手动指定位置*/
header.mui-bar { .mui-plus header.mui-bar {
display: none!important; display: none!important;
} }
.mui-bar-nav~.mui-content { .mui-plus .mui-bar-nav~.mui-content {
padding: 0!important; padding: 0!important;
} }
.mui-plus .plus{
display: inline;
}
.plus{
display: none;
}
#topPopover { #topPopover {
position: fixed; position: fixed;
top: 16px; top: 16px;
...@@ -51,7 +60,7 @@ ...@@ -51,7 +60,7 @@
<body> <body>
<header class="mui-bar mui-bar-nav"> <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-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<a id="menu" class="mui-action-menu mui-icon mui-icon-bars mui-pull-right"></a> <a id="menu" class="mui-action-menu mui-icon mui-icon-bars mui-pull-right" href="#topPopover"></a>
<h1 class="mui-title">popover（弹出菜单）</h1> <h1 class="mui-title">popover（弹出菜单）</h1>
</header> </header>
<footer class="mui-bar mui-bar-footer"> <footer class="mui-bar mui-bar-footer">
...@@ -61,9 +70,9 @@ ...@@ -61,9 +70,9 @@
<div class="mui-content-padded"> <div class="mui-content-padded">
<p>popover（弹出菜单是）mobile App中常见的UI组件，在用户点击位置附近弹出悬浮菜单，向用户展示更多信息或提供快捷操作。</p> <p>popover（弹出菜单是）mobile App中常见的UI组件，在用户点击位置附近弹出悬浮菜单，向用户展示更多信息或提供快捷操作。</p>
<p>popover最常用的两个位置：顶部导航栏右侧和底部工具栏右侧； 点击本页右上角的 <p>popover最常用的两个位置：顶部导航栏右侧和底部工具栏右侧； 点击本页右上角的
<span class="mui-icon mui-icon-bars"></span> 图标体验，这是一个 <span class="mui-icon mui-icon-bars"></span> 图标体验，<span class="plus">这是一个
<strong>跨webview</strong>的popover示例， <strong>跨webview</strong>的popover示例，
<span class="mui-icon mui-icon-bars"></span>在父webview中，点击后通过自定义事件 通知子webview， 子webview再执行popover的显示隐藏逻辑； 接着点击本页面右下角的“菜单”按钮体验。 <span class="mui-icon mui-icon-bars"></span>在父webview中，点击后通过自定义事件 通知子webview， 子webview再执行popover的显示隐藏逻辑； </span>接着点击本页面右下角的“菜单”按钮体验。
</p> </p>
<p>除了页面顶部导航栏、底部工具栏固定位置之外，其它区域要使用弹出菜单，都要准确计算物理位置，从而实现弹出菜单的绝对定位； mui封装的手势事件中，可以获得点击位置，通过这些位置可实现任意区域的弹出菜单显示，点击如下按钮体验： <p>除了页面顶部导航栏、底部工具栏固定位置之外，其它区域要使用弹出菜单，都要准确计算物理位置，从而实现弹出菜单的绝对定位； mui封装的手势事件中，可以获得点击位置，通过这些位置可实现任意区域的弹出菜单显示，点击如下按钮体验：
</p> </p>
......
examples/hello-mui/examples/setting.html
View file @ d60ba180
...@@ -213,7 +213,7 @@ ...@@ -213,7 +213,7 @@
</ul> </ul>
<ul class="mui-table-view mui-table-view-chevron"> <ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell"> <li class="mui-table-view-cell">
<a href="#about" class="mui-navigate-right">关于MUI <i class="mui-pull-right update">V2.6.0</i></a> <a href="#about" class="mui-navigate-right">关于MUI <i class="mui-pull-right update">V2.7.0</i></a>
</li> </li>
</ul> </ul>
<ul class="mui-table-view"> <ul class="mui-table-view">
...@@ -236,32 +236,34 @@ ...@@ -236,32 +236,34 @@
</div> </div>
<div class="mui-page-content"> <div class="mui-page-content">
<div class="mui-scroll-wrapper"> <div class="mui-scroll-wrapper">
<ul class="mui-table-view"> <div class="mui-scroll">
<li class="mui-table-view-cell"> <ul class="mui-table-view">
<a id="head" class="mui-navigate-right">头像 <li class="mui-table-view-cell">
<a id="head" class="mui-navigate-right">头像
<span class="mui-pull-right head"> <span class="mui-pull-right head">
<img class="head-img mui-action-preview" id="head-img1" src=""/> <img class="head-img mui-action-preview" id="head-img1" src=""/>
</span> </span>
</a> </a>
</li> </li>
<li class="mui-table-view-cell"> <li class="mui-table-view-cell">
<a>姓名<span class="mui-pull-right">Hbuilder</span></a> <a>姓名<span class="mui-pull-right">Hbuilder</span></a>
</li> </li>
<li class="mui-table-view-cell"> <li class="mui-table-view-cell">
<a>HBuilder账号<span class="mui-pull-right">hbuilder@dcloud.io</span></a> <a>HBuilder账号<span class="mui-pull-right">hbuilder@dcloud.io</span></a>
</li> </li>
</ul> </ul>
<ul class="mui-table-view"> <ul class="mui-table-view">
<li class="mui-table-view-cell"> <li class="mui-table-view-cell">
<a>QQ号<span class="mui-pull-right">88888888</span></a> <a>QQ号<span class="mui-pull-right">88888888</span></a>
</li> </li>
<li class="mui-table-view-cell"> <li class="mui-table-view-cell">
<a>手机号<span class="mui-pull-right">18601234567</span></a> <a>手机号<span class="mui-pull-right">18601234567</span></a>
</li> </li>
<li class="mui-table-view-cell"> <li class="mui-table-view-cell">
<a>邮箱地址<span class="mui-pull-right">hbuilder@dcloud.io</span></a> <a>邮箱地址<span class="mui-pull-right">hbuilder@dcloud.io</span></a>
</li> </li>
</ul> </ul>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -459,13 +461,13 @@ ...@@ -459,13 +461,13 @@
<div class="mui-scroll-wrapper"> <div class="mui-scroll-wrapper">
<div class="mui-scroll"> <div class="mui-scroll">
<ul class="mui-table-view"> <ul class="mui-table-view">
<li class="mui-table-view-cell"> <li class="mui-table-view-cell mui-plus-visible">
<a id="rate" class="mui-navigate-right">评分鼓励</a> <a id="rate" class="mui-navigate-right">评分鼓励</a>
</li> </li>
<li class="mui-table-view-cell"> <li class="mui-table-view-cell mui-plus-visible">
<a id="welcome" class="mui-navigate-right">欢迎页</a> <a id="welcome" class="mui-navigate-right">欢迎页</a>
</li> </li>
<li class="mui-table-view-cell"> <li class="mui-table-view-cell mui-plus-visible">
<a id="share" class="mui-navigate-right">分享推荐</a> <a id="share" class="mui-navigate-right">分享推荐</a>
</li> </li>
<li class="mui-table-view-cell"> <li class="mui-table-view-cell">
...@@ -474,7 +476,7 @@ ...@@ -474,7 +476,7 @@
<li class="mui-table-view-cell"> <li class="mui-table-view-cell">
<a id="feedback-btn" href="#feedback" class="mui-navigate-right">问题反馈</a> <a id="feedback-btn" href="#feedback" class="mui-navigate-right">问题反馈</a>
</li> </li>
<li class="mui-table-view-cell"> <li class="mui-table-view-cell mui-plus-visible">
<a id="update" class="mui-navigate-right">检查更新</a> <a id="update" class="mui-navigate-right">检查更新</a>
</li> </li>
</ul> </ul>
...@@ -518,14 +520,15 @@ ...@@ -518,14 +520,15 @@
<script src="../js/feedback-page.js"></script> <script src="../js/feedback-page.js"></script>
<script> <script>
mui.init(); mui.init();
//初始化单页view //初始化单页view
var viewApi = mui('#app').view({ var viewApi = mui('#app').view({
defaultPage: '#setting' defaultPage: '#setting'
}); });
//初始化单页的区域滚动 //初始化单页的区域滚动
mui('.mui-scroll-wrapper').scroll(); mui('.mui-scroll-wrapper').scroll();
//分享操作 //分享操作
var shares = {}; var shares = {};
mui.plusReady(function() { mui.plusReady(function() {
plus.share.getServices(function(s) { plus.share.getServices(function(s) {
if (s && s.length > 0) { if (s && s.length > 0) {
...@@ -537,12 +540,16 @@ ...@@ -537,12 +540,16 @@
}, function() { }, function() {
console.log("获取分享服务列表失败"); console.log("获取分享服务列表失败");
}); });
});
setTimeout(function () {
defaultImg(); defaultImg();
setTimeout(function() { setTimeout(function() {
initImgPreview(); initImgPreview();
}, 500); }, 300);
}); },500);
//分享链接点击事件
//分享链接点击事件
document.getElementById("share").addEventListener('tap', function() { document.getElementById("share").addEventListener('tap', function() {
var ids = [{ var ids = [{
id: "weixin", id: "weixin",
...@@ -594,25 +601,25 @@ ...@@ -594,25 +601,25 @@
}); });
function shareMessage(share, ex) { function shareMessage(share, ex) {
var msg = { var msg = {
extra: { extra: {
scene: ex scene: ex
}
};
msg.href = "http://www.dcloud.io/hellomui/";
msg.title = "最接近原生APP体验的高性能前端框架";
msg.content = "我正在体验HelloMUI，果然很流畅，基本看不出和原生App的差距";
if (~share.id.indexOf('weibo')) {
msg.content += "；体验地址：http://www.dcloud.io/hellomui/";
} }
msg.thumbs = ["_www/images/logo.png"]; };
share.send(msg, function() { msg.href = "http://www.dcloud.io/hellomui/";
console.log("分享到\"" + share.description + "\"成功！ "); msg.title = "最接近原生APP体验的高性能前端框架";
}, function(e) { msg.content = "我正在体验HelloMUI，果然很流畅，基本看不出和原生App的差距";
console.log("分享到\"" + share.description + "\"失败: " + e.code + " - " + e.message); if (~share.id.indexOf('weibo')) {
}); msg.content += "；体验地址：http://www.dcloud.io/hellomui/";
} }
//去评分 msg.thumbs = ["_www/images/logo.png"];
share.send(msg, function() {
console.log("分享到\"" + share.description + "\"成功！ ");
}, function(e) {
console.log("分享到\"" + share.description + "\"失败: " + e.code + " - " + e.message);
});
}
//去评分
document.getElementById("rate").addEventListener('tap', function() { document.getElementById("rate").addEventListener('tap', function() {
if (mui.os.ios) { if (mui.os.ios) {
location.href = 'https://itunes.apple.com/WebObjects/MZStore.woa/wa/viewContentsUserReviews?id=682211190&pageNumber=0&sortOrdering=2&type=&mt=8'; location.href = 'https://itunes.apple.com/WebObjects/MZStore.woa/wa/viewContentsUserReviews?id=682211190&pageNumber=0&sortOrdering=2&type=&mt=8';
...@@ -624,16 +631,21 @@ ...@@ -624,16 +631,21 @@
}, "com.tencent.android.qqdownloader"); }, "com.tencent.android.qqdownloader");
} }
}); });
//客服电话 //客服电话
document.getElementById("tel").addEventListener('tap', function() { document.getElementById("tel").addEventListener('tap', function() {
plus.device.dial("114"); if(mui.os.plus){
plus.device.dial("114");
}else{
location.href = 'tel:114';
}
}); });
// //意见反馈 // //意见反馈
// document.getElementById("quest").addEventListener('tap', function() { // document.getElementById("quest").addEventListener('tap', function() {
// //
// }); // });
// //
//检查更新 //检查更新
document.getElementById("update").addEventListener('tap', function() { document.getElementById("update").addEventListener('tap', function() {
var server = "http://www.dcloud.io/check/update"; //获取升级描述文件服务器地址 var server = "http://www.dcloud.io/check/update"; //获取升级描述文件服务器地址
mui.getJSON(server, { mui.getJSON(server, {
...@@ -678,31 +690,34 @@ ...@@ -678,31 +690,34 @@
// console.log(e.detail.page.id + ' back'); // console.log(e.detail.page.id + ' back');
}); });
})(mui); })(mui);
//更换头像 //更换头像
mui(".mui-table-view-cell").on("tap", "#head", function(e) { mui(".mui-table-view-cell").on("tap", "#head", function(e) {
var a = [{ if(mui.os.plus){
title: "拍照" var a = [{
}, { title: "拍照"
title: "从手机相册选择" }, {
}]; title: "从手机相册选择"
plus.nativeUI.actionSheet({ }];
title: "修改头像", plus.nativeUI.actionSheet({
cancel: "取消", title: "修改头像",
buttons: a cancel: "取消",
}, function(b) { buttons: a
switch (b.index) { }, function(b) {
case 0: switch (b.index) {
break; case 0:
case 1: break;
getImage(); case 1:
break; getImage();
case 2: break;
galleryImg(); case 2:
break; galleryImg();
default: break;
break default:
} break
}) }
})
}
}); });
function getImage() { function getImage() {
...@@ -774,14 +789,20 @@ ...@@ -774,14 +789,20 @@
}; };
function defaultImg() { function defaultImg() {
plus.io.resolveLocalFileSystemURL("_doc/head.jpg", function(entry) { if(mui.os.plus){
var s = entry.fullPath + "?version=" + new Date().getTime();; plus.io.resolveLocalFileSystemURL("_doc/head.jpg", function(entry) {
document.getElementById("head-img").src = s; var s = entry.fullPath + "?version=" + new Date().getTime();;
document.getElementById("head-img1").src = s; document.getElementById("head-img").src = s;
}, function(e) { document.getElementById("head-img1").src = s;
}, function(e) {
document.getElementById("head-img").src = '../images/logo.png';
document.getElementById("head-img1").src = '../images/logo.png';
})
}else{
document.getElementById("head-img").src = '../images/logo.png'; document.getElementById("head-img").src = '../images/logo.png';
document.getElementById("head-img1").src = '../images/logo.png'; document.getElementById("head-img1").src = '../images/logo.png';
}) }
} }
document.getElementById("head-img1").addEventListener('tap', function(e) { document.getElementById("head-img1").addEventListener('tap', function(e) {
e.stopPropagation(); e.stopPropagation();
......
examples/hello-mui/examples/tab-webview-main.html
View file @ d60ba180
...@@ -79,9 +79,11 @@ ...@@ -79,9 +79,11 @@
//更换标题 //更换标题
title.innerHTML = this.querySelector('.mui-tab-label').innerHTML; title.innerHTML = this.querySelector('.mui-tab-label').innerHTML;
//显示目标选项卡 //显示目标选项卡
//若为iOS平台或非首次显示，则直接显示
if(mui.os.ios||aniShow[targetTab]){ if(mui.os.ios||aniShow[targetTab]){
plus.webview.show(targetTab); plus.webview.show(targetTab);
}else{ }else{
//否则，使用fade-in动画，且保存变量
var temp = {}; var temp = {};
temp[targetTab] = "true"; temp[targetTab] = "true";
mui.extend(aniShow,temp); mui.extend(aniShow,temp);
......
examples/hello-mui/examples/tab-with-viewpagerindicator.html
View file @ d60ba180
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
<!--标准mui.css--> <!--标准mui.css-->
<link rel="stylesheet" href="../css/mui.min.css"> <link rel="stylesheet" href="../css/mui.min.css">
<!--App自定义的css--> <!--App自定义的css-->
<link rel="stylesheet" type="text/css" href="../css/app.css"/> <link rel="stylesheet" type="text/css" href="../css/app.css" />
</head> </head>
<body> <body>
......
examples/hello-mui/index.html
View file @ d60ba180
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
<body> <body>
<header class="mui-bar mui-bar-nav"> <header class="mui-bar mui-bar-nav">
<a class="mui-icon mui-icon-bars mui-pull-left"></a> <a class="mui-icon mui-icon-bars mui-pull-left mui-plus-visible"></a>
<a id="info" class="mui-icon mui-icon-info-filled mui-pull-right" style="color: #999;"></a> <a id="info" class="mui-icon mui-icon-info-filled mui-pull-right" style="color: #999;"></a>
<h1 class="mui-title">Hello mui</h1> <h1 class="mui-title">Hello mui</h1>
</header> </header>
...@@ -119,7 +119,7 @@ ...@@ -119,7 +119,7 @@
}, 300); }, 300);
} }
}; };
//点击左上角侧滑图标，打开侧滑菜单； //点击左上角侧滑图标，打开侧滑菜单；
document.querySelector('.mui-icon-bars').addEventListener('tap', function(e) { document.querySelector('.mui-icon-bars').addEventListener('tap', function(e) {
if (showMenu) { if (showMenu) {
closeMenu(); closeMenu();
...@@ -127,18 +127,18 @@ ...@@ -127,18 +127,18 @@
openMenu(); openMenu();
} }
}); });
//敲击顶部导航，内容区回到顶部 //敲击顶部导航，内容区回到顶部
document.querySelector('header').addEventListener('doubletap', function() { document.querySelector('header').addEventListener('doubletap', function() {
main.children()[0].evalJS('mui.scrollTo(0, 100)'); main.children()[0].evalJS('mui.scrollTo(0, 100)');
}); });
//主界面向右滑动，若菜单未显示，则显示菜单；否则不做任何操作 //主界面向右滑动，若菜单未显示，则显示菜单；否则不做任何操作
window.addEventListener("swiperight", openMenu); window.addEventListener("swiperight", openMenu);
//主界面向左滑动，若菜单已显示，则关闭菜单；否则，不做任何操作； //主界面向左滑动，若菜单已显示，则关闭菜单；否则，不做任何操作；
window.addEventListener("swipeleft", closeMenu); window.addEventListener("swipeleft", closeMenu);
//侧滑菜单触发关闭菜单命令 //侧滑菜单触发关闭菜单命令
window.addEventListener("menu:close", closeMenu); window.addEventListener("menu:close", closeMenu);
window.addEventListener("menu:open", openMenu); window.addEventListener("menu:open", openMenu);
//重写mui.menu方法，Android版本menu按键按下可自动打开、关闭侧滑菜单； //重写mui.menu方法，Android版本menu按键按下可自动打开、关闭侧滑菜单；
mui.menu = function() { mui.menu = function() {
if (showMenu) { if (showMenu) {
closeMenu(); closeMenu();
...@@ -150,6 +150,17 @@ ...@@ -150,6 +150,17 @@
var subWebview = null, var subWebview = null,
template = null; template = null;
document.getElementById('info').addEventListener('tap', function() { document.getElementById('info').addEventListener('tap', function() {
if (!mui.os.plus) {
mui.openWindow({
url: "examples/info.html",
id: "info",
show: {
aniShow: 'zoom-fade-out',
duration: 300
}
});
return;
}
if (subWebview == null) { if (subWebview == null) {
//获取共用父窗体 //获取共用父窗体
template = plus.webview.getWebviewById("default-main"); template = plus.webview.getWebviewById("default-main");
...@@ -164,9 +175,17 @@ ...@@ -164,9 +175,17 @@
}); });
template.show('slide-in-right', 150); template.show('slide-in-right', 150);
} }
// mui.openWindow({
// url:"examples/info.html",
// id:"info",
// show:{
// aniShow:'zoom-fade-out',
// duration:300
// }
// });
}); });
//首页返回键处理 //首页返回键处理
//处理逻辑：1秒内，连续两次按返回键，则退出应用； //处理逻辑：1秒内，连续两次按返回键，则退出应用；
var first = null; var first = null;
mui.back = function() { mui.back = function() {
if (showMenu) { if (showMenu) {
......
examples/hello-mui/js/mui.js
View file @ d60ba180
This diff is collapsed.
examples/hello-mui/js/mui.min.js
View file @ d60ba180
This source diff could not be displayed because it is too large. You can view the blob instead.
examples/hello-mui/list.html
View file @ d60ba180
...@@ -11,7 +11,6 @@ ...@@ -11,7 +11,6 @@
<style type="text/css"> <style type="text/css">
#list { #list {
/*避免导航边框和列表背景边框重叠，看起来像两条边框似得；*/ /*避免导航边框和列表背景边框重叠，看起来像两条边框似得；*/
margin-top: -1px; margin-top: -1px;
} }
</style> </style>
...@@ -35,7 +34,7 @@ ...@@ -35,7 +34,7 @@
H5模式actionsheet H5模式actionsheet
</a> </a>
</li> </li>
<li class="mui-table-view-cell"> <li class="mui-table-view-cell mui-plus-visible">
<a class="mui-navigate-right" href="examples/actionsheet-plus.html"> <a class="mui-navigate-right" href="examples/actionsheet-plus.html">
原生模式actionsheet 原生模式actionsheet
</a> </a>
...@@ -43,7 +42,7 @@ ...@@ -43,7 +42,7 @@
</ul> </ul>
</li> </li>
<li class="mui-table-view-cell"> <li class="mui-table-view-cell mui-plus-visible">
<a class="mui-navigate-right" href="examples/ajax.html"> <a class="mui-navigate-right" href="examples/ajax.html">
ajax（网络请求） ajax（网络请求）
</a> </a>
...@@ -96,7 +95,7 @@ ...@@ -96,7 +95,7 @@
H5模式 H5模式
</a> </a>
</li> </li>
<li class="mui-table-view-cell"> <li class="mui-table-view-cell mui-plus-visible">
<a class="mui-navigate-right" href="examples/date.html"> <a class="mui-navigate-right" href="examples/date.html">
native模式 native模式
</a> </a>
...@@ -229,12 +228,12 @@ ...@@ -229,12 +228,12 @@
off canvas（侧滑导航） off canvas（侧滑导航）
</a> </a>
<ul class="mui-table-view mui-table-view-chevron"> <ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell"> <li class="mui-table-view-cell mui-plus-visible">
<a class="mui-navigate-right" open-type="common" href="examples/offcanvas-drag-right-plus-main.html"> <a class="mui-navigate-right" open-type="common" href="examples/offcanvas-drag-right-plus-main.html">
webview模式右滑菜单 webview模式右滑菜单
</a> </a>
</li> </li>
<li class="mui-table-view-cell"> <li class="mui-table-view-cell mui-plus-visible">
<a class="mui-navigate-right" open-type="common" href="examples/offcanvas-drag-left-plus-main.html"> <a class="mui-navigate-right" open-type="common" href="examples/offcanvas-drag-left-plus-main.html">
webview模式左滑菜单 webview模式左滑菜单
</a> </a>
...@@ -311,7 +310,7 @@ ...@@ -311,7 +310,7 @@
底部选项卡-div模式 底部选项卡-div模式
</a> </a>
</li> </li>
<li class="mui-table-view-cell"> <li class="mui-table-view-cell mui-plus-visible">
<a class="mui-navigate-right" open-type="common" href="examples/tab-webview-main.html"> <a class="mui-navigate-right" open-type="common" href="examples/tab-webview-main.html">
底部选项卡-webview模式 底部选项卡-webview模式
</a> </a>
...@@ -351,7 +350,7 @@ ...@@ -351,7 +350,7 @@
</li> </li>
<li class="mui-table-view-divider">模板</li> <li class="mui-table-view-divider">模板</li>
<li class="mui-table-view-cell"> <li class="mui-table-view-cell mui-plus-visible">
<a class="mui-navigate-right" open-type="common" href="examples/ad.html"> <a class="mui-navigate-right" open-type="common" href="examples/ad.html">
advertisement（广告模板） advertisement（广告模板）
</a> </a>
...@@ -361,12 +360,12 @@ ...@@ -361,12 +360,12 @@
chart（EChart 图表） chart（EChart 图表）
</a> </a>
</li> </li>
<li class="mui-table-view-cell"> <li class="mui-table-view-cell mui-plus-visible">
<a class="mui-navigate-right" open-type="common" href="examples/clouddb_wilddog.html"> <a class="mui-navigate-right" open-type="common" href="examples/clouddb_wilddog.html">
cloud DB（云端数据库） cloud DB（云端数据库）
</a> </a>
</li> </li>
<li class="mui-table-view-cell"> <li class="mui-table-view-cell mui-plus-visible">
<a class="mui-navigate-right" href="examples/im-chat.html"> <a class="mui-navigate-right" href="examples/im-chat.html">
chat（聊天窗口） chat（聊天窗口）
</a> </a>
...@@ -567,7 +566,7 @@ ...@@ -567,7 +566,7 @@
} }
}); });
} else if (id && ~id.indexOf('.html')) { } else if (id && ~id.indexOf('.html')) {
if (!~id.indexOf('popovers.html')&&mui.os.ios) { if (!mui.os.plus || (!~id.indexOf('popovers.html')&&mui.os.ios)) {
mui.openWindow({ mui.openWindow({
id: id, id: id,
url: this.href, url: this.href,
......
fonts/mui.ttf
View file @ d60ba180
No preview for this file type
js/input.plugin.js
View file @ d60ba180
...@@ -10,6 +10,7 @@ ...@@ -10,6 +10,7 @@
var CLASS_ICON_CLEAR = $.className('icon-clear'); var CLASS_ICON_CLEAR = $.className('icon-clear');
var CLASS_ICON_SPEECH = $.className('icon-speech'); var CLASS_ICON_SPEECH = $.className('icon-speech');
var CLASS_ICON_SEARCH = $.className('icon-search'); var CLASS_ICON_SEARCH = $.className('icon-search');
var CLASS_ICON_PASSWORD = $.className('icon-eye');
var CLASS_INPUT_ROW = $.className('input-row'); var CLASS_INPUT_ROW = $.className('input-row');
var CLASS_PLACEHOLDER = $.className('placeholder'); var CLASS_PLACEHOLDER = $.className('placeholder');
var CLASS_TOOLTIP = $.className('tooltip'); var CLASS_TOOLTIP = $.className('tooltip');
...@@ -17,6 +18,7 @@ ...@@ -17,6 +18,7 @@
var CLASS_FOCUSIN = $.className('focusin'); var CLASS_FOCUSIN = $.className('focusin');
var SELECTOR_ICON_CLOSE = '.' + CLASS_ICON_CLEAR; var SELECTOR_ICON_CLOSE = '.' + CLASS_ICON_CLEAR;
var SELECTOR_ICON_SPEECH = '.' + CLASS_ICON_SPEECH; var SELECTOR_ICON_SPEECH = '.' + CLASS_ICON_SPEECH;
var SELECTOR_ICON_PASSWORD = '.' + CLASS_ICON_PASSWORD;
var SELECTOR_PLACEHOLDER = '.' + CLASS_PLACEHOLDER; var SELECTOR_PLACEHOLDER = '.' + CLASS_PLACEHOLDER;
var SELECTOR_TOOLTIP = '.' + CLASS_TOOLTIP; var SELECTOR_TOOLTIP = '.' + CLASS_TOOLTIP;
...@@ -49,6 +51,10 @@ ...@@ -49,6 +51,10 @@
this.searchActionClass = CLASS_PLACEHOLDER; this.searchActionClass = CLASS_PLACEHOLDER;
this.searchActionSelector = SELECTOR_PLACEHOLDER; this.searchActionSelector = SELECTOR_PLACEHOLDER;
} }
if (~this.options.actions.indexOf('password')) {
this.passwordActionClass = CLASS_ICON + ' ' + CLASS_ICON_PASSWORD;
this.passwordActionSelector = SELECTOR_ICON_PASSWORD;
}
} }
this.init(); this.init();
}; };
...@@ -83,7 +89,12 @@ ...@@ -83,7 +89,12 @@
self.clearAction.addEventListener('tap', function(event) { self.clearAction.addEventListener('tap', function(event) {
self.clearActionClick(event); self.clearActionClick(event);
}); });
}
if (self.passwordActionClass) {
self.passwordAction = self.createAction(row, self.passwordActionClass, self.passwordActionSelector);
self.passwordAction.addEventListener('tap', function(event) {
self.passwordActionClick(event);
});
} }
} }
} }
...@@ -171,6 +182,15 @@ ...@@ -171,6 +182,15 @@
this.element.setAttribute('placeholder', text); this.element.setAttribute('placeholder', text);
} }
}; };
Input.prototype.passwordActionClick = function(event) {
if (this.element.type === 'text') {
this.element.type = 'password';
} else {
this.element.type = 'text';
}
this.passwordAction.classList.toggle($.className('active'));
event.preventDefault();
};
Input.prototype.clearActionClick = function(event) { Input.prototype.clearActionClick = function(event) {
var self = this; var self = this;
self.element.value = ''; self.element.value = '';
...@@ -222,6 +242,9 @@ ...@@ -222,6 +242,9 @@
if (classList.contains($.className('input-speech'))) { if (classList.contains($.className('input-speech'))) {
actions.push('speech'); actions.push('speech');
} }
if (classList.contains($.className('input-password'))) {
actions.push('password');
}
if (this.type === 'search' && row.classList.contains($.className('search'))) { if (this.type === 'search' && row.classList.contains($.className('search'))) {
actions.push('search'); actions.push('search');
} }
......
js/mui.ajax.js
View file @ d60ba180
...@@ -130,7 +130,7 @@ ...@@ -130,7 +130,7 @@
if (settings.cache === false || ((!options || options.cache !== true) && ('script' === dataType))) { if (settings.cache === false || ((!options || options.cache !== true) && ('script' === dataType))) {
settings.url = appendQuery(settings.url, '_=' + $.now()); settings.url = appendQuery(settings.url, '_=' + $.now());
} }
var mime = settings.accepts[dataType]; var mime = settings.accepts[dataType.toLowerCase()];
var headers = {}; var headers = {};
var setHeader = function(name, value) { var setHeader = function(name, value) {
headers[name.toLowerCase()] = [name, value]; headers[name.toLowerCase()] = [name, value];
......
js/mui.class.scroll.js
View file @ d60ba180
...@@ -18,6 +18,12 @@ ...@@ -18,6 +18,12 @@
fn: function(k) { fn: function(k) {
return Math.sqrt(1 - (--k * k)); return Math.sqrt(1 - (--k * k));
} }
},
outCirc: {
style: 'cubic-bezier(0.075, 0.82, 0.165, 1)'
},
outCubic: {
style: 'cubic-bezier(0.165, 0.84, 0.44, 1)'
} }
} }
var Scroll = $.Class.extend({ var Scroll = $.Class.extend({
...@@ -32,6 +38,7 @@ ...@@ -32,6 +38,7 @@
scrollX: false, //是否横向滚动 scrollX: false, //是否横向滚动
startX: 0, //初始化时滚动至x startX: 0, //初始化时滚动至x
startY: 0, //初始化时滚动至y startY: 0, //初始化时滚动至y
indicators: true, //是否显示滚动条 indicators: true, //是否显示滚动条
stopPropagation: false, stopPropagation: false,
hardwareAccelerated: true, hardwareAccelerated: true,
...@@ -41,11 +48,16 @@ ...@@ -41,11 +48,16 @@
}, },
momentum: true, momentum: true,
snapX: 0.5, //横向切换距离(以当前容器宽度为基准)
snap: false, //图片轮播，拖拽式选项卡 snap: false, //图片轮播，拖拽式选项卡
bounce: true, //是否启用回弹 bounce: true, //是否启用回弹
bounceTime: 300, //回弹动画时间 bounceTime: 500, //回弹动画时间
bounceEasing: ease.circular.style, //回弹动画曲线 bounceEasing: ease.outCirc, //回弹动画曲线
scrollTime: 500,
scrollEasing: ease.outCubic, //轮播动画曲线
directionLockThreshold: 5, directionLockThreshold: 5,
...@@ -122,7 +134,9 @@ ...@@ -122,7 +134,9 @@
var m = 0; var m = 0;
var n = -1; var n = -1;
var x = 0; var x = 0;
var cx = 0; var leftX = 0;
var rightX = 0;
var snapX = 0;
for (var i = 0; i < length; i++) { for (var i = 0; i < length; i++) {
var snap = snaps[i]; var snap = snaps[i];
var offsetLeft = snap.offsetLeft; var offsetLeft = snap.offsetLeft;
...@@ -135,10 +149,13 @@ ...@@ -135,10 +149,13 @@
this.pages[m] = []; this.pages[m] = [];
} }
x = this._getSnapX(offsetLeft); x = this._getSnapX(offsetLeft);
cx = x - Math.round((offsetWidth) / 2); snapX = Math.round((offsetWidth) * this.options.snapX);
leftX = x - snapX;
rightX = x - offsetWidth + snapX;
this.pages[m][n] = { this.pages[m][n] = {
x: x, x: x,
cx: cx, leftX: leftX,
rightX: rightX,
pageX: m, pageX: m,
element: snap element: snap
} }
...@@ -163,7 +180,7 @@ ...@@ -163,7 +180,7 @@
this.snaps[i].classList.remove(CLASS_ACTIVE); this.snaps[i].classList.remove(CLASS_ACTIVE);
} }
} }
this.scrollTo(this.currentPage.x, 0, this.options.bounceTime); this.scrollTo(this.currentPage.x, 0, this.options.scrollTime);
}, },
_nearestSnap: function(x) { _nearestSnap: function(x) {
if (!this.pages.length) { if (!this.pages.length) {
...@@ -174,15 +191,14 @@ ...@@ -174,15 +191,14 @@
} }
var i = 0; var i = 0;
var length = this.pages.length; var length = this.pages.length;
if (x > 0) { if (x > 0) {
x = 0; x = 0;
} else if (x < this.maxScrollX) { } else if (x < this.maxScrollX) {
x = this.maxScrollX; x = this.maxScrollX;
} }
for (; i < length; i++) { for (; i < length; i++) {
if (x >= this.pages[i][0].cx) { var nearestX = this.direction === 'left' ? this.pages[i][0].leftX : this.pages[i][0].rightX;
if (x >= nearestX) {
return this.pages[i][0]; return this.pages[i][0];
} }
} }
...@@ -398,7 +414,7 @@ ...@@ -398,7 +414,7 @@
if (!this.requestAnimationFrame) { if (!this.requestAnimationFrame) {
this._updateTranslate(); this._updateTranslate();
} }
this.direction = detail.deltaX > 0 ? 'right' : 'left';
this.moved = true; this.moved = true;
this.x = newX; this.x = newX;
this.y = newY; this.y = newY;
...@@ -698,7 +714,7 @@ ...@@ -698,7 +714,7 @@
if (x == this.x && y == this.y) { if (x == this.x && y == this.y) {
return false; return false;
} }
this.scrollTo(x, y, time, this.options.bounceEasing); this.scrollTo(x, y, time, this.options.scrollEasing);
return true; return true;
}, },
...@@ -723,7 +739,7 @@ ...@@ -723,7 +739,7 @@
}, },
scrollToBottom: function(time, easing) { scrollToBottom: function(time, easing) {
time = time || this.options.bounceTime; time = time || this.options.scrollTime;
this.scrollTo(0, this.maxScrollY, time, easing); this.scrollTo(0, this.maxScrollY, time, easing);
}, },
gotoPage: function(index) { gotoPage: function(index) {
......
js/mui.class.scroll.slider.js
View file @ d60ba180
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
scrollY: false, scrollY: false,
scrollX: true, scrollX: true,
indicators: false, indicators: false,
bounceTime: 200, scrollTime: 1000,
startX: false, startX: false,
slideTime: 0, //滑动动画时间 slideTime: 0, //滑动动画时间
snap: SELECTOR_SLIDER_ITEM snap: SELECTOR_SLIDER_ITEM
...@@ -301,7 +301,7 @@ ...@@ -301,7 +301,7 @@
}, },
_gotoItem: function(slideNumber, time) { _gotoItem: function(slideNumber, time) {
this.currentPage = this._getPage(slideNumber, true); //此处传true。可保证程序切换时，动画与人手操作一致(第一张，最后一张的切换动画) this.currentPage = this._getPage(slideNumber, true); //此处传true。可保证程序切换时，动画与人手操作一致(第一张，最后一张的切换动画)
this.scrollTo(this.currentPage.x, 0, time, this.options.bounceEasing); this.scrollTo(this.currentPage.x, 0, time, this.options.scrollEasing);
if (time === 0) { if (time === 0) {
$.trigger(this.wrapper, 'scrollend', this); $.trigger(this.wrapper, 'scrollend', this);
} }
...@@ -322,17 +322,17 @@ ...@@ -322,17 +322,17 @@
this.x = this.maxScrollX; this.x = this.maxScrollX;
} }
this.currentPage = this._nearestSnap(this.x); this.currentPage = this._nearestSnap(this.x);
this.scrollTo(this.currentPage.x, 0, time); this.scrollTo(this.currentPage.x, 0, time, this.options.scrollEasing);
return true; return true;
}, },
gotoItem: function(slideNumber, time) { gotoItem: function(slideNumber, time) {
this._gotoItem(slideNumber, typeof time === 'undefined' ? this.options.bounceTime : time); this._gotoItem(slideNumber, typeof time === 'undefined' ? this.options.scrollTime : time);
}, },
nextItem: function() { nextItem: function() {
this._gotoItem(this.slideNumber + 1, this.options.bounceTime); this._gotoItem(this.slideNumber + 1, this.options.scrollTime);
}, },
prevItem: function() { prevItem: function() {
this._gotoItem(this.slideNumber - 1, this.options.bounceTime); this._gotoItem(this.slideNumber - 1, this.options.scrollTime);
}, },
getSlideNumber: function() { getSlideNumber: function() {
return this.slideNumber || 0; return this.slideNumber || 0;
......
js/mui.gestures.flick.js
View file @ d60ba180
...@@ -19,6 +19,7 @@ ...@@ -19,6 +19,7 @@
break; break;
case $.EVENT_END: case $.EVENT_END:
case $.EVENT_CANCEL: case $.EVENT_CANCEL:
touch.flick = false;
if (session.flickStart && options.flickMaxTime > (now - flickStartTime) && touch.distance > options.flickMinDistince) { if (session.flickStart && options.flickMaxTime > (now - flickStartTime) && touch.distance > options.flickMinDistince) {
touch.flick = true; touch.flick = true;
touch.flickTime = now - flickStartTime; touch.flickTime = now - flickStartTime;
......
js/mui.gestures.js
View file @ d60ba180
...@@ -401,7 +401,7 @@ ...@@ -401,7 +401,7 @@
//fixed hashchange(android) //fixed hashchange(android)
window.addEventListener($.EVENT_CLICK, function(e) { window.addEventListener($.EVENT_CLICK, function(e) {
//TODO 应该判断当前target是不是在targets.popover内部，而不是非要相等 //TODO 应该判断当前target是不是在targets.popover内部，而不是非要相等
if (($.targets.popover && e.target === $.targets.popover) || ($.targets.tab) || $.targets.offcanvas || $.targets.modal) { if (($.os.android || $.os.ios) && (($.targets.popover && e.target === $.targets.popover) || ($.targets.tab) || $.targets.offcanvas || $.targets.modal)) {
e.preventDefault(); e.preventDefault();
} }
}, true); }, true);
......
js/mui.gestures.swipe.js
View file @ d60ba180
...@@ -9,6 +9,7 @@ ...@@ -9,6 +9,7 @@
var session = $.gestures.session; var session = $.gestures.session;
if (event.type === $.EVENT_END || event.type === $.EVENT_CANCEL) { if (event.type === $.EVENT_END || event.type === $.EVENT_CANCEL) {
var options = this.options; var options = this.options;
touch.swipe = false;
//TODO 后续根据velocity计算 //TODO 后续根据velocity计算
if (touch.direction && options.swipeMaxTime > touch.deltaTime && touch.distance > options.swipeMinDistince) { if (touch.direction && options.swipeMaxTime > touch.deltaTime && touch.distance > options.swipeMinDistince) {
touch.swipe = true; touch.swipe = true;
......
js/mui.init.5+.js
View file @ d60ba180
...@@ -36,7 +36,10 @@ ...@@ -36,7 +36,10 @@
* @returns {Object} * @returns {Object}
*/ */
$.waitingOptions = function(options) { $.waitingOptions = function(options) {
return $.extend(true,{},{autoShow: true,title: ''}, options); return $.extend(true, {}, {
autoShow: true,
title: ''
}, options);
}; };
/** /**
* 窗口显示配置 * 窗口显示配置
...@@ -44,7 +47,7 @@ ...@@ -44,7 +47,7 @@
* @returns {Object} * @returns {Object}
*/ */
$.showOptions = function(options) { $.showOptions = function(options) {
return $.extend(true,{},defaultShow, options); return $.extend(true, {}, defaultShow, options);
}; };
/** /**
* 窗口默认配置 * 窗口默认配置
...@@ -144,10 +147,6 @@ ...@@ -144,10 +147,6 @@
* @param {object} options 可选:参数,等待,窗口,显示配置{params:{},waiting:{},styles:{},show:{}} * @param {object} options 可选:参数,等待,窗口,显示配置{params:{},waiting:{},styles:{},show:{}}
*/ */
$.openWindow = function(url, id, options) { $.openWindow = function(url, id, options) {
if (!window.plus) {
return;
}
if (typeof url === 'object') { if (typeof url === 'object') {
options = url; options = url;
url = options.url; url = options.url;
...@@ -160,19 +159,29 @@ ...@@ -160,19 +159,29 @@
id = id || url; id = id || url;
} }
} }
if (!$.os.plus) {
window.top.location.href = url;
return;
}
if (!window.plus) {
return;
}
options = options || {}; options = options || {};
var params = options.params || {}; var params = options.params || {};
var webview = null,webviewCache = null, nShow, nWaiting; var webview = null,
webviewCache = null,
nShow, nWaiting;
if($.webviews[id]){ if ($.webviews[id]) {
webviewCache = $.webviews[id]; webviewCache = $.webviews[id];
//webview真实存在，才能获取 //webview真实存在，才能获取
if(plus.webview.getWebviewById(id)){ if (plus.webview.getWebviewById(id)) {
webview = webviewCache.webview; webview = webviewCache.webview;
} }
} }
if (webviewCache&&webview) { //已缓存 if (webviewCache && webview) { //已缓存
//每次show都需要传递动画参数； //每次show都需要传递动画参数；
//预加载的动画参数优先级：openWindow配置>preloadPages配置>mui默认配置； //预加载的动画参数优先级：openWindow配置>preloadPages配置>mui默认配置；
nShow = webviewCache.show; nShow = webviewCache.show;
...@@ -433,20 +442,21 @@ ...@@ -433,20 +442,21 @@
} }
}); });
} else { } else {
if (subpages.length > 0) { //已支持iframe嵌入
var err = document.createElement('div'); // if (subpages.length > 0) {
err.className = 'mui-error'; // var err = document.createElement('div');
//文字描述 // err.className = 'mui-error';
var span = document.createElement('span'); // //文字描述
span.innerHTML = '在该浏览器下，不支持创建子页面，具体参考'; // var span = document.createElement('span');
err.appendChild(span); // span.innerHTML = '在该浏览器下，不支持创建子页面，具体参考';
var a = document.createElement('a'); // err.appendChild(span);
a.innerHTML = '"mui框架适用场景"'; // var a = document.createElement('a');
a.href = 'http://ask.dcloud.net.cn/article/113'; // a.innerHTML = '"mui框架适用场景"';
err.appendChild(a); // a.href = 'http://ask.dcloud.net.cn/article/113';
document.body.appendChild(err); // err.appendChild(a);
console.log('在该浏览器下，不支持创建子页面'); // document.body.appendChild(err);
} // console.log('在该浏览器下，不支持创建子页面');
// }
} }
...@@ -464,4 +474,13 @@ ...@@ -464,4 +474,13 @@
}); });
}); });
$.supportStatusbarOffset = function() {
return $.os.plus && $.os.ios && parseFloat($.os.version) >= 7;
};
$.ready(function() {
//标识当前环境支持statusbar
if ($.supportStatusbarOffset()) {
document.body.classList.add($.className('statusbar'));
}
});
})(mui); })(mui);
\ No newline at end of file
js/mui.init.js
View file @ d60ba180
...@@ -62,6 +62,40 @@ ...@@ -62,6 +62,40 @@
$.addInit = function(init) { $.addInit = function(init) {
return $.addAction('inits', init); return $.addAction('inits', init);
}; };
/**
* 处理html5版本subpages
*/
$.addInit({
name: 'iframe',
index: 100,
handle: function() {
var options = $.options;
var subpages = options.subpages || [];
if (!$.os.plus && subpages.length) {
//暂时只处理单个subpage。后续可以考虑支持多个subpage
createIframe(subpages[0]);
}
}
});
var createIframe = function(options) {
var wrapper = document.createElement('div');
wrapper.className = $.className('iframe-wrapper');
var styles = options.styles || {};
if (typeof styles.top !== 'string') {
styles.top = '0px';
}
if (typeof styles.bottom !== 'string') {
styles.bottom = '0px';
}
wrapper.style.top = styles.top;
wrapper.style.bottom = styles.bottom;
var iframe = document.createElement('iframe');
iframe.src = options.url;
iframe.id = options.id || options.url;
iframe.name = iframe.id;
wrapper.appendChild(iframe);
document.body.appendChild(wrapper);
};
$(function() { $(function() {
var classList = document.body.classList; var classList = document.body.classList;
var os = []; var os = [];
......
js/mui.number.js
View file @ d60ba180
...@@ -11,9 +11,9 @@ ...@@ -11,9 +11,9 @@
var tapEventName = touchSupport ? 'tap' : 'click'; var tapEventName = touchSupport ? 'tap' : 'click';
var changeEventName = 'change'; var changeEventName = 'change';
var holderClassName = $.className('numbox'); var holderClassName = $.className('numbox');
var plusClassName = $.className('numbox-btn-plus'); var plusClassName = $.className('btn-numbox-plus') + "," + $.className("numbox-btn-plus");
var minusClassName = $.className('numbox-btn-minus'); var minusClassName = $.className('btn-numbox-minus') + "," + $.className("numbox-btn-minus");
var inputClassName = $.className('numbox-input'); var inputClassName = $.className('input-numbox') + "," + $.className("numbox-input");
var Numbox = $.Numbox = $.Class.extend({ var Numbox = $.Numbox = $.Class.extend({
/** /**
...@@ -104,7 +104,9 @@ ...@@ -104,7 +104,9 @@
var instanceArray = []; var instanceArray = [];
//遍历选择的元素 //遍历选择的元素
this.each(function(i, element) { this.each(function(i, element) {
if (element.numbox) return; if (element.numbox) {
return;
}
if (options) { if (options) {
element.numbox = new Numbox(element, options); element.numbox = new Numbox(element, options);
} else { } else {
......
js/mui.offcanvas.js
View file @ d60ba180
...@@ -191,21 +191,23 @@ ...@@ -191,21 +191,23 @@
this._dispatchEvent(); //此处不触发webkitTransitionEnd,所以手动dispatch this._dispatchEvent(); //此处不触发webkitTransitionEnd,所以手动dispatch
return; return;
} }
if (ratio > 0 && ratio < 0.5 && direction === 'right') { if (direction === 'right' && ratio >= 0 && (ratio >= 0.5 || detail.swipe)) { //右滑打开
this.openPercentage(0);
} else if (ratio > 0.5 && direction === 'left') {
this.openPercentage(100); this.openPercentage(100);
} else if (ratio < 0 && ratio > -0.5 && direction === 'left') { } else if (direction === 'right' && ratio < 0 && (ratio > -0.5 || detail.swipe)) { //右滑关闭
this.openPercentage(0); this.openPercentage(0);
} else if (direction === 'right' && ratio < 0 && ratio > -0.5) { } else if (direction === 'right' && ratio > 0 && ratio < 0.5) { //右滑还原关闭
this.openPercentage(0); this.openPercentage(0);
} else if (ratio < 0.5 && direction === 'right') { } else if (direction === 'right' && ratio < 0.5) { //右滑还原打开
this.openPercentage(-100); this.openPercentage(-100);
} else if (direction === 'right' && ratio >= 0 && (ratio >= 0.5 || detail.flick)) { } else if (direction === 'left' && ratio <= 0 && (ratio <= -0.5 || detail.swipe)) { //左滑打开
this.openPercentage(100);
} else if (direction === 'left' && ratio <= 0 && (ratio <= -0.5 || detail.flick)) {
this.openPercentage(-100); this.openPercentage(-100);
} else { } else if (direction === 'left' && ratio > 0 && (ratio <= 0.5 || detail.swipe)) { //左滑关闭
this.openPercentage(0);
} else if (direction === 'left' && ratio < 0 && ratio >= -0.5) { //左滑还原关闭
this.openPercentage(0);
} else if (direction === 'left' && ratio > 0.5) { //左滑还原打开
this.openPercentage(100);
} else { //默认关闭
this.openPercentage(0); this.openPercentage(0);
} }
if (ratio === 1 || ratio === -1) { //此处不触发webkitTransitionEnd,所以手动dispatch if (ratio === 1 || ratio === -1) { //此处不触发webkitTransitionEnd,所以手动dispatch
...@@ -217,24 +219,22 @@ ...@@ -217,24 +219,22 @@
} else { } else {
ratio = (this.offCanvasLeftWidth && (x / this.offCanvasLeftWidth)) || 0; ratio = (this.offCanvasLeftWidth && (x / this.offCanvasLeftWidth)) || 0;
} }
if (ratio >= 0.5 && direction === 'left') { if (direction === 'right' && ratio <= 0 && (ratio >= -0.5 || detail.swipe)) { //右滑打开
this.openPercentage(100);
} else if (direction === 'right' && ratio > 0 && (ratio >= 0.5 || detail.swipe)) { //右滑关闭
this.openPercentage(0); this.openPercentage(0);
} else if (ratio > 0 && ratio <= 0.5 && direction === 'left') { } else if (direction === 'right' && ratio <= -0.5) { //右滑还原关闭
this.openPercentage(-100);
} else if (ratio >= 0.5 && direction === 'right') {
this.openPercentage(0); this.openPercentage(0);
} else if (ratio >= -0.5 && ratio < 0 && direction === 'left') { } else if (direction === 'right' && ratio > 0 && ratio <= 0.5) { //右滑还原打开
this.openPercentage(100);
} else if (ratio > 0 && ratio <= 0.5 && direction === 'right') {
this.openPercentage(-100); this.openPercentage(-100);
} else if (ratio <= -0.5 && direction === 'right') { } else if (direction === 'left' && ratio >= 0 && (ratio <= 0.5 || detail.swipe)) { //左滑打开
this.openPercentage(-100);
} else if (direction === 'left' && ratio < 0 && (ratio <= -0.5 || detail.swipe)) { //左滑关闭
this.openPercentage(0); this.openPercentage(0);
} else if (ratio >= -0.5 && direction === 'right') { } else if (direction === 'left' && ratio >= 0.5) { //左滑还原关闭
this.openPercentage(100);
} else if (ratio <= -0.5 && direction === 'left') {
this.openPercentage(0); this.openPercentage(0);
} else if (ratio >= -0.5 && direction === 'left') { } else if (direction === 'left' && ratio >= -0.5 && ratio < 0) { //左滑还原打开
this.openPercentage(-100); this.openPercentage(100);
} else { } else {
this.openPercentage(0); this.openPercentage(0);
} }
...@@ -304,7 +304,6 @@ ...@@ -304,7 +304,6 @@
} }
this.classList[percentage !== 0 ? 'add' : 'remove'](CLASS_ACTIVE); this.classList[percentage !== 0 ? 'add' : 'remove'](CLASS_ACTIVE);
} }
}, },
updateTranslate: function(x) { updateTranslate: function(x) {
if (x !== this.lastTranslateX) { if (x !== this.lastTranslateX) {
......
js/mui.pullrefresh.js
View file @ d60ba180
...@@ -28,9 +28,10 @@ ...@@ -28,9 +28,10 @@
scrollY: true, scrollY: true,
scrollX: false, scrollX: false,
indicators: true, indicators: true,
deceleration:0.003, deceleration: 0.003,
down: { down: {
height: 50, height: 50,
contentinit: '下拉可以刷新',
contentdown: '下拉可以刷新', contentdown: '下拉可以刷新',
contentover: '释放立即刷新', contentover: '释放立即刷新',
contentrefresh: '正在刷新...' contentrefresh: '正在刷新...'
...@@ -38,6 +39,7 @@ ...@@ -38,6 +39,7 @@
up: { up: {
height: 50, height: 50,
auto: false, auto: false,
contentinit: '上拉显示更多',
contentdown: '上拉显示更多', contentdown: '上拉显示更多',
contentrefresh: '正在加载...', contentrefresh: '正在加载...',
contentnomore: '没有更多数据了', contentnomore: '没有更多数据了',
...@@ -91,7 +93,7 @@ ...@@ -91,7 +93,7 @@
_createPocket: function(clazz, options, iconClass) { _createPocket: function(clazz, options, iconClass) {
var pocket = document.createElement('div'); var pocket = document.createElement('div');
pocket.className = clazz; pocket.className = clazz;
pocket.innerHTML = pocketHtml.replace('{contentrefresh}', options.contentrefresh).replace('{icon}', iconClass); pocket.innerHTML = pocketHtml.replace('{contentrefresh}', options.contentinit).replace('{icon}', iconClass);
return pocket; return pocket;
}, },
_resetPullDownLoading: function() { _resetPullDownLoading: function() {
......
js/mui.target.js
View file @ d60ba180
...@@ -53,6 +53,26 @@ ...@@ -53,6 +53,26 @@
break; break;
} }
} }
}); });
})(mui, window, document); window.addEventListener('click', function(event) { //解决touch与click的target不一致的问题(比如链接边缘点击时，touch的target为html，而click的target为A)
var target = event.target;
var isFound = false;
for (; target && target !== document; target = target.parentNode) {
if (target.tagName === 'A') {
$.each($.targetHandles, function(index, targetHandle) {
var name = targetHandle.name;
if (targetHandle.hasOwnProperty('handle')) {
if (targetHandle.handle(event, target)) {
isFound = true;
event.preventDefault();
return false;
}
}
});
if (isFound) {
break;
}
}
}
});
})(mui, window, document);
\ No newline at end of file
js/popovers.js
View file @ d60ba180
...@@ -106,7 +106,10 @@ ...@@ -106,7 +106,10 @@
}); });
var togglePopover = function(popover, anchor) { var togglePopover = function(popover, anchor, state) {
if ((state === 'show' && popover.classList.contains(CLASS_ACTIVE)) || (state === 'hide' && !popover.classList.contains(CLASS_ACTIVE))) {
return;
}
removeBackdropTimer && removeBackdropTimer.cancel(); //取消remove的timer removeBackdropTimer && removeBackdropTimer.cancel(); //取消remove的timer
//remove一遍，以免来回快速切换，导致webkitTransitionEnd不触发，无法remove //remove一遍，以免来回快速切换，导致webkitTransitionEnd不触发，无法remove
popover.removeEventListener('webkitTransitionEnd', onPopoverShown); popover.removeEventListener('webkitTransitionEnd', onPopoverShown);
...@@ -276,7 +279,7 @@ ...@@ -276,7 +279,7 @@
this.each(function() { this.each(function() {
$.targets._popover = this; $.targets._popover = this;
if (args[0] === 'show' || args[0] === 'hide' || args[0] === 'toggle') { if (args[0] === 'show' || args[0] === 'hide' || args[0] === 'toggle') {
togglePopover(this, args[1]); togglePopover(this, args[1], args[0]);
} }
}); });
}; };
......
js/pullrefresh.5+.js
View file @ d60ba180
...@@ -134,15 +134,22 @@ ...@@ -134,15 +134,22 @@
} }
}, },
pulldownLoading: function() { //该方法是子页面调用的 pulldownLoading: function() { //该方法是子页面调用的
$.plusReady(function() {
plus.webview.currentWebview().setBounce({
offset: {
top: this.options.down.height + "px"
}
});
}.bind(this));
var callback = $.options.pullRefresh.down.callback; var callback = $.options.pullRefresh.down.callback;
callback && callback.call(this); callback && callback.call(this);
}, },
_pulldownLoading: function() { //该方法是子页面调用的 // _pulldownLoading: function() { //该方法是子页面调用的
var self = this; // var self = this;
$.plusReady(function() { // $.plusReady(function() {
plus.webview.getWebviewById(self.options.webviewId).evalJS("mui&&mui.options.pullRefresh.down&&mui.options.pullRefresh.down.callback()"); // plus.webview.getWebviewById(self.options.webviewId).evalJS("mui&&mui.options.pullRefresh.down&&mui.options.pullRefresh.down.callback()");
}); // });
}, // },
endPulldownToRefresh: function() { //该方法是子页面调用的 endPulldownToRefresh: function() { //该方法是子页面调用的
var webview = plus.webview.currentWebview(); var webview = plus.webview.currentWebview();
webview.parent().evalJS("mui&&mui(document.querySelector('.mui-content')).pullRefresh('" + JSON.stringify({ webview.parent().evalJS("mui&&mui(document.querySelector('.mui-content')).pullRefresh('" + JSON.stringify({
...@@ -255,7 +262,7 @@ ...@@ -255,7 +262,7 @@
pullRefreshApi = $.data[id]; pullRefreshApi = $.data[id];
} }
if (options.down && options.down.auto) { //如果设置了auto，则自动下拉一次 if (options.down && options.down.auto) { //如果设置了auto，则自动下拉一次
pullRefreshApi._pulldownLoading(); //parent webview pullRefreshApi.pulldownLoading(); //parent webview
} else if (options.up && options.up.auto) { //如果设置了auto，则自动上拉一次 } else if (options.up && options.up.auto) { //如果设置了auto，则自动上拉一次
pullRefreshApi.pullupLoading(); pullRefreshApi.pullupLoading();
} }
......
js/switches.js
View file @ d60ba180
...@@ -72,6 +72,7 @@ ...@@ -72,6 +72,7 @@
} }
}; };
Toggle.prototype.start = function(e) { Toggle.prototype.start = function(e) {
this.handle.style.webkitTransitionDuration = this.element.style.webkitTransitionDuration = '.2s';
this.classList.add(CLASS_DRAGGING); this.classList.add(CLASS_DRAGGING);
if (this.toggleWidth === 0 || this.handleWidth === 0) { //当switch处于隐藏状态时，width为0，需要重新初始化 if (this.toggleWidth === 0 || this.handleWidth === 0) { //当switch处于隐藏状态时，width为0，需要重新初始化
this.init(); this.init();
...@@ -109,8 +110,13 @@ ...@@ -109,8 +110,13 @@
this.toggle(); this.toggle();
} }
}; };
Toggle.prototype.toggle = function() { Toggle.prototype.toggle = function(animate) {
var classList = this.classList; var classList = this.classList;
if (animate === false) {
this.handle.style.webkitTransitionDuration = this.element.style.webkitTransitionDuration = '0s';
} else {
this.handle.style.webkitTransitionDuration = this.element.style.webkitTransitionDuration = '.2s';
}
if (classList.contains(CLASS_ACTIVE)) { if (classList.contains(CLASS_ACTIVE)) {
classList.remove(CLASS_ACTIVE); classList.remove(CLASS_ACTIVE);
this.handle.style.webkitTransform = 'translate(0,0)'; this.handle.style.webkitTransform = 'translate(0,0)';
......
js/tableviews.js
View file @ d60ba180
...@@ -96,7 +96,7 @@ ...@@ -96,7 +96,7 @@
}; };
var setTranslate = function(element, x) { var setTranslate = function(element, x) {
if (element) { if (element) {
element.style.webkitTransform = 'translate3d(' + x + 'px,0,0)'; element.style.webkitTransform = 'translate(' + x + 'px,0)';
} }
}; };
......
package.json
View file @ d60ba180
{ {
"name": "mui", "name": "mui",
"description": "Build mobile apps with simple HTML, CSS, and JS components.", "description": "最接近原生体验的高性能前端框架.",
"version": "2.6.0", "version": "2.7.0",
"keywords": [ "keywords": [
"css", "css",
"fonts", "fonts",
......
sass/forms.scss
View file @ d60ba180
...@@ -190,7 +190,7 @@ select { ...@@ -190,7 +190,7 @@ select {
.#{$namespace}inline{ .#{$namespace}inline{
padding: 8px 0; padding: 8px 0;
} }
.#{$namespace}input-clear ~ .#{$namespace}icon-clear,.#{$namespace}input-speech ~ .#{$namespace}icon-speech{ .#{$namespace}input-clear ~ .#{$namespace}icon-clear,.#{$namespace}input-speech ~ .#{$namespace}icon-speech,.#{$namespace}input-password ~ .#{$namespace}icon-eye{
position:absolute; position:absolute;
right: 0px; right: 0px;
top: 10px; top: 10px;
...@@ -200,6 +200,9 @@ select { ...@@ -200,6 +200,9 @@ select {
text-align: center; text-align: center;
color:#999; color:#999;
z-index: z("default"); z-index: z("default");
&.#{$namespace}active{
color:$primary-color;
}
} }
.#{$namespace}input-speech ~ .#{$namespace}icon-speech{ .#{$namespace}input-speech ~ .#{$namespace}icon-speech{
top:8px; top:8px;
......
sass/hack.scss
View file @ d60ba180
...@@ -7,6 +7,12 @@ textarea{ ...@@ -7,6 +7,12 @@ textarea{
} }
} }
} }
.#{$namespace}android.#{$namespace}android-4-2,.#{$namespace}android.#{$namespace}android-4-3 {
input,
textarea{
-webkit-user-select: text;
}
}
//解决ios list 过多(height>20000px) crash的bug //解决ios list 过多(height>20000px) crash的bug
.#{$namespace}ios .#{$namespace}table-view-cell { .#{$namespace}ios .#{$namespace}table-view-cell {
-webkit-transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
......
sass/icon.scss
View file @ d60ba180
...@@ -18,7 +18,9 @@ ...@@ -18,7 +18,9 @@
line-height: 1; line-height: 1;
text-decoration: none; text-decoration: none;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
&.#{$namespace}active{
color:$primary-color;
}
&.#{$namespace}right{ &.#{$namespace}right{
&:before{ &:before{
float:right; float:right;
...@@ -149,6 +151,7 @@ ...@@ -149,6 +151,7 @@
.#{$namespace}icon-loop:before { content: "\e565"; } .#{$namespace}icon-loop:before { content: "\e565"; }
// .#{$namespace}icon-loopstrong:before { content: "\e566"; } // .#{$namespace}icon-loopstrong:before { content: "\e566"; }
.#{$namespace}icon-paperclip:before { content: "\e567"; } .#{$namespace}icon-paperclip:before { content: "\e567"; }
.#{$namespace}icon-eye:before { content: "\e568"; }
// 箭头 // 箭头
.#{$namespace}icon-arrowup:before { content: "\e580"; } .#{$namespace}icon-arrowup:before { content: "\e580"; }
......
sass/iframe.scss 0 → 100644
View file @ d60ba180
.#{$namespace}iframe-wrapper{
position: absolute;
left: 0;
right: 0;
iframe{
border: 0;
width: 100%;
height: 100%;
}
}
sass/mui.scss
View file @ d60ba180
...@@ -43,4 +43,6 @@ ...@@ -43,4 +43,6 @@
@import "fullscreen.scss"; @import "fullscreen.scss";
@import "hack.scss"; @import "hack.scss";
// os // os
@import "os.scss"; @import "os.scss";
\ No newline at end of file //iframe
@import "iframe.scss";
\ No newline at end of file
sass/number.scss
View file @ d60ba180
...@@ -11,7 +11,8 @@ ...@@ -11,7 +11,8 @@
width: 120px; width: 120px;
vertical-align: middle; vertical-align: middle;
[class*=mui-numbox-btn] { //基于.mui-btn扩展，故命名修改为mui-btn-numbox
[class*=numbox-btn],[class*=btn-numbox] {
width: 40px; width: 40px;
height: 100%; height: 100%;
position: absolute; position: absolute;
...@@ -34,18 +35,18 @@ ...@@ -34,18 +35,18 @@
} }
} }
.#{$namespace}numbox-btn-plus { .#{$namespace}numbox-btn-plus,.#{$namespace}btn-numbox-plus {
right: 0px; right: 0px;
border-top-right-radius:3px; border-top-right-radius:3px;
border-bottom-right-radius:3px; border-bottom-right-radius:3px;
} }
.#{$namespace}numbox-btn-minus { .#{$namespace}numbox-btn-minus,.#{$namespace}btn-numbox-minus {
left: 0px; left: 0px;
border-top-left-radius:3px; border-top-left-radius:3px;
border-bottom-left-radius:3px; border-bottom-left-radius:3px;
} }
.#{$namespace}numbox-input { .#{$namespace}numbox-input,.#{$namespace}input-numbox {
width: 100% !important; width: 100% !important;
height: 100%; height: 100%;
text-align: center; text-align: center;
......
sass/off-canvas.scss
View file @ d60ba180
...@@ -21,8 +21,8 @@ ...@@ -21,8 +21,8 @@
height:100%; height:100%;
z-index: z("default"); z-index: z("default");
&.#{$namespace}transitioning{ &.#{$namespace}transitioning{
-webkit-transition: -webkit-transform 200ms ease; -webkit-transition: -webkit-transform 350ms ;
transition: transform 200ms ease; transition: transform 350ms cubic-bezier(0.165, 0.84, 0.44, 1);
} }
.#{$namespace}off-canvas-left { .#{$namespace}off-canvas-left {
@include transform(translate3d(-100%, 0, 0)); @include transform(translate3d(-100%, 0, 0));
...@@ -35,8 +35,8 @@ ...@@ -35,8 +35,8 @@
overflow:hidden; overflow:hidden;
height:100%; height:100%;
.#{$namespace}off-canvas-backdrop{ .#{$namespace}off-canvas-backdrop{
-webkit-backface-visibility: hidden; // -webkit-backface-visibility: hidden;
transition: background 200ms ease; transition: background 350ms cubic-bezier(0.165, 0.84, 0.44, 1);
box-shadow: -4px 0 4px rgba(0, 0, 0, 0.5), 4px 0 4px rgba(0, 0, 0, 0.5); box-shadow: -4px 0 4px rgba(0, 0, 0, 0.5), 4px 0 4px rgba(0, 0, 0, 0.5);
display: block; display: block;
position: absolute; position: absolute;
...@@ -63,7 +63,7 @@ ...@@ -63,7 +63,7 @@
.#{$namespace}off-canvas-left, .#{$namespace}off-canvas-right { .#{$namespace}off-canvas-left, .#{$namespace}off-canvas-right {
-webkit-backface-visibility: hidden; // -webkit-backface-visibility: hidden;
width: 70%; width: 70%;
min-height:100%; min-height:100%;
top: 0; top: 0;
...@@ -75,8 +75,8 @@ ...@@ -75,8 +75,8 @@
z-index: -1; z-index: -1;
visibility: hidden; visibility: hidden;
&.#{$namespace}transitioning{ &.#{$namespace}transitioning{
-webkit-transition: -webkit-transform 200ms ease; -webkit-transition: -webkit-transform 350ms cubic-bezier(0.165, 0.84, 0.44, 1);
transition: transform 200ms ease; transition: transform 350ms cubic-bezier(0.165, 0.84, 0.44, 1);
} }
} }
.#{$namespace}off-canvas-left { .#{$namespace}off-canvas-left {
...@@ -94,8 +94,8 @@ ...@@ -94,8 +94,8 @@
@include transform(scale(0.8)); @include transform(scale(0.8));
opacity: 0.1; opacity: 0.1;
&.#{$namespace}transitioning{ &.#{$namespace}transitioning{
-webkit-transition: -webkit-transform 200ms ease, opacity 200ms ease; -webkit-transition: -webkit-transform 350ms cubic-bezier(0.165, 0.84, 0.44, 1), opacity 350ms cubic-bezier(0.165, 0.84, 0.44, 1);
transition: transform 200ms ease, opacity 200ms ease; transition: transform 350ms cubic-bezier(0.165, 0.84, 0.44, 1), opacity 350ms cubic-bezier(0.165, 0.84, 0.44, 1);
} }
} }
>.#{$namespace}off-canvas-left{ >.#{$namespace}off-canvas-left{
......
sass/os.scss
View file @ d60ba180
...@@ -16,3 +16,24 @@ ...@@ -16,3 +16,24 @@
.#{$namespace}plus .#{$namespace}plus-hidden,.#{$namespace}wechat .#{$namespace}wechat-hidden{ .#{$namespace}plus .#{$namespace}plus-hidden,.#{$namespace}wechat .#{$namespace}wechat-hidden{
display: none!important; display: none!important;
} }
//ios 状态栏
.#{$namespace}plus.#{$namespace}statusbar.#{$namespace}statusbar-offset{
.#{$namespace}bar-nav {
padding-top: 20px;
height:64px;
&~.#{$namespace}content {
padding-top: 64px;
.#{$namespace}pull-top-pocket {
top: 64px;
}
}
}
.#{$namespace}bar-header-secondary {
top: 64px;
&~.#{$namespace}content {
padding-top: 94px;
}
}
}
sass/pullrefreshs.scss
View file @ d60ba180
...@@ -70,7 +70,7 @@ ...@@ -70,7 +70,7 @@
//vertical-align: middle; //vertical-align: middle;
//} //}
.#{$namespace}pull-loading{ .#{$namespace}pull-loading{
-webkit-backface-visibility: hidden; // -webkit-backface-visibility: hidden;
-webkit-transition-duration: 400ms; -webkit-transition-duration: 400ms;
transition-duration: 400ms; transition-duration: 400ms;
-webkit-transition:-webkit-transform 0.4s; -webkit-transition:-webkit-transform 0.4s;
......
sass/scroll.scss
View file @ d60ba180
.#{$namespace}scroll-wrapper { .#{$namespace}scroll-wrapper {
-webkit-backface-visibility: hidden; // -webkit-backface-visibility: hidden;
position: absolute; position: absolute;
z-index: z("default"); z-index: z("default");
top: 0px; top: 0px;
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
overflow: hidden; overflow: hidden;
} }
.#{$namespace}scroll { .#{$namespace}scroll {
-webkit-backface-visibility: hidden; // -webkit-backface-visibility: hidden;
position: absolute; position: absolute;
z-index: z("default"); z-index: z("default");
width: 100%; width: 100%;
......
sass/sliders.scss
View file @ d60ba180
...@@ -127,7 +127,7 @@ ...@@ -127,7 +127,7 @@
} }
} }
.#{$namespace}slider-progress-bar{ .#{$namespace}slider-progress-bar{
-webkit-backface-visibility: hidden; // -webkit-backface-visibility: hidden;
@include transform(translateZ(0)); @include transform(translateZ(0));
height:2px; height:2px;
z-index:z("default"); z-index:z("default");
......
sass/table-views.scss
View file @ d60ba180
...@@ -178,12 +178,12 @@ ...@@ -178,12 +178,12 @@
>.#{$namespace}slider-handle,>.#{$namespace}slider-left .#{$namespace}btn,>.#{$namespace}slider-right .#{$namespace}btn{ >.#{$namespace}slider-handle,>.#{$namespace}slider-left .#{$namespace}btn,>.#{$namespace}slider-right .#{$namespace}btn{
-webkit-transition: -webkit-transform 0ms ease; -webkit-transition: -webkit-transform 0ms ease;
transition: transform 0ms ease; transition: transform 0ms ease;
-webkit-backface-visibility: hidden; // -webkit-backface-visibility: hidden;
backface-visibility: hidden; // backface-visibility: hidden;
} }
>.#{$namespace}slider-left,>.#{$namespace}slider-right{ >.#{$namespace}slider-left,>.#{$namespace}slider-right{
-webkit-backface-visibility: hidden; // -webkit-backface-visibility: hidden;
backface-visibility: hidden; // backface-visibility: hidden;
position: absolute; position: absolute;
top: 0; top: 0;
height: 100%; height: 100%;
......
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