Skip to content

Commit f4ca4d8

Browse files
hbcui1984hbcui1984
committed
div模式的toast改造
1、改造UI为黑色背景，类似Material UI 2、支持在plus环境下，强制使用DIV模式的toast 3、支持设置toast的显示时间
1 parent 9161688 commit f4ca4d8

File tree

9 files changed

+120
-40
lines changed

9 files changed

+120
-40
lines changed

‎dist/css/mui.css

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4895,35 +4895,36 @@ body > .mui-progressbar
48954895

48964896
.mui-toast-container
48974897
{
4898+
line-height: 17px;
4899+
48984900
position: fixed;
48994901
z-index: 9999;
49004902
bottom: 50px;
4903+
left: 50%;
49014904

4902-
width: 100%;
4903-
4904-
-webkit-transition: opacity .8s;
4905-
transition: opacity .8s;
4905+
-webkit-transition: opacity .3s;
4906+
transition: opacity .3s;
4907+
-webkit-transform: translate(-50%, 0);
4908+
transform: translate(-50%, 0);
49064909

49074910
opacity: 0;
49084911
}
49094912
.mui-toast-container.mui-active
49104913
{
4911-
opacity: 1;
4914+
opacity: .9;
49124915
}
49134916

49144917
.mui-toast-message
49154918
{
49164919
font-size: 14px;
49174920

4918-
width: 270px;
4919-
margin: 5px auto;
4920-
padding: 5px;
4921+
padding: 10px 25px;
49214922

49224923
text-align: center;
49234924

4924-
color: #000;
4925-
border-radius: 7px;
4926-
background-color: #d8d8d8;
4925+
color: #fff;
4926+
border-radius: 6px;
4927+
background-color: #323232;
49274928
}
49284929

49294930
.mui-numbox

‎dist/css/mui.min.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/js/mui.js

