Skip to content

Commit 352b30d

Browse files
hbcui1984hbcui1984
committed
添加progress bar控件
1 parent dd665f4 commit 352b30d

File tree

13 files changed

+845
-4
lines changed

13 files changed

+845
-4
lines changed

‎Gruntfile.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,7 @@ module.exports = function(grunt) {
9191
'js/mui.dialog.prompt.js',
9292
'js/mui.dialog.toast.js',
9393
'js/mui.popup.js',
94+
'js/mui.progressbar.js',
9495
'js/input.plugin.js',
9596
'js/mui.number.js'
9697

‎dist/css/mui.css

Lines changed: 167 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3892,6 +3892,173 @@ select:focus
38923892
transform: translate3d(-50%, -50%, 0) scale(1);
38933893
}
38943894

3895+
/* === Progress Bar === */
3896+
.mui-progressbar
3897+
{
3898+
position: relative;
3899+
3900+
display: block;
3901+
overflow: hidden;
3902+
3903+
width: 100%;
3904+
height: 2px;
3905+
3906+
-webkit-transform-origin: center top;
3907+
transform-origin: center top;
3908+
vertical-align: middle;
3909+
3910+
border-radius: 2px;
3911+
background: #b6b6b6;
3912+
3913+
-webkit-transform-style: preserve-3d;
3914+
transform-style: preserve-3d;
3915+
}
3916+
.mui-progressbar span
3917+
{
3918+
position: absolute;
3919+
top: 0;
3920+
left: 0;
3921+
3922+
width: 100%;
3923+
height: 100%;
3924+
3925+
-webkit-transition: 150ms;
3926+
transition: 150ms;
3927+
-webkit-transform: translate3d(-100%, 0, 0);
3928+
transform: translate3d(-100%, 0, 0);
3929+
3930+
background: #007aff;
3931+
}
3932+
.mui-progressbar.mui-progressbar-infinite:before
3933+
{
3934+
position: absolute;
3935+
top: 0;
3936+
left: 0;
3937+
3938+
width: 100%;
3939+
height: 100%;
3940+
3941+
content: '';
3942+
-webkit-transform: translate3d(0, 0, 0);
3943+
transform: translate3d(0, 0, 0);
3944+
-webkit-transform-origin: left center;
3945+
transform-origin: left center;
3946+
-webkit-animation: mui-progressbar-infinite 1s linear infinite;
3947+
animation: mui-progressbar-infinite 1s linear infinite;
3948+
3949+
background: #007aff;
3950+
}
3951+
3952+
body > .mui-progressbar
3953+
{
3954+
position: absolute;
3955+
z-index: 10000;
3956+
top: 0;
3957+
left: 0;
3958+
3959+
border-radius: 0;
3960+
}
3961+
3962+
.mui-progressbar-in
3963+
{
3964+
-webkit-animation: mui-progressbar-in 300ms forwards;
3965+
animation: mui-progressbar-in 300ms forwards;
3966+
}
3967+
3968+
.mui-progressbar-out
3969+
{
3970+
-webkit-animation: mui-progressbar-out 300ms forwards;
3971+
animation: mui-progressbar-out 300ms forwards;
3972+
}
3973+
3974+
@-webkit-keyframes mui-progressbar-in
3975+
{
3976+
from
3977+
{
3978+
-webkit-transform: scaleY(0);
3979+
3980+
opacity: 0;
3981+
}
3982+
3983+
to
3984+
{
3985+
-webkit-transform: scaleY(1);
3986+
3987+
opacity: 1;
3988+
}
3989+
}
3990+
@keyframes mui-progressbar-in
3991+
{
3992+
from
3993+
{
3994+
transform: scaleY(0);
3995+
3996+
opacity: 0;
3997+
}
3998+
3999+
to
4000+
{
4001+
transform: scaleY(1);
4002+
4003+
opacity: 1;
4004+
}
4005+
}
4006+
@-webkit-keyframes mui-progressbar-out
4007+
{
4008+
from
4009+
{
4010+
-webkit-transform: scaleY(1);
4011+
4012+
opacity: 1;
4013+
}
4014+
4015+
to
4016+
{
4017+
-webkit-transform: scaleY(0);
4018+
4019+
opacity: 0;
4020+
}
4021+
}
4022+
@keyframes mui-progressbar-out
4023+
{
4024+
from
4025+
{
4026+
transform: scaleY(1);
4027+
4028+
opacity: 1;
4029+
}
4030+
4031+
to
4032+
{
4033+
transform: scaleY(0);
4034+
4035+
opacity: 0;
4036+
}
4037+
}
4038+
@-webkit-keyframes mui-progressbar-infinite
4039+
{
4040+
0%
4041+
{
4042+
-webkit-transform: translate3d(-50%, 0, 0) scaleX(.5);
4043+
}
4044+
4045+
100%
4046+
{
4047+
-webkit-transform: translate3d(100%, 0, 0) scaleX(.5);
4048+
}
4049+
}
4050+
@keyframes mui-progressbar-infinite
4051+
{
4052+
0%
4053+
{
4054+
transform: translate3d(-50%, 0, 0) scaleX(.5);
4055+
}
4056+
4057+
100%
4058+
{
4059+
transform: translate3d(100%, 0, 0) scaleX(.5);
4060+
}
4061+
}
38954062
.mui-pagination
38964063
{
38974064
display: inline-block;

‎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: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7180,6 +7180,150 @@ Function.prototype.bind = Function.prototype.bind || function(to) {
71807180
$.confirm = createConfirm;
71817181
$.prompt = createPrompt;
71827182
})(mui, window, document);
7183+
(function($, document) {
7184+
var CLASS_PROGRESSBAR = 'mui-progressbar';
7185+
var CLASS_PROGRESSBAR_IN = 'mui-progressbar-in';
7186+
var CLASS_PROGRESSBAR_OUT = 'mui-progressbar-out';
7187+
var CLASS_PROGRESSBAR_INFINITE = 'mui-progressbar-infinite';
7188+
7189+
var SELECTOR_PROGRESSBAR = '.mui-progressbar';
7190+
7191+
var _findProgressbar = function(container) {
7192+
container = $(container || 'body');
7193+
if (container.length === 0) return;
7194+
container = container[0];
7195+
if (container.classList.contains(CLASS_PROGRESSBAR)) {
7196+
return container;
7197+
}
7198+
var progressbars = container.querySelectorAll(SELECTOR_PROGRESSBAR);
7199+
if (progressbars) {
7200+
for (var i = 0, len = progressbars.length; i < len; i++) {
7201+
var progressbar = progressbars[i];
7202+
if (progressbar.parentNode === container) {
7203+
return progressbar;
7204+
}
7205+
}
7206+
}
7207+
};
7208+
/**
7209+
* 创建并显示进度条
7210+
* @param {Object} container 可选，默认body，支持selector,DOM Node,mui wrapper
7211+
* @param {Object} progress 可选，undefined表示循环，数字表示具体进度
7212+
* @param {Object} color 可选，指定颜色样式(目前暂未提供实际样式，可暂时不暴露此参数)
7213+
*/
7214+
var showProgressbar = function(container, progress, color) {
7215+
if (typeof container === 'number') {
7216+
color = progress;
7217+
progress = container;
7218+
container = 'body';
7219+
}
7220+
container = $(container || 'body');
7221+
if (container.length === 0) return;
7222+
container = container[0];
7223+
var progressbar;
7224+
if (container.classList.contains(CLASS_PROGRESSBAR)) {
7225+
progressbar = container;
7226+
} else {
7227+
var progressbars = container.querySelectorAll(SELECTOR_PROGRESSBAR + ':not(.' + CLASS_PROGRESSBAR_OUT + ')');
7228+
if (progressbars) {
7229+
for (var i = 0, len = progressbars.length; i < len; i++) {
7230+
var _progressbar = progressbars[i];
7231+
if (_progressbar.parentNode === container) {
7232+
progressbar = _progressbar;
7233+
break;
7234+
}
7235+
}
7236+
}
7237+
if (!progressbar) {
7238+
progressbar = document.createElement('span');
7239+
progressbar.className = CLASS_PROGRESSBAR + ' ' + CLASS_PROGRESSBAR_IN + (typeof progress !== 'undefined' ? '' : (' ' + CLASS_PROGRESSBAR_INFINITE)) + (color ? (' ' + CLASS_PROGRESSBAR + '-' + color) : '');
7240+
if (typeof progress !== 'undefined') {
7241+
progressbar.innerHTML = '<span></span>';
7242+
}
7243+
container.appendChild(progressbar);
7244+
}
7245+
}
7246+
if (progress) $.setProgressbar(container, progress);
7247+
return progressbar;
7248+
};
7249+
/**
7250+
* 关闭进度条
7251+
* @param {Object} container 可选，默认body，支持selector,DOM Node,mui wrapper
7252+
*/
7253+
var hideProgressbar = function(container) {
7254+
var progressbar = _findProgressbar(container);
7255+
if (!progressbar) {
7256+
return;
7257+
}
7258+
var classList = progressbar.classList;
7259+
if (!classList.contains(CLASS_PROGRESSBAR_IN) || classList.contains(CLASS_PROGRESSBAR_OUT)) {
7260+
return;
7261+
}
7262+
classList.remove(CLASS_PROGRESSBAR_IN);
7263+
classList.add(CLASS_PROGRESSBAR_OUT);
7264+
progressbar.addEventListener('webkitAnimationEnd', function() {
7265+
progressbar.parentNode && progressbar.parentNode.removeChild(progressbar);
7266+
progressbar = null;
7267+
});
7268+
return;
7269+
};
7270+
/**
7271+
* 设置指定进度条进度
7272+
* @param {Object} container 可选，默认body，支持selector,DOM Node,mui wrapper
7273+
* @param {Object} progress 可选，默认0 取值范围[0-100]
7274+
* @param {Object} speed 进度条动画时间
7275+
*/
7276+
var setProgressbar = function(container, progress, speed) {
7277+
if (typeof container === 'number') {
7278+
speed = progress;
7279+
progress = container;
7280+
container = false;
7281+
}
7282+
var progressbar = _findProgressbar(container);
7283+
if (!progressbar || progressbar.classList.contains(CLASS_PROGRESSBAR_INFINITE)) {
7284+
return;
7285+
}
7286+
if (progress) progress = Math.min(Math.max(progress, 0), 100);
7287+
var clientLeft = progressbar.clientLeft;
7288+
var span = progressbar.querySelector('span');
7289+
if (span) {
7290+
var style = span.style;
7291+
style.webkitTransform = 'translate3d(' + (-100 + progress) + '%,0,0)';
7292+
if (typeof speed !== 'undefined') {
7293+
style.webkitTransitionDuration = speed + 'ms';
7294+
} else {
7295+
style.webkitTransitionDuration = '';
7296+
}
7297+
}
7298+
return progressbar;
7299+
};
7300+
$.fn.progressbar = function(options) {
7301+
var progressbarApis = [];
7302+
options = options || {};
7303+
this.each(function() {
7304+
var self = this;
7305+
var progressbarApi = self.mui_plugin_progressbar;
7306+
if (!progressbarApi) {
7307+
self.mui_plugin_progressbar = progressbarApi = {
7308+
show: function() {
7309+
return showProgressbar(self, options.progress, options.color);
7310+
},
7311+
setProgress: function(progress) {
7312+
return setProgressbar(self, progress);
7313+
},
7314+
hide: function() {
7315+
return hideProgressbar(self);
7316+
}
7317+
};
7318+
}
7319+
progressbarApis.push(progressbarApi);
7320+
});
7321+
return progressbarApis.length === 1 ? progressbarApis[0] : progressbarApis;
7322+
};
7323+
// $.setProgressbar = setProgressbar;
7324+
// $.showProgressbar = showProgressbar;
7325+
// $.hideProgressbar = hideProgressbar;
7326+
})(mui, document);
71837327
/**
71847328
* Input(TODO resize)
71857329
* @param {type} $

‎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.

0 commit comments

Comments
 (0)