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