Lines changed: 31 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7053,29 +7053,55 @@ Function.prototype.bind = Function.prototype.bind || function(to) {
70537053
/**
70547054
* 自动消失提示框
70557055
*/
7056-
$.toast = function(message) {
7057-
if ($.os.plus) {
7056+
$.toast = function(message,options) {
7057+
var durations = {
7058+
'long': 3500,
7059+
'short': 2000
7060+
};
7061+
7062+
//计算显示时间
7063+
options = $.extend({
7064+
duration: 'short'
7065+
}, options || {});
7066+
7067+
7068+
if ($.os.plus && options.type !== 'div') {
70587069
//默认显示在底部；
70597070
$.plusReady(function() {
70607071
plus.nativeUI.toast(message, {
7061-
verticalAlign: 'bottom'
7072+
verticalAlign: 'bottom',
7073+
duration:options.duration
70627074
});
70637075
});
70647076
} else {
7077+
if (typeof options.duration === 'number') {
7078+
duration = options.duration>0 ? options.duration:durations['short'];
7079+
} else {
7080+
duration = durations[options.duration];
7081+
}
7082+
if (!duration) {
7083+
duration = durations['short'];
7084+
}
70657085
var toast = document.createElement('div');
70667086
toast.classList.add('mui-toast-container');
70677087
toast.innerHTML = '<div class="' + 'mui-toast-message' + '">' + message + '</div>';
70687088
toast.addEventListener('webkitTransitionEnd', function() {
70697089
if (!toast.classList.contains(CLASS_ACTIVE)) {
70707090
toast.parentNode.removeChild(toast);
7091+
toast = null;
70717092
}
70727093
});
7094+
//点击则自动消失
7095+
toast.addEventListener('click', function() {
7096+
toast.parentNode.removeChild(toast);
7097+
toast = null;
7098+
});
70737099
document.body.appendChild(toast);
70747100
toast.offsetHeight;
70757101
toast.classList.add(CLASS_ACTIVE);
70767102
setTimeout(function() {
7077-
toast.classList.remove(CLASS_ACTIVE);
7078-
}, 2000);
7103+
toast && toast.classList.remove(CLASS_ACTIVE);
7104+
}, duration);
70797105
}
70807106
};
70817107

‎dist/js/mui.min.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/hello-mui/css/mui.min.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/hello-mui/js/mui.js

Lines changed: 31 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7053,29 +7053,55 @@ Function.prototype.bind = Function.prototype.bind || function(to) {
70537053
/**
70547054
* 自动消失提示框
70557055
*/
7056-
$.toast = function(message) {
7057-
if ($.os.plus) {
7056+
$.toast = function(message,options) {
7057+
var durations = {
7058+
'long': 3500,
7059+
'short': 2000
7060+
};
7061+
7062+
//计算显示时间
7063+
options = $.extend({
7064+
duration: 'short'
7065+
}, options || {});
7066+
7067+
7068+
if ($.os.plus && options.type !== 'div') {
70587069
//默认显示在底部；
70597070
$.plusReady(function() {
70607071
plus.nativeUI.toast(message, {
7061-
verticalAlign: 'bottom'
7072+
verticalAlign: 'bottom',
7073+
duration:options.duration
70627074
});
70637075
});
70647076
} else {
7077+
if (typeof options.duration === 'number') {
7078+
duration = options.duration>0 ? options.duration:durations['short'];
7079+
} else {
7080+
duration = durations[options.duration];
7081+
}
7082+
if (!duration) {
7083+
duration = durations['short'];
7084+
}
70657085
var toast = document.createElement('div');
70667086
toast.classList.add('mui-toast-container');
70677087
toast.innerHTML = '<div class="' + 'mui-toast-message' + '">' + message + '</div>';
70687088
toast.addEventListener('webkitTransitionEnd', function() {
70697089
if (!toast.classList.contains(CLASS_ACTIVE)) {
70707090
toast.parentNode.removeChild(toast);
7091+
toast = null;
70717092
}
70727093
});
7094+
//点击则自动消失
7095+
toast.addEventListener('click', function() {
7096+
toast.parentNode.removeChild(toast);
7097+
toast = null;
7098+
});
70737099
document.body.appendChild(toast);
70747100
toast.offsetHeight;
70757101
toast.classList.add(CLASS_ACTIVE);
70767102
setTimeout(function() {
7077-
toast.classList.remove(CLASS_ACTIVE);
7078-
}, 2000);
7103+
toast && toast.classList.remove(CLASS_ACTIVE);
7104+
}, duration);
70797105
}
70807106
};
70817107

‎examples/hello-mui/js/mui.min.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎js/mui.dialog.toast.js

Lines changed: 31 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,29 +3,55 @@
33
/**
44
* 自动消失提示框
55
*/
6-
$.toast = function(message) {
7-
if ($.os.plus) {
6+
$.toast = function(message,options) {
7+
var durations = {
8+
'long': 3500,
9+
'short': 2000
10+
};
11+
12+
//计算显示时间
13+
options = $.extend({
14+
duration: 'short'
15+
}, options || {});
16+
17+
18+
if ($.os.plus && options.type !== 'div') {
819
//默认显示在底部；
920
$.plusReady(function() {
1021
plus.nativeUI.toast(message, {
11-
verticalAlign: 'bottom'
22+
verticalAlign: 'bottom',
23+
duration:options.duration
1224
});
1325
});
1426
} else {
27+
if (typeof options.duration === 'number') {
28+
duration = options.duration>0 ? options.duration:durations['short'];
29+
} else {
30+
duration = durations[options.duration];
31+
}
32+
if (!duration) {
33+
duration = durations['short'];
34+
}
1535
var toast = document.createElement('div');
1636
toast.classList.add($.className('toast-container'));
1737
toast.innerHTML = '<div class="' + $.className('toast-message') + '">' + message + '</div>';
1838
toast.addEventListener('webkitTransitionEnd', function() {
1939
if (!toast.classList.contains(CLASS_ACTIVE)) {
2040
toast.parentNode.removeChild(toast);
41+
toast = null;
2142
}
2243
});
44+
//点击则自动消失
45+
toast.addEventListener('click', function() {
46+
toast.parentNode.removeChild(toast);
47+
toast = null;
48+
});
2349
document.body.appendChild(toast);
2450
toast.offsetHeight;
2551
toast.classList.add(CLASS_ACTIVE);
2652
setTimeout(function() {
27-
toast.classList.remove(CLASS_ACTIVE);
28-
}, 2000);
53+
toast && toast.classList.remove(CLASS_ACTIVE);
54+
}, duration);
2955
}
3056
};
3157

‎sass/toast.scss

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,23 @@
11
.#{$namespace}toast-container {
2+
line-height:17px;
23
position: fixed;
3-
width: 100%;
44
bottom: 50px;
55
z-index: z("toast");
66
opacity: 0;
7-
-webkit-transition: opacity .8s;
8-
transition: opacity .8s;
7+
left:50%;
8+
-webkit-transform:translate(-50%,0);
9+
transform:translate(-50%,0);
10+
-webkit-transition: opacity .3s;
11+
transition: opacity .3s;
912
&.#{$namespace}active{
10-
opacity: 1;
13+
opacity: .9;
1114
}
1215
}
1316
.#{$namespace}toast-message {
14-
width: 270px;
15-
margin: 5px auto;
16-
padding: 5px;
17-
background-color: #D8D8D8;
17+
padding: 10px 25px;
18+
background-color: #323232;
1819
text-align: center;
19-
color: #000;
20-
border-radius: 7px;
20+
color: #fff;
21+
border-radius: 6px;
2122
font-size: 14px;
2223
}

0 commit comments

Comments
 (0)