1
0
star/solar-sys/js/index.js
2024-04-28 20:12:17 +09:00

258 lines
7.1 KiB
JavaScript

(function ($) {
// Creating a number of jQuery plugins that you can use to
// initialize and control the progress meters.
$.fn.progressInitialize = function () {
// This function creates the necessary markup for the progress meter
// and sets up a few event listeners.
// Loop through all the buttons:
return this.each(function () {
var button = $(this),
progress = 0;
// Extract the data attributes into the options object.
// If they are missing, they will receive default values.
var options = $.extend({
type: 'background-horizontal',
loading: 'Loading',
finished: 'Done'
}, button.data());
// Add the data attributes if they are missing from the element.
// They are used by our CSS code to show the messages
button.attr({'data-loading': options.loading, 'data-finished': options.finished});
// Add the needed markup for the progress bar to the button
var bar = $('<span class="tz-bar ' + options.type + '">').appendTo(button);
// The progress event tells the button to update the progress bar
button.on('progress', function (e, val, absolute, finish) {
if (!button.hasClass('in-progress')) {
// This is the first progress event for the button (or the
// first after it has finished in a previous run). Re-initialize
// the progress and remove some classes that may be left.
bar.show();
progress = 0;
button.removeClass('finished').addClass('in-progress')
}
// val, absolute and finish are event data passed by the progressIncrement
// and progressSet methods that you can see near the end of this file.
if (absolute) {
progress = val;
}
else {
progress += val;
}
if (progress >= 100) {
progress = 100;
}
// if(finish){
//
// button.removeClass('in-progress').addClass('finished');
//
// bar.delay(500).fadeOut(function(){
//
// // Trigger the custom progress-finish event
// button.trigger('progress-finish');
// setProgress(0);
// });
//
// }
setProgress(progress);
});
function setProgress(percentage) {
bar.filter('.background-horizontal,.background-bar').width(percentage + '%');
bar.filter('.background-vertical').height(percentage + '%');
}
});
};
// progressStart simulates activity on the progress meter. Call it first,
// if the progress is going to take a long time to finish.
$.fn.progressStart = function () {
var button = this.first(),
last_progress = new Date().getTime();
if (button.hasClass('in-progress')) {
// Don't start it a second time!
return this;
}
button.on('progress', function () {
last_progress = new Date().getTime();
});
// Every half a second check whether the progress
// has been incremented in the last two seconds
var interval = window.setInterval(function () {
if (new Date().getTime() > 2000 + last_progress) {
// There has been no activity for two seconds. Increment the progress
// bar a little bit to show that something is happening
button.progressIncrement(5);
}
}, 500);
button.on('progress-finish', function () {
window.clearInterval(interval);
});
return button.progressIncrement(10);
};
$.fn.progressFinish = function () {
return this.first().progressSet(100);
};
$.fn.progressIncrement = function (val) {
val = val || 10;
var button = this.first();
button.trigger('progress', [val])
return this;
};
$.fn.progressSet = function (val) {
val = val || 10;
var finish = false;
if (val >= 100) {
finish = true;
}
return this.first().trigger('progress', [val, true, finish]);
};
// This function creates a progress meter that
// finishes in a specified amount of time.
$.fn.progressTimed = function (seconds, cb) {
var button = this.first(),
bar = button.find('.tz-bar');
if (button.is('.in-progress')) {
return this;
}
// Set a transition declaration for the duration of the meter.
// CSS will do the job of animating the progress bar for us.
bar.css('transition', seconds + 's linear');
button.progressSet(99);
window.setTimeout(function () {
bar.css('transition', '');
button.progressFinish();
if ($.isFunction(cb)) {
cb();
}
}, seconds * 1000);
};
function PreLoad(imgs, options) {
this.imgs = (typeof imgs === 'string') ? [imgs] : imgs;
this.opts = $.extend({}, PreLoad.DEFAULTS, options);
if (this.opts.order === 'ordered') {
this._ordered();
} else {
this._unordered();
}
}
PreLoad.DEFAULTS = {
order: 'unordered', //无序预加载
each: null, //每张图片加载完毕后执行
all: null // 所有图片加载完毕后执行
};
PreLoad.prototype._ordered = function () {
var imgs = this.imgs,
opts = this.opts,
count = 0,
len = imgs.length;
function load() {
var imgObj = new Image();
$(imgObj).on('load error', function () {
opts.each && opts.each(count);
if (count >= len) {
//所有图片全部加载完成
opts.all && opts.all();
} else {
load();
}
count++;
});
imgObj.src = imgs[count];
}
load();
};
PreLoad.prototype._unordered = function () {//无序加载
var imgs = this.imgs,
opts = this.opts,
count = 0,
len = imgs.length;
$.each(imgs, function (i, src) {
if (typeof src != 'string') return;
var imgObj = new Image();
$(imgObj).on('load error', function () {
opts.each && opts.each(count);
if (count >= len - 1) {
opts.all && opts.all();
}
count++;
});
imgObj.src = src;
});
};
$.extend({
preLoad: function (imgs, opts) {
new PreLoad(imgs, opts);
}
});
})(jQuery);