(function($, document) { var CLASS_PROGRESSBAR = $.className('progressbar'); var CLASS_PROGRESSBAR_IN = $.className('progressbar-in'); var CLASS_PROGRESSBAR_OUT = $.className('progressbar-out'); var CLASS_PROGRESSBAR_INFINITE = $.className('progressbar-infinite'); var SELECTOR_PROGRESSBAR = $.classSelector('.progressbar'); var _findProgressbar = function(container) { container = $(container || 'body'); if (container.length === 0) return; container = container[0]; if (container.classList.contains(CLASS_PROGRESSBAR)) { return container; } var progressbars = container.querySelectorAll(SELECTOR_PROGRESSBAR); if (progressbars) { for (var i = 0, len = progressbars.length; i < len; i++) { var progressbar = progressbars[i]; if (progressbar.parentNode === container) { return progressbar; } } } }; /** * 创建并显示进度条 * @param {Object} container 可选,默认body,支持selector,DOM Node,mui wrapper * @param {Object} progress 可选,undefined表示循环,数字表示具体进度 * @param {Object} color 可选,指定颜色样式(目前暂未提供实际样式,可暂时不暴露此参数) */ var showProgressbar = function(container, progress, color) { if (typeof container === 'number') { color = progress; progress = container; container = 'body'; } container = $(container || 'body'); if (container.length === 0) return; container = container[0]; var progressbar; if (container.classList.contains(CLASS_PROGRESSBAR)) { progressbar = container; } else { var progressbars = container.querySelectorAll(SELECTOR_PROGRESSBAR + ':not(.' + CLASS_PROGRESSBAR_OUT + ')'); if (progressbars) { for (var i = 0, len = progressbars.length; i < len; i++) { var _progressbar = progressbars[i]; if (_progressbar.parentNode === container) { progressbar = _progressbar; break; } } } if (!progressbar) { progressbar = document.createElement('span'); progressbar.className = CLASS_PROGRESSBAR + ' ' + CLASS_PROGRESSBAR_IN + (typeof progress !== 'undefined' ? '' : (' ' + CLASS_PROGRESSBAR_INFINITE)) + (color ? (' ' + CLASS_PROGRESSBAR + '-' + color) : ''); if (typeof progress !== 'undefined') { progressbar.innerHTML = ''; } container.appendChild(progressbar); } else { progressbar.classList.add(CLASS_PROGRESSBAR_IN); } } if (progress) setProgressbar(container, progress); return progressbar; }; /** * 关闭进度条 * @param {Object} container 可选,默认body,支持selector,DOM Node,mui wrapper */ var hideProgressbar = function(container) { var progressbar = _findProgressbar(container); if (!progressbar) { return; } var classList = progressbar.classList; if (!classList.contains(CLASS_PROGRESSBAR_IN) || classList.contains(CLASS_PROGRESSBAR_OUT)) { return; } classList.remove(CLASS_PROGRESSBAR_IN); classList.add(CLASS_PROGRESSBAR_OUT); progressbar.addEventListener('webkitAnimationEnd', function() { progressbar.parentNode && progressbar.parentNode.removeChild(progressbar); progressbar = null; }); return; }; /** * 设置指定进度条进度 * @param {Object} container 可选,默认body,支持selector,DOM Node,mui wrapper * @param {Object} progress 可选,默认0 取值范围[0-100] * @param {Object} speed 进度条动画时间 */ var setProgressbar = function(container, progress, speed) { if (typeof container === 'number') { speed = progress; progress = container; container = false; } var progressbar = _findProgressbar(container); if (!progressbar || progressbar.classList.contains(CLASS_PROGRESSBAR_INFINITE)) { return; } if (progress) progress = Math.min(Math.max(progress, 0), 100); progressbar.offsetHeight; var span = progressbar.querySelector('span'); if (span) { var style = span.style; style.webkitTransform = 'translate3d(' + (-100 + progress) + '%,0,0)'; if (typeof speed !== 'undefined') { style.webkitTransitionDuration = speed + 'ms'; } else { style.webkitTransitionDuration = ''; } } return progressbar; }; $.fn.progressbar = function(options) { var progressbarApis = []; options = options || {}; this.each(function() { var self = this; var progressbarApi = self.mui_plugin_progressbar; if (!progressbarApi) { self.mui_plugin_progressbar = progressbarApi = { options: options, setOptions: function(options) { this.options = options; }, show: function() { return showProgressbar(self, this.options.progress, this.options.color); }, setProgress: function(progress) { return setProgressbar(self, progress); }, hide: function() { return hideProgressbar(self); } }; } else if (options) { progressbarApi.setOptions(options); } progressbarApis.push(progressbarApi); }); return progressbarApis.length === 1 ? progressbarApis[0] : progressbarApis; }; // $.setProgressbar = setProgressbar; // $.showProgressbar = showProgressbar; // $.hideProgressbar = hideProgressbar; })(mui, document);